├── README.md ├── 1.jpeg ├── hari photo.jpg ├── LICENSE ├── index.html ├── skills.html ├── contact.html ├── activities.html ├── projects.html ├── about.html └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Personal Portfolio Website 2 | -------------------------------------------------------------------------------- /1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_04/HEAD/1.jpeg -------------------------------------------------------------------------------- /hari photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_04/HEAD/hari photo.jpg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Hariharan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home - Hariharan S 7 | 8 | 9 | 10 | 11 |
12 | 22 |
23 | 24 |
25 |
26 |

Welcome to My Portfolio

27 | Hariharan S 28 |

Hello, I'm Hariharan S, an enthusiastic web developer and engineering student with a strong interest in developing innovative solutions and enhancing technology.

29 |
30 |
31 | 32 | 35 | 36 | -------------------------------------------------------------------------------- /skills.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Skills - Hariharan 8 | 9 | 10 | 11 | 12 |
13 | 23 |
24 | 25 |
26 |

Skills

27 |

Hard Skills

28 | 35 |

Soft Skills

36 | 40 |
41 | 42 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact - Hariharan 8 | 9 | 10 | 11 | 12 |
13 | 23 |
24 | 25 |
26 |

Contact Me

27 |
28 |

Address: 1/545-4, Kuppampalayam, Kavettipatti, Namakkal, Tamil Nadu – 637 003

29 |

Phone: +91-6382572583

30 |

Email: hariharansekarselvam@gmail.com

31 |

LinkedIn: Hariharan

32 |
33 |
34 | 35 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /activities.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Activities - Hariharan 7 | 8 | 9 | 10 | 11 |
12 | 22 |
23 | 24 |
25 |

Co-Curricular Activities

26 |

Binary Brawl

27 | 30 |

Cryptic Hunt

31 | 34 |
35 | 38 | 39 | -------------------------------------------------------------------------------- /projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projects - Hariharan 7 | 8 | 9 | 82 | 83 | 84 |
85 | 95 |
96 | 97 |
98 |

Projects

99 | 100 |
101 |

Student Dropout Analysis Website

102 | 103 |

Completed a project titled “Student Dropout Analysis Website” in M.KUMARASAMY COLLEGE OF ENGINEERING, Karur on 4th semester, 2024.

104 |
105 | 106 | 107 |
108 | 109 |
110 | × 111 | Zoomed Project Image 112 |
113 | 114 | 117 | 118 | 128 | 129 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me - Hariharan S 7 | 8 | 9 | 74 | 75 | 76 |
77 | 87 |
88 | 89 |
90 |

About Me

91 |
92 |

Career Objectives

93 |

Seeking a dynamic role as Front End Developer with Infotech where my vibrant energy, enthusiasm for learning, and commitment to contributing effectively can help achieve the goals and drive positive changes.

94 |
95 | 96 |
97 |

Education

98 |
99 |

M.KUMARASAMY COLLEGE OF ENGINEERING, KARUR
B.E in Computer Science And Engineering (2022-2026)

100 |

NARAYANA JUNIOR COLLEGE, VIJAYAWADA
Higher Secondary School Certificate 2022 Percentage-84.0%

101 |

NARAYANA CO SCHOOL, NELLORE
Secondary School Leaving Certificate 2020 Percentage-99.6%

