├── .github └── FUNDING.yml ├── .gitignore ├── .vscode ├── extensions.json └── settings.json ├── CNAME ├── LICENSE ├── README.md ├── assets ├── devfolio-logo.png ├── devfolio.gif ├── devfolio.png ├── profile.png └── project.png ├── css └── main.css ├── index.html ├── javascript ├── scrollreveal.min.js ├── scrollveal.js ├── valtilt.js └── vanilla-tilt.min.js └── style ├── base ├── _base.scss ├── _mixins.scss ├── _typography.scss └── _variables.scss ├── components └── _buttons.scss ├── layout ├── _footer.scss └── _sections.scss ├── main.scss └── sections ├── _about.scss ├── _contact.scss ├── _hero.scss └── _projects.scss /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: anilseervi 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: anilseervi 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnilSeervi/DevFolio/650cbbef5c5e132321ef51e7b8626d98f11276ad/.gitignore -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["glenn2223.live-sass", "ms-vscode.live-server"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveSassCompile.settings.formats": [ 3 | { 4 | "format": "compressed", 5 | "extensionName": ".css", 6 | "savePath": "/css", 7 | "savePathReplacementPairs": null 8 | } 9 | ], 10 | "liveSassCompile.settings.includeItems": ["/style/**/*.scss"], 11 | "liveSassCompile.settings.generateMap": false, 12 | "liveSassCompile.settings.watchOnLaunch": true, 13 | "liveSassCompile.settings.useNewCompiler": true 14 | } 15 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | devfolio.js.org 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Anil Seervi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

⚡️ DevFolio ⚡️

2 | 3 | [![Github](https://img.shields.io/github/license/anilseervi/DevFolio?color=%2312c2e9&logo=github&style=for-the-badge)](https://github.com/AnilSeervi/DevFolio/blob/master/README.md) ![Github Stars](https://img.shields.io/github/stars/anilseervi/DevFolio?color=%23c471ed&style=for-the-badge) ![Github forks](https://img.shields.io/github/forks/anilseervi/DevFolio?color=%23f64f59&style=for-the-badge) ![GitHub deployments](https://img.shields.io/github/deployments/anilseervi/DevFolio/github-pages?label=Deploy&logo=github&style=for-the-badge) 4 | 5 | ## A Modern Portfolio Template for Developers! 6 | 7 |

8 | Devfolio 9 |

10 | 11 | ## Features 12 | 13 | ⚡️ Modern UI Design + Reveal Animations + Hover Effects\ 14 | ⚡️ Well organized documentation\ 15 | ⚡️ One Page Layout\ 16 | ⚡️ Custom SCSS\ 17 | ⚡️ Fully Responsive\ 18 | ⚡️ Valid HTML5 & CSS3\ 19 | ⚡ Fast and SEO Optimized 20 | 21 | To view a demo example, **[Click Here](https://devfolio.js.org)**\ 22 | To view a live example, **[Click Here](https://anilseervi.github.io/Portfolio/)**\ 23 | To view live example repo, **[Click Here](https://github.com/AnilSeervi/Portfolio/)** 24 | 25 | ## Getting Started 🚀 26 | 27 | Here's a **Complete Guide** to walk you through the process of setting your own Portfolio Website with this minimal template on your local machine as well as hosting it on GitHub. 28 | 29 | ### Prerequisites 📋 30 | 31 | You'll need [VSCode](https://code.visualstudio.com/) and [Git](https://git-scm.com/) installed on your computer. 32 | 33 | You'll also need these two extensions [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) and [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass) installed in your VSCode. You will be automatically promted to install these extensions once you open this project in VSCode. 34 | 35 | --- 36 | 37 | ## How To Use 🔧 38 | 39 | In VSCode, Open the terminal(Ctrl+\\ ) and clone the DevFolio Repo. 40 | 41 | ```bash 42 | # Clone this repository 43 | $ git clone https://github.com/AnilSeervi/DevFolio.git 44 | 45 | # Go into the repository 46 | $ cd DevFolio 47 | 48 | # Remove current origin repository 49 | $ git remote remove origin 50 | ``` 51 | 52 | And delete the [`.github`](./.github) folder as you don't need it. 53 | 54 | Now Simply click on **Watch Sass** in the bottom status bar to watch all your `.scss` file chages and compile them to vanilla `.css`. 55 | And also open `index.html`, right click inside the file and select _Show Preview_ to start a preview at `http://127.0.0.1:3000/`. 56 | 57 |

58 | OR 59 |

60 | 61 | Press Ctrl+Shift+P or F1 to Show Command Palette, Search for **Live Sass: Watch Sass** and turn it on. Also search for **Live Preview: Start Server** and turn it on. Doing this will watch all your Sass files for changes and will spin up a live server for you at `http://127.0.0.1:3000/`. 62 | 63 | --- 64 | 65 | ## Template Instructions 66 | 67 | ### Step 1 - STRUCTURE 68 | 69 | Open [`index.html`](./index.html) and fill your information, there are 6 sections: 70 | 71 | ### Head Section 72 | 73 | - Add a title to your Portfolio website within the `` tag. 74 | - Add some keywords and description to your Portfolio website as directed in the [`index.html`](./index.html) file. 75 | 76 | ```html 77 | <!-- Title: add your Portfolio websites's title here --> 78 | <title>[Your name here] | Developer 79 | 80 | 81 | 82 | 83 | ``` 84 | 85 | - Remove google analytics tag before pushing it to GitHub. 86 | 87 | ### Hero Section 88 | 89 | - On `.hero-title`, put your custom title. 90 | - On `.hero-cta`, put your custom button cta. 91 | 92 | ```html 93 | 94 |
95 |
96 |

97 | Hi, my name is Your Name 98 |
99 | I'm the Unknown Developer. 100 |

101 |

102 | Get in touch 103 |

104 |
105 | 106 | 107 | 108 |
109 | 110 | ``` 111 | 112 | ### About Section 113 | 114 | - On `` tag, fill the `src` attribute with your profile picture, your picture must be located inside [`assets/`](./assets) folder. 115 | - Recommended size for your profile image is (_450 x 450px_). 116 | - On `

` tag with class-name `.about-wrapper__info-text`, include information about you, I recommend to use 2 paragraphs in order to work well and a maximum of 3 paragraphs. 117 | - On last `` tag, include your resume url on `href` attribute. 118 | 119 | ```html 120 | 121 |

122 |
123 |

About Me

124 |
125 |
126 | Profile Image 127 |
128 |
129 |

130 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 131 |

132 |

133 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 134 |

135 | 136 | View Resume 137 | 138 |
139 |
140 |
141 |
142 | 143 | ``` 144 | 145 | ### Projects Section 146 | 147 | - Each project lives inside `row` class. 148 | - On `

` tag with class-name `.project-wrapper__text-title`, include your project title. 149 | - On `

` tag with `loremp ipsum...` text, include your project information. 150 | - On first `` tag, put your project url on `href` attribute. 151 | - On second `` tag, put your project repository url on `href` attribute. 152 | 153 | --- 154 | 155 | - Inside `

` tag with class-name `.project-wrapper__image`, put your project image url on the `src` of the `` and put again your project url on `href` attribute of `` tag. 156 | - Recommended size for project image (_1366 x 767px_), your project image must live in [`assets/`](./assets) folder. You can remove the default images and replace them with yours. 157 | 158 | ```html 159 | 160 |
161 |
162 |
163 |

Projects

164 | 165 | 166 |
167 |
168 |

Project Title

169 |

170 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 171 |

172 |
173 | See Live 179 | Source Code 182 |
183 |
184 | 185 |
186 | 187 |
188 | Project Image 193 |
194 | 195 |
196 |
197 | ... 198 |
199 | 200 | ``` 201 | 202 | ### Contact Section 203 | 204 | - On `

` tag with class-name `.contact-wrapper__text`, include some custom call-to-action message. 205 | - On `` tag, put your email address on `href="mailto:` attribute. 206 | 207 | ```html 208 | 209 |

210 |
211 |

Contact

212 |
213 |

[Put your call to action here]

214 | Call to Action 215 |
216 |
217 |
218 | 219 | ``` 220 | 221 | ### Footer Section 222 | 223 | - Put your social media link on each `` links. 224 | - If you have more social-media accounts, see [Font Awesome Icons](https://fontawesome.com/icons) to put the corresponding additional social icon classNames. 225 | - You can delete or add as many `` links your want. 226 | 227 | ```html 228 | 229 | 250 | 251 | ``` 252 | 253 | ### Step 2 - STYLES 254 | 255 | Change the color theme of the website ( choose 2 colors to create a gradient ): 256 | 257 | Go to [`style/base/_variables.scss`](./style/base/_variables.scss) and only change the values on these properties `$main-color` and `$secondary-color` to your prefered HEX color. 258 | 259 | Save the `.scss` file so that the **Live Sass Compiler** extension compiles it to `.css`. 260 | 261 | ```scss 262 | // Default values 263 | $primary-color: #36d1dc; 264 | $secondary-color: #5b86e5; 265 | ``` 266 | 267 | **NOTE**: I highly recommend to checkout gradients variations on [UI Gradient](https://uigradients.com/#Scooter) 268 | 269 | --- 270 | 271 | - You can clear the README.md file and add you own readme to it. 272 | - Also you don't need to push the [`style`](./style) folder, so you can add [`style`](./style) to [`.gitignore`](./.gitignore) file to ignore it while pushing it to the repo. 273 | - Delete the file [`CNAME`](./CNAME) before you push it. 274 | 275 | --- 276 | 277 | ## Deployment 📦 278 | 279 | - Head to your GitHub account and create a new repo. And set a new remote for our template repo. 280 | 281 | Note: remote URL will be different. 282 | 283 | ```bash 284 | # set a new remote 285 | $ git remote add origin https://github.com/user.repo.git 286 | ``` 287 | 288 | - Now commit all your changes with a commit message and push the code to your newly created repo. 289 | 290 | ```bash 291 | # commit changes 292 | $ git commit -m 'created my portfolio' 293 | # push the changes 294 | $ git push -u origin master 295 | ``` 296 | 297 | - Refresh your repo page and head to the settings tab. Now scroll down till you see GitHub Pages. In the Source section select the branch to be master and save it! 298 | - Voilà your Portfolio should be live at `https://username.github.io/repoName/` 299 | 300 | ## Technologies used 🛠️ 301 | 302 | - [Sass](https://sass-lang.com/documentation) - CSS extension language 303 | - [ScrollReveal.js](https://scrollrevealjs.org/) - JavaScript library 304 | - [Tilt.js](https://gijsroge.github.io/tilt.js/) - JavaScript tiny parallax library 305 | 306 | ## Authors 307 | 308 | - **Anil Seervi** - [https://github.com/AnilSeervi](https://github.com/AnilSeervi) 309 | 310 | ## License 📄 311 | 312 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 313 | 314 | ## Acknowledgments 🎁 315 | 316 | I was motivated and inspired while learning [ZTM: Complete Web Developer](https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/) to create a simpler version of [simplefolio](https://github.com/cobidev/simplefolio) for those who didn't know node and packages. 317 | 318 | --- 319 | 320 |

Have Fun Creating Your Own Portfolio Website.

321 | -------------------------------------------------------------------------------- /assets/devfolio-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnilSeervi/DevFolio/650cbbef5c5e132321ef51e7b8626d98f11276ad/assets/devfolio-logo.png -------------------------------------------------------------------------------- /assets/devfolio.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnilSeervi/DevFolio/650cbbef5c5e132321ef51e7b8626d98f11276ad/assets/devfolio.gif -------------------------------------------------------------------------------- /assets/devfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnilSeervi/DevFolio/650cbbef5c5e132321ef51e7b8626d98f11276ad/assets/devfolio.png -------------------------------------------------------------------------------- /assets/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnilSeervi/DevFolio/650cbbef5c5e132321ef51e7b8626d98f11276ad/assets/profile.png -------------------------------------------------------------------------------- /assets/project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnilSeervi/DevFolio/650cbbef5c5e132321ef51e7b8626d98f11276ad/assets/project.png -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | @import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:"Montserrat",sans-serif}html{font-size:62.5%;scroll-behavior:smooth}body{text-align:center;line-height:1.5}h1{font-weight:700}p,a{font-size:1.6rem}a{text-decoration:none}a:hover{transition:all .3s ease-in-out}.section-title{margin-bottom:4.5rem;font-size:4rem;text-transform:uppercase}@media(max-width: 37.5em){.section-title{font-size:2.8rem}}.dark-blue-color{color:#272341}.text-color-main{margin-left:1rem;color:#5b86e5;-webkit-text-fill-color:#5b86e5}@supports((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text){.text-color-main{background-image:linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}}@media(max-width: 37.5em){.text-color-main{margin:0;background-image:none;-webkit-text-fill-color:#5b86e5;box-shadow:none}}.cta-btn{display:inline-block;position:relative;padding:.8rem 1.6rem;font-weight:bold;line-height:1;z-index:1;overflow:hidden;border-radius:3px;transition:all cubic-bezier(0.19, 1, 0.22, 1) .6s}.cta-btn:hover{box-shadow:1.5px 1.5px 3px rgba(174,174,192,.4),-1px -1px 3px #fff}@media(max-width: 37.5em){.cta-btn:hover{box-shadow:none}}.cta-btn::after{content:"";display:block;position:absolute;background-image:linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);width:0px;height:100%;left:0;top:0;z-index:-1;transition:all cubic-bezier(0.19, 1, 0.22, 1) .6s}@media(max-width: 37.5em){.cta-btn::after{width:0;height:0;background-image:none}}.cta-btn--hero{color:#5b86e5;-webkit-text-fill-color:#5b86e5;border:2px solid rgba(0,0,0,0);-o-border-image:linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);border-image:linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);border-image-slice:1}@supports((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text){.cta-btn--hero{background-image:linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}}@media screen and (-ms-high-contrast: active),screen and (-ms-high-contrast: none){.cta-btn--hero{color:#5b86e5}.cta-btn--hero:hover{color:#fff}}@media(max-width: 37.5em){.cta-btn--hero{background-image:none;border:2px solid #5b86e5;box-shadow:none;-webkit-text-fill-color:#5b86e5}}.cta-btn--hero::after{height:410%;width:150%;transform:translate(-98%, -25%) rotate(45deg)}.cta-btn--hero:hover{-webkit-text-fill-color:#fff;text-decoration:none}@media(max-width: 37.5em){.cta-btn--hero:hover{-webkit-text-fill-color:#5b86e5}}.cta-btn--hero:hover::after{transform:translate(-9%, -25%) rotate(45deg)}.cta-btn--resume{border-radius:0;color:#fff;border:2px solid #fff}.cta-btn--resume::after{background:#fff}.cta-btn--resume:hover{color:#5b86e5;text-decoration:none;box-shadow:none}@media(max-width: 37.5em){.cta-btn--resume:hover{color:#fff}}.cta-btn--resume:hover::after{width:100%}.cta-btn--projects{box-shadow:inset 1px 1px 2px 2px rgba(174,174,192,.15),inset -2px -2px 2px rgba(255,255,255,.7);border:2px solid rgba(0,0,0,0)}@media(max-width: 37.5em){.cta-btn--projects{border:none;box-shadow:1.5px 1.5px 3px rgba(174,174,192,.4),-1px -1px 3px #fff}}.cta-btn--projects::after{height:250%;width:130%}.cta-btn--projects::after{transform:translate(-98%, -30%) rotate(45deg)}.cta-btn--projects:hover{box-shadow:1.5px 1.5px 3px rgba(174,174,192,.4),-1px -1px 3px #fff}.cta-btn--projects:hover::after{transform:translate(-12%, -30%) rotate(45deg)}.footer{background-color:#333;padding:4.8rem 0}.footer__text{font-size:1.3rem;color:#b3b3b3}.footer__text a{font-size:1.3rem;color:#bfbfbf;transition:all .2s ease-in-out;display:inline-block}.footer__text a:hover,.footer__text a:active{color:#36d1dc}.footer hr{margin:1rem auto;border:0;width:50%;border-top:2px solid rgba(255,255,255,.1)}.social-links{display:flex;justify-content:center}.social-links a{font-size:3rem;display:flex;flex-direction:column;justify-content:center;color:#fff;width:5rem;height:5rem;margin:1.6rem 1.6rem;transition:all ease .2s}.social-links a i{transition:all ease-in-out .2s}.social-links a:hover{transform:scale(1.1) translateY(-2px)}.social-links a:hover .fa-twitter{color:#00acee}.social-links a:hover .fa-instagram{color:#c13584}.social-links a:hover .fa-linkedin{color:#4875b4}.social-links a:hover .fa-codepen{color:#212121}.back-to-top i{color:#fff;margin:1rem 0 1.6rem;transition:all 200ms ease}.back-to-top i:hover{transform:translateY(-2px)}section{padding:5rem 0rem}@media(max-width: 37.5em){section{border:none;padding-left:1rem;padding-right:1rem}}section .row{display:grid;gap:2rem;grid-template-columns:1fr 2fr;grid-template-rows:1fr;padding:0 1.5rem}@media(max-width: 56.25em){section .row{grid-template-columns:1fr;grid-template-rows:auto}}@media(max-width: 37.5em){section .row{padding:0}}section .row p+p{margin-top:1rem}section .row span{margin-top:2rem}.container{width:100%;padding:0 1.5rem;margin:0 auto;max-width:1140px}@media(max-width: 75em){.container{max-width:960px;width:100%}}@media(max-width: 56.25em){.container{max-width:720px;width:100%;justify-content:center}}@media(max-width: 48em){.container{max-width:720px;width:100%}}@media(max-width: 37.5em){.container{max-width:540px;width:100%}}#about{background-color:#36d1dc;background-image:linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);color:#fff;height:100%;-webkit-clip-path:polygon(0 0, 100% 0, 100% 80%, 0 100%);clip-path:polygon(0 0, 100% 0, 100% 80%, 0 100%);padding-bottom:10%}@media(max-width: 75em){#about{height:100%;-webkit-clip-path:none;clip-path:none}}#about .about-wrapper{grid-template-columns:1fr 1fr}@media(max-width: 37.5em){#about .about-wrapper{padding-bottom:5rem;grid-template-columns:1fr}}#about .about-wrapper__image{display:flex;height:100%;align-items:center;justify-content:center}#about .about-wrapper__image img{max-width:350px;width:100%}@media(max-width: 75em){#about .about-wrapper__image{height:100%}}@media(max-width: 48em){#about .about-wrapper__image{padding-bottom:4rem}}#about .about-wrapper__info{display:flex;height:100%;justify-content:center;flex-direction:column;text-align:left}@media(max-width: 48em){#about .about-wrapper__info{align-items:center;text-align:center}}#contact{background-image:linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);-webkit-clip-path:polygon(0 15vh, 100% 0, 100% 100%, 0 100%);clip-path:polygon(0 15vh, 100% 0, 100% 100%, 0 100%);padding:15rem 0 10rem 0;margin-top:-15rem;margin-bottom:-1px;color:#fff}@media(max-width: 75em){#contact{padding:10rem 0;margin-top:0;-webkit-clip-path:none;clip-path:none}}#contact .contact-wrapper{margin-top:3.2rem;padding:0 2rem;-webkit-backface-visibility:hidden;backface-visibility:hidden}#contact .contact-wrapper__text{margin-bottom:2.5rem}#contact .contact-wrapper__text,#contact .contact-wrapper a{font-size:2.4rem}@media(max-width: 37.5em){#contact .contact-wrapper__text,#contact .contact-wrapper a{font-size:2rem}}#hero{min-height:100vh;height:100vh;display:flex;align-items:center;background:#fff;font-weight:400;color:#272341;padding:0rem 5.6rem;top:0;left:0;bottom:0;right:0;z-index:-1;line-height:1.2;animation:hidden 1000ms linear forwards}@media(max-width: 56.25em){#hero{justify-content:center}}@media(max-width: 37.5em){#hero{padding:0rem 1.6rem}}#hero .hero-title{font-size:5.6rem;font-weight:700;margin-bottom:3.2rem;text-align:left}#hero .hero-title span{margin:0;display:inline-block}@media(max-width: 75em){#hero .hero-title{font-size:4rem}}@media(max-width: 56.25em){#hero .hero-title{font-size:3.6rem;text-align:center}}@media(max-width: 37.5em){#hero .hero-title{font-size:3.5rem;line-height:1.5}}@media(max-width: 20em){#hero .hero-title{font-size:2.8rem}}#hero .hero-cta{display:flex}@media(max-width: 56.25em){#hero .hero-cta{justify-content:center}}#hero .hero-cta a{font-size:2.4rem}@media(max-width: 37.5em){#hero .hero-cta a{font-size:2rem}}.scroll-down-link{position:absolute;left:50%;bottom:20px;transform:translateX(-50%)}.scroll-down{height:50px;width:30px;border:2px solid #000;border-radius:50px;cursor:pointer}.scroll-down::before,.scroll-down::after{height:10px;width:10px;content:"";position:absolute;top:20%;left:50%;border:2px solid #5b86e5;transform:translate(-50%, -100%) rotate(45deg);border-top:none;border-left:none;animation:scroll-down 1s ease-in-out infinite}.scroll-down::after{top:30%;animation-delay:.3s}@keyframes hidden{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes scroll-down{0%{opacity:0}30%{opacity:1}60%{opacity:1}100%{opacity:0;top:90%}}#projects{background-color:#e5e5e5;color:#272341;margin-top:-15rem;padding-top:15rem}@media(max-width: 75em){#projects{margin-top:0;padding-top:5rem}}@media(max-width: 37.5em){#projects{padding-bottom:1px}}#projects .project-wrapper{margin-bottom:15rem}@media(max-width: 37.5em){#projects .project-wrapper{margin-bottom:0rem}}#projects .project-wrapper .row{margin:0;margin-bottom:8rem}@media(max-width: 37.5em){#projects .project-wrapper .row{margin-bottom:4rem}}#projects .project-wrapper__text{width:100%;text-align:left}@media(max-width: 75em){#projects .project-wrapper__text{margin-bottom:4.8rem}}@media(max-width: 37.5em){#projects .project-wrapper__text{margin-bottom:2.5rem}}#projects .project-wrapper__text-title{font-weight:bold;margin-bottom:1.8rem;font-size:2.5rem}@media(max-width: 37.5em){#projects .project-wrapper__text-title{font-size:2rem}}#projects .project-wrapper__text-info{margin-bottom:1.5rem}#projects .project-wrapper__text-btns{width:100%;display:flex;align-items:center;flex-wrap:wrap}#projects .project-wrapper__image{width:90%;margin:0 auto}@media(max-width: 75em){#projects .project-wrapper__image{width:100%;margin:0}}#projects .project-wrapper__image .thumbnail{border:none;box-shadow:8px 8px 9px 7px rgba(174,174,192,.4),-5px -5px 15px 7px #fff}#projects .project-wrapper__image .thumbnail .img-fluid{width:100%;height:auto;vertical-align:middle;border-radius:2px}@media(max-width: 37.5em){#projects .project-wrapper__image .thumbnail{box-shadow:none;border:1px solid #d2d2d2;margin-bottom:3.2rem;transform:none}} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | [Your name here] | Developer 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 45 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 61 | 62 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 79 | 80 | 85 | 86 | 87 | 88 | 92 | 101 | 102 | 103 | 104 | 105 |
106 |
107 |

108 | Hi, my name is Your Name 109 |
110 | I'm the Unknown Developer. 111 |

112 |

113 | Get in touch 114 |

115 |
116 | 117 | 119 |
120 | 121 | 122 | 123 |
124 |
125 |

About Me

126 |
127 |
128 | Profile Image 135 |
136 |
137 |

138 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 139 | Temporibus quae repellat, ad omnis distinctio velit saepe expedita 140 | architecto cumque veritatis adipisci. Sapiente non, saepe hic 141 | adipisci doloribus quisquam recusandae et. 142 |

143 |

144 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam 145 | obcaecati doloribus qui praesentium quae veniam esse mollitia 146 | consequuntur nisi minima quasi et fugit quidem enim recusandae 147 | delectus, iusto culpa rerum? 148 |

149 | 150 | View Resume 151 | 152 |
153 |
154 |
155 |
156 | 157 | 158 | 159 |
160 |
161 |
162 |

Projects

163 | 164 | 165 |
166 |
167 |

Project Title

168 |

169 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 170 | Deleniti voluptas, sit nam perspiciatis tempore aspernatur ullam 171 | necessitatibus impedit repellendus vero sed ipsa eos beatae ab 172 | sint saepe nostrum! Enim, perferendis. 173 |

174 |
175 | See Live 182 | Source Code 185 |
186 |
187 | 188 |
189 | 190 |
191 | Project Image 198 |
199 | 200 |
201 |
202 | 203 | 204 | 205 |
206 |
207 |

Project Title

208 |

209 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 210 | Deleniti voluptas, sit nam perspiciatis tempore aspernatur ullam 211 | necessitatibus impedit repellendus vero sed ipsa eos beatae ab 212 | sint saepe nostrum! Enim, perferendis. 213 |

214 |
215 | See Live 222 | Source Code 225 |
226 |
227 | 228 |
229 | 230 |
231 | Project Image 238 |
239 | 240 |
241 |
242 | 243 | 244 | 245 |
246 |
247 |

Project Title

248 |

249 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 250 | Deleniti voluptas, sit nam perspiciatis tempore aspernatur ullam 251 | necessitatibus impedit repellendus vero sed ipsa eos beatae ab 252 | sint saepe nostrum! Enim, perferendis. 253 |

254 |
255 | See Live 262 | Source Code 265 |
266 |
267 | 268 |
269 | 270 |
271 | Project Image 278 |
279 | 280 |
281 |
282 | 283 |
284 |
285 |
286 | 287 | 288 | 289 |
290 |
291 |

Contact

292 |
293 |

[Put your call to action here]

294 | Call to Action 295 |
296 |
297 |
298 | 299 | 300 | 301 | 360 | 361 | 362 | 365 | 366 | 367 | 368 | 369 | -------------------------------------------------------------------------------- /javascript/scrollreveal.min.js: -------------------------------------------------------------------------------- 1 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!0,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}},n={clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0=[].concat(r.body).shift())return g.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return g.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function v(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=y(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t 768 ? "left" : "bottom", 14 | }); 15 | ScrollReveal().reveal(".name", { 16 | ...defaultProps, 17 | distance: "0px", 18 | delay: 700, 19 | scale: 0, 20 | }); 21 | ScrollReveal().reveal(".hero-cta", { 22 | ...defaultProps, 23 | delay: 1200, 24 | origin: window.innerWidth > 768 ? "left" : "bottom", 25 | }); 26 | ScrollReveal().reveal(".scroll-down-link", { 27 | ...defaultProps, 28 | delay: 2000, 29 | origin: "top", 30 | }); 31 | 32 | /* About Section */ 33 | ScrollReveal().reveal(".section-title", { 34 | ...defaultProps, 35 | delay: 400, 36 | distance: "0px", 37 | }); 38 | ScrollReveal().reveal(".about-wrapper__image", { 39 | ...defaultProps, 40 | delay: 600, 41 | scale: 0.5, 42 | }); 43 | 44 | ScrollReveal().reveal(".about-wrapper__info", { 45 | ...defaultProps, 46 | delay: 700, 47 | distance: "100px", 48 | origin: window.innerWidth > 768 ? "left" : "top", 49 | }); 50 | 51 | /* Projects Section */ 52 | ScrollReveal().reveal(".project-wrapper__text", { 53 | ...defaultProps, 54 | delay: 600, 55 | origin: window.innerWidth > 768 ? "left" : "bottom", 56 | }); 57 | 58 | ScrollReveal().reveal(".project-wrapper__image", { 59 | ...defaultProps, 60 | delay: 600, 61 | scale: 0.9, 62 | origin: window.innerWidth > 768 ? "right" : "bottom", 63 | }); 64 | 65 | /* Contact Section */ 66 | ScrollReveal().reveal(".contact-wrapper", { 67 | ...defaultProps, 68 | delay: 600, 69 | }); 70 | 71 | ScrollReveal().reveal(".fa", { 72 | ...defaultProps, 73 | delay: 500, 74 | interval: 100, 75 | }); 76 | -------------------------------------------------------------------------------- /javascript/valtilt.js: -------------------------------------------------------------------------------- 1 | let tilt = document.querySelectorAll(".rounded"); 2 | VanillaTilt.init(tilt, { 3 | max: 3, 4 | speed: 500, 5 | scale: 1.05, 6 | glare: true, 7 | "max-glare": 0.3, 8 | }); 9 | -------------------------------------------------------------------------------- /javascript/vanilla-tilt.min.js: -------------------------------------------------------------------------------- 1 | var VanillaTilt=function(){"use strict";class t{constructor(e,i={}){if(!(e instanceof Node))throw"Can't initialize VanillaTilt because "+e+" is not a Node.";this.width=null,this.height=null,this.clientWidth=null,this.clientHeight=null,this.left=null,this.top=null,this.gammazero=null,this.betazero=null,this.lastgammazero=null,this.lastbetazero=null,this.transitionTimeout=null,this.updateCall=null,this.event=null,this.updateBind=this.update.bind(this),this.resetBind=this.reset.bind(this),this.element=e,this.settings=this.extendSettings(i),this.reverse=this.settings.reverse?-1:1,this.glare=t.isSettingTrue(this.settings.glare),this.glarePrerender=t.isSettingTrue(this.settings["glare-prerender"]),this.fullPageListening=t.isSettingTrue(this.settings["full-page-listening"]),this.gyroscope=t.isSettingTrue(this.settings.gyroscope),this.gyroscopeSamples=this.settings.gyroscopeSamples,this.elementListener=this.getElementListener(),this.glare&&this.prepareGlare(),this.fullPageListening&&this.updateClientSize(),this.addEventListeners(),this.updateInitialPosition()}static isSettingTrue(t){return""===t||!0===t||1===t}getElementListener(){if(this.fullPageListening)return window.document;if("string"==typeof this.settings["mouse-event-element"]){const t=document.querySelector(this.settings["mouse-event-element"]);if(t)return t}return this.settings["mouse-event-element"]instanceof Node?this.settings["mouse-event-element"]:this.element}addEventListeners(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.onWindowResizeBind=this.onWindowResize.bind(this),this.onDeviceOrientationBind=this.onDeviceOrientation.bind(this),this.elementListener.addEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.addEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.addEventListener("mousemove",this.onMouseMoveBind),(this.glare||this.fullPageListening)&&window.addEventListener("resize",this.onWindowResizeBind)}removeEventListeners(){this.elementListener.removeEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.removeEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.removeEventListener("mousemove",this.onMouseMoveBind),this.gyroscope&&window.removeEventListener("deviceorientation",this.onDeviceOrientationBind),(this.glare||this.fullPageListening)&&window.removeEventListener("resize",this.onWindowResizeBind)}destroy(){clearTimeout(this.transitionTimeout),null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.reset(),this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null}onDeviceOrientation(t){if(null===t.gamma||null===t.beta)return;this.updateElementPosition(),this.gyroscopeSamples>0&&(this.lastgammazero=this.gammazero,this.lastbetazero=this.betazero,null===this.gammazero?(this.gammazero=t.gamma,this.betazero=t.beta):(this.gammazero=(t.gamma+this.lastgammazero)/2,this.betazero=(t.beta+this.lastbetazero)/2),this.gyroscopeSamples-=1);const e=this.settings.gyroscopeMaxAngleX-this.settings.gyroscopeMinAngleX,i=this.settings.gyroscopeMaxAngleY-this.settings.gyroscopeMinAngleY,s=e/this.width,n=i/this.height,l=(t.gamma-(this.settings.gyroscopeMinAngleX+this.gammazero))/s,a=(t.beta-(this.settings.gyroscopeMinAngleY+this.betazero))/n;null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event={clientX:l+this.left,clientY:a+this.top},this.updateCall=requestAnimationFrame(this.updateBind)}onMouseEnter(){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()}onMouseMove(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(){this.setTransition(),this.settings.reset&&requestAnimationFrame(this.resetBind)}reset(){this.event={clientX:this.left+this.width/2,clientY:this.top+this.height/2},this.element&&this.element.style&&(this.element.style.transform=`perspective(${this.settings.perspective}px) `+"rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"),this.resetGlare()}resetGlare(){this.glare&&(this.glareElement.style.transform="rotate(180deg) translate(-50%, -50%)",this.glareElement.style.opacity="0")}updateInitialPosition(){if(0===this.settings.startX&&0===this.settings.startY)return;this.onMouseEnter(),this.fullPageListening?this.event={clientX:(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.clientWidth,clientY:(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.clientHeight}:this.event={clientX:this.left+(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.width,clientY:this.top+(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.height};let t=this.settings.scale;this.settings.scale=1,this.update(),this.settings.scale=t,this.resetGlare()}getValues(){let t,e;return this.fullPageListening?(t=this.event.clientX/this.clientWidth,e=this.event.clientY/this.clientHeight):(t=(this.event.clientX-this.left)/this.width,e=(this.event.clientY-this.top)/this.height),t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1),{tiltX:(this.reverse*(this.settings.max-t*this.settings.max*2)).toFixed(2),tiltY:(this.reverse*(e*this.settings.max*2-this.settings.max)).toFixed(2),percentageX:100*t,percentageY:100*e,angle:Math.atan2(this.event.clientX-(this.left+this.width/2),-(this.event.clientY-(this.top+this.height/2)))*(180/Math.PI)}}updateElementPosition(){let t=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=t.left,this.top=t.top}update(){let t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.glare&&(this.glareElement.style.transform=`rotate(${t.angle}deg) translate(-50%, -50%)`,this.glareElement.style.opacity=`${t.percentageY*this.settings["max-glare"]/100}`),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null}prepareGlare(){if(!this.glarePrerender){const t=document.createElement("div");t.classList.add("js-tilt-glare");const e=document.createElement("div");e.classList.add("js-tilt-glare-inner"),t.appendChild(e),this.element.appendChild(t)}this.glareElementWrapper=this.element.querySelector(".js-tilt-glare"),this.glareElement=this.element.querySelector(".js-tilt-glare-inner"),this.glarePrerender||(Object.assign(this.glareElementWrapper.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",overflow:"hidden","pointer-events":"none"}),Object.assign(this.glareElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:`${2*this.element.offsetWidth}px`,height:`${2*this.element.offsetWidth}px`,transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"}))}updateGlareSize(){this.glare&&Object.assign(this.glareElement.style,{width:`${2*this.element.offsetWidth}`,height:`${2*this.element.offsetWidth}`})}updateClientSize(){this.clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,this.clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}onWindowResize(){this.updateGlareSize(),this.updateClientSize()}setTransition(){clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.glare&&(this.glareElement.style.transition=`opacity ${this.settings.speed}ms ${this.settings.easing}`),this.transitionTimeout=setTimeout(()=>{this.element.style.transition="",this.glare&&(this.glareElement.style.transition="")},this.settings.speed)}extendSettings(t){let e={reverse:!1,max:15,startX:0,startY:0,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:1,speed:300,transition:!0,axis:null,glare:!1,"max-glare":1,"glare-prerender":!1,"full-page-listening":!1,"mouse-event-element":null,reset:!0,gyroscope:!0,gyroscopeMinAngleX:-45,gyroscopeMaxAngleX:45,gyroscopeMinAngleY:-45,gyroscopeMaxAngleY:45,gyroscopeSamples:10},i={};for(var s in e)if(s in t)i[s]=t[s];else if(this.element.hasAttribute("data-tilt-"+s)){let t=this.element.getAttribute("data-tilt-"+s);try{i[s]=JSON.parse(t)}catch(e){i[s]=t}}else i[s]=e[s];return i}static init(e,i){e instanceof Node&&(e=[e]),e instanceof NodeList&&(e=[].slice.call(e)),e instanceof Array&&e.forEach(e=>{"vanillaTilt"in e||(e.vanillaTilt=new t(e,i))})}}return"undefined"!=typeof document&&(window.VanillaTilt=t,t.init(document.querySelectorAll("[data-tilt]"))),t}(); -------------------------------------------------------------------------------- /style/base/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: $font-family; 6 | } 7 | html { 8 | font-size: 62.5%; 9 | scroll-behavior: smooth; 10 | } 11 | body { 12 | text-align: center; 13 | line-height: 1.5; 14 | } 15 | -------------------------------------------------------------------------------- /style/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | // MEDIA QUERY MANAGER 2 | /* 3 | 0 - 600px: Phone 4 | 600px - 900px Table Portrait 5 | 900px - 1200px Table Landscape 6 | [1200px - 1800px] Desktop Normal Styles 7 | 1800px + Big Desktop 8 | 1em = 16px 9 | ORDER: Base + Typography > Generar Layout + Grid > Page Layout > Components 10 | */ 11 | @mixin respond($breakpoint) { 12 | // Phone-xs 13 | @if $breakpoint == phone-xs { 14 | @media (max-width: 20em) { 15 | @content; 16 | } //0 - 320px 17 | } 18 | // Phone 19 | @if $breakpoint == phone { 20 | @media (max-width: 37.5em) { 21 | @content; 22 | } //0 - 600px 23 | } 24 | // Table small 25 | @if $breakpoint == tab-port-sm { 26 | @media (max-width: 48em) { 27 | @content; 28 | } //768px 29 | } 30 | // Table Portrait 31 | @if $breakpoint == tab-port { 32 | @media (max-width: 56.25em) { 33 | @content; 34 | } //900px 35 | } 36 | // Table Landscape 37 | @if $breakpoint == tab-land { 38 | @media (max-width: 75em) { 39 | @content; 40 | } //1200px 41 | } 42 | // Big Desktop 43 | @if $breakpoint == big-desktop { 44 | @media (min-width: 112.5em) { 45 | @content; 46 | } //1800px + 47 | } 48 | } 49 | 50 | @mixin supportColorForIE11 { 51 | // Fall for text-gradient not supported in IE11 52 | color: $secondary-color; 53 | -webkit-text-fill-color: $secondary-color; // fallback 54 | @supports (background-clip: text) or (-webkit-background-clip: text) { 55 | background-image: linear-gradient( 56 | 135deg, 57 | $primary-color 0%, 58 | $secondary-color 100% 59 | ); 60 | -webkit-background-clip: text; 61 | background-clip: text; 62 | -webkit-text-fill-color: transparent; 63 | color: transparent; 64 | } 65 | } 66 | 67 | @mixin supportIE11 { 68 | // Provide your basic styles to support IE11 69 | @media screen and (-ms-high-contrast: active), 70 | screen and (-ms-high-contrast: none) { 71 | @content; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /style/base/_typography.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"); 2 | h1 { 3 | font-weight: 700; 4 | } 5 | 6 | p, 7 | a { 8 | font-size: $default-font-size; 9 | } 10 | 11 | a { 12 | text-decoration: none; 13 | } 14 | 15 | a:hover { 16 | transition: all 0.3s ease-in-out; 17 | } 18 | 19 | .section-title { 20 | margin-bottom: 4.5rem; 21 | font-size: $big-font-size; 22 | text-transform: uppercase; 23 | @include respond(phone) { 24 | font-size: 2.8rem; 25 | } 26 | } 27 | 28 | .dark-blue-color { 29 | color: $dark-blue-text; 30 | } 31 | 32 | .text-color-main { 33 | margin-left: 1rem; 34 | @include supportColorForIE11(); 35 | 36 | @include respond(phone) { 37 | margin: 0; 38 | background-image: none; 39 | -webkit-text-fill-color: $secondary-color; 40 | box-shadow: none; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /style/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // COLORS 2 | $primary-color: #36d1dc; 3 | $secondary-color: #5b86e5; 4 | $font-family: "Montserrat", sans-serif; 5 | 6 | $light-white: #e5e5e5; 7 | $white-color: #ffffff; 8 | $dark-grey: #333333; 9 | 10 | $dark-blue-text: #272341; // For headings 11 | 12 | // FONT SIZE 13 | $default-font-size: 1.6rem; 14 | $mid-font-size: 2.5rem; 15 | $big-font-size: 4rem; 16 | -------------------------------------------------------------------------------- /style/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* Call to Action Button*/ 2 | .cta-btn { 3 | display: inline-block; 4 | position: relative; 5 | padding: 0.8rem $default-font-size; 6 | font-weight: bold; 7 | line-height: 1; 8 | z-index: 1; 9 | overflow: hidden; 10 | border-radius: 3px; 11 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.6s; 12 | &:hover { 13 | box-shadow: 1.5px 1.5px 3px rgba(174, 174, 192, 0.4), -1px -1px 3px #ffffff; 14 | @include respond(phone) { 15 | box-shadow: none; 16 | } 17 | } 18 | &::after { 19 | content: ""; 20 | display: block; 21 | position: absolute; 22 | background-image: linear-gradient( 23 | 135deg, 24 | $primary-color 0%, 25 | $secondary-color 100% 26 | ); 27 | width: 0px; 28 | height: 100%; 29 | left: 0; 30 | top: 0; 31 | z-index: -1; 32 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.6s; 33 | @include respond(phone) { 34 | width: 0; 35 | height: 0; 36 | background-image: none; 37 | } 38 | } 39 | } 40 | 41 | /* Hero Style */ 42 | .cta-btn--hero { 43 | @include supportColorForIE11(); 44 | border: 2px solid transparent; 45 | border-image: linear-gradient( 46 | 135deg, 47 | $primary-color 0%, 48 | $secondary-color 100% 49 | ); 50 | border-image-slice: 1; 51 | // box-shadow: inset 1px 1px 2px 2px rgba(174, 174, 192, 0.15), 52 | // inset -2px -2px 2px rgba(255, 255, 255, 0.7); 53 | @include supportIE11() { 54 | color: $secondary-color; 55 | &:hover { 56 | color: $white-color; 57 | } 58 | } 59 | 60 | // Responsive Button hero style 61 | @include respond(phone) { 62 | background-image: none; 63 | border: 2px solid $secondary-color; 64 | box-shadow: none; 65 | -webkit-text-fill-color: $secondary-color; 66 | } 67 | 68 | &::after { 69 | height: 410%; 70 | width: 150%; 71 | transform: translate(-98%, -25%) rotate(45deg); 72 | 73 | // Responsive Button hero style 74 | } 75 | 76 | &:hover { 77 | -webkit-text-fill-color: $white-color; 78 | text-decoration: none; 79 | 80 | // Responsive Button hover hero style 81 | @include respond(phone) { 82 | -webkit-text-fill-color: $secondary-color; 83 | } 84 | 85 | &::after { 86 | transform: translate(-9%, -25%) rotate(45deg); 87 | } 88 | } 89 | } 90 | /* Resume Style */ 91 | .cta-btn--resume { 92 | border-radius: 0; 93 | color: $white-color; 94 | border: 2px solid $white-color; 95 | 96 | &::after { 97 | background: $white-color; 98 | } 99 | 100 | &:hover { 101 | color: $secondary-color; 102 | text-decoration: none; 103 | box-shadow: none; 104 | @include respond(phone) { 105 | color: $white-color; 106 | } 107 | &::after { 108 | width: 100%; 109 | } 110 | } 111 | } 112 | 113 | /* Project Style*/ 114 | .cta-btn--projects { 115 | box-shadow: inset 1px 1px 2px 2px rgba(174, 174, 192, 0.15), 116 | inset -2px -2px 2px rgba(255, 255, 255, 0.7); 117 | border: 2px solid transparent; 118 | @include respond(phone) { 119 | border: none; 120 | box-shadow: 1.5px 1.5px 3px rgba(174, 174, 192, 0.4), -1px -1px 3px #ffffff; 121 | } 122 | &::after { 123 | height: 250%; 124 | width: 130%; 125 | } 126 | &::after { 127 | transform: translate(-98%, -30%) rotate(45deg); 128 | } 129 | 130 | &:hover { 131 | box-shadow: 1.5px 1.5px 3px rgba(174, 174, 192, 0.4), -1px -1px 3px #ffffff; 132 | 133 | &::after { 134 | transform: translate(-12%, -30%) rotate(45deg); 135 | } 136 | } 137 | } 138 | 139 | // /* Arrow Button */ 140 | // .fa-angle-up { 141 | // color: #272727; 142 | // } 143 | -------------------------------------------------------------------------------- /style/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: $dark-grey; 3 | padding: 4.8rem 0; 4 | &__text { 5 | font-size: 1.3rem; 6 | color: darken($white-color, 30%); 7 | a { 8 | font-size: 1.3rem; 9 | color: darken($white-color, 25%); 10 | transition: all 0.2s ease-in-out; 11 | display: inline-block; 12 | &:hover, 13 | &:active { 14 | color: $primary-color; 15 | } 16 | } 17 | } 18 | 19 | & hr { 20 | margin: 1rem auto; 21 | border: 0; 22 | width: 50%; 23 | border-top: 2px solid rgba(255, 255, 255, 0.1); 24 | } 25 | } 26 | 27 | .social-links { 28 | display: flex; 29 | justify-content: center; 30 | 31 | a { 32 | font-size: 3rem; 33 | display: flex; 34 | flex-direction: column; 35 | justify-content: center; 36 | color: $white-color; 37 | width: 5rem; 38 | height: 5rem; 39 | margin: $default-font-size $default-font-size; 40 | transition: all ease 0.2s; 41 | i { 42 | transition: all ease-in-out 0.2s; 43 | } 44 | &:hover { 45 | transform: scale(1.1) translateY(-2px); 46 | .fa-twitter { 47 | color: #00acee; 48 | } 49 | .fa-instagram { 50 | color: #c13584; 51 | } 52 | .fa-linkedin { 53 | color: #4875b4; 54 | } 55 | .fa-codepen { 56 | color: #212121; 57 | } 58 | } 59 | } 60 | } 61 | 62 | .back-to-top i { 63 | color: $white-color; 64 | margin: 1rem 0 $default-font-size; 65 | transition: all 200ms ease; 66 | 67 | &:hover { 68 | transform: translateY(-2px); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /style/layout/_sections.scss: -------------------------------------------------------------------------------- 1 | // Section 2 | section { 3 | padding: 5rem 0rem; 4 | 5 | @include respond(phone) { 6 | border: none; 7 | padding-left: 1rem; 8 | padding-right: 1rem; 9 | } 10 | 11 | .row { 12 | display: grid; 13 | gap: 2rem; 14 | grid-template-columns: 1fr 2fr; 15 | grid-template-rows: 1fr; 16 | @include respond(tab-port) { 17 | grid-template-columns: 1fr; 18 | grid-template-rows: auto; 19 | } 20 | padding: 0 1.5rem; 21 | @include respond(phone) { 22 | padding: 0; 23 | } 24 | & p + p { 25 | margin-top: 1rem; 26 | } 27 | & span { 28 | margin-top: 2rem; 29 | } 30 | } 31 | } 32 | .container { 33 | width: 100%; 34 | padding: 0 1.5rem; 35 | margin: 0 auto; 36 | max-width: 1140px; 37 | @include respond(tab-land) { 38 | max-width: 960px; 39 | width: 100%; 40 | } 41 | @include respond(tab-port) { 42 | max-width: 720px; 43 | width: 100%; 44 | justify-content: center; 45 | } 46 | @include respond(tab-port-sm) { 47 | max-width: 720px; 48 | width: 100%; 49 | } 50 | @include respond(phone) { 51 | max-width: 540px; 52 | width: 100%; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /style/main.scss: -------------------------------------------------------------------------------- 1 | @import "./base/mixins"; 2 | @import "./base/variables"; 3 | @import "./base/base"; 4 | @import "./base/typography"; 5 | @import "./components/buttons"; 6 | @import "./layout/footer"; 7 | @import "./layout/sections"; 8 | @import "./sections/about"; 9 | @import "./sections/contact"; 10 | @import "./sections/hero"; 11 | @import "./sections/projects"; 12 | -------------------------------------------------------------------------------- /style/sections/_about.scss: -------------------------------------------------------------------------------- 1 | #about { 2 | background-color: $primary-color; 3 | background-image: linear-gradient( 4 | 135deg, 5 | $primary-color 0%, 6 | $secondary-color 100% 7 | ); 8 | color: $white-color; 9 | height: 100%; 10 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 11 | clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 12 | padding-bottom: 10%; 13 | @include respond(tab-land) { 14 | height: 100%; 15 | -webkit-clip-path: none; 16 | clip-path: none; 17 | } 18 | 19 | .about-wrapper { 20 | grid-template-columns: 1fr 1fr; 21 | @include respond(phone) { 22 | padding-bottom: 5rem; 23 | grid-template-columns: 1fr; 24 | } 25 | 26 | &__image { 27 | display: flex; 28 | height: 100%; 29 | align-items: center; 30 | justify-content: center; 31 | img { 32 | max-width: 350px; 33 | width: 100%; 34 | } 35 | 36 | @include respond(tab-land) { 37 | height: 100%; 38 | } 39 | @include respond(tab-port-sm) { 40 | padding-bottom: 4rem; 41 | } 42 | } 43 | &__info { 44 | display: flex; 45 | height: 100%; 46 | justify-content: center; 47 | flex-direction: column; 48 | text-align: left; 49 | @include respond(tab-port-sm) { 50 | align-items: center; 51 | text-align: center; 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /style/sections/_contact.scss: -------------------------------------------------------------------------------- 1 | #contact { 2 | background-image: linear-gradient( 3 | 135deg, 4 | $primary-color 0%, 5 | $secondary-color 100% 6 | ); 7 | -webkit-clip-path: polygon(0 15vh, 100% 0, 100% 100%, 0 100%); 8 | clip-path: polygon(0 15vh, 100% 0, 100% 100%, 0 100%); 9 | padding: 15rem 0 10rem 0; 10 | margin-top: -15rem; 11 | margin-bottom: -1px; 12 | color: $white-color; 13 | 14 | @include respond(tab-land) { 15 | padding: 10rem 0; 16 | margin-top: 0; 17 | -webkit-clip-path: none; 18 | clip-path: none; 19 | } 20 | 21 | .contact-wrapper { 22 | margin-top: 3.2rem; 23 | padding: 0 2rem; 24 | backface-visibility: hidden; 25 | 26 | &__text { 27 | margin-bottom: 2.5rem; 28 | } 29 | 30 | &__text, 31 | a { 32 | font-size: 2.4rem; 33 | 34 | // Responsive for contact text 35 | @include respond(phone) { 36 | font-size: 2rem; 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /style/sections/_hero.scss: -------------------------------------------------------------------------------- 1 | #hero { 2 | min-height: 100vh; 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | background: $white-color; 7 | font-weight: 400; 8 | color: $dark-blue-text; 9 | padding: 0rem 5.6rem; 10 | top: 0; 11 | left: 0; 12 | bottom: 0; 13 | right: 0; 14 | z-index: -1; 15 | line-height: 1.2; 16 | animation: hidden 1000ms linear forwards; 17 | 18 | // If you want to set a background image on the hero section, uncomment these with yout custom image 19 | 20 | /* background: url("/src/assets/[your-image].png"); 21 | background-position: center; 22 | background-size: cover; */ 23 | 24 | @include respond(tab-port) { 25 | justify-content: center; 26 | } 27 | @include respond(phone) { 28 | padding: 0rem $default-font-size; 29 | } 30 | 31 | .hero-title { 32 | font-size: 5.6rem; 33 | font-weight: 700; 34 | margin-bottom: 3.2rem; 35 | text-align: left; 36 | span { 37 | margin: 0; 38 | display: inline-block; 39 | } 40 | 41 | @include respond(tab-land) { 42 | font-size: 4rem; 43 | } 44 | @include respond(tab-port) { 45 | font-size: 3.6rem; 46 | text-align: center; 47 | } 48 | @include respond(phone) { 49 | font-size: 3.5rem; 50 | line-height: 1.5; 51 | } 52 | @include respond(phone-xs) { 53 | font-size: 2.8rem; 54 | } 55 | } 56 | 57 | .hero-cta { 58 | display: flex; 59 | 60 | @include respond(tab-port) { 61 | justify-content: center; 62 | } 63 | 64 | & a { 65 | font-size: 2.4rem; 66 | 67 | @include respond(phone) { 68 | font-size: 2rem; 69 | } 70 | } 71 | } 72 | } 73 | .scroll-down-link { 74 | position: absolute; 75 | left: 50%; 76 | bottom: 20px; 77 | transform: translateX(-50%); 78 | } 79 | .scroll-down { 80 | height: 50px; 81 | width: 30px; 82 | border: 2px solid #000000; 83 | border-radius: 50px; 84 | cursor: pointer; 85 | &::before, 86 | &::after { 87 | height: 10px; 88 | width: 10px; 89 | content: ""; 90 | position: absolute; 91 | top: 20%; 92 | left: 50%; 93 | border: 2px solid $secondary-color; 94 | transform: translate(-50%, -100%) rotate(45deg); 95 | border-top: none; 96 | border-left: none; 97 | animation: scroll-down 1s ease-in-out infinite; 98 | } 99 | &::after { 100 | top: 30%; 101 | animation-delay: 0.3s; 102 | } 103 | } 104 | 105 | @keyframes hidden { 106 | 0% { 107 | opacity: 0; 108 | } 109 | 50% { 110 | opacity: 0; 111 | } 112 | 100% { 113 | opacity: 1; 114 | } 115 | } 116 | @keyframes scroll-down { 117 | 0% { 118 | opacity: 0; 119 | } 120 | 30% { 121 | opacity: 1; 122 | } 123 | 60% { 124 | opacity: 1; 125 | } 126 | 100% { 127 | opacity: 0; 128 | top: 90%; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /style/sections/_projects.scss: -------------------------------------------------------------------------------- 1 | #projects { 2 | background-color: $light-white; 3 | color: $dark-blue-text; 4 | margin-top: -15rem; 5 | padding-top: 15rem; 6 | @include respond(tab-land) { 7 | margin-top: 0; 8 | padding-top: 5rem; 9 | } 10 | @include respond(phone) { 11 | padding-bottom: 1px; 12 | } 13 | .project-wrapper { 14 | margin-bottom: 15rem; 15 | @include respond(phone) { 16 | margin-bottom: 0rem; 17 | } 18 | .row { 19 | margin: 0; 20 | margin-bottom: 8rem; 21 | @include respond(phone) { 22 | margin-bottom: 4rem; 23 | } 24 | } 25 | &__text { 26 | width: 100%; 27 | text-align: left; 28 | @include respond(tab-land) { 29 | margin-bottom: 4.8rem; 30 | } 31 | @include respond(phone) { 32 | margin-bottom: 2.5rem; 33 | } 34 | &-title { 35 | font-weight: bold; 36 | margin-bottom: 1.8rem; 37 | font-size: $mid-font-size; 38 | 39 | @include respond(phone) { 40 | font-size: 2rem; 41 | } 42 | } 43 | 44 | &-info { 45 | margin-bottom: 1.5rem; 46 | } 47 | 48 | &-btns { 49 | width: 100%; 50 | display: flex; 51 | align-items: center; 52 | flex-wrap: wrap; 53 | } 54 | } 55 | 56 | &__image { 57 | width: 90%; 58 | margin: 0 auto; 59 | 60 | @include respond(tab-land) { 61 | width: 100%; 62 | margin: 0; 63 | } 64 | & .thumbnail { 65 | border: none; 66 | box-shadow: 8px 8px 9px 7px rgba(174, 174, 192, 0.4), 67 | -5px -5px 15px 7px #ffffff; 68 | 69 | .img-fluid { 70 | width: 100%; 71 | height: auto; 72 | vertical-align: middle; 73 | border-radius: 2px; 74 | } 75 | @include respond(phone) { 76 | box-shadow: none; 77 | border: 1px solid #d2d2d2; 78 | margin-bottom: 3.2rem; 79 | transform: none; 80 | } 81 | } 82 | } 83 | } 84 | } 85 | --------------------------------------------------------------------------------