├── Photo.jpg ├── mynta.jpg ├── netflix.jpg ├── webify.jpg ├── Resume_compressed.pdf ├── SECURITY.md ├── README.md ├── thor.js ├── CODE_OF_CONDUCT.md ├── index.html └── style.css /Photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/portfolio/HEAD/Photo.jpg -------------------------------------------------------------------------------- /mynta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/portfolio/HEAD/mynta.jpg -------------------------------------------------------------------------------- /netflix.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/portfolio/HEAD/netflix.jpg -------------------------------------------------------------------------------- /webify.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/portfolio/HEAD/webify.jpg -------------------------------------------------------------------------------- /Resume_compressed.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/portfolio/HEAD/Resume_compressed.pdf -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌐 Subham Nayak's Portfolio 2 | 3 | Welcome to my personal portfolio website! This site showcases my skills, projects, and contact information as a Frontend Developer. The site features a responsive design with light and dark modes. 4 | 5 | ## 🚀 Live Demo 6 | 7 | Check out the live deployed version here: 8 | 👉 [https://shubham-cyber-prog.github.io/portfolio/](https://shubham-cyber-prog.github.io/portfolio/) 9 | 10 | ## 📸 Screenshots 11 | 12 | ### 🌞 Light Mode 13 | (![image](https://github.com/user-attachments/assets/66a145d1-1cc2-476f-922b-59fd667fb27f) 14 | 15 | 16 | ### 🌙 Dark Mode 17 | (![image](https://github.com/user-attachments/assets/8f3e3e05-f18b-43f9-9a45-6441c31261ab) 18 | 19 | ## 💻 Features 20 | 21 | - Animated typing effect 22 | - Light/Dark mode toggle 23 | - Fully responsive layout 24 | - Smooth navigation 25 | - Social media integration 26 | - CV download button 27 | 28 | ## 🛠️ Tech Stack 29 | 30 | - HTML5 31 | - CSS3 32 | - JavaScript 33 | 34 | ## 📁 Repository 35 | 36 | GitHub Repository: 37 | 👉 [https://github.com/Shubham-cyber-prog/portfolio.git](https://github.com/Shubham-cyber-prog/portfolio.git) 38 | 39 | ## 🌐 How to Deploy on GitHub Pages 40 | 41 | 1. Go to your GitHub repository settings. 42 | 2. Scroll down to the **Pages** section. 43 | 3. Under **Source**, select the branch `main` (or your default branch). 44 | 4. Select the folder `/ (root)` where your `index.html` is located. 45 | 5. Click **Save**. 46 | 6. Your site will be published at: 47 | `https://.github.io//` 48 | In your case: 49 | [https://shubham-cyber-prog.github.io/portfolio/](https://shubham-cyber-prog.github.io/portfolio/) 50 | 51 | ## 📬 Contact 52 | 53 | - LinkedIn: [linkedin.com/in/subham-nayak](https://www.linkedin.com/in/subham-nayak) 54 | - GitHub: [@Shubham-cyber-prog](https://github.com/Shubham-cyber-prog) 55 | 56 | --- 57 | 58 | Thank you for visiting! 😊 59 | 60 | -------------------------------------------------------------------------------- /thor.js: -------------------------------------------------------------------------------- 1 | gsap.to(".box1",{ 2 | x:1500, 3 | duration :1.5, 4 | delay:1, 5 | rotate:360, 6 | borderRadius:"50%", 7 | backgroundColor:"blue", 8 | scale:0.5, 9 | repeat:-1, 10 | yoyo:true, 11 | }) 12 | gsap.from(".box2",{ 13 | x:1000, 14 | y:1000, 15 | duration:2, 16 | delay:1, 17 | rotate:360, 18 | borderRadius:"50%", 19 | backgroundColor:"blue", 20 | repeat:-1, 21 | 22 | }) 23 | gsap.to(".box3",{ 24 | x:1000, 25 | y:500, 26 | duration:3, 27 | delay:1, 28 | rotate:120, 29 | borderRadius:"50%", 30 | backgroundColor:"blue", 31 | stagger:0.5, 32 | repeat:-1, 33 | }) 34 | gsap.from(".box4",{ 35 | x:1500, 36 | duration:1.5, 37 | delay:1, 38 | rotate:360, 39 | borderRadius:"50%", 40 | backgroundColor:"goldenrod", 41 | stagger:0.5, 42 | repeat:-1, 43 | yoyo:true, 44 | }) 45 | gsap.from(".text-info",{ 46 | y:20, 47 | opacity:0, 48 | color:"blue", 49 | duration:1, 50 | delay:1, 51 | stagger:0.5, 52 | scale:0.5, 53 | }) 54 | 55 | function myMenuFunction(){ 56 | var menuBth = document .getElementById("myNavMenu"); 57 | 58 | if (menuBth.className === "nav-menu") { 59 | menuBth.className += " responsive"; 60 | }else{ 61 | menuBth.className = "nav-menu"; 62 | } 63 | } 64 | function downloadCV(){ 65 | const cvLink = "Subham_Nayak_cv.pdf"; 66 | window.open(cvLink,"_blank"); 67 | } 68 | 69 | const body = document.querySelector("body"), 70 | toggleSwitch = document.getElementById("toggle-switch"); 71 | 72 | toggleSwitch.addEventListener("click",() =>{ 73 | body.classList.toggle("dark"); 74 | }); 75 | 76 | 77 | var typingEffect = new Typed(".typedText",{ 78 | strings: ["Frontend Developer", "Coder"], 79 | 80 | loop:true, 81 | typeSpeed: 120, 82 | backSpeed:100, 83 | backDelay:2000, 84 | }); 85 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Personal Portfolio Website 7 | 8 | 9 | 10 | 11 | 12 |
13 | 52 |
53 | 82 |
83 |
84 |

