├── README.md ├── css └── index.css ├── images ├── bg.jpg ├── john-smith.jpg ├── project-1.jpg ├── project-2.jpg ├── project-3.jpg ├── project-4.jpg ├── project-5.jpg ├── project-6.jpg ├── project-7.jpg ├── project-8.jpg └── project-9.jpg ├── index.html ├── script.js └── scss ├── _media.scss └── index.scss /README.md: -------------------------------------------------------------------------------- 1 | # Personal Portfolio 2 | 3 | ###### Using SCSS and JS 4 | 5 | --- 6 | 7 | ### Author Links 8 | 9 | 👋 Hello, I'm Ikram Ul Haq - Web Developer & Coder 10 | 11 | ☕ [Buy Me A Coffee](https://www.buymeacoffee.com/ikramdev) 12 | 13 | 🚀 Follow Me: 14 | 15 | - [Twitter](https://twitter.com/ikramdev) 16 | - [LinkedIn](https://www.linkedin.com/in/ikramdev/) 17 | - [StackOverflow](https://stackoverflow.com/users/13859212/ikram-ul-haq) 18 | 19 | --- 20 | 21 | ### 10 Mega Projects created using SCSS, JS and different technologies 22 | 23 | > [Apple Ecommerce](https://apple-ecommerce-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/5f30c15c-5dd9-4616-89d9-e25dca0bd360/deploy-status)](https://app.netlify.com/sites/apple-ecommerce-mega/deploys) 24 | 25 | > [Architect Website](https://architect-website-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/0ad00d76-fcf0-476c-a4c5-bb2487b8a1f0/deploy-status)](https://app.netlify.com/sites/architect-website-mega/deploys) 26 | 27 | > [Business Agency](https://business-agency-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/659f497b-c077-4065-9976-4d7b3636937c/deploy-status)](https://app.netlify.com/sites/business-agency-mega/deploys) 28 | 29 | > [Classic Cars](https://classic-cars-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/cecf6002-ae40-4622-a9c7-4bc3fa99b0cb/deploy-status)](https://app.netlify.com/sites/classic-cars-mega/deploys) 30 | 31 | > [Creative Design](https://creative-design-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/bb63baae-5dc7-44e8-bf50-b3860a5eb0d0/deploy-status)](https://app.netlify.com/sites/creative-design-mega/deploys) 32 | 33 | > [Foods Variety](https://foods-variety-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/8131497c-8178-426e-b0b3-b1d85214b267/deploy-status)](https://app.netlify.com/sites/foods-variety-mega/deploys) 34 | 35 | > [Paypal Clone](https://paypal-clone-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/4986e30a-27a6-4950-8b29-12faaf8b1960/deploy-status)](https://app.netlify.com/sites/paypal-clone-mega/deploys) 36 | 37 | > [Personal Portfolio](https://personal-portfolio-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/cc508b19-ef2d-4e68-9afd-e502262650cc/deploy-status)](https://app.netlify.com/sites/personal-portfolio-mega/deploys) 38 | 39 | > [The Road](https://the-road-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/59783552-388e-4247-819d-0f05a3a427d8/deploy-status)](https://app.netlify.com/sites/the-road-mega/deploys) 40 | 41 | > [Wine House](https://wine-house-mega.netlify.app/)   [![Netlify Status](https://api.netlify.com/api/v1/badges/6eec4b86-80c9-462b-9c3b-f880a2477011/deploy-status)](https://app.netlify.com/sites/wine-house-mega/deploys) 42 | 43 | --- 44 | 45 | ### 🎓 Academic Honesty 46 | 47 | **DO NOT COPY FOR AN ASSIGNMENT** - Avoid plagiargism and adhere to the spirit of this [Academic Honesty Policy](https://www.freecodecamp.org/news/academic-honesty-policy/). 48 | 49 | --- 50 | 51 | ### Copyright 52 | 53 | - © 2022 Ikram Ul Haq - Images and text may have copyright issues 54 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | outline: none; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | list-style-type: none; 10 | font-family: "Jost", sans-serif; 11 | font-weight: 400; 12 | text-transform: capitalize; } 13 | 14 | html { 15 | font-size: 62.5%; 16 | scroll-behavior: smooth; } 17 | 18 | .center, .header, .navbar, .projects-wrapper, .contact-form, .footer { 19 | display: -webkit-box; 20 | display: -ms-flexbox; 21 | display: flex; 22 | -webkit-box-pack: center; 23 | -ms-flex-pack: center; 24 | justify-content: center; 25 | -webkit-box-align: center; 26 | -ms-flex-align: center; 27 | align-items: center; } 28 | 29 | .sticky { 30 | position: fixed; 31 | top: 0; } 32 | 33 | .section-heading { 34 | font-size: 5rem; 35 | color: #333; 36 | text-transform: uppercase; 37 | letter-spacing: 0.5rem; 38 | margin-bottom: 8rem; 39 | border-bottom: 0.3rem solid #333; 40 | text-shadow: 0.2rem 0.2rem 0.5rem #555; } 41 | 42 | .header { 43 | width: 100%; 44 | height: 100vh; 45 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.3))), url("../images/bg.jpg") center no-repeat; 46 | background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3)), url("../images/bg.jpg") center no-repeat; 47 | background-size: cover; 48 | -webkit-box-orient: vertical; 49 | -webkit-box-direction: normal; 50 | -ms-flex-direction: column; 51 | flex-direction: column; } 52 | .header-heading { 53 | font-size: 6rem; 54 | font-weight: 700; 55 | color: #fff; 56 | background-color: #e41c6f; 57 | padding: 0 3rem; 58 | margin-bottom: 5rem; 59 | text-transform: uppercase; 60 | letter-spacing: 1rem; 61 | border-bottom: 0.3rem solid #fff; 62 | text-shadow: 0.2rem 0.2rem 1rem #555; 63 | -webkit-transform: skew(-10deg); 64 | transform: skew(-10deg); } 65 | .header-person-img { 66 | width: 25rem; 67 | height: 25rem; 68 | -o-object-fit: cover; 69 | object-fit: cover; 70 | border-radius: 50%; 71 | border: 0.7rem dotted #e41c6f; 72 | background-color: rgba(255, 255, 255, 0.7); 73 | padding: 0.5rem; 74 | opacity: 0.9; } 75 | .header-person-name { 76 | font-size: 2rem; 77 | color: #fff; 78 | background-color: #e41c6f; 79 | margin: 5rem 0; 80 | padding: 0.5rem 3rem; 81 | letter-spacing: 0.3rem; 82 | -webkit-transform: skew(-10deg); 83 | transform: skew(-10deg); } 84 | .header-btn { 85 | font-size: 1.7rem; 86 | font-weight: 700; 87 | color: #333; 88 | background-color: #fff; 89 | border: 0.3rem solid #333; 90 | padding: 0.5rem 1rem; 91 | text-transform: uppercase; 92 | letter-spacing: 0.3rem; } 93 | 94 | .navbar { 95 | width: 100%; 96 | height: 4rem; 97 | background-color: #e41c6f; 98 | -webkit-box-shadow: 0.2rem 0.2rem 0.5rem #555; 99 | box-shadow: 0.2rem 0.2rem 0.5rem #555; 100 | z-index: 100; } 101 | .navbar-link { 102 | font-size: 1.7rem; 103 | font-weight: 600; 104 | color: #333; 105 | margin: 0 3rem; 106 | letter-spacing: 0.3rem; 107 | text-transform: uppercase; 108 | position: relative; 109 | -webkit-transition: color 0.2s; 110 | transition: color 0.2s; } 111 | .navbar-link.active { 112 | color: #fff; } 113 | .navbar-link.active::before { 114 | width: 130%; } 115 | .navbar-link::before { 116 | content: ""; 117 | width: 0; 118 | height: 0.2rem; 119 | background-color: #fff; 120 | position: absolute; 121 | right: -15%; 122 | bottom: -0.3rem; 123 | -webkit-transition: width 0.2s; 124 | transition: width 0.2s; } 125 | .navbar-link:hover { 126 | color: #fff; } 127 | .navbar-link:hover::before { 128 | width: 130%; } 129 | 130 | .about { 131 | width: 100%; 132 | height: 100%; 133 | padding: 8rem 0 0; 134 | background-color: #fff; 135 | display: -webkit-box; 136 | display: -ms-flexbox; 137 | display: flex; 138 | -webkit-box-orient: vertical; 139 | -webkit-box-direction: normal; 140 | -ms-flex-direction: column; 141 | flex-direction: column; 142 | -webkit-box-align: center; 143 | -ms-flex-align: center; 144 | align-items: center; } 145 | .about .progress-bars-wrapper { 146 | margin-bottom: 5rem; } 147 | .about .progress-bars-wrapper .progress-bar { 148 | width: 60rem; 149 | height: 3rem; 150 | background-color: #ccc; 151 | margin: 1.5rem 0; 152 | border-radius: 0.3rem; 153 | -webkit-box-shadow: 0.2rem 0.2rem 1rem #555; 154 | box-shadow: 0.2rem 0.2rem 1rem #555; 155 | position: relative; } 156 | .about .progress-bars-wrapper .progress-bar-text { 157 | position: absolute; 158 | left: 1rem; 159 | font-size: 1.5rem; 160 | color: #fff; } 161 | .about .progress-bars-wrapper .progress-bar-text span { 162 | margin: 0 0.5rem; 163 | font-size: 1.8rem; 164 | font-weight: 700; } 165 | .about .progress-bars-wrapper .progress-bar-percent { 166 | width: 0; 167 | height: 100%; 168 | background-color: #e41c6f; 169 | border-radius: 0.3rem; 170 | -webkit-transition: width 0.5s 0.2s ease-in-out; 171 | transition: width 0.5s 0.2s ease-in-out; } 172 | .about .services { 173 | width: 100%; 174 | height: 30vh; 175 | display: -webkit-box; 176 | display: -ms-flexbox; 177 | display: flex; 178 | -webkit-box-pack: space-evenly; 179 | -ms-flex-pack: space-evenly; 180 | justify-content: space-evenly; 181 | -webkit-box-align: center; 182 | -ms-flex-align: center; 183 | align-items: center; } 184 | .about .services .service { 185 | text-align: center; } 186 | .about .services .service:first-child, .about .services .service:last-child { 187 | -ms-flex-item-align: start; 188 | align-self: flex-start; } 189 | .about .services .service i { 190 | font-size: 10rem; 191 | color: #888; 192 | margin-bottom: 2rem; 193 | text-shadow: 0.1rem 0.1rem 0.5rem #555; } 194 | .about .services .service h2 { 195 | font-size: 2rem; 196 | color: #fff; 197 | background-color: #777; 198 | width: 25rem; 199 | letter-spacing: 0.3rem; 200 | -webkit-transform: skew(-10deg); 201 | transform: skew(-10deg); 202 | -webkit-box-shadow: 0.2rem 0.2rem 0.5rem #555; 203 | box-shadow: 0.2rem 0.2rem 0.5rem #555; } 204 | 205 | .projects { 206 | width: 100%; 207 | height: 100%; 208 | padding: 8rem 0 8rem; 209 | background-color: #eef; 210 | display: -webkit-box; 211 | display: -ms-flexbox; 212 | display: flex; 213 | -webkit-box-orient: vertical; 214 | -webkit-box-direction: normal; 215 | -ms-flex-direction: column; 216 | flex-direction: column; 217 | -webkit-box-align: center; 218 | -ms-flex-align: center; 219 | align-items: center; } 220 | .projects-wrapper { 221 | width: 90%; 222 | -ms-flex-wrap: wrap; 223 | flex-wrap: wrap; } 224 | .projects-wrapper .project { 225 | display: -webkit-box; 226 | display: -ms-flexbox; 227 | display: flex; 228 | -webkit-box-orient: vertical; 229 | -webkit-box-direction: normal; 230 | -ms-flex-direction: column; 231 | flex-direction: column; 232 | -webkit-box-pack: center; 233 | -ms-flex-pack: center; 234 | justify-content: center; 235 | -webkit-box-align: center; 236 | -ms-flex-align: center; 237 | align-items: center; 238 | margin: 1rem; 239 | background-color: #fff; 240 | -webkit-box-shadow: 0.3rem 0.3rem 0.5rem #777; 241 | box-shadow: 0.3rem 0.3rem 0.5rem #777; 242 | position: relative; 243 | overflow: hidden; 244 | -webkit-transition: -webkit-box-shadow 0.5s; 245 | transition: -webkit-box-shadow 0.5s; 246 | transition: box-shadow 0.5s; 247 | transition: box-shadow 0.5s, -webkit-box-shadow 0.5s; } 248 | .projects-wrapper .project:hover { 249 | -webkit-box-shadow: 1rem 1rem 1rem #777; 250 | box-shadow: 1rem 1rem 1rem #777; } 251 | .projects-wrapper .project:hover .project-content { 252 | top: 5rem; 253 | -webkit-transition: top 0.3s 0.3s; 254 | transition: top 0.3s 0.3s; } 255 | .projects-wrapper .project:hover .project-link { 256 | bottom: 5rem; 257 | -webkit-transition: bottom 0.3s 0.3s; 258 | transition: bottom 0.3s 0.3s; } 259 | .projects-wrapper .project:hover .project-img { 260 | opacity: 0.2; } 261 | .projects-wrapper .project-content { 262 | text-align: center; 263 | letter-spacing: 0.1rem; 264 | position: absolute; 265 | top: -10rem; 266 | -webkit-transition: top 0.3s; 267 | transition: top 0.3s; 268 | z-index: 5; } 269 | .projects-wrapper .project-content .project-title { 270 | font-size: 3rem; 271 | font-weight: 700; 272 | color: #333; } 273 | .projects-wrapper .project-content .project-technologies { 274 | font-size: 1.8rem; 275 | color: #e41c6f; } 276 | .projects-wrapper .project-img { 277 | width: 40rem; 278 | -webkit-transition: opacity 0.2s; 279 | transition: opacity 0.2s; } 280 | .projects-wrapper .project-link { 281 | font-size: 2rem; 282 | font-weight: 500; 283 | color: #333; 284 | letter-spacing: 0.1rem; 285 | border: 0.3rem solid #e41c6f; 286 | padding: 0 1rem; 287 | background-color: #fff; 288 | position: absolute; 289 | bottom: -5rem; 290 | -webkit-transition: bottom 0.3s; 291 | transition: bottom 0.3s; } 292 | .projects-wrapper .project-link:hover { 293 | background-color: #e41c6f; 294 | color: #fff; } 295 | 296 | .contact { 297 | width: 100%; 298 | height: 70vh; 299 | background-color: #333; 300 | display: -webkit-box; 301 | display: -ms-flexbox; 302 | display: flex; 303 | -webkit-box-orient: vertical; 304 | -webkit-box-direction: normal; 305 | -ms-flex-direction: column; 306 | flex-direction: column; 307 | -webkit-box-align: center; 308 | -ms-flex-align: center; 309 | align-items: center; 310 | -webkit-box-pack: space-evenly; 311 | -ms-flex-pack: space-evenly; 312 | justify-content: space-evenly; } 313 | .contact-heading { 314 | color: #fff; 315 | -webkit-box-shadow: none; 316 | box-shadow: none; 317 | border-color: #fff; 318 | margin-bottom: 2rem; } 319 | .contact-form { 320 | -webkit-box-orient: vertical; 321 | -webkit-box-direction: normal; 322 | -ms-flex-direction: column; 323 | flex-direction: column; 324 | width: 50rem; } 325 | .contact-form input, 326 | .contact-form textarea { 327 | width: 100%; 328 | padding: 0.5rem; 329 | margin: 0.5rem 0; 330 | background-color: #eef; 331 | font-size: 1.5rem; 332 | border: 0.2rem solid #e41c6f; 333 | color: #555; 334 | text-transform: lowercase; } 335 | .contact-form textarea { 336 | resize: none; 337 | height: 10rem; } 338 | .contact-form input.contact-form-btn { 339 | background-color: #e41c6f; 340 | color: #fff; 341 | text-transform: uppercase; 342 | letter-spacing: 1rem; 343 | cursor: pointer; } 344 | 345 | .footer { 346 | -webkit-box-orient: vertical; 347 | -webkit-box-direction: normal; 348 | -ms-flex-direction: column; 349 | flex-direction: column; 350 | width: 100%; 351 | height: 30vh; 352 | background-color: #222; } 353 | .footer .social-media-icons { 354 | margin-bottom: 5rem; } 355 | .footer .social-media-icons .social-media-link { 356 | margin: 0 2rem; 357 | padding: 0.7rem; 358 | background-color: #e41c6f; 359 | border-radius: 0.5rem; 360 | display: inline-block; } 361 | .footer .social-media-icons .social-media-link i { 362 | font-size: 3rem; 363 | color: #fff; } 364 | .footer .copyright { 365 | color: #aaa; 366 | font-size: 2rem; 367 | letter-spacing: 0.2rem; 368 | font-weight: 300; 369 | text-align: center; } 370 | 371 | @media (max-width: 1200px) { 372 | .about .services { 373 | height: auto; 374 | -ms-flex-wrap: wrap; 375 | flex-wrap: wrap; } 376 | .about .services .service { 377 | margin: 3rem 2rem; } } 378 | 379 | @media (max-width: 800px) { 380 | .header .header-heading { 381 | font-size: 4rem; } 382 | .about .progress-bars-wrapper .progress-bar { 383 | width: 50rem; } } 384 | 385 | @media (max-width: 600px) { 386 | .header .header-heading { 387 | font-size: 3rem; } 388 | .navbar .navbar-link { 389 | margin: 0 2rem; 390 | font-size: 1.5rem; } 391 | .about { 392 | padding: 8rem 10rem 0; } 393 | .about .progress-bars-wrapper .progress-bar { 394 | width: 45rem; } 395 | .contact .contact-form { 396 | width: 40rem; } 397 | .contact .copyright { 398 | width: 70%; } } 399 | 400 | @media (max-width: 500px) { 401 | html { 402 | font-size: 55%; } } 403 | 404 | @media (max-width: 450px) { 405 | html { 406 | font-size: 45%; } 407 | .header .header-heading { 408 | font-size: 2.5rem; } 409 | .navbar .navbar-link { 410 | margin: 0 1.5rem; } 411 | .about-heading { 412 | text-align: center; } 413 | .progress .progress-bars-wrapper .progress-bar { 414 | width: 40rem; } } 415 | -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/bg.jpg -------------------------------------------------------------------------------- /images/john-smith.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/john-smith.jpg -------------------------------------------------------------------------------- /images/project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-1.jpg -------------------------------------------------------------------------------- /images/project-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-2.jpg -------------------------------------------------------------------------------- /images/project-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-3.jpg -------------------------------------------------------------------------------- /images/project-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-4.jpg -------------------------------------------------------------------------------- /images/project-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-5.jpg -------------------------------------------------------------------------------- /images/project-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-6.jpg -------------------------------------------------------------------------------- /images/project-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-7.jpg -------------------------------------------------------------------------------- /images/project-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-8.jpg -------------------------------------------------------------------------------- /images/project-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ikramdeveloper/personal-portfolio-html-scss/0cc31b8e5999287cfb2eedab2653d20ab7d21714/images/project-9.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | Personal Portfolio 15 | 16 | 17 |
18 | 19 |
20 |

