├── .github └── workflows │ └── gh-pages.yml ├── .gitignore ├── .prettierrc ├── LICENSE.md ├── README.md ├── examples ├── example.gif └── example.png ├── package-lock.json ├── package.json └── src ├── assets ├── favicon.png ├── profile.jpg ├── project.jpg └── resume.pdf ├── data └── scrollRevealConfig.js ├── index.html ├── index.js ├── sass ├── abstracts │ ├── _helpers.scss │ ├── _mixins.scss │ └── _variables.scss ├── base │ ├── _base.scss │ └── _typography.scss ├── components │ └── _buttons.scss ├── layout │ ├── _footer.scss │ └── _sections.scss ├── sections │ ├── _about.scss │ ├── _contact.scss │ ├── _hero.scss │ └── _projects.scss └── vendors │ └── _bootstrap.scss ├── scripts ├── scrollReveal.js └── tiltAnimation.js └── styles.scss /.github/workflows/gh-pages.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | name: Portfolio 3 | # Controls when the action will run. Triggers the workflow on push or pull request 4 | # events but only for the main branch 5 | on: 6 | push: 7 | branches: [ main ] 8 | pull_request: 9 | branches: [ main ] 10 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 11 | jobs: 12 | # This workflow contains a single job called "build" 13 | build: 14 | # The type of runner that the job will run on 15 | runs-on: ubuntu-latest 16 | # Steps represent a sequence of tasks that will be executed as part of the job 17 | steps: 18 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 19 | - name: Check-out repository 20 | uses: actions/checkout@v2 21 | 22 | # Runs a single command using the runners shell 23 | - name: Setup Node.js environment 24 | uses: actions/setup-node@v2.1.2 25 | 26 | # Install project 27 | - name: Install project 28 | run: npm install 29 | 30 | # Build project 31 | - name: Build project 32 | run: npm run-script gh-pages-build 33 | 34 | # Push to Github Pages 35 | - name: Github Pages 36 | uses: crazy-max/ghaction-github-pages@v2.1.3 37 | with: 38 | # Build directory to deploy 39 | build_dir: dist 40 | env: 41 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .parcel-cache -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Jacobo Martínez 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 | # Simplefolio ⚡️ [![GitHub](https://img.shields.io/github/license/cobidev/simplefolio?color=blue)](https://github.com/cobidev/simplefolio/blob/master/LICENSE.md) ![GitHub stars](https://img.shields.io/github/stars/cobidev/simplefolio) ![GitHub forks](https://img.shields.io/github/forks/cobidev/simplefolio) 2 | 3 | ## A minimal portfolio template for Developers! 4 | 5 |

6 | Simplefolio 7 |
8 |

9 | 10 | ## Features 11 | 12 | ⚡️ Modern UI Design + Reveal Animations\ 13 | ⚡️ One Page Layout\ 14 | ⚡️ Styled with Bootstrap v4.3 + Custom SCSS\ 15 | ⚡️ Fully Responsive\ 16 | ⚡️ Valid HTML5 & CSS3\ 17 | ⚡️ Optimized with Parcel\ 18 | ⚡️ Well organized documentation 19 | 20 | To view the demo: **[click here](https://the-simplefolio.netlify.app/)** 21 | 22 | --- 23 | 24 | ## Why do you need a portfolio? ☝️ 25 | 26 | - Professional way to showcase your work 27 | - Increases your visibility and online presence 28 | - Shows you’re more than just a resume 29 | 30 | ## Getting Started 🚀 31 | 32 | These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. 33 | 34 | ### Prerequisites 📋 35 | 36 | You'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [NPM](http://npmjs.com)) installed on your computer. 37 | 38 | ``` 39 | node@v16.4.2 or higher 40 | npm@7.18.1 or higher 41 | git@2.30.1 or higher 42 | ``` 43 | 44 | Also, you can use [Yarn](https://yarnpkg.com/) instead of NPM ☝️ 45 | 46 | ``` 47 | yarn@v1.22.10 or higher 48 | ``` 49 | 50 | --- 51 | 52 | ## How To Use 🔧 53 | 54 | From your command line, first clone Simplefolio: 55 | 56 | ```bash 57 | # Clone the repository 58 | $ git clone https://github.com/cobidev/simplefolio 59 | 60 | # Move into the repository 61 | $ cd simplefolio 62 | 63 | # Remove the current origin repository 64 | $ git remote remove origin 65 | ``` 66 | 67 | After that, you can install the dependencies either using NPM or Yarn. 68 | 69 | Using NPM: Simply run the below commands. 70 | 71 | ```bash 72 | # Install dependencies 73 | $ npm install 74 | 75 | # Start the development server 76 | $ npm start 77 | ``` 78 | 79 | Using Yarn: Be aware of that you'll need to delete the `package-lock.json` file before executing the below commands. 80 | 81 | ```bash 82 | # Install dependencies 83 | $ yarn 84 | 85 | # Start the development server 86 | $ yarn start 87 | ``` 88 | 89 | **NOTE**: 90 | If your run into issues installing the dependencies with NPM, use this below command: 91 | 92 | ```bash 93 | # Install dependencies with all permissions 94 | $ sudo npm install --unsafe-perm=true --allow-root 95 | ``` 96 | 97 | Once your server has started, go to this url `http://localhost:1234/` to see the portfolio locally. It should look like the below screenshot. 98 | 99 |

