├── dhanu.png ├── my personal ├── c++.png ├── c.png ├── css.png ├── dev.png ├── geo.png ├── OIP.jpeg ├── geo.jpeg ├── java.jpeg ├── java1.png ├── logo1.png ├── logo3.png ├── logo4.png ├── logo5.png ├── logo7.png ├── logo9.png ├── port.png ├── library.png ├── logo10.png ├── logo11.jpg ├── logo13.png ├── logo15.png ├── logo6..png ├── python.png ├── simple.png ├── javascript.png ├── guessinggame.png ├── html-removebg-preview.png ├── IMG_20230330_182554_516_11zon-removebg-preview.png ├── script.js ├── index.html └── style.css └── README.md /dhanu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/dhanu.png -------------------------------------------------------------------------------- /my personal/c++.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/c++.png -------------------------------------------------------------------------------- /my personal/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/c.png -------------------------------------------------------------------------------- /my personal/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/css.png -------------------------------------------------------------------------------- /my personal/dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/dev.png -------------------------------------------------------------------------------- /my personal/geo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/geo.png -------------------------------------------------------------------------------- /my personal/OIP.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/OIP.jpeg -------------------------------------------------------------------------------- /my personal/geo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/geo.jpeg -------------------------------------------------------------------------------- /my personal/java.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/java.jpeg -------------------------------------------------------------------------------- /my personal/java1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/java1.png -------------------------------------------------------------------------------- /my personal/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo1.png -------------------------------------------------------------------------------- /my personal/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo3.png -------------------------------------------------------------------------------- /my personal/logo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo4.png -------------------------------------------------------------------------------- /my personal/logo5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo5.png -------------------------------------------------------------------------------- /my personal/logo7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo7.png -------------------------------------------------------------------------------- /my personal/logo9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo9.png -------------------------------------------------------------------------------- /my personal/port.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/port.png -------------------------------------------------------------------------------- /my personal/library.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/library.png -------------------------------------------------------------------------------- /my personal/logo10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo10.png -------------------------------------------------------------------------------- /my personal/logo11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo11.jpg -------------------------------------------------------------------------------- /my personal/logo13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo13.png -------------------------------------------------------------------------------- /my personal/logo15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo15.png -------------------------------------------------------------------------------- /my personal/logo6..png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/logo6..png -------------------------------------------------------------------------------- /my personal/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/python.png -------------------------------------------------------------------------------- /my personal/simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/simple.png -------------------------------------------------------------------------------- /my personal/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/javascript.png -------------------------------------------------------------------------------- /my personal/guessinggame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/guessinggame.png -------------------------------------------------------------------------------- /my personal/html-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/html-removebg-preview.png -------------------------------------------------------------------------------- /my personal/IMG_20230330_182554_516_11zon-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/My-portfolio/HEAD/my personal/IMG_20230330_182554_516_11zon-removebg-preview.png -------------------------------------------------------------------------------- /my personal/script.js: -------------------------------------------------------------------------------- 1 | // Get the button element 2 | const darkModeBtn = document.getElementById("dark-icon"); 3 | 4 | // Get the body element 5 | const body = document.querySelector("body"); 6 | 7 | // add a click event listener to the function 8 | darkModeBtn.addEventListener("click", function () { 9 | // toggle the dark-theme class on the body element 10 | body.classList.toggle("dark-theme"); 11 | }); 12 | 13 | if(body.classList.contains('dark-theme')) { 14 | darkModeBtn.style.content = "\f185"; 15 | } 16 | 17 | // ..........togle menu button......... 18 | const menuBtn = document.querySelector('#bars'); 19 | const menu = document.querySelector('.menu'); 20 | 21 | menuBtn.addEventListener("click", () => { 22 | menu.classList.toggle('menu-toggle'); 23 | }) 24 | 25 | 26 | // ..............loading animation.............................. 27 | const loader = document.getElementById("loading-section"); 28 | 29 | window.addEventListener("load", function() { 30 | loader.style.display = "none"; 31 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My Portfolio 👩‍💻 2 | 3 | A responsive portfolio website developed using HTML, CSS, and JavaScript. 4 | 5 | ## Table of Contents 6 | - 📜 [Introduction](#introduction) 7 | - 🌟 [Features](#features) 8 | - 🚀 [Getting Started](#getting-started) 9 | - 💻 [Usage](#usage) 10 | - 📞 [Contact](#contact) 11 | - 📝 [License](#license) 12 | 13 | ## Introduction 14 | The Portfolio is a personal website showcasing my skills, projects, and contact information. It is built using HTML, CSS, and JavaScript to create an interactive and visually appealing user experience. 15 | 16 | ## Features 17 | - 🌐 Responsive design for multiple devices 18 | - 🧑‍🎓 About Me section with a profile picture and introduction 19 | - 🚀 Skills section with progress bars 20 | - 🎓 Education and Certificates section 21 | - 💼 Projects section 22 | - 📬 Contact Me section with a contact form and details 23 | 24 | ## Getting Started 25 | To use this portfolio locally, follow these steps: 26 | 27 | 1. 🔗 Clone the repository: `git clone https://github.com/ADVindiancoder/portfolio.git` 28 | 2. 📂 Open the project directory: `cd portfolio` 29 | 3. 🌐 Open the `index.html` file in a web browser 30 | 31 | ## Usage 32 | The portfolio website consists of different sections that can be navigated through the navigation menu: 33 | 34 | - 🏠 Home: Displays a profile picture, introduction, and buttons to navigate to the About Me and Contact Me sections. 35 | - 🧑‍💼 About Me: Provides information about me, including my education, skills, and personal skills. 36 | - 💼 Projects: Showcases my projects with details. 37 | - 📬 Contact Me: Allows visitors to send a message to me using a contact form and displays contact details. 38 | 39 | ## Contact 40 | For any inquiries or feedback, please feel free to contact me: 41 | 42 | - ✉️ Email: vinaykumar.it2021@dscet.ac.in 43 | - ☎️ Phone: +91 92629 55192 44 | - 🌍 Location: Chennai , India 45 | 46 | ## License 47 | This project is licensed under the 📝 [MIT License](LICENSE). Feel free to use, modify, and distribute this code as per the terms of the license. 48 | -------------------------------------------------------------------------------- /my personal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | my portfolio 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | 50 | 51 |
52 |
53 |
54 | 55 |
56 |
57 |

