├── README.md ├── index.html ├── myproject ├── image │ ├── 1385382.jpg │ ├── austin-poon-JO_S6ewBqAk-unsplash.jpg │ ├── computer_engineer-compare-page.png │ ├── jan-vlacuha-Rns_A8bJ_dQ-unsplash.jpg │ ├── kevin-canlas-QYHehJ9Iovs-unsplash.jpg │ └── nubelson-fernandes--Xqckh_XVU4-unsplash.jpg ├── index.html ├── script.js └── style.css ├── output ├── about.png ├── contact.png ├── home.png ├── portfolio.png └── services.png ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Responsive-personal_portfolio 2 | This repository contains the code for my personal portfolio website built using HTML, CSS, and JavaScript. The portfolio showcases my skills, projects, and accomplishments, providing a glimpse into my professional journey. 3 | 4 | # Live Demo 5 | https://shreya6360.github.io/Responsive-personal_portfolio/ 6 | 7 | 8 | # Prerequisites 9 | Before you begin, ensure you have met the following requirements: 10 | 11 | Git must be installed on your operating system. 12 | 13 | # Run Locally 14 | To run this project locally, run this command on your git bash: 15 | 16 | Linux and macOS: 17 | 18 | sudo git clone https://github.com/shreya6360/Responsive-personal_portfolio.git 19 | 20 | Windows: 21 | 22 | git clone https://github.com/shreya6360/Responsive-personal_portfolio.git 23 | 24 | # License 25 | This project is free to use and does not contains any license. 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | RESPONSIVE PERSONAL PORTFOLIO WEBSITE 8 | 9 | 10 | 11 | 12 | 13 | 24 |

25 |

26 |

Hello,It's Me

27 |

Shreya

28 |

And I'm a

29 | 35 | Download CV 36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

AboutMe

47 |

Frontend Developer

48 |

Frontend developer with experience building singlre-page web application and a knack for creating attractive user interfaces. 49 | skilled experience in javascript,HTML,CSS,PHP,BOOTSTRAP.

50 | Read More 51 |

52 |

53 |

54 |

OurServices

55 | 56 |

57 |

58 | 59 |

Web Development

60 |

Motivated designer and developer 61 | with experience creating custom websites through PHP and CSS. 62 | Strong collaboration skills and proven history of application development. DHTML and JavaScript. MS Access and MySQL.

63 | Read More 64 |

65 | 66 |

67 | 68 |

UI/UX Design

69 |

You cannot make a good design if you do not understand people; design is made for people.

70 | Read More 71 |

72 | 73 |

74 | 75 |

App Design

76 |

I'm UI/UX Designer with a great passion to my work. The main goal is to create modern, attractive and user-friendly interfaces and find creative and simple solutions for your business. 77 |

78 | Read More 79 |

80 |

81 |

82 |

83 |

LatestProject

84 |

85 |

86 |

87 |

88 |

Perssonal Portfolio

89 |

In this project I try making my own portfolio website for myself. Showcase my projects, my social media handles, my experience on the website.

90 | 91 |

92 |

93 |

94 |

95 |

96 |

dynamics website Deployment in AWS

97 |

In this project I try deployed dynamics website in AWS.so that we can add deleted the data by connecting to databases.

98 | 99 |

100 |

101 |

102 |

103 |

104 |

Iris flower detection

105 |

In this project I try detect the iris flower type by using machine learning predication model.And deployed in streamlit python

106 | 107 |

108 |

109 |

110 |

111 |

112 |

Cab Booking

113 |

In this project we can book a cab by using java.

114 | 115 |

116 |

117 |

118 |

119 |

120 |

ContactME!

121 | 122 | 134 | 135 |

136 | 137 | 145 | 146 | 147 | 148 | 149 | 150 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /myproject/image/1385382.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/myproject/image/1385382.jpg -------------------------------------------------------------------------------- /myproject/image/austin-poon-JO_S6ewBqAk-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/myproject/image/austin-poon-JO_S6ewBqAk-unsplash.jpg -------------------------------------------------------------------------------- /myproject/image/computer_engineer-compare-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/myproject/image/computer_engineer-compare-page.png -------------------------------------------------------------------------------- /myproject/image/jan-vlacuha-Rns_A8bJ_dQ-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/myproject/image/jan-vlacuha-Rns_A8bJ_dQ-unsplash.jpg -------------------------------------------------------------------------------- /myproject/image/kevin-canlas-QYHehJ9Iovs-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/myproject/image/kevin-canlas-QYHehJ9Iovs-unsplash.jpg -------------------------------------------------------------------------------- /myproject/image/nubelson-fernandes--Xqckh_XVU4-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/myproject/image/nubelson-fernandes--Xqckh_XVU4-unsplash.jpg -------------------------------------------------------------------------------- /myproject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | RESPONSIVE PERSONAL PORTFOLIO WEBSITE 8 | 9 | 10 | 11 | 12 | 13 | 24 |

