├── skill.jpg ├── web-div.mp4 ├── Myntra.png.jpg ├── Portfolio.png ├── Webify.png.jpg ├── interest.mp4 ├── Certificate1.jpg ├── Certificate2.jpg ├── Certificate3.jpg ├── Certificate4.jpg ├── Certificate5.jpg ├── Certificate6.jpg ├── Certificate7.jpg ├── Certificate8.jpg ├── Certificate9.jpg ├── Subham Nayak .png .jpg ├── README.md ├── index.css └── index.html /skill.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/skill.jpg -------------------------------------------------------------------------------- /web-div.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/web-div.mp4 -------------------------------------------------------------------------------- /Myntra.png.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Myntra.png.jpg -------------------------------------------------------------------------------- /Portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Portfolio.png -------------------------------------------------------------------------------- /Webify.png.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Webify.png.jpg -------------------------------------------------------------------------------- /interest.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/interest.mp4 -------------------------------------------------------------------------------- /Certificate1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate1.jpg -------------------------------------------------------------------------------- /Certificate2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate2.jpg -------------------------------------------------------------------------------- /Certificate3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate3.jpg -------------------------------------------------------------------------------- /Certificate4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate4.jpg -------------------------------------------------------------------------------- /Certificate5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate5.jpg -------------------------------------------------------------------------------- /Certificate6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate6.jpg -------------------------------------------------------------------------------- /Certificate7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate7.jpg -------------------------------------------------------------------------------- /Certificate8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate8.jpg -------------------------------------------------------------------------------- /Certificate9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Certificate9.jpg -------------------------------------------------------------------------------- /Subham Nayak .png .jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-cyber-prog/Portfolio-/HEAD/Subham Nayak .png .jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # 🌐 Portfolio 2.0 3 | 4 | This is my second personal portfolio website, created as part of an assessment given by our faculty. It showcases my skills, projects, and also includes a dedicated section for my certificates. 5 | 6 | ## 🔗 Live Demo 7 | 8 | Check out the deployed portfolio here: 9 | 👉 [https://shubham-cyber-prog.github.io/Portfolio-/](https://shubham-cyber-prog.github.io/Portfolio-/) 10 | ![image](https://github.com/user-attachments/assets/63f60d95-33bf-4c89-b88b-f3dd7c158853) 11 | 12 | 13 | ## 📁 Repository 14 | 15 | GitHub Repository: 16 | 👉 [https://github.com/Shubham-cyber-prog/Portfolio-.git](https://github.com/Shubham-cyber-prog/Portfolio-.git) 17 | 18 | ## 🛠️ Built With 19 | 20 | - HTML5 21 | - CSS3 22 | - JavaScript 23 | 24 | ## 🧩 Features 25 | 26 | - 💼 Projects section showcasing my work 27 | - 📜 Certificates section highlighting my achievements 28 | - 📱 Fully responsive design 29 | - 🎨 Clean and modern UI 30 | 31 | ## 🏆 Certificates Included 32 | 33 | This portfolio includes 8 of my earned certificates from: 34 | - Guvi Geek Event 35 | - Cisco Cybersecurity 36 | - Skillected 37 | - Internship Studio 38 | - Skyy Skill Academy 39 | - Skillyft 40 | - Jobaaj Learning 41 | - National Security Database 42 | 43 | ## 🎯 Purpose 44 | 45 | This project was built as a part of an academic assessment to demonstrate my ability to build a clean, informative, and responsive personal portfolio website. 46 | 47 | ## 🙋‍♂️ Author 48 | 49 | **Subham Nayak** 50 | 📧 [Connect on LinkedIn](https://www.linkedin.com/in/subham-nayak/) 51 | 🎓 B.Tech CSE | Geeta University 52 | 53 | --- 54 | 55 | ⭐️ Don't forget to give this repository a star if you liked it! 56 | 57 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | body{ 5 | font-family: 'Poppins',sans-serif; 6 | overflow-x: hidden; 7 | margin-right:-25px; 8 | } 9 | /* Navigation bar */ 10 | .navbar{ 11 | padding:0.5% 4%; 12 | background-color: black; 13 | margin-right:-15px; 14 | } 15 | .navbar .navbar-brand{ 16 | color:#fff; 17 | } 18 | .navbar .navbar-brand:hover{ 19 | color:#048dfe; 20 | } 21 | .navbar .nav-item .nav-link{ 22 | color:#fff; 23 | } 24 | .navbar .nav-item .nav-link:hover{ 25 | color:#048dfe; 26 | } 27 | .navbar-toggler .navbar-toggler-icon .nav-icon{ 28 | color:#fff; 29 | font-size:30px; 30 | } 31 | 32 | /* Home page */ 33 | #home{ 34 | background-color: black; 35 | } 36 | .home-div{ 37 | padding:3% 10%; 38 | } 39 | .home-div p{ 40 | color:#fff; 41 | font-size:40px; 42 | } 43 | .home-div p b{ 44 | color:#048dfe; 45 | } 46 | .home-div .icon:hover{ 47 | color:#fff; 48 | } 49 | .title-img{ 50 | width:90%; 51 | height: 90%; 52 | border-radius: 50%; 53 | } 54 | 55 | 56 | /* About page */ 57 | .about-header{ 58 | text-align: center; 59 | font-size: 30px; 60 | font-weight: bold; 61 | color:#048dfe; 62 | } 63 | .gif .about-img{ 64 | width:90%; 65 | } 66 | .col-lg-6{ 67 | padding:7% 6%; 68 | } 69 | 70 | 71 | /* My skills page */ 72 | .skills-header{ 73 | text-align: center; 74 | font-size: 30px; 75 | font-weight: bold; 76 | color:#048dfe; 77 | } 78 | .skills-img{ 79 | padding:10%; 80 | width:100%; 81 | } 82 | .col-lg-6{ 83 | padding:7% 10%; 84 | } 85 | .skills_data{ 86 | display: flex; 87 | justify-content: space-between; 88 | align-items: center; 89 | position: relative; 90 | font-weight: 600; 91 | padding: .5rem 1rem; 92 | margin-bottom: 2rem; 93 | border-radius: .5rem; 94 | box-shadow: 0 4px 25px rgba(14,36,49,.15); 95 | } 96 | .skills_icon{ 97 | font-size: 2rem; 98 | margin-right:1rem; 99 | color: #4070F4; 100 | } 101 | .skills_names{ 102 | display: flex; 103 | align-items: center; 104 | } 105 | .skills_bar{ 106 | position: absolute; 107 | left: 0; 108 | bottom: 0; 109 | background-color: #4070F4; 110 | height: .25rem; 111 | border-radius: .5rem; 112 | 113 | } 114 | .skills_html{ 115 | width: 80%; 116 | } 117 | .skills_css{ 118 | width: 75%; 119 | } 120 | .skills_js{ 121 | width: 55%; 122 | } 123 | .skills_bootstrap{ 124 | width: 65%; 125 | } 126 | .skills_nodejs{ 127 | width: 55%; 128 | } 129 | 130 | 131 | /* Project page */ 132 | .projects-header{ 133 | text-align: center; 134 | font-size: 30px; 135 | font-weight: bold; 136 | color:#048dfe; 137 | } 138 | 139 | .services{ 140 | width:100%; 141 | height: 100vh; 142 | display: flex; 143 | flex-direction: column; 144 | justify-content: space-evenly; 145 | align-items: center; 146 | cursor: pointer; 147 | padding: 4%; 148 | } 149 | .s-heading{ 150 | text-align:center; 151 | } 152 | .s-heading h1{ 153 | color:#576975; 154 | font-size: 3rem; 155 | font-weight: 400; 156 | letter-spacing: 1px; 157 | margin: 0px; 158 | } 159 | .s-heading p{ 160 | color: rgba(87,105,117,0.60); 161 | font-size: 1rem; 162 | margin: 5px; 163 | text-align: center; 164 | } 165 | .s-box-container{ 166 | width:100%; 167 | display: flex; 168 | justify-content: center; 169 | align-items: center; 170 | } 171 | .s-box{ 172 | display:flex; 173 | flex-direction: column; 174 | justify-content: center; 175 | align-items: center; 176 | border-radius: 10px; 177 | width:300px; 178 | padding: 20px 25px; 179 | height: 400px; 180 | box-sizing: border-box; 181 | margin: 30px; 182 | position: relative; 183 | } 184 | .s-box img{ 185 | height: 75px; 186 | } 187 | .s-box h1{ 188 | color:#576975; 189 | letter-spacing: 1px; 190 | font-size: 1.5rem; 191 | margin-bottom: 8px; 192 | 193 | } 194 | .s-box p{ 195 | color: rgba(87,105,117,0.90); 196 | text-align: center; 197 | } 198 | .s-btn{ 199 | width: 140px; 200 | height: 40px; 201 | border-radius: 20px; 202 | /* border:1px solid#4070F4; */ 203 | display: flex; 204 | justify-content: center; 205 | align-items: center; 206 | color:#576975; 207 | margin-top:10px; 208 | text-decoration: none; 209 | background-color: #4070F4; 210 | border: 1px solid #fff; 211 | color:#FFFFFF; 212 | opacity: 0.8; 213 | } 214 | .bar{ 215 | width: 100px; 216 | height: 6px; 217 | position: absolute; 218 | left: 50%; 219 | top: 0%; 220 | transform: translateX(-50%); 221 | background-color:#4070F4; 222 | border-radius: 0px 0px 10px 10px; 223 | display: none; 224 | animation: bar 0.5s; 225 | } 226 | .s-box:hover{ 227 | box-shadow: 2px 2px 30px rgba(0,0,0,0.08); 228 | transition: all ease 0.3s; 229 | } 230 | .s-btn:hover{ 231 | background-color: #4070F4; 232 | border: 1px solid #fff; 233 | opacity:1; 234 | color:#FFFFFF; 235 | transition: all ease 0.3s; 236 | text-decoration: none; 237 | } 238 | .s-box:hover .bar{ 239 | display: block; 240 | } 241 | @keyframes bar{ 242 | 0%{ 243 | width:0px; 244 | } 245 | 100%{ 246 | width:100px; 247 | } 248 | } 249 | @media(max-width:1050px){ 250 | .s-box-container{ 251 | flex-wrap: wrap; 252 | 253 | } 254 | .services{ 255 | height: auto; 256 | } 257 | .s-heading{ 258 | margin: 15px; 259 | } 260 | .s-box{ 261 | flex-grow: 1; 262 | } 263 | 264 | } 265 | /* Interest page */ 266 | .interest-header{ 267 | text-align: center; 268 | font-size: 30px; 269 | font-weight: bold; 270 | color:#048dfe; 271 | } 272 | .interest-img{ 273 | width:100%; 274 | } 275 | .interest-content{ 276 | padding:5% 1%; 277 | } 278 | /* Certification page */ 279 | .certifications-header{ 280 | text-align: center; 281 | font-size: 30px; 282 | font-weight: bold; 283 | color:#048dfe; 284 | } 285 | .certifications-content{ 286 | padding:5% 7%; 287 | } 288 | .certifi-img{ 289 | padding:5%; 290 | width:100%; 291 | } 292 | 293 | /* css for contact */ 294 | #contact{ 295 | background-color: rgb(7, 3, 42); 296 | margin-right:-25px; 297 | } 298 | .contact-header{ 299 | text-align: center; 300 | font-size: 30px; 301 | font-weight: bold; 302 | color:#fff; 303 | color:#048dfe; 304 | } 305 | .contact-content{ 306 | text-align: center; 307 | font-family: sans-serif; 308 | height: 380px; 309 | width: 400px; 310 | position: relative; 311 | margin: 0 auto; 312 | background: #fff; 313 | padding: 5px; 314 | border-radius: 20px; 315 | } 316 | 317 | .contact-form{ 318 | top:30px; 319 | position: absolute; 320 | width: 350px; 321 | transition: .5s; 322 | margin-left:20px; 323 | } 324 | .contact-input{ 325 | width: 100%; 326 | opacity:0.6; 327 | padding: 14px 0; 328 | margin: 5px 0; 329 | border-left: 1px solid #999; 330 | border-top:1px solid #999; 331 | border-right: 1px solid #999; 332 | border-bottom: 1px solid #999; 333 | border-radius: 5px; 334 | outline: none; 335 | background: transparent; 336 | font-size:15px; 337 | } 338 | 339 | 340 | /* ===== FOOTER =====*/ 341 | .footer{ 342 | background-color: #0e0c42; 343 | color: #fff; 344 | text-align: center; 345 | font-weight: 600; 346 | padding: 2rem 0; 347 | margin-right:-25px; 348 | } 349 | .footer_title{ 350 | font-size: 2rem; 351 | margin-bottom: 2rem; 352 | } 353 | .footer_social{ 354 | margin-bottom: 2rem; 355 | } 356 | .footer_icon{ 357 | font-size: 1.5rem; 358 | color: #fff; 359 | margin: 0 1rem; 360 | } 361 | .footer_icon:hover{ 362 | color:#048dfe; 363 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Portfolio Website 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 38 |
39 | 40 | 41 |
42 |
43 | 44 |
45 |
46 |
47 |