100 | Simplefolio 101 |

102 | 103 | --- 104 | 105 | ## Template Instructions: 106 | 107 | ### Step 1 - STRUCTURE 108 | 109 | Go to `/src/index.html` and put your information, there are 5 sections: 110 | 111 | ### (1) Hero Section 112 | 113 | - On `.hero-title`, put your custom portfolio title. 114 | - On `.hero-cta`, put your custom button label. 115 | 116 | ```html 117 | 118 |
119 |
120 |

121 | Hi, my name is Your Name 122 |
123 | I'm the Unknown Developer. 124 |

125 |

126 | 127 | Know more 128 | 129 |

130 |
131 |
132 | 133 | ``` 134 | 135 | ### (2) About Section 136 | 137 | - On `` tag, fill the `src` property with your profile picture path, your picture must be located inside `/src/assets/` folder. 138 | - On `

` tag with class name `.about-wrapper__info-text`, include information about you, I recommend to put 2 paragraphs in order to work well and a maximum of 3 paragraphs. 139 | - On last `` tag, include your CV (.pdf) path on `href` property, your resume CV must be located inside `/src/assets/` folder. 140 | 141 | ```html 142 | 143 |

144 |
145 |

About me

146 |
147 |
148 |
149 | Profile Image 157 |
158 |
159 |
160 |
161 |

162 | This is where you can describe about yourself. The more you describe 163 | about yourself, the more chances you can! 164 |

165 |

166 | Extra Information about you! like hobbies and your goals. 167 |

168 | 169 | 175 | View Resume 176 | 177 | 178 |
179 |
180 |
181 |
182 |
183 | 184 | ``` 185 | 186 | ### (3) Projects Section 187 | 188 | - Each project lives inside a `row`. 189 | - On `

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

` tag with `loremp ipsum` text, include your project description. 191 | - On first `` tag, put your project url on `href` property. 192 | - On second `` tag, put your project repository url on `href` property. 193 | 194 | --- 195 | 196 | - Inside `

` tag with class name `.project-wrapper__image`, put your project image url on the `src` of the `` and put again your project url in the `href` property of the `` tag. 197 | - Recommended size for project image (1366 x 767), your project image must be located inside `/src/assets/` folder. 198 | 199 | ```html 200 | 201 |
202 | ... 203 | 204 |
205 |
206 |
207 |

Project Title

208 |
209 |

210 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi 211 | neque, ipsa animi maiores repellendus distinctio aperiam earum dolor 212 | voluptatum consequatur blanditiis inventore debitis fuga numquam 213 | voluptate ex architecto itaque molestiae. 214 |

215 |
216 | 222 | See Live 223 | 224 | 230 | Source Code 231 | 232 |
233 |
234 |
235 |
236 | 237 |
244 | Project Image 249 |
250 | 251 |
252 |
253 |
254 | 255 | ... 256 |
257 | ``` 258 | 259 | ### (4) Contact Section 260 | 261 | - On `

` tag with class name `.contact-wrapper__text`, include some custom call-to-action message. 262 | - On `` tag, put your email address on `href` property. 263 | 264 | ```html 265 | 266 |

267 |
268 |