🖐🏻Hello, i'm Vinay Kumar

58 |

I am an aspiring java developer, Web developer, 59 | who is currently working as a freelancer for 60 | National and International Client

61 | 62 |
63 |     
64 | 65 |
66 | 67 |
68 |

my coding - Skills

69 |
70 | 71 |
72 |

C

73 | 74 | 75 |
76 | 77 |
78 |

java

79 | 80 | 81 |
82 | 83 |
84 |

Python

85 | 86 | 87 |
88 | 89 |
90 |

DSA

91 |

(Data Structure And Algorithm)

92 | 93 |
94 | 95 |
96 |

HTML

97 | 98 | 99 |
100 | 101 |
102 |

CSS

103 | 104 | 105 |
106 | 107 |
108 |

Javascript

109 | 110 | 111 |
112 |
113 |
114 | 115 | 116 |
117 |

118 | my - Projects 119 |

120 |
121 | 122 |
123 |

guessinggame

124 | 125 |
126 | 132 | 135 |
136 |
137 | 138 |
139 |

SI cal

140 | 141 |
142 | 144 | 148 |
149 |
150 | 151 |
152 |

LMS

153 | 154 |
155 | 157 | 161 |
162 |
163 | 164 |
165 |

Geo area cal

166 | 167 |
168 | 170 | 173 |
174 |
175 | 176 |
177 |

My portfolio

178 | 179 |
180 | 182 | 184 |
185 |
186 |
187 |
188 | 189 | 190 | 191 |
192 |

Contact - me