About me

85 |
86 |
87 |
88 |
89 |
90 |
91 | photo 92 |

Web developer

93 |

Hello! I'm Subham Nayak, a dedicated Computer Science Engineering student with a passion for web development and programming.

94 | 95 |
96 | 97 |
98 |
99 |
100 |
101 | HTML 102 |
103 | 104 | 75% 105 | 106 |
107 |
108 |
109 | CSS 110 |
111 | 112 | 80% 113 | 114 |
115 |
116 |
117 | C Programming 118 |
119 | 120 | 70% 121 | 122 |
123 |
124 |
125 | JavaScript 126 |
127 | 128 | 30% 129 | 130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |

Projects

138 |
139 |
140 |
141 | 142 |

Completed

143 | 144 |
145 |
146 | 147 |

Clients

148 | 149 |
150 |
151 | 152 |

Experience

153 | 154 |
155 |
156 | 157 |
158 |
159 |
160 |
161 |

Latest Projects

162 |
163 |
164 | Webify 165 |
166 |
Webify
167 |

Webify Project 168 | Created a responsive website for Travelista Tours using HTML and CSS, featuring an interactive login page 169 | and a user-friendly design.

170 | 171 |
172 |
173 |
174 | Netflix 175 |
176 |
Netflix
177 |

Netflix Clone 178 | Developed a Netflix clone using HTML, CSS, and JavaScript, featuring a responsive UI and interactive design to 179 | simulate the original platform's look and feel.

180 | 181 |
182 |
183 |
184 | Myntra 185 |
186 |
Myntra
187 |

Myntra Clone 188 | Created a Myntra clone using HTML, CSS, and JavaScript, showcasing a responsive design and seamless user interface inspired by the original e-commerce platform.

189 | 190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |

Let's Work Together

199 | Do you have a project in mind? Let's get in touch! 200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |

Find Me

211 |

Email:sn343555@gmail.com

212 |

Phone:8249571246

213 |
214 |
215 |
216 |
217 |
218 | 219 | 220 |
221 |
222 | 223 | 224 |
225 |
226 | 227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 | 249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |

Copyright&Copy; GeetaUniversity.All Rights Reserved2025