Hi! I'am
Subham Nayak
A Frontend Developer

48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | 58 | 59 | 60 |
61 |
62 |

About me

63 |
64 |
65 |
66 |
68 |
69 |

Hello!

70 |

I’m Subham Nayak, a dedicated Computer Science Engineering student

71 |

I'm currently pursuing Btech Information technology at Geeta University

72 |

A Student and a Passionate Frontend Developer From Panipat ,India

73 | 74 |
75 |

76 |
77 | 78 | 79 | 80 |
81 |
82 |

My Skills

83 |
84 |
85 |
86 |
87 |

Professional Skills

88 |

I'm Professional in HTML5,CSS and JS.

89 |

I have a good knowledge in ,Bootstrap and Tailwind CSS .The Programming languages known are c and c++.

90 | 91 |
92 |
93 | 94 | HTML5 95 |
96 |
97 | 98 |
99 |
100 | 80% 101 |
102 |
103 | 104 |
105 |
106 | 107 | CSS3 108 |
109 |
110 | 111 |
112 |
113 | 75% 114 |
115 |
116 |
117 |
118 | 119 | JAVASCRIPT 120 |
121 |
122 | 123 |
124 |
125 | 55% 126 |
127 |
128 | 129 |
130 |
131 | 132 | Bootstrap 133 |
134 |
135 | 136 |
137 |
138 | 65% 139 |
140 |
141 |
142 |
143 | 144 |
145 |
146 |
147 |
148 | 149 | 150 | 151 |
152 | 153 |
154 |