Web Developer

21 | john smith 26 |

John Smith

27 | Projects 28 |
29 | 30 | 31 | 32 | 38 | 39 | 40 | 41 |
42 |

About Me

43 |
44 |
45 |

46 | HTML 47 | 97% 48 |

49 |
50 |
51 | 52 |
53 |

54 | JavaScript 55 | 91% 56 |

57 |
58 |
59 | 60 |
61 |

62 | SASS 63 | 87% 64 |

65 |
66 |
67 | 68 |
69 |

70 | Ruby 71 | 90% 72 |

73 |
74 |
75 | 76 |
77 |

78 | Kotlin 79 | 77% 80 |

81 |
82 |
83 | 84 |
85 |

86 | MySQL 87 | 90% 88 |

89 |
90 |
91 |
92 |
93 |
94 | 95 |

Creative

96 |
97 | 98 |
99 | 100 |

Maintenance

101 |
102 | 103 |
104 | 105 |

Fast

106 |
107 | 108 |
109 | 110 |

Dynamic

111 |
112 |
113 |
114 | 115 | 116 | 117 |
118 |

My Projects

119 |
120 |
121 |
122 |

architect website

123 |

HTML / CSS / JS

124 |
125 | architect website 130 | Go to video 131 |
132 | 133 |
134 |
135 |