25 |

26 |

Hello,It's Me

27 |

Shreya

28 |

And I'm a

29 | 35 | Download CV 36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

AboutMe

47 |

Frontend Developer

48 |

Frontend developer with experience building singlre-page web application and a knack for creating attractive user interfaces. 49 | skilled experience in javascript,HTML,CSS,PHP,BOOTSTRAP.

50 | Read More 51 |

52 |

53 |

54 |

OurServices

55 | 56 |

57 |

58 | 59 |

Web Development

60 |

63 | Read More 64 |

65 | 66 |

67 | 68 |

UI/UX Design

69 |

You cannot make a good design if you do not understand people; design is made for people.

70 | Read More 71 |

72 | 73 |

74 | 75 |

App Design

76 |

I'm UI/UX Designer with a great passion to my work. The main goal is to create modern, attractive and user-friendly interfaces and find creative and simple solutions for your business. 77 |

78 | Read More 79 |

80 |

81 |

82 |

83 |

LatestProject

84 |

85 |

86 |

87 |

88 |

Perssonal Portfolio

89 |

In this project I try making my own portfolio website for myself. Showcase my projects, my social media handles, my experience on the website.

90 | 91 |

92 |

93 |

94 |

95 |

96 |

dynamics website Deployment in AWS

97 |

In this project I try deployed dynamics website in AWS.so that we can add deleted the data by connecting to databases.

98 | 99 |

100 |

101 |

102 |

103 |

104 |

Iris flower detection

105 |

In this project I try detect the iris flower type by using machine learning predication model.And deployed in streamlit python

106 | 107 |

108 |

109 |

110 |

111 |

112 |

trafic analysis

113 |

In this project I try analysis the traffic by using java.

114 | 115 |

116 |

117 |

118 |

119 |

120 |

ContactME!

121 | 122 | 134 | 135 |