Contact

269 |
270 |

[Put your call to action here]

271 | Call to Action 278 |
279 |
280 |
281 | 282 | ``` 283 | 284 | ### (5) Footer Section 285 | 286 | - Put your Social Media URL on each `href` attribute of the `` tags. 287 | - If you an additional Social Media account different than Twitter, Linkedin or GitHub, then go to [Font Awesome Icons](https://fontawesome.com/v4.7.0/icons/) and search for the icon's class name you are looking. 288 | - You can delete or add as many `` tags your want. 289 | 290 | ```html 291 | 306 | ``` 307 | 308 | ### Step 2 - STYLES 309 | 310 | Change the color theme of the website - (choose 2 colors to create a gradient) 311 | 312 | Go to `/src/sass/abstracts/_variables.scss` and only change the values for this variables `$main-color` and `$secondary-color` with your prefered HEX color. 313 | If you want to get some gradients inspiration I highly recommend you to check this website [UI Gradient](https://uigradients.com/#BrightVault) 314 | 315 | ```scss 316 | // Default values 317 | $main-color: #02aab0; 318 | $secondary-color: #00cdac; 319 | ``` 320 | 321 | --- 322 | 323 | ## Deployment 📦 324 | 325 | Once you finish your setup. You need to put your website online! 326 | 327 | I highly recommend to use [Netlify](https://netlify.com) because it is super easy. 328 | 329 | ## Others versions 👥 330 | 331 | [Gatsby Simplefolio](https://github.com/cobidev/gatsby-simplefolio) by [Jacobo Martinez](https://github.com/cobidev)\ 332 | [Ember.js Simplefolio](https://github.com/sernadesigns/simplefolio-ember) by [Michael Serna](https://github.com/sernadesigns) 333 | 334 | ## Technologies used 🛠️ 335 | 336 | - [Parcel](https://parceljs.org/) - Bundler 337 | - [Bootstrap 4](https://getbootstrap.com/docs/4.3/getting-started/introduction/) - Frontend component library 338 | - [Sass](https://sass-lang.com/documentation) - CSS extension language 339 | - [ScrollReveal.js](https://scrollrevealjs.org/) - JavaScript library 340 | - [Tilt.js](https://gijsroge.github.io/tilt.js/) - JavaScript tiny parallax library 341 | 342 | ## Authors 343 | 344 | - **Jacobo Martinez** - [https://github.com/cobidev](https://github.com/cobidev) 345 | 346 | ## Status 347 | 348 | [![Netlify Status](https://api.netlify.com/api/v1/badges/3a029bfd-575c-41e5-8249-c864d482c2e5/deploy-status)](https://app.netlify.com/sites/the-simplefolio/deploys) 349 | 350 | ## License 📄 351 | 352 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details 353 | 354 | ## Acknowledgments 🎁 355 | 356 | I was motivated to create this project because I wanted to contribute on something useful for the dev community, thanks to [ZTM Community](https://github.com/zero-to-mastery) and [Andrei](https://github.com/aneagoie) 357 | -------------------------------------------------------------------------------- /examples/example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/simplefolio/9b481b0f0c9609add7d6c75e949159d181000c25/examples/example.gif -------------------------------------------------------------------------------- /examples/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/simplefolio/9b481b0f0c9609add7d6c75e949159d181000c25/examples/example.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simplefolio", 3 | "version": "1.0.1", 4 | "private": "true", 5 | "description": "A clean, beautiful and responsive portfolio template for Developers!", 6 | "source": "src/index.html", 7 | "scripts": { 8 | "start": "parcel", 9 | "build": "parcel build", 10 | "gh-pages-build": "parcel build --public-url ." 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/cobidev/simplefolio" 15 | }, 16 | "keywords": [], 17 | "author": "Jacobo Martinez", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/cobidev/simplefolio/issues" 21 | }, 22 | "homepage": "https://github.com/cobidev/simplefolio#readme", 23 | "devDependencies": { 24 | "@parcel/transformer-sass": "^2.7.0", 25 | "parcel": "^2.7.0", 26 | "prettier": "^2.7.1" 27 | }, 28 | "dependencies": { 29 | "@popperjs/core": "^2.11.6", 30 | "bootstrap": "^5.2.2", 31 | "jquery": "^3.6.1", 32 | "popper.js": "^1.16.1", 33 | "vanilla-tilt": "^1.7.3" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/simplefolio/9b481b0f0c9609add7d6c75e949159d181000c25/src/assets/favicon.png -------------------------------------------------------------------------------- /src/assets/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/simplefolio/9b481b0f0c9609add7d6c75e949159d181000c25/src/assets/profile.jpg -------------------------------------------------------------------------------- /src/assets/project.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/simplefolio/9b481b0f0c9609add7d6c75e949159d181000c25/src/assets/project.jpg -------------------------------------------------------------------------------- /src/assets/resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/simplefolio/9b481b0f0c9609add7d6c75e949159d181000c25/src/assets/resume.pdf -------------------------------------------------------------------------------- /src/data/scrollRevealConfig.js: -------------------------------------------------------------------------------- 1 | export const defaultProps = { 2 | easing: "cubic-bezier(0.5, 0, 0, 1)", 3 | distance: "30px", 4 | duration: 1000, 5 | desktop: true, 6 | mobile: true, 7 | }; 8 | 9 | export const targetElements = [ 10 | { 11 | element: ".section-title", 12 | animation: { 13 | delay: 300, 14 | distance: "0px", 15 | origin: "bottom", 16 | }, 17 | }, 18 | { 19 | element: ".hero-title", 20 | animation: { 21 | delay: 500, 22 | origin: window.innerWidth > 768 ? "left" : "bottom", 23 | }, 24 | }, 25 | { 26 | element: ".hero-cta", 27 | animation: { 28 | delay: 1000, 29 | origin: window.innerWidth > 768 ? "left" : "bottom", 30 | }, 31 | }, 32 | { 33 | element: ".about-wrapper__image", 34 | animation: { 35 | delay: 600, 36 | origin: "bottom", 37 | }, 38 | }, 39 | { 40 | element: ".about-wrapper__info", 41 | animation: { 42 | delay: 1000, 43 | origin: window.innerWidth > 768 ? "left" : "bottom", 44 | }, 45 | }, 46 | { 47 | element: ".project-wrapper__text", 48 | animation: { 49 | delay: 500, 50 | origin: window.innerWidth > 768 ? "left" : "bottom", 51 | }, 52 | }, 53 | { 54 | element: ".project-wrapper__image", 55 | animation: { 56 | delay: 1000, 57 | origin: window.innerWidth > 768 ? "right" : "bottom", 58 | }, 59 | }, 60 | { 61 | element: ".contact-wrapper", 62 | animation: { 63 | delay: 800, 64 | origin: "bottom", 65 | }, 66 | }, 67 | ]; 68 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | [Your name here] | Developer 22 | 23 | 24 | 25 | 26 | 27 | 31 | 32 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 | 46 |
47 |
48 |