budget app

136 |

React JS

137 |
138 | budget app 143 | Go to video 144 |
145 | 146 |
147 |
148 |

wine house

149 |

Angular JS

150 |
151 | wine house 156 | Go to video 157 |
158 | 159 |
160 |
161 |

task manager

162 |

React JS

163 |
164 | task manager 169 | Go to video 170 |
171 | 172 |
173 |
174 |

the road

175 |

Vue JS / Firebase

176 |
177 | the road 182 | Go to video 183 |
184 | 185 |
186 |
187 |

food recipe app

188 |

React JS / Strapi

189 |
190 | food recipe app 195 | Go to video 196 |
197 | 198 |
199 |
200 |

slideshow

201 |

CSS / Swiper JS

202 |
203 | slideshow 208 | Go to video 209 |
210 | 211 |
212 |
213 |

hamburger menu

214 |

HTML / CSS / JS

215 |
216 | hamburger menu 221 | Go to video 222 |
223 | 224 |
225 |
226 |

CSS grid system

227 |

HTML / CSS Grid / JS

228 |
229 | CSS grid system 234 | Go to video 235 |
236 |
237 |
238 | 239 | 240 | 241 |
242 |

Contact Me

243 |
244 | 245 | 246 | 247 | 248 |
249 |
250 | 251 | 252 | 253 | 270 | 271 |
272 | 273 | 274 | 275 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const navbar = document.querySelector(".navbar"); 2 | const navbarOffsetTop = navbar.offsetTop; 3 | const sections = document.querySelectorAll("section, header"); 4 | const navbarLinks = document.querySelectorAll(".navbar-link"); 5 | const progress = document.querySelector(".progress-bars-wrapper"); 6 | const progressPercents = document.querySelectorAll(".progress-bar-percent"); 7 | 8 | const progressBarPercents = [ 9 | ...document.querySelectorAll(".progress-bar-text span"), 10 | ]; 11 | 12 | window.addEventListener("scroll", () => { 13 | initApp(); 14 | }); 15 | 16 | const initApp = () => { 17 | if (window.pageYOffset >= navbarOffsetTop) { 18 | navbar.classList.add("sticky"); 19 | } else { 20 | navbar.classList.remove("sticky"); 21 | } 22 | 23 | sections.forEach((section, index) => { 24 | if (window.pageYOffset >= section.offsetTop - 50) { 25 | navbarLinks.forEach((link) => { 26 | link.classList.remove("active"); 27 | }); 28 | navbarLinks[index].classList.add("active"); 29 | } 30 | }); 31 | 32 | if (window.pageYOffset + window.innerHeight >= progress.offsetTop) { 33 | progressPercents.forEach((ele, index) => { 34 | ele.style.width = `${Number(progressBarPercents[index].textContent)}%`; 35 | }); 36 | } 37 | }; 38 | 39 | initApp(); 40 | 41 | // window.addEventListener("resize", () => { 42 | // window.location.reload(); 43 | // }); 44 | -------------------------------------------------------------------------------- /scss/_media.scss: -------------------------------------------------------------------------------- 1 | @media (max-width: 1200px) { 2 | .about { 3 | .services { 4 | height: auto; 5 | flex-wrap: wrap; 6 | 7 | .service { 8 | margin: 3rem 2rem; 9 | } 10 | } 11 | } 12 | } 13 | 14 | @media (max-width: 800px) { 15 | .header .header-heading { 16 | font-size: 4rem; 17 | } 18 | 19 | .about .progress-bars-wrapper .progress-bar { 20 | width: 50rem; 21 | } 22 | } 23 | 24 | @media (max-width: 600px) { 25 | .header .header-heading { 26 | font-size: 3rem; 27 | } 28 | 29 | .navbar .navbar-link { 30 | margin: 0 2rem; 31 | font-size: 1.5rem; 32 | } 33 | 34 | .about { 35 | padding: 8rem 10rem 0; 36 | 37 | .progress-bars-wrapper .progress-bar { 38 | width: 45rem; 39 | } 40 | } 41 | 42 | .contact { 43 | .contact-form { 44 | width: 40rem; 45 | } 46 | .copyright { 47 | width: 70%; 48 | } 49 | } 50 | } 51 | 52 | @media (max-width: 500px) { 53 | html { 54 | font-size: 55%; 55 | } 56 | } 57 | 58 | @media (max-width: 450px) { 59 | html { 60 | font-size: 45%; 61 | } 62 | 63 | .header .header-heading { 64 | font-size: 2.5rem; 65 | } 66 | 67 | .navbar .navbar-link { 68 | margin: 0 1.5rem; 69 | } 70 | 71 | .about-heading { 72 | text-align: center; 73 | } 74 | 75 | .progress .progress-bars-wrapper .progress-bar { 76 | width: 40rem; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /scss/index.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | 3 | $white: #fff; 4 | $primaryColor: #e41c6f; 5 | $mainFont: "Jost", sans-serif; 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | outline: none; 11 | box-sizing: border-box; 12 | text-decoration: none; 13 | list-style-type: none; 14 | font-family: $mainFont; 15 | font-weight: 400; 16 | text-transform: capitalize; 17 | } 18 | 19 | html { 20 | font-size: 62.5%; 21 | scroll-behavior: smooth; 22 | } 23 | 24 | .center { 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | } 29 | 30 | .sticky { 31 | position: fixed; 32 | top: 0; 33 | } 34 | .section-heading { 35 | font-size: 5rem; 36 | color: #333; 37 | text-transform: uppercase; 38 | letter-spacing: 0.5rem; 39 | margin-bottom: 8rem; 40 | border-bottom: 0.3rem solid #333; 41 | text-shadow: 0.2rem 0.2rem 0.5rem #555; 42 | } 43 | 44 | // header 45 | 46 | .header { 47 | @extend .center; 48 | width: 100%; 49 | height: 100vh; 50 | background: linear-gradient( 51 | rgba(255, 255, 255, 0.2), 52 | rgba(255, 255, 255, 0.3) 53 | ), 54 | url("../images/bg.jpg") center no-repeat; 55 | background-size: cover; 56 | flex-direction: column; 57 | 58 | &-heading { 59 | font-size: 6rem; 60 | font-weight: 700; 61 | color: $white; 62 | background-color: $primaryColor; 63 | padding: 0 3rem; 64 | margin-bottom: 5rem; 65 | text-transform: uppercase; 66 | letter-spacing: 1rem; 67 | border-bottom: 0.3rem solid $white; 68 | text-shadow: 0.2rem 0.2rem 1rem #555; 69 | transform: skew(-10deg); 70 | } 71 | 72 | &-person-img { 73 | width: 25rem; 74 | height: 25rem; 75 | object-fit: cover; 76 | border-radius: 50%; 77 | border: 0.7rem dotted $primaryColor; 78 | background-color: rgba(255, 255, 255, 0.7); 79 | padding: 0.5rem; 80 | opacity: 0.9; 81 | } 82 | 83 | &-person-name { 84 | font-size: 2rem; 85 | color: $white; 86 | background-color: $primaryColor; 87 | margin: 5rem 0; 88 | padding: 0.5rem 3rem; 89 | letter-spacing: 0.3rem; 90 | transform: skew(-10deg); 91 | } 92 | 93 | &-btn { 94 | font-size: 1.7rem; 95 | font-weight: 700; 96 | color: #333; 97 | background-color: $white; 98 | border: 0.3rem solid #333; 99 | padding: 0.5rem 1rem; 100 | text-transform: uppercase; 101 | letter-spacing: 0.3rem; 102 | } 103 | } 104 | // end header 105 | 106 | // navbar 107 | .navbar { 108 | @extend .center; 109 | width: 100%; 110 | height: 4rem; 111 | background-color: $primaryColor; 112 | box-shadow: 0.2rem 0.2rem 0.5rem #555; 113 | z-index: 100; 114 | 115 | &-link { 116 | font-size: 1.7rem; 117 | font-weight: 600; 118 | color: #333; 119 | margin: 0 3rem; 120 | letter-spacing: 0.3rem; 121 | text-transform: uppercase; 122 | position: relative; 123 | transition: color 0.2s; 124 | 125 | &.active { 126 | color: $white; 127 | 128 | &::before { 129 | width: 130%; 130 | } 131 | } 132 | 133 | &::before { 134 | content: ""; 135 | width: 0; 136 | height: 0.2rem; 137 | background-color: $white; 138 | position: absolute; 139 | right: -15%; 140 | bottom: -0.3rem; 141 | transition: width 0.2s; 142 | } 143 | 144 | &:hover { 145 | color: $white; 146 | 147 | &::before { 148 | width: 130%; 149 | } 150 | } 151 | } 152 | } 153 | // end navbar 154 | 155 | // about section 156 | .about { 157 | width: 100%; 158 | height: 100%; 159 | padding: 8rem 0 0; 160 | background-color: $white; 161 | display: flex; 162 | flex-direction: column; 163 | align-items: center; 164 | 165 | .progress-bars-wrapper { 166 | margin-bottom: 5rem; 167 | 168 | .progress-bar { 169 | width: 60rem; 170 | height: 3rem; 171 | background-color: #ccc; 172 | margin: 1.5rem 0; 173 | border-radius: 0.3rem; 174 | box-shadow: 0.2rem 0.2rem 1rem #555; 175 | position: relative; 176 | 177 | &-text { 178 | position: absolute; 179 | left: 1rem; 180 | font-size: 1.5rem; 181 | color: $white; 182 | 183 | span { 184 | margin: 0 0.5rem; 185 | font-size: 1.8rem; 186 | font-weight: 700; 187 | } 188 | } 189 | 190 | &-percent { 191 | width: 0; 192 | height: 100%; 193 | background-color: $primaryColor; 194 | border-radius: 0.3rem; 195 | transition: width 0.5s 0.2s ease-in-out; 196 | } 197 | } 198 | } 199 | 200 | .services { 201 | width: 100%; 202 | height: 30vh; 203 | display: flex; 204 | justify-content: space-evenly; 205 | align-items: center; 206 | 207 | .service { 208 | text-align: center; 209 | 210 | &:first-child, 211 | &:last-child { 212 | align-self: flex-start; 213 | } 214 | 215 | i { 216 | font-size: 10rem; 217 | color: #888; 218 | margin-bottom: 2rem; 219 | text-shadow: 0.1rem 0.1rem 0.5rem #555; 220 | } 221 | 222 | h2 { 223 | font-size: 2rem; 224 | color: $white; 225 | background-color: #777; 226 | width: 25rem; 227 | letter-spacing: 0.3rem; 228 | transform: skew(-10deg); 229 | box-shadow: 0.2rem 0.2rem 0.5rem #555; 230 | } 231 | } 232 | } 233 | } 234 | // end about section 235 | 236 | // projects section 237 | .projects { 238 | width: 100%; 239 | height: 100%; 240 | padding: 8rem 0 8rem; 241 | background-color: #eef; 242 | display: flex; 243 | flex-direction: column; 244 | align-items: center; 245 | 246 | &-wrapper { 247 | @extend .center; 248 | width: 90%; 249 | flex-wrap: wrap; 250 | 251 | .project { 252 | display: flex; 253 | flex-direction: column; 254 | justify-content: center; 255 | align-items: center; 256 | margin: 1rem; 257 | background-color: $white; 258 | box-shadow: 0.3rem 0.3rem 0.5rem #777; 259 | position: relative; 260 | overflow: hidden; 261 | transition: box-shadow 0.5s; 262 | 263 | &:hover { 264 | box-shadow: 1rem 1rem 1rem #777; 265 | .project-content { 266 | top: 5rem; 267 | transition: top 0.3s 0.3s; 268 | } 269 | 270 | .project-link { 271 | bottom: 5rem; 272 | transition: bottom 0.3s 0.3s; 273 | } 274 | 275 | .project-img { 276 | opacity: 0.2; 277 | } 278 | } 279 | 280 | &-content { 281 | text-align: center; 282 | letter-spacing: 0.1rem; 283 | position: absolute; 284 | top: -10rem; 285 | transition: top 0.3s; 286 | z-index: 5; 287 | 288 | .project-title { 289 | font-size: 3rem; 290 | font-weight: 700; 291 | color: #333; 292 | } 293 | 294 | .project-technologies { 295 | font-size: 1.8rem; 296 | color: $primaryColor; 297 | } 298 | } 299 | 300 | &-img { 301 | width: 40rem; 302 | transition: opacity 0.2s; 303 | } 304 | 305 | &-link { 306 | font-size: 2rem; 307 | font-weight: 500; 308 | color: #333; 309 | letter-spacing: 0.1rem; 310 | border: 0.3rem solid $primaryColor; 311 | padding: 0 1rem; 312 | background-color: $white; 313 | position: absolute; 314 | bottom: -5rem; 315 | transition: bottom 0.3s; 316 | 317 | &:hover { 318 | background-color: $primaryColor; 319 | color: $white; 320 | } 321 | } 322 | } 323 | } 324 | } 325 | // end projects section 326 | 327 | // contact section 328 | .contact { 329 | width: 100%; 330 | height: 70vh; 331 | background-color: #333; 332 | display: flex; 333 | flex-direction: column; 334 | align-items: center; 335 | justify-content: space-evenly; 336 | 337 | &-heading { 338 | color: $white; 339 | box-shadow: none; 340 | border-color: $white; 341 | margin-bottom: 2rem; 342 | } 343 | 344 | &-form { 345 | @extend .center; 346 | flex-direction: column; 347 | width: 50rem; 348 | 349 | input, 350 | textarea { 351 | width: 100%; 352 | padding: 0.5rem; 353 | margin: 0.5rem 0; 354 | background-color: #eef; 355 | font-size: 1.5rem; 356 | border: 0.2rem solid $primaryColor; 357 | color: #555; 358 | text-transform: lowercase; 359 | } 360 | 361 | textarea { 362 | resize: none; 363 | height: 10rem; 364 | } 365 | 366 | input.contact-form-btn { 367 | background-color: $primaryColor; 368 | color: #fff; 369 | text-transform: uppercase; 370 | letter-spacing: 1rem; 371 | cursor: pointer; 372 | } 373 | } 374 | } 375 | // end contact section 376 | 377 | // footer section 378 | .footer { 379 | @extend .center; 380 | flex-direction: column; 381 | width: 100%; 382 | height: 30vh; 383 | background-color: #222; 384 | 385 | .social-media-icons { 386 | margin-bottom: 5rem; 387 | 388 | .social-media-link { 389 | margin: 0 2rem; 390 | padding: 0.7rem; 391 | background-color: $primaryColor; 392 | border-radius: 0.5rem; 393 | display: inline-block; 394 | 395 | i { 396 | font-size: 3rem; 397 | color: $white; 398 | } 399 | } 400 | } 401 | 402 | .copyright { 403 | color: #aaa; 404 | font-size: 2rem; 405 | letter-spacing: 0.2rem; 406 | font-weight: 300; 407 | text-align: center; 408 | } 409 | } 410 | // end footer section 411 | 412 | @import "./media"; 413 | --------------------------------------------------------------------------------