258 |
259 |
260 |
261 | 262 | 263 | 264 | 265 | 266 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:wght@400;500;700&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing:border-box ; 8 | font-family: "poppins", sans-serif; 9 | } 10 | 11 | .box1{ 12 | height:200px; 13 | width:200px; 14 | background-color: blue; 15 | display:flex; 16 | } 17 | .box2{ 18 | height:300px; 19 | width:300px; 20 | background-color: chartreuse; 21 | display: flex; 22 | } 23 | .box3{ 24 | height:300px; 25 | width:300px; 26 | background-color: rgb(12, 12, 12); 27 | display: flex; 28 | } 29 | .box4{ 30 | height:300px; 31 | width:300px; 32 | background-color: rgb(233, 249, 16); 33 | display: flex; 34 | } 35 | 36 | :root{ 37 | --body-color:rgba(250,250,250); 38 | --color-white:rgb(254, 250, 250); 39 | --text-color-second:rgb(3, 3, 3); 40 | --first-color:cyan; 41 | --first-shadow:rgba(0,0,0,0.1); 42 | --main-color:cyan; 43 | 44 | --box-color:#fff; 45 | --nav-icon:#000; 46 | --nav-color:#f5f0f0; 47 | --logo-color:#111111; 48 | --text-color:#0e0d0d; 49 | --color-white:#242526; 50 | --icon-color:#242526; 51 | --mode-color:#ccc; 52 | } 53 | body{ 54 | background:var(--body-color); 55 | } 56 | body.dark{ 57 | --body-color:#202425; 58 | --box-color:#fff; 59 | 60 | --nav-color:#262425; 61 | --color-white:#fff; 62 | --text-color:#fffbfb; 63 | 64 | --nav-icon:#fff; 65 | --logo-color:#f4eaea; 66 | --icon-color:cyan; 67 | --mode-color:#fff; 68 | 69 | } 70 | .container{ 71 | width:100%; 72 | position:relative; 73 | } 74 | html{ 75 | scroll-behavior: smooth; 76 | } 77 | nav{ 78 | position:fixed; 79 | display:flex; 80 | justify-content: space-between; 81 | width:100%; 82 | height:90px; 83 | line-height:100px; 84 | background:var(--nav-color); 85 | padding-inline:10vw; 86 | transition:0.3s; 87 | z-index:100; 88 | } 89 | .nav-logo{ 90 | position:relative; 91 | } 92 | .nav-name{ 93 | font-size:40px; 94 | font-weight:600; 95 | color:var(--logo-color); 96 | } 97 | .nav-menu,.nav_menu_list{ 98 | display:flex; 99 | column-gap: -30px; 100 | } 101 | .nav_list:hover{ 102 | box-shadow: 5px 5px 25px rgb(124, 113, 113); 103 | } 104 | .nav-menu .nav_list{ 105 | list-style: none; 106 | position:relative; 107 | } 108 | .nav-link { 109 | text-decoration:none; 110 | color:var(--text-color); 111 | font-weight:500; 112 | padding-inline:15px; 113 | margin-inline:20px; 114 | } 115 | .nav-menu-btn{ 116 | display:none; 117 | } 118 | .nav-menu-btn i{ 119 | font-size:28px; 120 | cursor:pointer; 121 | color:var(--nav-icon); 122 | } 123 | .active-link{ 124 | position:relative; 125 | color:var(--first-color); 126 | transition:0.3s; 127 | } 128 | .active-link::after{ 129 | content:""; 130 | position:absolute; 131 | left:50%; 132 | bottom:-15px; 133 | transform: translate(-50%,-50%); 134 | width:50px; 135 | height:2px; 136 | background:var(--first-color); 137 | } 138 | .mode{ 139 | display:flex; 140 | align-items:center; 141 | margin-right:-2%; 142 | } 143 | .moon-sun{ 144 | position:relative; 145 | display:flex; 146 | align-items:center; 147 | justify-content:center; 148 | height:40px; 149 | width:40px; 150 | border-radius:30px; 151 | cursor:pointer; 152 | background:var(--mode-color); 153 | } 154 | .moon-sun :is(#moon, #sun){ 155 | position: absolute; 156 | transition:0.2s ease-in-out; 157 | } 158 | #sun{ 159 | opacity:0; 160 | } 161 | body.dark #sun{ 162 | opacity:1; 163 | } 164 | body.dark #moon{ 165 | opacity:0; 166 | } 167 | .wrapper{ 168 | padding-inline:10vw; 169 | } 170 | .featured-box{ 171 | position:relative; 172 | display:flex; 173 | height:100vh; 174 | min-height:700px; 175 | } 176 | .featured-text{ 177 | position:relative; 178 | display:flex; 179 | justify-content: center; 180 | min-height:100vh; 181 | flex-direction: column; 182 | width:50%; 183 | padding-left:20px; 184 | margin-top:10%; 185 | 186 | } 187 | .featured-text .hello{ 188 | font-size:50px; 189 | font-weight:500; 190 | margin-bottom:-20px; 191 | color:var(--text-color); 192 | } 193 | .featured-name{ 194 | font-size:50px; 195 | font-weight:700; 196 | margin-block:20px; 197 | color:cyan; 198 | margin-bottom:10px; 199 | } 200 | .typedText{ 201 | font-family: sans-serif; 202 | color:cyan; 203 | font-size: 8; 204 | font-weight: 600; 205 | text-transform:capitalize; 206 | } 207 | .text-info{ 208 | font-size:25px; 209 | margin-bottom:30px; 210 | color:var(--text-color); 211 | } 212 | .text-btn{ 213 | display:flex; 214 | border-radius:0px; 215 | cursor:pointer; 216 | gap:20px; 217 | } 218 | .text-btn .btn{ 219 | border:none; 220 | color:#360808; 221 | box-shadow:0px 0px 10px 10px rgba(192, 163, 163, 0.1); 222 | } 223 | 224 | .btn{ 225 | text-decoration:none; 226 | font-size:15px; 227 | padding:10px 20px; 228 | cursor:pointer; 229 | border-radius: 8px; 230 | background:cyan; 231 | font-weight:500; 232 | transition:all 0.5s ease; 233 | } 234 | .hire-btn{ 235 | background-color: cyan; 236 | border-radius: 8px; 237 | font-size:15px; 238 | cursor:pointer; 239 | font-weight:500; 240 | transition:all 0.5s ease ; 241 | text-decoration:none; 242 | padding:10px 20px ; 243 | border: none; 244 | } 245 | .hire-btn:hover, .btn:hover{ 246 | background-color: cyan; 247 | } 248 | .btn i { 249 | margin-right:10px; 250 | } 251 | i{ 252 | font-size:16px; 253 | } 254 | .social_icons{ 255 | display:flex; 256 | margin-top: 30px; 257 | margin-left: 5px; 258 | gap:32px; 259 | } 260 | .social_icons .icon{ 261 | display: flex; 262 | justify-content:center ; 263 | align-items:center; 264 | width:40px; 265 | height:40px; 266 | color:var(--icon-color); 267 | border-radius: 50%; 268 | box-shadow: 0px 1px 5px 3px cyan; 269 | 270 | } 271 | .social_icons div:hover{ 272 | background-color: cyan; 273 | box-shadow:5px 5px 25px cyan ; 274 | } 275 | .icon_circle{ 276 | position: absolute; 277 | transition: transform(-50%,-50%); 278 | width:40px; 279 | height: 40px; 280 | border-radius: 50px; 281 | animation: iconSlide 4s infinite alternate; 282 | } 283 | 284 | @keyframes iconSlide{ 285 | 25%{ 286 | border: 2px solid rgb(245, 8, 83) ; 287 | left:0px; 288 | } 289 | 50%{ 290 | border: 2px solid blue ; 291 | left:70px; 292 | } 293 | 294 | 75%{ 295 | border: 2px solid rgb(7, 248, 43) ; 296 | left:145px; 297 | } 298 | 299 | 100%{ 300 | border: 2px solid rgb(238, 255, 0) ; 301 | left:216px; 302 | } 303 | } 304 | .social_icons:hover .icon_circle{ 305 | animation-play-state: paused; 306 | cursor: pointer; 307 | } 308 | .featured-image{ 309 | display:flex; 310 | justify-content:right; 311 | align-items:center; 312 | min-height:80vh; 313 | width:100%; 314 | } 315 | .image{ 316 | margin:10%; 317 | width:500px; 318 | height:700px; 319 | border-radius: 40% 40% 40% 40%; 320 | overflow: hidden; 321 | animation: imgFloat 5s ease-in-out infinite; 322 | } 323 | .image img{ 324 | width:500px; 325 | height:700px; 326 | object-fit: cover; 327 | } 328 | @keyframes imgFloat{ 329 | 50%{ 330 | transform:translateY(50px); 331 | } 332 | } 333 | .section{ 334 | padding-block: 5em; 335 | } 336 | .row{ 337 | display:flex; 338 | justify-content: space-between; 339 | width:100%; 340 | gap:50px; 341 | 342 | } 343 | .col{ 344 | display:flex; 345 | width:50%; 346 | } 347 | .top-header{ 348 | text-align:center; 349 | margin-bottom: 5em;; 350 | } 351 | .top-header h1{ 352 | font-weight: 600; 353 | font-size: 40px; 354 | color:var(--text-color); 355 | margin-bottom:10px; 356 | } 357 | .about-info{ 358 | position: relative; 359 | display: flex; 360 | align-items: center; 361 | flex-direction: column; 362 | padding-block: 45px 45px; 363 | padding-inline:35px; 364 | border:2px solid whitesmoke; 365 | background: transparent; 366 | box-shadow: 1px 8px 10px 2px var(--first-shadow); 367 | border-radius: 20px; 368 | } 369 | .about-me *{ 370 | -webkit-box-sizing: border-box; 371 | box-sizing: border-box; 372 | -webkit-transition: all 0.25s ease; 373 | transition:all 0.25s ease; 374 | } 375 | .about-info figcaption{ 376 | width: 100%; 377 | padding: 25px; 378 | position: relative; 379 | } 380 | .about-me .profile{ 381 | border-radius: 50%; 382 | position: absolute; 383 | bottom:100%; 384 | left:20px; 385 | z-index: 1; 386 | background-color:white; 387 | max-width:90px; 388 | box-shadow: 0 0 15px rgba(0,0,0,0.3); 389 | 390 | } 391 | .about-me h2{ 392 | color: var(--text-color); 393 | } 394 | .about-me p{ 395 | margin-top: 10px; 396 | color:var(--text-color) 397 | } 398 | .about-info .about-me-btn{ 399 | text-decoration :none; 400 | font-size:15px; 401 | padding:10px 20px ; 402 | cursor:pointer; 403 | border:none; 404 | border-radius: 15px; 405 | background: cyan; 406 | color:#fff; 407 | font-weight:550; 408 | margin-top: 20px; 409 | transition:all0.5s ease; 410 | 411 | } 412 | .skill{ 413 | position:relative; 414 | max-width:600px; 415 | width:100%; 416 | background:transparent; 417 | box-shadow: 1px 8px 10px 2px var(--first-shadow); 418 | padding: 10px 20px ; 419 | border-radius: 20px; 420 | 421 | 422 | }.skill .skill-box{ 423 | width: 100%; 424 | margin:25px 0; 425 | 426 | } 427 | .skill-box .title{ 428 | display:block; 429 | font-size: 14px; 430 | font-weight: 600; 431 | color: var(--text-color); 432 | } 433 | .skill-box .skill-bar{ 434 | width: 100%; 435 | height: 8px; 436 | border-radius: 6px; 437 | margin-top: 6px; 438 | background: #030202; 439 | } 440 | .skill-box .skill-per{ 441 | position: relative; 442 | display: block; 443 | height: 100%; 444 | border-radius: 6px; 445 | background: cyan; 446 | animation: progress 0.4s ease-in-out forwards; 447 | } 448 | .skill-per.html{ 449 | animation-delay: 0.1s; 450 | width:75%; 451 | } 452 | .skill-per.css{ 453 | animation-delay: 0.1s; 454 | width:80%; 455 | } 456 | .skill-per.c.programming{ 457 | animation-delay: 0.1s; 458 | width:70%; 459 | } 460 | .skill-per.Javascript{ 461 | animation-delay: 0.1s; 462 | width:30%; 463 | } 464 | @keyframes progress{ 465 | 0%{ 466 | width: 0; 467 | opacity:1; 468 | } 469 | 100%{ 470 | opacity: 1; 471 | } 472 | } 473 | .skill-per .tooltip{ 474 | position: absolute; 475 | right: -14px; 476 | top:-28px; 477 | font-size: 9px; 478 | color: #fff; 479 | padding: 2px 6px; 480 | border-radius: 20px; 481 | background: navy; 482 | z-index: 1; 483 | } 484 | .project-container{ 485 | display: flex; 486 | width: 100%; 487 | justify-content: space-between; 488 | gap: 20px; 489 | flex-wrap: wrap; 490 | } 491 | .project-box{ 492 | display: flex; 493 | position: relative; 494 | justify-content: center; 495 | align-items: center; 496 | flex-direction: column; 497 | width:30%; 498 | height:250px; 499 | background: transparent; 500 | border: 2px solid #fff; 501 | border-radius: 20px; 502 | box-shadow:1px 8px 10px 2px var(--first-shadow); 503 | overflow: hidden; 504 | cursor: pointer; 505 | } 506 | .project-box > i { 507 | font-size: 50px; 508 | color:cyan; 509 | margin-bottom: 25px; 510 | 511 | } 512 | .project-box label{ 513 | font-size: 15px; 514 | color:var(--text-color); 515 | } 516 | .project-box::after, 517 | .contact-info::after{ 518 | content: ""; 519 | position: absolute; 520 | bottom:-100%; 521 | background: cyan; 522 | width:100%; 523 | height:100%; 524 | transition:0.4s; 525 | z-index:0.1; 526 | } 527 | .project-box:hover.project-box::after, 528 | .contact-info:hover.contact-info::after{ 529 | bottom: 0; 530 | } 531 | .project-box:hover.project-box i, 532 | .project-box:hover.project-box > h3, 533 | .project-box:hover.project-box >label { 534 | color:#fff; 535 | z-index: 2; 536 | } 537 | .main-text{ 538 | padding-top: 110px; 539 | margin-top: 200px; 540 | } 541 | .main-text h2{ 542 | font-size: 40px; 543 | line-height: 1; 544 | text-align: center; 545 | margin-bottom: 10px; 546 | } 547 | .main-text h2 span{ 548 | color:cyan; 549 | } 550 | .portfolio-content{ 551 | display: grid; 552 | grid-template-columns: repeat(auto-fit,minmax(350px,auto)); 553 | } 554 | .row{ 555 | position: relative; 556 | overflow: hidden; 557 | border-radius: 8px; 558 | cursor: pointer; 559 | } 560 | .row img{ 561 | width: 100%; 562 | border-radius: 8px; 563 | display: block; 564 | transition: transform 0.5s; 565 | } 566 | .layer{ 567 | width: 100%; 568 | height: 0; 569 | background: linear-gradient(rgba( 0,0,0,0.1),cyan); 570 | position: absolute; 571 | border-radius: 8px; 572 | left: 0; 573 | bottom: 0; 574 | overflow: hidden; 575 | display: flex; 576 | flex-direction: column; 577 | align-items: center; 578 | justify-content: center; 579 | text-align: center; 580 | padding: 0 40px; 581 | transition: height 0.5s; 582 | } 583 | .layer h5{ 584 | color: #000; 585 | font-size: 20px; 586 | font-weight: 600; 587 | margin-bottom: 15px; 588 | } 589 | .layer p{ 590 | color: #000; 591 | font-size: 1rem; 592 | line-height: 1.8; 593 | } 594 | .layer i { 595 | color: #ff004f; 596 | margin-top: 20px; 597 | font-size: 20px; 598 | background: #fff; 599 | width: 60px; 600 | height: 60px; 601 | display: flex; 602 | align-items: center; 603 | justify-content: center; 604 | border-radius: 50%; 605 | 606 | } 607 | .row:hover img { 608 | transform: scale(1.1); 609 | } 610 | .row:hover .layer{ 611 | height: 100%; 612 | 613 | } 614 | 615 | .top-header span { 616 | color:var(--text-color); 617 | } 618 | 619 | .contact-info{ 620 | position:relative; 621 | display: flex; 622 | flex-direction: column; 623 | justify-content: center; 624 | align-items: center; 625 | margin-top: 0; 626 | padding: 20px 40px; 627 | width: 100%; 628 | height: 400px; 629 | border: 2px solid #fff; 630 | border-radius: 15px; 631 | box-shadow: 1px 8px 10px 2px var(--first-shadow); 632 | overflow: hidden; 633 | cursor: pointer; 634 | } 635 | .contact-info > h2{ 636 | color: var(--text-color); 637 | margin-bottom: 20px; 638 | } 639 | .contact-info > p { 640 | display:flex; 641 | align-items:center; 642 | gap:10px ; 643 | color:var(--text-color); 644 | margin-block: 5px; 645 | } 646 | .contact-info::after{ 647 | color:cyan; 648 | } 649 | .contact-info:hover.contact-info h2 , 650 | .contact-info:hover.contact-info p, 651 | .contact-info:hover.contact-info i{ 652 | color: #fff; 653 | z-index:1; 654 | } 655 | .form-control{ 656 | display: flex; 657 | flex-direction: column; 658 | gap: 100px; 659 | width: 100%; 660 | } 661 | .form-inputs{ 662 | display: flex; 663 | gap: 10px; 664 | width: 100%; 665 | } 666 | .input-field{ 667 | width: 50%; 668 | height: 55px; 669 | background: transparent; 670 | border: 2px solid rgb(102, 102, 102) ; 671 | padding-inline: 20px; 672 | border-radius: 10px; 673 | outline: none; 674 | } 675 | .input-subject{ 676 | width: 100%; 677 | height: 55px; 678 | background: transparent; 679 | border: 2px solid grey; 680 | border-radius: 10px; 681 | padding-inline: 20px; 682 | margin-bottom: 10px; 683 | outline: none; 684 | } 685 | textarea{ 686 | width: 100%; 687 | height: 250px; 688 | background: transparent; 689 | border: 2px solid rgb(102, 102, 102) ; 690 | padding: 15px 20px ; 691 | color: var(--text-color); 692 | border-radius: 10px; 693 | outline: none; 694 | resize: none; 695 | } 696 | .form-button > .btn{ 697 | display: flex; 698 | align-items: center; 699 | justify-content: center; 700 | margin-left: 40%; 701 | border: none; 702 | background: cyan; 703 | padding: 10px 20px ; 704 | border-radius: 20px; 705 | color: whitesmoke; 706 | } 707 | 708 | .form-button:hover{ 709 | background: #0afbfb; 710 | box-shadow: 0 8px 15px cyan; 711 | 712 | 713 | } 714 | .form-button i{ 715 | font-size:10px ; 716 | rotate: -50deg; 717 | margin-left: 10px; 718 | } 719 | footer{ 720 | display: flex; 721 | justify-content: center; 722 | align-items: center; 723 | flex-direction: column; 724 | row-gap: 20px; 725 | padding-block: 40px 60px ; 726 | } 727 | .middle-footer .footer-menu{ 728 | display: flex; 729 | } 730 | .footer_menu_list{ 731 | list-style: none; 732 | } 733 | .footer_menu_list a { 734 | text-decoration: none; 735 | color: var(--text-color); 736 | font-weight: 500; 737 | margin-inline: 20px; 738 | } 739 | .footer_menu_list a:hover{ 740 | color: cyan; 741 | } 742 | .footer-social-icons{ 743 | display: flex; 744 | gap: 30px; 745 | color: var(--color-white) ; 746 | 747 | } 748 | .bottom-footer{ 749 | font-size: 14px; 750 | margin-top: 10px; 751 | color:var(--color-white); 752 | } 753 | @media only screen and (max-width: 1024px) { 754 | .featured-text{ 755 | padding:0; 756 | }.image , 757 | .image img { 758 | width: 320px; 759 | height: 320px; 760 | } 761 | } 762 | @media only screen and (max-width: 900px) { 763 | .nav-menu-btn{ 764 | left: 0; 765 | } 766 | .nav-menu.responsive{ 767 | position: fixed; 768 | top: 0; 769 | left: -100%; 770 | flex-direction: column; 771 | justify-content: center; 772 | align-items: center; 773 | background: grey; 774 | width: 300px; 775 | border-radius: 0px 30px 0px 30px; 776 | min-height: 450px; 777 | height: 100vh; 778 | transition: 0.3s; 779 | } 780 | .nav_menu_list{ 781 | flex-direction: column; 782 | } 783 | .nav_menu_btn{ 784 | display: flex; 785 | align-items: center; 786 | justify-content: center; 787 | } 788 | .featured-box{ 789 | flex-direction: column; 790 | justify-content: center; 791 | height: 100vh; 792 | } 793 | .featured-text{ 794 | justify-content: center; 795 | align-content: flex-start; 796 | min-height: 60vh; 797 | order: 2; 798 | width: 100%; 799 | 800 | } 801 | .social_icons{ 802 | margin-top: 2em; 803 | } 804 | .featured-image{ 805 | order: 1; 806 | justify-content: center; 807 | min-height: 150px; 808 | width: 100%; 809 | margin-top: 65px; 810 | } 811 | .image ,.image img { 812 | width: 150px; 813 | height: 150px; 814 | } 815 | .row{ 816 | display: flex; 817 | flex-direction: column; 818 | justify-content: center; 819 | gap: 50px; 820 | } 821 | .col{ 822 | display: flex; 823 | justify-content: center; 824 | width: 100%; 825 | } 826 | .about-info , 827 | .contact-info{ 828 | width: 100%; 829 | } 830 | .project-container{ 831 | justify-content: center; 832 | } 833 | .project-box{ 834 | width: 80%; 835 | } 836 | .mode{ 837 | display: flex; 838 | align-items: center; 839 | margin-left: 60%; 840 | } 841 | } 842 | --------------------------------------------------------------------------------