102 |
103 |
104 | 105 | 106 | 107 |
108 | 109 | 112 | 113 | 125 | 126 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | 2 | /* Global Styles */ 3 | body { 4 | font-family: 'Arial', sans-serif; 5 | margin: 0; 6 | padding: 0; 7 | background-color: #f4f7f9; 8 | color: #333; 9 | line-height: 1.6; 10 | } 11 | 12 | header { 13 | background: brown; 14 | color: #fff; 15 | padding: 15px 0; 16 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 17 | } 18 | 19 | nav ul { 20 | list-style: none; 21 | padding: 0; 22 | margin: 0; 23 | } 24 | 25 | nav ul li { 26 | display: inline; 27 | margin: 0 15px; 28 | } 29 | 30 | nav ul li a { 31 | color: #fff; 32 | text-decoration: none; 33 | font-weight: bold; 34 | transition: color 0.3s ease; 35 | } 36 | 37 | nav ul li a:hover { 38 | color: #a8dadc; 39 | } 40 | 41 | section { 42 | padding: 40px; 43 | max-width: 1200px; 44 | margin: auto; 45 | } 46 | 47 | footer { 48 | background:brown; 49 | color: #fff; 50 | text-align: center; 51 | padding: 10px 0; 52 | position: relative; 53 | bottom: 0; 54 | width: 100%; 55 | } 56 | 57 | /* Home Page */ 58 | #home { 59 | background: #ffffff; 60 | padding: 40px 20px; 61 | border-radius: 10px; 62 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 63 | } 64 | 65 | #home h1 { 66 | font-size: 2.5em; 67 | margin: 0; 68 | color: brown; 69 | } 70 | 71 | #home p { 72 | font-size: 1.2em; 73 | color:black; 74 | } 75 | 76 | #home .photo { 77 | border-radius: 50%; 78 | overflow: hidden; 79 | margin: 20px auto; 80 | } 81 | 82 | #home .photo img { 83 | width: 150px; 84 | height: 150px; 85 | object-fit: cover; 86 | } 87 | 88 | /* About Page */ 89 | #about { 90 | background: #ffffff; 91 | padding: 40px 20px; 92 | border-radius: 10px; 93 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 94 | } 95 | 96 | #about h2 { 97 | color:brown; 98 | } 99 | 100 | #about .section-content { 101 | margin: 20px 0; 102 | } 103 | 104 | #about .section-content h3 { 105 | background: #e6f7ff; 106 | padding: 10px; 107 | border-radius: 8px; 108 | cursor: pointer; 109 | transition: background 0.3s ease; 110 | } 111 | 112 | 113 | 114 | #about .section-content .details { 115 | display: none; 116 | padding: 10px; 117 | background: #f0f8ff; 118 | border-radius: 8px; 119 | margin-top: 10px; 120 | } 121 | 122 | #about .section-content .details.show { 123 | display: block; 124 | } 125 | 126 | /* Skills Page */ 127 | #skills { 128 | background: #ffffff; 129 | padding: 15px 20px; 130 | border-radius: 10px; 131 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 132 | } 133 | 134 | #skills h2 { 135 | color: brown; 136 | } 137 | 138 | #skills .skills-container { 139 | display: flex; 140 | flex-wrap: wrap; 141 | justify-content: center; 142 | } 143 | 144 | #skills .skill { 145 | background: #e6f7ff; 146 | border: 1px solid #b3e0ff; 147 | border-radius: 8px; 148 | padding: 15px; 149 | margin: 10px; 150 | width: 200px; 151 | text-align: center; 152 | transition: transform 0.3s ease, box-shadow 0.3s ease; 153 | } 154 | 155 | #skills .skill:hover { 156 | transform: scale(1.05); 157 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 158 | } 159 | 160 | #skills .skill h3 { 161 | margin: 0; 162 | color: brown; 163 | } 164 | 165 | /* Projects Page */ 166 | #projects { 167 | background: #ffffff; 168 | padding: 40px 20px; 169 | border-radius: 10px; 170 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 171 | } 172 | 173 | #projects h2 { 174 | color:brown; 175 | } 176 | 177 | .project { 178 | position: relative; 179 | display: inline-block; 180 | margin: 20px; 181 | border-radius: 10px; 182 | overflow: hidden; 183 | transition: box-shadow 0.3s ease, transform 0.3s ease; 184 | cursor: pointer; 185 | animation: fadeIn 1s ease-in-out; 186 | } 187 | 188 | .project:hover { 189 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 190 | transform: scale(1.03); 191 | } 192 | 193 | .project h3 { 194 | padding: 10px; 195 | background-color: #f0f8ff; 196 | border-radius: 8px; 197 | margin: 0; 198 | color: brown; 199 | } 200 | 201 | .project .show-photo { 202 | display: block; 203 | margin: 10px auto; 204 | padding: 10px 20px; 205 | background-color: #4682b4; 206 | color: white; 207 | border: none; 208 | border-radius: 5px; 209 | cursor: pointer; 210 | transition: background-color 0.3s ease; 211 | } 212 | 213 | .project .show-photo:hover { 214 | background-color: #4169e1; 215 | } 216 | 217 | .zoomed-image { 218 | display: none; 219 | position: fixed; 220 | top: 50%; 221 | left: 50%; 222 | transform: translate(-50%, -50%); 223 | z-index: 1000; 224 | border-radius: 8px; 225 | background: rgba(0, 0, 0, 0.8); 226 | padding: 5px; 227 | } 228 | 229 | .zoomed-image img { 230 | max-width: 80vw; /* Ensure the zoomed image fits well on the screen */ 231 | max-height: 80vh; 232 | border-radius: 8px; 233 | } 234 | 235 | .zoomed-image.show { 236 | display: block; 237 | } 238 | 239 | .zoomed-image .close { 240 | position: absolute; 241 | top: 10px; 242 | right: 10px; 243 | font-size: 24px; 244 | color:brown; 245 | cursor: pointer; 246 | transition: color 0.3s ease-in-out; 247 | } 248 | 249 | .zoomed-image .close:hover { 250 | color: #ff6347; 251 | } 252 | 253 | /* Activities Page */ 254 | #activities { 255 | background: #ffffff; 256 | padding: 40px 20px; 257 | border-radius: 10px; 258 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 259 | } 260 | 261 | #activities h2 { 262 | color: brown; 263 | } 264 | 265 | .activity { 266 | margin: 20px 0; 267 | border: 1px solid #4682b4; 268 | border-radius: 8px; 269 | padding: 15px; 270 | background: #f0f8ff; 271 | } 272 | 273 | .activity h3 { 274 | color: brown; 275 | } 276 | 277 | /* Contact Page */ 278 | #contact { 279 | background: #ffffff; 280 | padding: 40px 20px; 281 | border-radius: 10px; 282 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 283 | } 284 | 285 | #contact h2 { 286 | color: brown; 287 | } 288 | 289 | #contact form { 290 | max-width: 600px; 291 | margin: auto; 292 | } 293 | 294 | #contact label { 295 | display: block; 296 | margin-bottom: 10px; 297 | font-weight: bold; 298 | } 299 | 300 | #contact input, #contact textarea { 301 | width: 100%; 302 | padding: 10px; 303 | border: 1px solid #ccc; 304 | border-radius: 5px; 305 | margin-bottom: 15px; 306 | } 307 | 308 | #contact button { 309 | background-color: brown; 310 | color: white; 311 | border: none; 312 | border-radius: 5px; 313 | padding: 10px 20px; 314 | cursor: pointer; 315 | transition: background-color 0.3s ease; 316 | } 317 | 318 | #contact button:hover { 319 | background-color: brown; 320 | } 321 | 322 | /* Animations */ 323 | @keyframes fadeIn { 324 | from { 325 | opacity: 0; 326 | } 327 | to { 328 | opacity: 1; 329 | } 330 | } 331 | 332 | @keyframes slideDown { 333 | from { 334 | transform: translateY(-20px); 335 | opacity: 0; 336 | } 337 | to { 338 | transform: translateY(0); 339 | opacity: 1; 340 | } 341 | } 342 | 343 | @keyframes bounceIn { 344 | from { 345 | transform: scale(0.3); 346 | opacity: 0; 347 | } 348 | 50% { 349 | transform: scale(1.1); 350 | opacity: 1; 351 | } 352 | to { 353 | transform: scale(1); 354 | opacity: 1; 355 | } 356 | } 357 | html, body { 358 | height: 100%; 359 | margin: 0; 360 | padding: 0; 361 | } 362 | 363 | body { 364 | display: flex; 365 | flex-direction: column; 366 | } 367 | 368 | footer { 369 | margin-top: auto; 370 | } 371 | --------------------------------------------------------------------------------