49 | Hi, my name is Your Name 50 |
51 | I'm the Unknown Developer. 52 |

53 |

54 | Know more 57 |

58 |
59 |
60 | 61 | 62 | 63 |
64 |
65 |

About me

66 |
67 |
68 |
69 | Profile Image 77 |
78 |
79 |
80 |
81 |

82 | This is where you can describe about yourself. The more you 83 | describe about yourself, the more chances you can! 84 |

85 |

86 | Extra Information about you! like hobbies and your goals. 87 |

88 | 89 | 95 | View Resume 96 | 97 | 98 |
99 |
100 |
101 |
102 |
103 | 104 | 105 | 106 |
107 |
108 |
109 |

Projects

110 | 111 | 112 |
113 |
114 |
115 |

Project Title 0

116 |
117 |

118 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 119 | Excepturi neque, ipsa animi maiores repellendus distinctio 120 | aperiam earum dolor voluptatum consequatur blanditiis 121 | inventore debitis fuga numquam voluptate ex architecto 122 | itaque molestiae. 123 |

124 |
125 | 131 | See Live 132 | 133 | 139 | Source Code 140 | 141 |
142 |
143 |
144 |
145 | 146 |
153 | Project Image 158 |
159 | 160 |
161 |
162 |
163 | 164 | 165 | 166 |
167 |
168 |
169 |

Project Title 1

170 |
171 |