193 |
194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 |
203 | 204 | 205 |
206 |
207 |    208 |
209 | 210 | 242 | 243 | 244 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /my personal/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Hubballi&family=Roboto&family=Tilt+Warp&display=swap'); 2 | 3 | /* css reset */ 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: 'poppins', sans-serif; 9 | } 10 | 11 | body { 12 | background: var(--section-bg); 13 | transition: .0.7s; 14 | } 15 | 16 | html { 17 | scroll-behavior: smooth; 18 | } 19 | 20 | /* reset some default behavior */ 21 | a { 22 | text-decoration: none; 23 | } 24 | 25 | ul { 26 | list-style: none; 27 | } 28 | 29 | button { 30 | cursor: pointer; 31 | border: none; 32 | padding: 15px 20px; 33 | font-size: 20px; 34 | font-weight: 600; 35 | border-radius: 5px; 36 | } 37 | 38 | textarea { 39 | resize: none; 40 | } 41 | 42 | /* variable */ 43 | 44 | :root { 45 | --main-bg: linear-gradient(to right, #ffff, #f5f5f5, #eee); 46 | 47 | --hero-bg: #eaffef; 48 | 49 | --dark-icon: #2c2c2c; 50 | 51 | --dark-btn: "\f186"; 52 | 53 | --nav-bg: #ffffff; 54 | 55 | --menu-side-bar: #ffffff; 56 | 57 | --menu-color: #050097; 58 | 59 | --hero-para: #393939; 60 | 61 | --hero-span: #007cc4; 62 | 63 | --item-color: #272727; 64 | 65 | --item-bg: #ffffff; 66 | 67 | --section-bg: #eaffef; 68 | 69 | --section-heading: #000000; 70 | 71 | --contact-form-bg: #f5f5f5; 72 | 73 | --input-color: #000000; 74 | 75 | --input-border-bottom: #070707; 76 | } 77 | 78 | /* utility class */ 79 | 80 | .flex { 81 | display: flex; 82 | align-items: center; 83 | } 84 | 85 | .slide-left-right { 86 | animation-name: slide; 87 | animation-duration: 1.2s; 88 | transition-timing-function: cubic-bezier(.89, -0.87, .51, 1.2) 89 | } 90 | 91 | @keyframes slide { 92 | 0% { 93 | transform: translateX(-100%); 94 | } 95 | 96 | 100% { 97 | transform: translateX(0%); 98 | } 99 | } 100 | 101 | .section { 102 | padding: 0px 50px; 103 | flex-direction: column; 104 | background: var(--section-bg); 105 | min-height: 100vh; 106 | overflow: hidden; 107 | } 108 | 109 | .section-heading { 110 | color: var(--section-heading); 111 | font-size: 55px; 112 | font-family: 'Roboto', sans-serif; 113 | text-align: center; 114 | background: linear-gradient(to right, #69c3ff, #42b3ff, #18a2ff); 115 | border-bottom-right-radius: 50%; 116 | border-top-left-radius: 60%; 117 | width: 100vw; 118 | height: 80px; 119 | color: white; 120 | } 121 | 122 | .section-heading span { 123 | font-size: 45px; 124 | transform: translateY(18px); 125 | } 126 | 127 | .container { 128 | justify-content: center; 129 | flex-wrap: wrap; 130 | padding-top: 50px; 131 | gap: 35px; 132 | } 133 | 134 | .item { 135 | flex-direction: column; 136 | gap: 10px; 137 | padding: 20px; 138 | background: url(https://www.bing.com/images/search?view=detailV2&ccid=WlOupeDi&id=D6A0112687C3A98D5B1F8EE6CC7684AA8FDBCC43&thid=OIP.WlOupeDiR1kEN_cUdJ_ECQHaE7&mediaurl=https%3A%2F%2Fth.bing.com%2Fth%2Fid%2FR.5a53aea5e0e247590437f714749fc409%3Frik%3DQ8zbj6qEdszmjg%26riu%3Dhttp%253a%252f%252fwww.atrixware.com%252fblog%252fwp%252fwp-content%252fuploads%252f2011%252f06%252f1341348_84869156.jpg%26ehk%3D3mLU1Auz7aXH9d8fyVcGcohf5UGdJvIWRFuvKVArV08%253d%26risl%3D%26pid%3DImgRaw%26r%3D0&exph=438&expw=658&q=background+url+css&simid=608034152596252476&form=IRPRST&ck=79BD4285898351B347B78965136489AC&selectedindex=19&ajaxhist=0&ajaxserp=0&vt=2); 139 | border-radius: 50%; 140 | border: 1.7px solid #afafaf; 141 | box-shadow: 0 0 5px #ffffff; 142 | transition: 0.1s; 143 | transition-property: transform, box-shadow; 144 | } 145 | 146 | /* dark icon */ 147 | #dark-icon { 148 | font-size: 25px; 149 | color: var(--dark-icon); 150 | cursor: pointer; 151 | padding: 10px 13px; 152 | box-shadow: 0 0 5px gray; 153 | border-radius: 50%; 154 | background-color: var(--nav-bg); 155 | } 156 | 157 | #dark-icon::before { 158 | content: var(--dark-btn); 159 | } 160 | 161 | /* dark theme */ 162 | 163 | .dark-theme { 164 | 165 | /* --body-bg: #0d0c1e; */ 166 | --main-bg: url(./assists/dark-bg.png); 167 | 168 | --hero-bg: url(./assists/bg1.jpg); 169 | 170 | --dark-icon: #ffffff; 171 | 172 | --dark-btn: "\f185"; 173 | 174 | --menu-side-bar: #3a2a2a; 175 | 176 | --nav-bg: linear-gradient(to right, #121216, #180000); 177 | 178 | --menu-color: #f6f6ff; 179 | 180 | --hero-para: #f6e6e6; 181 | 182 | --hero-span: #0074b7; 183 | 184 | --item-color: #ffffff; 185 | 186 | --item-bg: #302e2e; 187 | 188 | --section-bg: #111118; 189 | 190 | --section-heading: #9ffff4; 191 | --contact-form-bg: #000000; 192 | 193 | --input-color: #ffffff; 194 | 195 | --input-border-bottom: #ffe7e7; 196 | } 197 | 198 | 199 | /* navbar */ 200 | nav { 201 | height: 70px; 202 | justify-content: space-around; 203 | background: var(--nav-bg); 204 | box-shadow: 0 0 10px #525252; 205 | position: sticky; 206 | top: 0; 207 | z-index: 100; 208 | } 209 | 210 | .logo img { 211 | height: 45px; 212 | width: 45px; 213 | border-radius: 50%; 214 | } 215 | 216 | .menu { 217 | padding: 0 25px; 218 | gap: 50px; 219 | } 220 | 221 | .menu a { 222 | color: var(--menu-color); 223 | font-size: 18px; 224 | font-weight: 700; 225 | } 226 | 227 | .menu a:hover, 228 | .menu a:active { 229 | color: #808080; 230 | text-decoration: underline; 231 | } 232 | 233 | .line { 234 | display: none; 235 | } 236 | 237 | #bars { 238 | font-size: 25px; 239 | color: #ff06de; 240 | display: none; 241 | } 242 | 243 | /* hero section */ 244 | 245 | 246 | .right-section { 247 | display: flex; 248 | flex-direction: column; 249 | justify-content: center; 250 | align-items: center; 251 | text-align: center; 252 | } 253 | 254 | .right-section h1 { 255 | font-size: 3rem; 256 | margin: 0; 257 | padding: 0; 258 | } 259 | 260 | .right-section h1 span { 261 | font-weight: bold; 262 | } 263 | 264 | .right-section p { 265 | font-size: 1.5rem; 266 | margin: 1rem 0; 267 | } 268 | 269 | .right-section p span { 270 | font-weight: bold; 271 | } 272 | 273 | .view-more-btn { 274 | background-color: #0091e6; 275 | border: none; 276 | border-radius: 5px; 277 | color: white; 278 | font-size: 1rem; 279 | padding: 0.5rem 1rem; 280 | cursor: pointer; 281 | transition: background-color 0.3s ease; 282 | } 283 | 284 | .view-more-btn:hover { 285 | background-color: #00db00; 286 | } 287 | 288 | #hero-section { 289 | background: var(--hero-bg); 290 | background-repeat: no-repeat; 291 | background-size: cover; 292 | background-position: center; 293 | height: 90vh; 294 | display: flex; 295 | justify-content: center; 296 | align-items: center; 297 | } 298 | 299 | #contact form { 300 | margin-top: 50px; 301 | display: flex; 302 | flex-direction: column; 303 | align-items: flex-start; 304 | justify-content: space-between; 305 | gap: 15px; 306 | background-color: var(--contact-form-bg); 307 | height: 500px; 308 | width: 30vw; 309 | border-radius: 15px; 310 | padding: 20px; 311 | } 312 | 313 | #contact form label { 314 | font-size: 18px; 315 | color: #702df6; 316 | font-weight: 600; 317 | position: relative; 318 | } 319 | 320 | #contact form label span { 321 | color: var(--input-color); 322 | } 323 | 324 | #contact form input, 325 | #contact form textarea { 326 | background-color: transparent; 327 | border: none; 328 | width: 100%; 329 | font-size: 18px; 330 | color: var(--input-color); 331 | border-bottom: 3px solid var(--input-border-bottom); 332 | transition: border 0.3s ease; 333 | } 334 | 335 | #contact form input:focus, 336 | #contact form textarea:focus { 337 | outline: none; 338 | border-bottom: 3px solid blueviolet; 339 | } 340 | 341 | #contact .form-btn-container { 342 | display: flex; 343 | justify-content: space-between; 344 | align-items: center; 345 | width: 100%; 346 | margin-top: 25px; 347 | } 348 | 349 | #contact .btn-reset, 350 | #contact .btn-submit { 351 | width: 48%; 352 | background-color: #0091e6; 353 | border: none; 354 | color: #fff; 355 | border-radius: 5px; 356 | font-size: 1rem; 357 | padding: 0.5rem 1rem; 358 | cursor: pointer; 359 | transition: background-color 0.3s ease; 360 | } 361 | 362 | #contact .btn-reset:hover, 363 | #contact .btn-submit:hover { 364 | background-color: #00db00; 365 | } 366 | 367 | #contact .btn-reset { 368 | border-top-left-radius: 15px; 369 | } 370 | 371 | #contact .btn-submit { 372 | border-top-right-radius: 15px; 373 | } 374 | 375 | 376 | 377 | /* footer */ 378 | footer { 379 | background: linear-gradient(#eaffef, #ff6600); 380 | color: wheat; 381 | height: 50vh; 382 | justify-content: space-evenly; 383 | align-items: center; 384 | gap: 45px; 385 | margin-top: 100px; 386 | } 387 | 388 | .footer-parts { 389 | justify-content: center; 390 | gap: 150px; 391 | } 392 | 393 | .social-icons-container { 394 | flex-direction: column; 395 | gap: 50px; 396 | } 397 | 398 | footer p { 399 | color: #c300ff; 400 | font-size: 35px; 401 | font-weight: 800; 402 | font-family: 'Courier New', Courier, monospace; 403 | letter-spacing: 1px; 404 | text-decoration: underline; 405 | } 406 | 407 | /* social icons */ 408 | .social-icons { 409 | justify-content: center; 410 | gap: 30px; 411 | } 412 | 413 | 414 | .social-icons i { 415 | font-size: 30px; 416 | height: 60px; 417 | width: 60px; 418 | display: flex; 419 | justify-content: center; 420 | align-items: center; 421 | font-weight: 700; 422 | padding: 10px; 423 | background-color: #ffffff; 424 | border-radius: 50%; 425 | transition: .4s; 426 | } 427 | 428 | .social-icons a:hover { 429 | transform: translateY(-10px); 430 | } 431 | 432 | 433 | .links { 434 | flex-direction: column; 435 | gap: 15px; 436 | font-size: 16px; 437 | cursor: pointer; 438 | } 439 | 440 | 441 | .links a { 442 | color: #0025f7; 443 | text-transform: uppercase; 444 | font-weight: 500; 445 | } 446 | 447 | .links p { 448 | font-weight: 800; 449 | color: #c300ff; 450 | font-size: 22px; 451 | } 452 | 453 | .arrow-top { 454 | font-size: 70px; 455 | color: #0000e4; 456 | } 457 | 458 | /* media query */ 459 | 460 | @media screen and (max-width: 900px) { 461 | .section { 462 | padding: 0px 50px; 463 | min-height: 90vh; 464 | } 465 | 466 | .section-heading { 467 | font-size: 25px; 468 | padding-top: 5px; 469 | } 470 | 471 | #hero-section { 472 | height: 90vh; 473 | background: none; 474 | align-items: flex-start; 475 | } 476 | 477 | #main-section { 478 | flex-direction: column; 479 | justify-content: flex-start; 480 | height: fit-content; 481 | width: 100vw; 482 | background-size: cover; 483 | border-radius: 0; 484 | box-shadow: none; 485 | padding: 3px; 486 | } 487 | 488 | .left-section { 489 | width: 100%; 490 | display: flex; 491 | justify-content: center; 492 | padding: 35px; 493 | } 494 | 495 | 496 | .left-section img { 497 | width: 70%; 498 | } 499 | 500 | .right-section { 501 | width: 100%; 502 | text-align: center; 503 | gap: 25px; 504 | } 505 | 506 | .right-section h1 { 507 | font-size: 40px; 508 | } 509 | 510 | #skills { 511 | padding-inline: 7vw; 512 | } 513 | 514 | #contact form { 515 | width: 50vw; 516 | } 517 | 518 | #contact form input, 519 | #contact form textarea { 520 | width: 40vw; 521 | } 522 | 523 | .footer-parts { 524 | gap: 90px; 525 | } 526 | } 527 | 528 | @media screen and (max-width: 750px) { 529 | 530 | #projects { 531 | padding: 40px 0 0 0; 532 | 533 | } 534 | 535 | .project-container { 536 | padding-top: 60px; 537 | gap: 10px; 538 | } 539 | 540 | .project { 541 | width: 45%; 542 | gap: 10px; 543 | height: fit-content; 544 | } 545 | 546 | .project h2 { 547 | font-size: 18px; 548 | } 549 | 550 | .btn-container i { 551 | font-size: 15px; 552 | } 553 | 554 | .footer-parts { 555 | gap: 50px; 556 | } 557 | } 558 | 559 | @media screen and (max-width: 590px) { 560 | 561 | nav { 562 | height: 60px; 563 | justify-content: space-between; 564 | padding: 0 30px; 565 | } 566 | 567 | .logo img { 568 | height: 40px; 569 | width: 40px; 570 | } 571 | 572 | #bars { 573 | display: block; 574 | cursor: pointer; 575 | } 576 | 577 | 578 | 579 | 580 | .menu { 581 | flex-direction: column; 582 | gap: 25px; 583 | position: fixed; 584 | top: 25vh; 585 | left: -100%; 586 | background-color: var(--menu-side-bar); 587 | border-top-right-radius: 7px; 588 | border-bottom-right-radius: 10px; 589 | box-shadow: 1px 1px 5px grey; 590 | padding: 30px; 591 | transition: 0.8s; 592 | } 593 | 594 | .line { 595 | display: inline; 596 | height: 1px; 597 | width: 100%; 598 | background-color: var(--dark-icon); 599 | opacity: 0.7; 600 | box-shadow: 0 0 15px #808080; 601 | } 602 | 603 | .menu.menu-toggle { 604 | left: 0; 605 | } 606 | 607 | 608 | 609 | .menu a:hover { 610 | color: gray; 611 | } 612 | 613 | .left-section { 614 | padding-top: 15px; 615 | } 616 | 617 | .left-section img { 618 | width: 100%; 619 | } 620 | 621 | .right-section h1 { 622 | line-height: 40px; 623 | } 624 | 625 | .right-section p { 626 | padding: 0 15px; 627 | } 628 | 629 | 630 | #skills { 631 | padding-inline: 1vw; 632 | padding-top: 1px; 633 | } 634 | 635 | .skills-container { 636 | gap: 15px; 637 | } 638 | 639 | 640 | 641 | 642 | .skill h2 { 643 | font-size: 12px; 644 | font-weight: 800; 645 | } 646 | 647 | .DSA { 648 | height: 165px; 649 | } 650 | 651 | .DSA h3 { 652 | font-size: 15px; 653 | } 654 | 655 | .project h2 { 656 | font-size: 12px; 657 | text-transform: uppercase; 658 | text-align: center; 659 | } 660 | 661 | .btn-container i { 662 | font-size: 14px; 663 | padding: 5px; 664 | } 665 | 666 | 667 | #contact form { 668 | width: 90vw; 669 | } 670 | 671 | #contact form input, 672 | #contact form textarea { 673 | width: 65vw; 674 | } 675 | 676 | footer { 677 | height: 50vh; 678 | } 679 | 680 | .footer-parts { 681 | flex-direction: column; 682 | } 683 | 684 | footer { 685 | gap: 10px; 686 | } 687 | 688 | 689 | .social-icons-container { 690 | gap: 25px; 691 | } 692 | 693 | footer p { 694 | font-size: 25px; 695 | font-weight: 700; 696 | } 697 | 698 | 699 | 700 | 701 | .social-icons { 702 | gap: 15px; 703 | } 704 | 705 | .social-icons i { 706 | font-size: 25px; 707 | height: 40px; 708 | width: 40px; 709 | } 710 | 711 | .social-icons a:hover { 712 | transform: translateY(-10px); 713 | } 714 | 715 | 716 | .links { 717 | gap: 10px; 718 | } 719 | 720 | .arrow-top { 721 | font-size: 40px; 722 | } 723 | 724 | } 725 | 726 | 727 | 728 | /* loading animation */ 729 | 730 | #loading-section { 731 | height: 100vh; 732 | display: flex; 733 | justify-content: center; 734 | align-items: center; 735 | background-color: #f5f5f5; 736 | z-index: 10000; 737 | position: fixed; 738 | top: 0; 739 | left: 0; 740 | right: 0; 741 | bottom: 0; 742 | } 743 | 744 | 745 | 746 | 747 | 748 | 749 | .loading-container { 750 | border: 3px solid #0000e4; 751 | height: 80px; 752 | width: 100px; 753 | border-radius: 50%; 754 | display: inline-flex; 755 | justify-content: center; 756 | align-items: center; 757 | animation-name: circle; 758 | animation-duration: 1s; 759 | animation-delay: 0ms; 760 | animation-direction: alternate-reverse; 761 | /* animation-delay: 0.5s; */ 762 | animation-timing-function: cubic-bezier(1, 0, 0, 1); 763 | animation-iteration-count: infinite; 764 | } 765 | 766 | 767 | 768 | .loading-circle { 769 | height: 15px; 770 | width: 15px; 771 | background-color: #ff0000; 772 | border-radius: 50%; 773 | animation-name: updown; 774 | animation-duration: 0.3s; 775 | animation-timing-function: cubic-bezier(1, 0, 0, 1); 776 | animation-iteration-count: infinite; 777 | } 778 | 779 | .loading-circle:nth-child(1) { 780 | animation-delay: 0s; 781 | } 782 | 783 | .loading-circle:nth-child(2) { 784 | background-color: #0000ff; 785 | animation-delay: 0.2s; 786 | } 787 | 788 | 789 | 790 | .loading-circle:nth-child(3) { 791 | background-color: #d8d800; 792 | animation-delay: 0.4s; 793 | } 794 | 795 | .loading-circle:nth-child(4) { 796 | background-color: black; 797 | animation-delay: 0.6s; 798 | } 799 | 800 | @keyframes circle { 801 | 0% { 802 | transform: rotate(0); 803 | } 804 | 100% { 805 | transform: rotate(360deg); 806 | } 807 | } 808 | 809 | @keyframes updown { 810 | 0% { 811 | transform: translate(0); 812 | } 813 | 100% { 814 | transform: translate(0, -12px); 815 | } 816 | } 817 | --------------------------------------------------------------------------------