136 | 137 | 145 | 146 | 147 | 148 | 149 | 150 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /myproject/script.js: -------------------------------------------------------------------------------- 1 | let menuIcon=document.querySelector('#menu-icon'); 2 | let navbar=document.querySelector('.navbar'); 3 | 4 | menuIcon.onclick=()=>{ 5 | menuIcon.classList.toggle('bx-x'); 6 | navbar.classList.toggle('active'); 7 | }; 8 | 9 | 10 | let sections=document.querySelectorAll('section'); 11 | let navLinks=document.querySelectorAll('header nav a'); 12 | 13 | window.onscroll = () => { 14 | sections.forEach(sec => { 15 | let top = window.scrollY; 16 | let offset = sec.offsetTop - 150; 17 | let height = sec.offsetHeight; 18 | let id = sec.getAttribute('id'); 19 | 20 | if(top >= offset && top < offset + height){ 21 | navLinks.forEach(links => { 22 | links.classList.remove('active'); 23 | document.querySelector('header nav a[href*=' + id + ']').classList.add('active'); 24 | }); 25 | }; 26 | 27 | }); 28 | let header=document.querySelector('header'); 29 | 30 | header.classList.toggle('sticky',window.screenY>100); 31 | menuIcon.classList.remove('bx-x'); 32 | navbar.classList.remove('active'); 33 | }; 34 | 35 | ScrollReveal({ 36 | //reset:true, 37 | distance:'80px', 38 | duration:2000, 39 | delay:200 40 | }); 41 | 42 | ScrollReveal().reveal('.home-content,.heading',{origin:'top'}); 43 | ScrollReveal().reveal('.home-img,.services-container,.portfolio-box,.contact form',{origin:'bottom'}); 44 | ScrollReveal().reveal('.home-content h1,.about-img',{origin:'left'}); 45 | ScrollReveal().reveal('.home-content p,.about-content',{origin:'right'}); 46 | 47 | const typed = new Typed('.multiple-text',{ 48 | strings:['CSE Student at NMIT ','Frontend developer'], 49 | typeSpeed:100, 50 | backSpeed:100, 51 | backDelay:1000, 52 | loop:true 53 | }); -------------------------------------------------------------------------------- /myproject/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | border: none; 9 | outline: none; 10 | scroll-behavior: smooth; 11 | font-family: 'Poppins', sans-serif; 12 | 13 | } 14 | 15 | :root { 16 | --bg-color:#1f242d; 17 | --second-bg-color:#323946; 18 | --text-color:#fff; 19 | --main-color:#0ef; 20 | } 21 | 22 | html{ 23 | font-size: 62.5%; 24 | overflow-x:hidden; 25 | 26 | } 27 | 28 | body{ 29 | background: var(--bg-color); 30 | color: var(--text-color); 31 | } 32 | 33 | section{ 34 | min-height: 100vh; 35 | padding: 10rem 9% 2rem; 36 | } 37 | .header{ 38 | position: fixed; 39 | top:0; 40 | left:0; 41 | width: 100%; 42 | padding: 2rem 9%; 43 | background: var(--bg-color); 44 | display: flex; 45 | justify-content:space-between; 46 | align-items: center; 47 | z-index:100 ; 48 | 49 | } 50 | 51 | .header.sticky{ 52 | border-bottom: .1rem solid rgba(0, 0,0, .2); 53 | } 54 | .logo{ 55 | font-size: 2.5rem; 56 | color: var(--text-color); 57 | font-weight:600; 58 | cursor:default; 59 | } 60 | .navbar a { 61 | font-size: 1.7rem; 62 | color: var(--text-color); 63 | margin-left: 4rem; 64 | transition: .3s; 65 | } 66 | 67 | .navbar a:hover, 68 | .navbar a.active{ 69 | color: var(--main-color); 70 | } 71 | #menu-icon{ 72 | font-size: 3.6rem; 73 | color: var(--text-color); 74 | display: none; 75 | } 76 | 77 | .home{ 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | } 82 | 83 | .home-img img{ 84 | width:35vw ; 85 | animation: floatImage 4s ease-in-out infinite; 86 | } 87 | 88 | @keyframes floatImage{ 89 | 0%{ 90 | transform: translateY(0); 91 | 92 | } 93 | 50%{ 94 | transform: translateY(-22.4rem); 95 | } 96 | 100%{ 97 | transform: translateY(0); 98 | } 99 | 100 | } 101 | 102 | .home-content h3 { 103 | font-size: 3.2rem; 104 | font-weight: 700; 105 | 106 | } 107 | .home-content h3:nth-of-type(2){ 108 | margin-bottom: 2rem; 109 | } 110 | 111 | span{ 112 | color: var(--main-color); 113 | } 114 | .home-content h1{ 115 | font-size: 5.6rem; 116 | font-weight: 700; 117 | line-height: 1.3; 118 | } 119 | 120 | .social-media a { 121 | display: inline-flex; 122 | justify-content: center; 123 | align-items: center; 124 | width: 4rem; 125 | height: 4rem; 126 | background: transparent; 127 | border: .2rem solid var(--main-color); 128 | border-radius: 50%; 129 | font-size: 2rem; 130 | color: var(--main-color); 131 | margin: 3rem 1.5rem 3rem 0; 132 | transition: .5s ease; 133 | } 134 | .social-media a:hover{ 135 | background: var(--main-color); 136 | color: var(--second-bg-color); 137 | box-shadow: 0 0 1rem var(--main-color); 138 | } 139 | 140 | .btn { 141 | display: inline-block; 142 | padding: 1rem 2.8rem; 143 | background: var(--main-color); 144 | border-radius: 4rem; 145 | box-shadow: 0 0 1rem var(--main-color); 146 | font-size: 1.6rem; 147 | color: var(--second-bg-color); 148 | letter-spacing: .1rem; 149 | font-weight: 600; 150 | transition: .5s ease; 151 | } 152 | 153 | .btn:hover { 154 | box-shadow: none; 155 | } 156 | 157 | .about{ 158 | display: flex; 159 | justify-content: center; 160 | align-items: center; 161 | gap: 2rem; 162 | background: var(--second-bg-color); 163 | } 164 | .about-img img{ 165 | width: 35rem; 166 | } 167 | 168 | .heading{ 169 | text-align: center; 170 | font-size: 4.5rem; 171 | } 172 | 173 | .about-content h2{ 174 | text-align: left; 175 | line-height: 1.2; 176 | } 177 | 178 | .about-content h3{ 179 | font-size: 2.6rem; 180 | } 181 | 182 | .about-content p{ 183 | font-size: 1.6rem; 184 | margin: 2rem 0 3rem; 185 | } 186 | .services h2{ 187 | margin-bottom: 5rem; 188 | 189 | } 190 | .services-container{ 191 | display: flex; 192 | justify-content: center; 193 | align-items: center; 194 | flex-wrap: wrap; 195 | gap: 2rem; 196 | } 197 | .services-container .services-box { 198 | flex: 1 1 30rem; 199 | background: var(--second-bg-color); 200 | padding: 3rem 2rem 4rem; 201 | border-radius: 2rem; 202 | text-align: center; 203 | border: .2rem solid var(--bg-color); 204 | transition: .5s ease; 205 | } 206 | .services-container .services-box:hover{ 207 | border-color: var(--main-color); 208 | transform: scale(1.02); 209 | } 210 | .services-box i{ 211 | font-size: 7rem; 212 | color: var(--main-color); 213 | } 214 | .services-box h3{ 215 | font-size: 2.6rem; 216 | } 217 | .services-box p{ 218 | font-size: 1.6rem; 219 | margin: 1rem 0 3rem; 220 | } 221 | .portfolio{ 222 | background: var(--second-bg-color); 223 | } 224 | .portfolio h2{ 225 | margin-bottom: 4rem; 226 | } 227 | .portfolio-container{ 228 | display: grid; 229 | grid-template-columns: repeat(3,1fr); 230 | align-items: center; 231 | gap: 2.5rem; 232 | } 233 | .portfolio-container .portfolio-box{ 234 | position: relative; 235 | border-radius: 2rem; 236 | box-shadow: 0 0 1rem var(--bg-color); 237 | overflow: hidden; 238 | display: flex; 239 | } 240 | .portfolio-box img{ 241 | width: 100%; 242 | transition: .5s ease; 243 | } 244 | .portfolio-box:hover img{ 245 | transform: scale(1.1); 246 | } 247 | .portfolio-box .portfolio-layer{ 248 | position: absolute; 249 | bottom: 0; 250 | left: 0; 251 | width: 100%; 252 | height: 100%; 253 | background: linear-gradient(rgba(0,0,0, .1),var(--main-color)); 254 | display: flex; 255 | justify-content: center; 256 | align-items: center; 257 | flex-direction: column; 258 | text-align: center; 259 | padding: 0 4rem; 260 | transform: translateY(100%); 261 | transition: .5s ease; 262 | } 263 | .portfolio-box:hover .portfolio-layer{ 264 | transform: translateY(0); 265 | } 266 | 267 | .portfolio-layer h4{ 268 | font-size: 3rem; 269 | } 270 | 271 | .portfolio-layer p{ 272 | font-size: 1.6rem; 273 | margin: .3rem 0 1rem; 274 | } 275 | 276 | .portfolio-layer a{ 277 | display: inline-flex; 278 | justify-content: center; 279 | align-items: center; 280 | width: 5rem; 281 | height: 5rem; 282 | background: var(--text-color); 283 | border-radius: 50%; 284 | } 285 | 286 | .portfolio-layer a i { 287 | font-size: 2rem; 288 | color: var(--second-bg-color); 289 | } 290 | 291 | .contact h2{ 292 | margin-bottom: 3rem; 293 | } 294 | 295 | .contact form{ 296 | max-width: 70rem; 297 | margin: 1rem auto; 298 | text-align: center; 299 | margin-bottom: 3rem; 300 | } 301 | 302 | .contact form .input-box{ 303 | display: flex; 304 | justify-content: space-between; 305 | flex-wrap: wrap; 306 | } 307 | 308 | .contact form .input-box input, 309 | .contact form textarea{ 310 | width: 100%; 311 | padding: 1.5rem; 312 | font-size: 1.6rem; 313 | color: var(--text-color); 314 | background: var(--second-bg-color); 315 | border-radius: .8rem; 316 | margin: .7rem 0; 317 | } 318 | 319 | .contact form .input-box input{ 320 | width: 49%; 321 | } 322 | 323 | .contact form textarea{ 324 | resize: none; 325 | } 326 | 327 | .contact form .btn{ 328 | margin-top: 2rem; 329 | cursor: pointer; 330 | } 331 | 332 | .footer{ 333 | display: flex; 334 | justify-content: space-between; 335 | align-items: center; 336 | flex-wrap: wrap; 337 | padding: 2rem 9%; 338 | background: var(--second-bg-color); 339 | } 340 | 341 | .footer-text p{ 342 | font-size: 1.6rem; 343 | } 344 | 345 | .footer-iconTop a{ 346 | display: inline-flex; 347 | justify-content: center; 348 | align-items: center; 349 | padding: .8rem; 350 | background: var(--main-color); 351 | border-radius: .8rem; 352 | transition: .5s ease; 353 | } 354 | 355 | .footer-iconTop a:hover{ 356 | box-shadow: 0 0 1rem var(--main-color); 357 | } 358 | 359 | .footer-iconTop a i{ 360 | font-size: 2.4rem; 361 | color: var(--second-bg-color); 362 | } 363 | 364 | @media (max-width:1200px){ 365 | html{ 366 | font-size: 55%; 367 | } 368 | } 369 | 370 | @media(max-width:991px){ 371 | .header{ 372 | padding: 2rem 3%; 373 | } 374 | section{ 375 | padding: 10rem 3% 2rem; 376 | } 377 | 378 | .services{ 379 | padding-bottom: 7rem; 380 | } 381 | 382 | .portfolio{ 383 | padding-bottom: 7rem; 384 | } 385 | .contact{ 386 | min-height: auto; 387 | } 388 | .footer{ 389 | padding: 2rem 3%; 390 | } 391 | } 392 | 393 | @media(max-width:768px){ 394 | #menu-icon{ 395 | display: block; 396 | } 397 | .navbar{ 398 | position: absolute; 399 | top: 100%; 400 | left: 0; 401 | width: 100%; 402 | padding: 1rem 3%; 403 | background: var(--bg-color); 404 | border-top: .1rem solid rgba(0, 0, 0, .2); 405 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); 406 | display: none; 407 | } 408 | 409 | .navbar.active{ 410 | display: block; 411 | } 412 | .navbar a { 413 | display: block; 414 | font-size: 2rem; 415 | margin: 3rem 0; 416 | } 417 | .home{ 418 | flex-direction: column; 419 | } 420 | .home-content h3{ 421 | font-size: 2.6rem; 422 | } 423 | .home-content h1{ 424 | font-size: 5rem; 425 | } 426 | .home-img img{ 427 | width: 70vw; 428 | margin-top: 4rem; 429 | } 430 | .about{ 431 | flex-direction: column-reverse; 432 | } 433 | 434 | .about img{ 435 | width: 70vw; 436 | margin-top: 4rem; 437 | } 438 | .services h2{ 439 | margin-bottom: 3rem; 440 | } 441 | 442 | .portfolio h2{ 443 | margin-bottom: 3rem; 444 | } 445 | 446 | .portfolio-container{ 447 | grid-template-columns: repeat(2,1fr); 448 | } 449 | } 450 | 451 | @media(max-width:617px){ 452 | .portfolio-container{ 453 | grid-template-columns: 1fr; 454 | } 455 | } 456 | 457 | @media(max-width:450px){ 458 | html{ 459 | font-size: 50%; 460 | } 461 | 462 | .contact form .input-box input{ 463 | width: 100%; 464 | } 465 | } 466 | 467 | @media(max-width:365px){ 468 | .home-img img{ 469 | width: 90vw; 470 | } 471 | 472 | .about-img img{ 473 | width: 90vw; 474 | } 475 | 476 | .footer{ 477 | flex-direction: column-reverse; 478 | } 479 | 480 | .footer p{ 481 | text-align: center; 482 | margin-top: 2rem; 483 | } 484 | } 485 | 486 | #msg{ 487 | color: #61b752; 488 | margin-top: -10px; 489 | display: block; 490 | } -------------------------------------------------------------------------------- /output/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/output/about.png -------------------------------------------------------------------------------- /output/contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/output/contact.png -------------------------------------------------------------------------------- /output/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/output/home.png -------------------------------------------------------------------------------- /output/portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/output/portfolio.png -------------------------------------------------------------------------------- /output/services.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shreya6360/Responsive-personal_portfolio/915ed24bfcbf82d0bd1afcf893d546fbc4333fdb/output/services.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let menuIcon=document.querySelector('#menu-icon'); 2 | let navbar=document.querySelector('.navbar'); 3 | 4 | menuIcon.onclick=()=>{ 5 | menuIcon.classList.toggle('bx-x'); 6 | navbar.classList.toggle('active'); 7 | }; 8 | 9 | 10 | let sections=document.querySelectorAll('section'); 11 | let navLinks=document.querySelectorAll('header nav a'); 12 | 13 | window.onscroll = () => { 14 | sections.forEach(sec => { 15 | let top = window.scrollY; 16 | let offset = sec.offsetTop - 150; 17 | let height = sec.offsetHeight; 18 | let id = sec.getAttribute('id'); 19 | 20 | if(top >= offset && top < offset + height){ 21 | navLinks.forEach(links => { 22 | links.classList.remove('active'); 23 | document.querySelector('header nav a[href*=' + id + ']').classList.add('active'); 24 | }); 25 | }; 26 | 27 | }); 28 | let header=document.querySelector('header'); 29 | 30 | header.classList.toggle('sticky',window.screenY>100); 31 | menuIcon.classList.remove('bx-x'); 32 | navbar.classList.remove('active'); 33 | }; 34 | 35 | ScrollReveal({ 36 | //reset:true, 37 | distance:'80px', 38 | duration:2000, 39 | delay:200 40 | }); 41 | 42 | ScrollReveal().reveal('.home-content,.heading',{origin:'top'}); 43 | ScrollReveal().reveal('.home-img,.services-container,.portfolio-box,.contact form',{origin:'bottom'}); 44 | ScrollReveal().reveal('.home-content h1,.about-img',{origin:'left'}); 45 | ScrollReveal().reveal('.home-content p,.about-content',{origin:'right'}); 46 | 47 | const typed = new Typed('.multiple-text',{ 48 | strings:['CSE Student at NMIT ','Frontend developer'], 49 | typeSpeed:100, 50 | backSpeed:100, 51 | backDelay:1000, 52 | loop:true 53 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | border: none; 9 | outline: none; 10 | scroll-behavior: smooth; 11 | font-family: 'Poppins', sans-serif; 12 | 13 | } 14 | 15 | :root { 16 | --bg-color:#1f242d; 17 | --second-bg-color:#323946; 18 | --text-color:#fff; 19 | --main-color:#0ef; 20 | } 21 | 22 | html{ 23 | font-size: 62.5%; 24 | overflow-x:hidden; 25 | 26 | } 27 | 28 | body{ 29 | background: var(--bg-color); 30 | color: var(--text-color); 31 | } 32 | 33 | section{ 34 | min-height: 100vh; 35 | padding: 10rem 9% 2rem; 36 | } 37 | .header{ 38 | position: fixed; 39 | top:0; 40 | left:0; 41 | width: 100%; 42 | padding: 2rem 9%; 43 | background: var(--bg-color); 44 | display: flex; 45 | justify-content:space-between; 46 | align-items: center; 47 | z-index:100 ; 48 | 49 | } 50 | 51 | .header.sticky{ 52 | border-bottom: .1rem solid rgba(0, 0,0, .2); 53 | } 54 | .logo{ 55 | font-size: 2.5rem; 56 | color: var(--text-color); 57 | font-weight:600; 58 | cursor:default; 59 | } 60 | .navbar a { 61 | font-size: 1.7rem; 62 | color: var(--text-color); 63 | margin-left: 4rem; 64 | transition: .3s; 65 | } 66 | 67 | .navbar a:hover, 68 | .navbar a.active{ 69 | color: var(--main-color); 70 | } 71 | #menu-icon{ 72 | font-size: 3.6rem; 73 | color: var(--text-color); 74 | display: none; 75 | } 76 | 77 | .home{ 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | } 82 | 83 | .home-img img{ 84 | width:35vw ; 85 | animation: floatImage 4s ease-in-out infinite; 86 | } 87 | 88 | @keyframes floatImage{ 89 | 0%{ 90 | transform: translateY(0); 91 | 92 | } 93 | 50%{ 94 | transform: translateY(-22.4rem); 95 | } 96 | 100%{ 97 | transform: translateY(0); 98 | } 99 | 100 | } 101 | 102 | .home-content h3 { 103 | font-size: 3.2rem; 104 | font-weight: 700; 105 | 106 | } 107 | .home-content h3:nth-of-type(2){ 108 | margin-bottom: 2rem; 109 | } 110 | 111 | span{ 112 | color: var(--main-color); 113 | } 114 | .home-content h1{ 115 | font-size: 5.6rem; 116 | font-weight: 700; 117 | line-height: 1.3; 118 | } 119 | 120 | .social-media a { 121 | display: inline-flex; 122 | justify-content: center; 123 | align-items: center; 124 | width: 4rem; 125 | height: 4rem; 126 | background: transparent; 127 | border: .2rem solid var(--main-color); 128 | border-radius: 50%; 129 | font-size: 2rem; 130 | color: var(--main-color); 131 | margin: 3rem 1.5rem 3rem 0; 132 | transition: .5s ease; 133 | } 134 | .social-media a:hover{ 135 | background: var(--main-color); 136 | color: var(--second-bg-color); 137 | box-shadow: 0 0 1rem var(--main-color); 138 | } 139 | 140 | .btn { 141 | display: inline-block; 142 | padding: 1rem 2.8rem; 143 | background: var(--main-color); 144 | border-radius: 4rem; 145 | box-shadow: 0 0 1rem var(--main-color); 146 | font-size: 1.6rem; 147 | color: var(--second-bg-color); 148 | letter-spacing: .1rem; 149 | font-weight: 600; 150 | transition: .5s ease; 151 | } 152 | 153 | .btn:hover { 154 | box-shadow: none; 155 | } 156 | 157 | .about{ 158 | display: flex; 159 | justify-content: center; 160 | align-items: center; 161 | gap: 2rem; 162 | background: var(--second-bg-color); 163 | } 164 | .about-img img{ 165 | width: 35rem; 166 | } 167 | 168 | .heading{ 169 | text-align: center; 170 | font-size: 4.5rem; 171 | } 172 | 173 | .about-content h2{ 174 | text-align: left; 175 | line-height: 1.2; 176 | } 177 | 178 | .about-content h3{ 179 | font-size: 2.6rem; 180 | } 181 | 182 | .about-content p{ 183 | font-size: 1.6rem; 184 | margin: 2rem 0 3rem; 185 | } 186 | .services h2{ 187 | margin-bottom: 5rem; 188 | 189 | } 190 | .services-container{ 191 | display: flex; 192 | justify-content: center; 193 | align-items: center; 194 | flex-wrap: wrap; 195 | gap: 2rem; 196 | } 197 | .services-container .services-box { 198 | flex: 1 1 30rem; 199 | background: var(--second-bg-color); 200 | padding: 3rem 2rem 4rem; 201 | border-radius: 2rem; 202 | text-align: center; 203 | border: .2rem solid var(--bg-color); 204 | transition: .5s ease; 205 | } 206 | .services-container .services-box:hover{ 207 | border-color: var(--main-color); 208 | transform: scale(1.02); 209 | } 210 | .services-box i{ 211 | font-size: 7rem; 212 | color: var(--main-color); 213 | } 214 | .services-box h3{ 215 | font-size: 2.6rem; 216 | } 217 | .services-box p{ 218 | font-size: 1.6rem; 219 | margin: 1rem 0 3rem; 220 | } 221 | .portfolio{ 222 | background: var(--second-bg-color); 223 | } 224 | .portfolio h2{ 225 | margin-bottom: 4rem; 226 | } 227 | .portfolio-container{ 228 | display: grid; 229 | grid-template-columns: repeat(3,1fr); 230 | align-items: center; 231 | gap: 2.5rem; 232 | } 233 | .portfolio-container .portfolio-box{ 234 | position: relative; 235 | border-radius: 2rem; 236 | box-shadow: 0 0 1rem var(--bg-color); 237 | overflow: hidden; 238 | display: flex; 239 | } 240 | .portfolio-box img{ 241 | width: 100%; 242 | transition: .5s ease; 243 | } 244 | .portfolio-box:hover img{ 245 | transform: scale(1.1); 246 | } 247 | .portfolio-box .portfolio-layer{ 248 | position: absolute; 249 | bottom: 0; 250 | left: 0; 251 | width: 100%; 252 | height: 100%; 253 | background: linear-gradient(rgba(0,0,0, .1),var(--main-color)); 254 | display: flex; 255 | justify-content: center; 256 | align-items: center; 257 | flex-direction: column; 258 | text-align: center; 259 | padding: 0 4rem; 260 | transform: translateY(100%); 261 | transition: .5s ease; 262 | } 263 | .portfolio-box:hover .portfolio-layer{ 264 | transform: translateY(0); 265 | } 266 | 267 | .portfolio-layer h4{ 268 | font-size: 3rem; 269 | } 270 | 271 | .portfolio-layer p{ 272 | font-size: 1.6rem; 273 | margin: .3rem 0 1rem; 274 | } 275 | 276 | .portfolio-layer a{ 277 | display: inline-flex; 278 | justify-content: center; 279 | align-items: center; 280 | width: 5rem; 281 | height: 5rem; 282 | background: var(--text-color); 283 | border-radius: 50%; 284 | } 285 | 286 | .portfolio-layer a i { 287 | font-size: 2rem; 288 | color: var(--second-bg-color); 289 | } 290 | 291 | .contact h2{ 292 | margin-bottom: 3rem; 293 | } 294 | 295 | .contact form{ 296 | max-width: 70rem; 297 | margin: 1rem auto; 298 | text-align: center; 299 | margin-bottom: 3rem; 300 | } 301 | 302 | .contact form .input-box{ 303 | display: flex; 304 | justify-content: space-between; 305 | flex-wrap: wrap; 306 | } 307 | 308 | .contact form .input-box input, 309 | .contact form textarea{ 310 | width: 100%; 311 | padding: 1.5rem; 312 | font-size: 1.6rem; 313 | color: var(--text-color); 314 | background: var(--second-bg-color); 315 | border-radius: .8rem; 316 | margin: .7rem 0; 317 | } 318 | 319 | .contact form .input-box input{ 320 | width: 49%; 321 | } 322 | 323 | .contact form textarea{ 324 | resize: none; 325 | } 326 | 327 | .contact form .btn{ 328 | margin-top: 2rem; 329 | cursor: pointer; 330 | } 331 | 332 | .footer{ 333 | display: flex; 334 | justify-content: space-between; 335 | align-items: center; 336 | flex-wrap: wrap; 337 | padding: 2rem 9%; 338 | background: var(--second-bg-color); 339 | } 340 | 341 | .footer-text p{ 342 | font-size: 1.6rem; 343 | } 344 | 345 | .footer-iconTop a{ 346 | display: inline-flex; 347 | justify-content: center; 348 | align-items: center; 349 | padding: .8rem; 350 | background: var(--main-color); 351 | border-radius: .8rem; 352 | transition: .5s ease; 353 | } 354 | 355 | .footer-iconTop a:hover{ 356 | box-shadow: 0 0 1rem var(--main-color); 357 | } 358 | 359 | .footer-iconTop a i{ 360 | font-size: 2.4rem; 361 | color: var(--second-bg-color); 362 | } 363 | 364 | @media (max-width:1200px){ 365 | html{ 366 | font-size: 55%; 367 | } 368 | } 369 | 370 | @media(max-width:991px){ 371 | .header{ 372 | padding: 2rem 3%; 373 | } 374 | section{ 375 | padding: 10rem 3% 2rem; 376 | } 377 | 378 | .services{ 379 | padding-bottom: 7rem; 380 | } 381 | 382 | .portfolio{ 383 | padding-bottom: 7rem; 384 | } 385 | .contact{ 386 | min-height: auto; 387 | } 388 | .footer{ 389 | padding: 2rem 3%; 390 | } 391 | } 392 | 393 | @media(max-width:768px){ 394 | #menu-icon{ 395 | display: block; 396 | } 397 | .navbar{ 398 | position: absolute; 399 | top: 100%; 400 | left: 0; 401 | width: 100%; 402 | padding: 1rem 3%; 403 | background: var(--bg-color); 404 | border-top: .1rem solid rgba(0, 0, 0, .2); 405 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); 406 | display: none; 407 | } 408 | 409 | .navbar.active{ 410 | display: block; 411 | } 412 | .navbar a { 413 | display: block; 414 | font-size: 2rem; 415 | margin: 3rem 0; 416 | } 417 | .home{ 418 | flex-direction: column; 419 | } 420 | .home-content h3{ 421 | font-size: 2.6rem; 422 | } 423 | .home-content h1{ 424 | font-size: 5rem; 425 | } 426 | .home-img img{ 427 | width: 70vw; 428 | margin-top: 4rem; 429 | } 430 | .about{ 431 | flex-direction: column-reverse; 432 | } 433 | 434 | .about img{ 435 | width: 70vw; 436 | margin-top: 4rem; 437 | } 438 | .services h2{ 439 | margin-bottom: 3rem; 440 | } 441 | 442 | .portfolio h2{ 443 | margin-bottom: 3rem; 444 | } 445 | 446 | .portfolio-container{ 447 | grid-template-columns: repeat(2,1fr); 448 | } 449 | } 450 | 451 | @media(max-width:617px){ 452 | .portfolio-container{ 453 | grid-template-columns: 1fr; 454 | } 455 | } 456 | 457 | @media(max-width:450px){ 458 | html{ 459 | font-size: 50%; 460 | } 461 | 462 | .contact form .input-box input{ 463 | width: 100%; 464 | } 465 | } 466 | 467 | @media(max-width:365px){ 468 | .home-img img{ 469 | width: 90vw; 470 | } 471 | 472 | .about-img img{ 473 | width: 90vw; 474 | } 475 | 476 | .footer{ 477 | flex-direction: column-reverse; 478 | } 479 | 480 | .footer p{ 481 | text-align: center; 482 | margin-top: 2rem; 483 | } 484 | } 485 | 486 | #msg{ 487 | color: #61b752; 488 | margin-top: -10px; 489 | display: block; 490 | } --------------------------------------------------------------------------------