My Projects

155 |
156 |
157 |
158 |
159 | 1 160 |

Portfolio

161 |

This portfolio represents my creative journey and showcases my diverse skill set.

162 | Buy Website 163 |
164 |
165 |
166 | 2 167 |

Webify

168 |

Webify is a website I created using HTML and CSS for Travelista Tours, showcasing my web development skills..

169 | Buy Website 170 |
171 |
172 |
173 | 3 174 |

Myntra

175 |

Myntra is one of India’s leading online fashion and lifestyle shopping platforms.

176 | Buy Website 177 |
178 |
179 |
180 | 4 181 |

Netflix

182 |

Netflix is a global streaming platform that offers a vast collection of movies, TV shows, documentaries, and original content.

183 | Buy Website 184 |
185 |
186 |
187 | 188 | 189 |
190 |
191 |

My Interest

192 |
193 |
194 |
195 |

Interest

196 |

Passionate about web development, full-stack technologies, cybersecurity, and problem-solving. Always eager to learn and explore new tech trends.

197 |
198 |
199 |
201 |
202 |
203 | 204 | 205 |
206 |
207 |

My Certification

208 |
209 |
210 |
211 | 212 |
213 |
214 | 215 |
216 |
217 | 218 |
219 |
220 | 221 |
222 |
223 | 224 |
225 |
226 | 227 |
228 |
229 | 230 |
231 |
232 | 233 |
234 |
235 | 236 |
237 |
238 |
239 | 240 | 241 |
242 |
243 |

Contact-Me

244 |
245 |
246 |
247 | 248 | 249 | 250 |

251 |
252 |


253 |
254 | 255 | 256 | 267 | 268 | --------------------------------------------------------------------------------