172 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 173 | Excepturi neque, ipsa animi maiores repellendus distinctio 174 | aperiam earum dolor voluptatum consequatur blanditiis 175 | inventore debitis fuga numquam voluptate ex architecto 176 | itaque molestiae. 177 |

178 |
179 | 185 | See Live 186 | 187 | 193 | Source Code 194 | 195 |
196 |
197 |
198 |
199 | 200 |
207 | Project Image 212 |
213 | 214 |
215 |
216 |
217 | 218 | 219 | 220 |
221 |
222 |
223 |

Project Title 2

224 |
225 |

226 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 227 | Excepturi neque, ipsa animi maiores repellendus distinctio 228 | aperiam earum dolor voluptatum consequatur blanditiis 229 | inventore debitis fuga numquam voluptate ex architecto 230 | itaque molestiae. 231 |

232 |
233 | 239 | See Live 240 | 241 | 247 | Source Code 248 | 249 |
250 |
251 |
252 |
253 | 254 |
261 | Project Image 266 |
267 | 268 |
269 |
270 |
271 | 272 |
273 |
274 |
275 | 276 | 277 | 278 |
279 |
280 |

Contact

281 |
282 |

[Put your call to action here]

283 | Call to Action 290 |
291 |
292 |
293 | 294 | 295 | 296 | 348 | 349 | 350 | 351 | 352 | 353 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import initScrollReveal from "./scripts/scrollReveal"; 2 | import initTiltEffect from "./scripts/tiltAnimation"; 3 | import { targetElements, defaultProps } from "./data/scrollRevealConfig"; 4 | 5 | initScrollReveal(targetElements, defaultProps); 6 | initTiltEffect(); 7 | -------------------------------------------------------------------------------- /src/sass/abstracts/_helpers.scss: -------------------------------------------------------------------------------- 1 | // Margins 2 | .mb-8 { 3 | margin-bottom: 8rem !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/sass/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | // MEDIA QUERY MANAGER 2 | /* 3 | 4 | 0 - 600px: Phone 5 | 600px - 900px Table Portrait 6 | 900px - 1200px Table Landscape 7 | [1200px - 1800px] Desktop Normal Styles 8 | 1800px + Big Desktop 9 | 10 | 1em = 16px 11 | 12 | ORDER: Base + Typography > Generar Layout + Grid > Page Layout > Components 13 | 14 | */ 15 | @mixin respond($breakpoint) { 16 | // Phone-xs 17 | @if $breakpoint == phone-xs { 18 | @media (max-width: 20em) { 19 | @content; 20 | } //0 - 320px 21 | } 22 | // Phone 23 | @if $breakpoint == phone { 24 | @media (max-width: 37.5em) { 25 | @content; 26 | } //0 - 600px 27 | } 28 | // Table small 29 | @if $breakpoint == tab-port-sm { 30 | @media (max-width: 48em) { 31 | @content; 32 | } //768px 33 | } 34 | // Table Portrait 35 | @if $breakpoint == tab-port { 36 | @media (max-width: 56.25em) { 37 | @content; 38 | } //900px 39 | } 40 | // Table Landscape 41 | @if $breakpoint == tab-land { 42 | @media (max-width: 75em) { 43 | @content; 44 | } //1200px 45 | } 46 | // Big Desktop 47 | @if $breakpoint == big-desktop { 48 | @media (min-width: 112.5em) { 49 | @content; 50 | } //1800px + 51 | } 52 | } 53 | 54 | // Border White Mixin 55 | @mixin section-borders { 56 | border: 1.5rem solid #fff; 57 | border-top: 0; 58 | border-bottom: 0; 59 | } 60 | 61 | @mixin supportColorForIE11 { 62 | // Fall for text-gradient not supported in IE11 63 | color: $secondary-color; 64 | -webkit-text-fill-color: $secondary-color; // fallback 65 | @supports (-webkit-background-clip: text) or (background-clip: text) { 66 | background-image: linear-gradient( 67 | 135deg, 68 | $primary-color 0%, 69 | $secondary-color 100% 70 | ); 71 | -webkit-background-clip: text; 72 | -webkit-text-fill-color: transparent; 73 | color: transparent; 74 | } 75 | } 76 | 77 | @mixin supportIE11 { 78 | // Provide your basic styles to support IE11 79 | @media screen and (-ms-high-contrast: active), 80 | screen and (-ms-high-contrast: none) { 81 | @content; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/sass/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | // COLORS 2 | $primary-color: #02aab0; 3 | $secondary-color: #00cdac; 4 | 5 | $white-color: #fff; 6 | 7 | $dark-grey: #333333; 8 | $light-grey: #d2d2d2; 9 | 10 | $dark-blue-text: #272341; // For Headings 11 | 12 | // FONT SIZE 13 | $default-font-size: 1.6rem; 14 | $big-font-size: 4rem; 15 | $mid-font-size: 2.5rem; 16 | -------------------------------------------------------------------------------- /src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | 4 | &.sr .load-hidden { 5 | visibility: hidden; 6 | } 7 | } 8 | 9 | body { 10 | font-family: "Montserrat", sans-serif; 11 | text-align: center; 12 | } 13 | -------------------------------------------------------------------------------- /src/sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); 2 | 3 | h1 { 4 | font-weight: 700; 5 | } 6 | 7 | p, 8 | a { 9 | font-family: "Montserrat", sans-serif; 10 | font-size: $default-font-size; 11 | } 12 | 13 | a, 14 | a:link, 15 | a:hover, 16 | a:visited, 17 | a:active { 18 | text-decoration: none; 19 | } 20 | 21 | a:hover { 22 | transition: all 0.3s ease-in-out; 23 | } 24 | 25 | .section-title { 26 | margin: 0px; 27 | margin-bottom: 4.5rem; 28 | font-size: $big-font-size; 29 | font-weight: bold; 30 | text-transform: uppercase; 31 | 32 | @include respond(phone) { 33 | font-size: 2.8rem; 34 | } 35 | } 36 | 37 | .dark-blue-text { 38 | color: $dark-blue-text !important; 39 | } 40 | 41 | .text-color-main { 42 | @include supportColorForIE11(); 43 | 44 | // Responsive text purple style 45 | @include respond(phone) { 46 | background-image: none; 47 | -webkit-text-fill-color: $secondary-color; 48 | } 49 | 50 | &:hover { 51 | transform: translateX(2px); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/sass/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 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.6s; 10 | 11 | &::after { 12 | content: ""; 13 | display: block; 14 | position: absolute; 15 | width: 0px; 16 | height: 100%; 17 | left: 0; 18 | bottom: 0; 19 | z-index: -1; 20 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.3s; 21 | } 22 | } 23 | 24 | /* Hero Style */ 25 | .cta-btn--hero { 26 | @include supportColorForIE11(); 27 | border: 2px solid transparent; 28 | border-image: linear-gradient( 29 | 135deg, 30 | $primary-color 0%, 31 | $secondary-color 100% 32 | ); 33 | border-image-slice: 1; 34 | @include supportIE11() { 35 | color: $secondary-color !important; 36 | &:hover { 37 | color: $white-color !important; 38 | } 39 | } 40 | 41 | @include respond(phone) { 42 | background-image: none; 43 | border: 2px solid $secondary-color; 44 | -webkit-text-fill-color: $secondary-color; 45 | } 46 | 47 | &::after { 48 | background-image: linear-gradient( 49 | 135deg, 50 | $primary-color 0%, 51 | $secondary-color 100% 52 | ); 53 | 54 | @include respond(phone) { 55 | background-image: none; 56 | } 57 | } 58 | 59 | &:hover { 60 | -webkit-text-fill-color: $white-color; 61 | text-decoration: none; 62 | 63 | @include respond(phone) { 64 | -webkit-text-fill-color: $secondary-color; 65 | } 66 | 67 | &::after { 68 | width: 100%; 69 | } 70 | } 71 | } 72 | 73 | /* Resume Style */ 74 | .cta-btn--resume { 75 | color: $white-color; 76 | border: 2px solid $white-color; 77 | 78 | &::after { 79 | background: $white-color; 80 | } 81 | 82 | &:hover { 83 | color: $secondary-color; 84 | text-decoration: none; 85 | 86 | &::after { 87 | width: 100%; 88 | } 89 | } 90 | } 91 | 92 | /* Arrow Button */ 93 | .up i { 94 | color: #272727; 95 | } 96 | -------------------------------------------------------------------------------- /src/sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: $dark-grey; 3 | color: $white-color; 4 | padding: 4.8rem 0; 5 | 6 | @include respond(phone) { 7 | border: 0px; 8 | } 9 | 10 | &__text { 11 | color: darken($white-color, 50%); 12 | font-size: 1.3rem; 13 | 14 | a { 15 | color: darken($white-color, 50%); 16 | font-size: 1.3rem; 17 | transition: all 0.4s; 18 | display: inline-block; 19 | background-color: $dark-grey; 20 | 21 | &:hover, 22 | &:active { 23 | color: $primary-color; 24 | -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); 25 | box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); 26 | } 27 | } 28 | } 29 | 30 | & hr { 31 | margin: 1rem auto; 32 | border: 0; 33 | width: 50%; 34 | border-top: 2px solid grey; 35 | } 36 | } 37 | 38 | .social-links { 39 | display: flex; 40 | flex-direction: row; 41 | justify-content: center; 42 | 43 | a { 44 | display: flex; 45 | flex-direction: column; 46 | justify-content: center; 47 | color: $white-color; 48 | font-size: 3rem; 49 | width: 5rem; 50 | height: 5rem; 51 | margin: $default-font-size $default-font-size; 52 | transition: all 0.2s ease-in; 53 | 54 | &:hover { 55 | transform: translateY(-2px); 56 | } 57 | } 58 | } 59 | 60 | .back-to-top i { 61 | color: $white-color; 62 | margin: 1rem 0 $default-font-size; 63 | transition: all 0.2s ease-in; 64 | 65 | &:hover { 66 | transform: translateY(-2px); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/sass/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 | -------------------------------------------------------------------------------- /src/sass/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 | border-top: 0px; 11 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 12 | clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 13 | padding-bottom: 10%; 14 | 15 | @include respond(tab-land) { 16 | height: 100%; 17 | -webkit-clip-path: none; 18 | clip-path: none; 19 | } 20 | 21 | .about-wrapper { 22 | @include respond(phone) { 23 | padding-bottom: 5rem; 24 | } 25 | 26 | &__image { 27 | display: flex; 28 | height: 100%; 29 | align-items: center; 30 | justify-content: center; 31 | 32 | @include respond(tab-land) { 33 | height: 100%; 34 | } 35 | @include respond(tab-port-sm) { 36 | padding-bottom: 6.4rem; 37 | } 38 | } 39 | 40 | &__info { 41 | display: flex; 42 | height: 100%; 43 | justify-content: center; 44 | flex-direction: column; 45 | 46 | @include respond(tab-port-sm) { 47 | align-items: center; 48 | } 49 | 50 | &-text { 51 | text-align: left; 52 | 53 | @include respond(tab-port) { 54 | text-align: left; 55 | } 56 | @include respond(tab-port-sm) { 57 | text-align: center; 58 | } 59 | 60 | &--important { 61 | background: darken($secondary-color, 1%); 62 | display: inline-block; 63 | font-style: italic; 64 | padding: 0 0.3rem; 65 | margin: 0.3rem 0; 66 | line-height: 1.6; 67 | 68 | @include respond(phone) { 69 | display: inline; 70 | margin: 0; 71 | padding: 0; 72 | background: transparent; 73 | font-style: normal; 74 | } 75 | } 76 | } 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/sass/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: -10rem; 11 | margin-bottom: -1px; 12 | color: $white-color; 13 | 14 | @include respond(tab-land) { 15 | padding: 10rem 0; 16 | clip-path: none; 17 | margin-top: 0; 18 | -webkit-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 | @include respond(phone) { 35 | font-size: 2rem; 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/sass/sections/_hero.scss: -------------------------------------------------------------------------------- 1 | #hero { 2 | min-height: 100vh; 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | border-bottom: 0px; 7 | background: $white-color; 8 | font-weight: 400; 9 | color: $dark-blue-text; 10 | padding: 0rem 5.6rem; 11 | margin-bottom: 0; 12 | top: 0; 13 | left: 0; 14 | bottom: 0; 15 | right: 0; 16 | z-index: -1; 17 | 18 | // Set position sticky so the jumbotron stays fixed while you scroll. 19 | // position: sticky; 20 | 21 | // If you want to set a background image on the hero section, uncomment these with your custom image 22 | 23 | /* background: url("/src/assets/[your-image].png"); 24 | background-position: center; 25 | background-size: cover; */ 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 | 37 | @include respond(tab-land) { 38 | font-size: 4rem; 39 | } 40 | @include respond(tab-port) { 41 | font-size: 3.6rem; 42 | text-align: center; 43 | } 44 | @include respond(phone) { 45 | font-size: 3.5rem; 46 | line-height: 1.5; 47 | } 48 | @include respond(phone-xs) { 49 | font-size: 2.8rem; 50 | } 51 | } 52 | 53 | .hero-cta { 54 | display: flex; 55 | 56 | @include respond(tab-port) { 57 | justify-content: center; 58 | } 59 | 60 | & a { 61 | font-size: 2.4rem; 62 | 63 | @include respond(phone) { 64 | font-size: 2rem; 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/sass/sections/_projects.scss: -------------------------------------------------------------------------------- 1 | #projects { 2 | background-color: $white-color; 3 | color: $dark-blue-text; 4 | margin-top: -10rem; 5 | padding-top: 15rem; 6 | 7 | @include respond(tab-land) { 8 | margin-top: 0; 9 | padding-top: 5rem; 10 | } 11 | 12 | .project-wrapper { 13 | margin-bottom: 15rem; 14 | 15 | @include respond(phone) { 16 | margin-bottom: 0rem; 17 | } 18 | 19 | .row { 20 | margin-bottom: 8rem; 21 | 22 | @include respond(phone) { 23 | margin-bottom: 4rem; 24 | } 25 | } 26 | 27 | &__text { 28 | text-align: left; 29 | 30 | @include respond(phone) { 31 | margin-bottom: 2.5rem !important; 32 | } 33 | @include respond(tab-land) { 34 | margin-bottom: 4.8rem; 35 | } 36 | 37 | &-title { 38 | font-weight: bold; 39 | margin-bottom: 1.8rem; 40 | font-size: $mid-font-size; 41 | 42 | @include respond(phone) { 43 | font-size: 2rem; 44 | } 45 | } 46 | 47 | & p > a { 48 | color: $secondary-color; 49 | } 50 | } 51 | 52 | &__image { 53 | width: 90%; 54 | margin: 0 auto; 55 | 56 | @include respond(tab-land) { 57 | width: 100%; 58 | margin: 0; 59 | } 60 | 61 | & .thumbnail { 62 | border: none; 63 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 64 | transition: all 0.2s ease-out; 65 | box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05); 66 | transition: 0.5s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 67 | 0.5s box-shadow, 68 | 0.5s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12); 69 | 70 | @include respond(phone) { 71 | border: 1px solid $light-grey; 72 | box-shadow: none; 73 | margin-bottom: 3.2rem; 74 | } 75 | } 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/sass/vendors/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "~bootstrap/scss/bootstrap"; 2 | -------------------------------------------------------------------------------- /src/scripts/scrollReveal.js: -------------------------------------------------------------------------------- 1 | export default function initScrollReveal(targetElements, defaultProps) { 2 | if (!targetElements.length) return; 3 | 4 | ScrollReveal({ reset: false }); 5 | 6 | targetElements.forEach(({ element, animation }) => { 7 | ScrollReveal().reveal(element, Object.assign({}, defaultProps, animation)); 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /src/scripts/tiltAnimation.js: -------------------------------------------------------------------------------- 1 | import VanillaTilt from "vanilla-tilt"; 2 | 3 | export default function initTiltAnimation() { 4 | const elements = document.querySelectorAll(".js-tilt"); 5 | VanillaTilt.init(elements); 6 | } 7 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | @import "./sass/vendors/bootstrap.scss"; 2 | 3 | @import "./sass/abstracts/mixins"; 4 | @import "./sass/abstracts/variables"; 5 | @import "./sass/abstracts/helpers"; 6 | 7 | @import "./sass/base/base"; 8 | @import "./sass/base/typography"; 9 | 10 | @import "./sass/components/buttons"; 11 | 12 | @import "./sass/layout/footer"; 13 | @import "./sass/layout/sections"; 14 | 15 | @import "./sass/sections/about"; 16 | @import "./sass/sections/contact"; 17 | @import "./sass/sections/hero"; 18 | @import "./sass/sections/projects"; 19 | --------------------------------------------------------------------------------