├── README.md ├── food.jpg ├── image.jpg ├── img-3.jpg ├── img4.jpg ├── my CV.pdf ├── photo.jpg ├── learnpro.jpeg ├── project-1.jpg ├── color-picker.png ├── online-books-scaled.jpg ├── Blue Simple Professional CV Resume (1).pdf ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio 2 | -------------------------------------------------------------------------------- /food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/food.jpg -------------------------------------------------------------------------------- /image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/image.jpg -------------------------------------------------------------------------------- /img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/img-3.jpg -------------------------------------------------------------------------------- /img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/img4.jpg -------------------------------------------------------------------------------- /my CV.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/my CV.pdf -------------------------------------------------------------------------------- /photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/photo.jpg -------------------------------------------------------------------------------- /learnpro.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/learnpro.jpeg -------------------------------------------------------------------------------- /project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/project-1.jpg -------------------------------------------------------------------------------- /color-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/color-picker.png -------------------------------------------------------------------------------- /online-books-scaled.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/online-books-scaled.jpg -------------------------------------------------------------------------------- /Blue Simple Professional CV Resume (1).pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Denuwan01/Portfolio/HEAD/Blue Simple Professional CV Resume (1).pdf -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let menuIcon = document.querySelector('menu-icon'); 2 | let navbar = document.querySelector('.navbar'); 3 | 4 | menuIcons.onclick = () => { 5 | menuIcon.classList.toggle('bx-x') 6 | navbar.classList.toggle('active'); 7 | } 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Portfolio 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 22 | Contact Me 23 |
24 | 25 |
26 |
27 |

Hi

28 |

I'm Denuwan
Full Stack Developer

29 | 30 | 31 | 32 |
33 | 34 | 36 |
37 |
38 |
39 | 40 |
41 |
42 | 43 | 44 |
45 | 46 |
47 | 48 |
49 | 50 | 51 |
52 |

About Me

53 | 54 |

I am pursuing a BSc (Hons) in Computing and Information Systems at Sabaragamuwa University of Sri Lanka. 55 | With a strong foundation in software engineering, I am eager to apply my programming skills to 56 | real-world scenarios. 57 | I seek an internship to gain hands-on experience, contribute to projects, and grow professionally in the 58 | tech industry. 59 | My academic background and commitment to continuous learning make me a motivated candidate ready for new 60 | challenges.

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

Services

70 | 71 |
72 |
73 |
74 | 75 |

UI / UX Design

76 |

UI/UX design creates user-friendly, visually appealing interfaces. 77 | UI design focuses on layout and aesthetics, while UX design ensures 78 | intuitive and seamless interactions. Together, they provide 79 | an engaging user experience.

80 |
81 |
82 |
83 |
84 | 85 |

Frontend Development

86 |

Building responsive and interactive websites using HTML, CSS, and JavaScript. 87 | Ensuring the best user experience through efficient code and beautiful designs.

88 |
89 |
90 |
91 |
92 | 93 |

Backend Development

94 |

Developing server-side logic, managing databases, and ensuring data security 95 | to support and power the frontend interfaces.

96 |
97 |
98 |
99 |
100 | 101 | 102 | 103 | 104 | 105 |
106 |

Projects

107 | 108 |
109 |
110 | 111 |

Learn Pro

112 |

Developed LearnPro, a mobile app that boosts study effectiveness using 113 | techniques like Pomodoro and active recall. The app creates flashcards from 114 | PDFs and includes a reward system and a community for sharing study materials.

115 | 116 |
Review project
117 | 118 |
119 |
120 | 121 |

Photography Web

122 |

Created a Photography Web Application with a responsive, visually appealing 123 | portfolio and intuitive navigation, showcasing photographs in a clean, engaging 124 | layout for a seamless user experience.

125 | 126 |
Review project
127 | 128 |
129 |
130 | 131 |

Book Store

132 |

Developed a Book Store project with a user-friendly interface, search 133 | functionality, shopping cart, and secure payment gateway for a seamless online 134 | shopping experience.

135 | 136 |
Review project
137 | 138 |
139 |
140 | 141 |

Food Delivery web

142 |

Developed a user-friendly web application for facilitating online food delivery, 143 | highlighting my expertise in 144 | web development and design.

145 | 146 |
Review project
147 | 148 |
149 |
150 | 151 |

Image Color Detection

152 |

Developed an Image Color Detection tool that identifies and extracts the 153 | dominant colors from images, providing precise color analysis for various 154 | applications.

155 | 156 |
Review project
157 | 158 |
159 |
160 | 161 |

E-Commerce

162 |

Created a comprehensive e-commerce platform for buying and selling, showcasing my skills in web 163 | development, user experience design, and online transaction management.

164 | 165 |
Review project
166 | 167 |
168 |
169 | 170 | 171 |
172 | 173 | 174 |
175 |
176 |
177 | 178 |
179 |
180 |

Contact Me

181 |
182 |
183 | 184 | 185 |
186 |
187 | 188 | 189 |
190 | 191 | 192 |
193 |
194 |
195 |
196 | 197 | 227 | 228 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', 'sans-serif'; 6 | text-decoration: none; 7 | list-style: none; 8 | scroll-behavior: smooth; 9 | } 10 | 11 | .root { 12 | --bg-color: #080808; 13 | --second-bg-color: #101010; 14 | --text-color: white; 15 | --main-color: blue; 16 | } 17 | 18 | html { 19 | font-size: 60%; 20 | overflow-x: hidden; 21 | } 22 | 23 | .header { 24 | position: fixed; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | padding: 35px 12%; 29 | background: rgba(0, 0, 0, 0.6); 30 | backdrop-filter: blur(10px); 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | z-index: 100; 35 | } 36 | 37 | .logo { 38 | font-size: 35px; 39 | color: white; 40 | font-weight: 600; 41 | transition: 0.3s; 42 | } 43 | 44 | .logo:hover { 45 | color: blue; 46 | text-shadow: 0 0 100px rgb(69, 69, 199), 0 0 100px white; 47 | transform: scale(1, 1); 48 | } 49 | 50 | span { 51 | color: blue; 52 | } 53 | 54 | .navbar a { 55 | font-size: 20px; 56 | color: white; 57 | font-weight: 500; 58 | margin: 0 20px; 59 | border-bottom: 3px solid transparent; 60 | transition: 0.3s; 61 | } 62 | 63 | .navbar a:hover, 64 | .navbar a.active { 65 | color: blue; 66 | border-bottom: 3px solid blue; 67 | } 68 | 69 | .navbar a.after { 70 | color: blue; 71 | border-bottom: 3px solid blue; 72 | } 73 | 74 | .contact { 75 | padding: 10px 28px; 76 | background-color: white; 77 | color: black; 78 | border: 2px solid transparent; 79 | border-radius: 8px; 80 | font-size: 20px; 81 | letter-spacing: 1px; 82 | font-weight: 900; 83 | transition: 0.3s; 84 | } 85 | 86 | .contact:hover { 87 | background-color: blue; 88 | box-shadow: 0 0 25px blue; 89 | color: white; 90 | } 91 | 92 | .home { 93 | width: 100%; 94 | min-height: 100vh; 95 | background-color: rgb(241, 241, 241); 96 | display: flex; 97 | align-items: center; 98 | gap: 7em; 99 | padding: 30px 12% 0; 100 | } 101 | 102 | .home-contact { 103 | max-width: 800px; 104 | } 105 | 106 | .home-contact h3 { 107 | font-size: 38px; 108 | color: blue; 109 | } 110 | 111 | .home-contact h1 { 112 | font-weight: 100; 113 | font-size: 45px; 114 | line-height: 1; 115 | margin-bottom: 30px; 116 | } 117 | 118 | .btn-1 { 119 | padding: 15px 28px; 120 | background-color: black; 121 | color: white; 122 | border: 2px solid transparent; 123 | border-radius: 8px; 124 | font-size: 20px; 125 | letter-spacing: 1px; 126 | font-weight: 600; 127 | transition: 0.3s ease; 128 | cursor: pointer; 129 | margin-bottom: 2rem; 130 | } 131 | 132 | .btn-1:hover { 133 | background-color: white; 134 | color: black; 135 | border: 2px solid black; 136 | } 137 | 138 | .btn-2 { 139 | padding: 15px 28px; 140 | background-color: blue; 141 | color: white; 142 | border: 2px solid black; 143 | border-radius: 8px; 144 | font-size: 20px; 145 | letter-spacing: 1px; 146 | font-weight: 600; 147 | transition: 0.3s ease; 148 | cursor: pointer; 149 | 150 | } 151 | 152 | .btn-2:hover { 153 | background-color: white; 154 | color: blue; 155 | } 156 | 157 | .img-box img { 158 | border-radius: 50%; 159 | width: 500px; 160 | } 161 | 162 | ::-webkit-scrollbar { 163 | width: 15px; 164 | } 165 | 166 | ::-webkit-scrollbar-thumb { 167 | background-color: blue; 168 | } 169 | 170 | ::-webkit-scrollbar-track { 171 | background-color: rgba(0, 0, 0, 0.6); 172 | width: 50px; 173 | } 174 | 175 | .about { 176 | display: flex; 177 | justify-content: center; 178 | align-items: center; 179 | padding: 12% 8%; 180 | gap: 10em; 181 | background: black; 182 | } 183 | 184 | .about-img img { 185 | position: relative; 186 | width: 400px; 187 | box-shadow: 0 0 25px lightblue, 0 0 25px lightblue; 188 | border-radius: 50%; 189 | } 190 | 191 | .about-content h2 { 192 | text-align: center; 193 | color: white; 194 | font-size: 60px; 195 | } 196 | 197 | .about-content h3 { 198 | color: white; 199 | font-size: 75px; 200 | } 201 | 202 | .about-content p { 203 | color: white; 204 | font-size: 20px; 205 | margin: 2em 0 3em; 206 | } 207 | 208 | .heading { 209 | color: white; 210 | text-align: center; 211 | font-size: 7rem; 212 | margin-bottom: 5rem; 213 | 214 | } 215 | 216 | .services { 217 | background-color: black; 218 | color: white; 219 | 220 | } 221 | 222 | .services h2 { 223 | margin-bottom: 5rem; 224 | color: var(--text-color); 225 | } 226 | 227 | .services-container { 228 | display: grid; 229 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 230 | align-items: center; 231 | gap: 2.5rem; 232 | } 233 | 234 | .service-box { 235 | display: flex; 236 | justify-content: center; 237 | align-items: center; 238 | background-color: rgb(2, 44, 65); 239 | height: 400px; 240 | border-radius: 3rem; 241 | cursor: pointer; 242 | border: 5px solid transparent; 243 | transition: 0.4s ease-in-out; 244 | margin-bottom: 10rem; 245 | } 246 | 247 | .service-box:hover { 248 | background-color: var(--second-bg-color); 249 | color: var(--text-color); 250 | border: 5px solid rgb(50, 150, 200); 251 | transform: scale(1.03); 252 | } 253 | 254 | .service-info { 255 | display: flex; 256 | flex-direction: column; 257 | text-align: center; 258 | justify-content: center; 259 | align-items: center; 260 | padding: 5rem; 261 | } 262 | 263 | .service-info i { 264 | font-size: 8rem; 265 | color: var(--main-color); 266 | margin-bottom: 1rem; 267 | } 268 | 269 | .service-info h4 { 270 | font-size: 4rem; 271 | margin: 2rem 0; 272 | font-weight: 800; 273 | } 274 | 275 | .service-info p { 276 | font-size: 1.5rem; 277 | font-weight: 600; 278 | line-height: 2rem; 279 | } 280 | 281 | .projects { 282 | background-color: black; 283 | } 284 | 285 | .projects-box { 286 | display: grid; 287 | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 288 | place-items: center; 289 | gap: 3rem; 290 | row-gap: 5rem; 291 | 292 | } 293 | 294 | .project-card { 295 | display: flex; 296 | flex-direction: column; 297 | align-items: center; 298 | justify-content: center; 299 | text-align: center; 300 | background-color: black; 301 | border: 2px solid blue; 302 | border-radius: 3rem; 303 | gap: 2rem; 304 | padding: 5rem 2rem; 305 | overflow: hidden; 306 | cursor: pointer; 307 | box-shadow: 0 0 5px blue; 308 | transition: 0.3s ease; 309 | margin-bottom: 5rem; 310 | } 311 | 312 | .project-card:hover { 313 | box-shadow: 0 0 25px blue, 314 | 0 0 50px blue; 315 | transform: scale(1.02s); 316 | } 317 | 318 | .project-card img { 319 | max-width: 300px; 320 | max-height: 200px; 321 | border-radius: 2em; 322 | object-fit: cover; 323 | } 324 | 325 | .project-card h3 { 326 | font-size: 3rem; 327 | color: white; 328 | } 329 | 330 | .project-card p { 331 | font-size: 1.8rem; 332 | color: white; 333 | } 334 | 335 | .btn { 336 | padding: 15px 28px; 337 | background-color: blue; 338 | color: white; 339 | border: 2px solid black; 340 | border-radius: 8px; 341 | font-size: 20px; 342 | letter-spacing: 1px; 343 | font-weight: 600; 344 | transition: 0.3s ease; 345 | cursor: pointer; 346 | } 347 | 348 | .btn:hover { 349 | background-color: white; 350 | color: blue; 351 | } 352 | 353 | .contact-form { 354 | display: flex; 355 | justify-content: space-between; 356 | align-items: center; 357 | padding: 2em; 358 | } 359 | 360 | .contact-form .img-add { 361 | flex: 1; 362 | padding-right: 3em; 363 | } 364 | 365 | .contact-form .img-add img { 366 | width: 100%; 367 | height: auto; 368 | border-radius: .8rem; 369 | } 370 | 371 | .contact-form .form-container { 372 | flex: 1; 373 | padding-left: 1em; 374 | } 375 | 376 | .contact-form h2 { 377 | text-align: center; 378 | margin-top: 0.5em; 379 | margin-bottom: 0.6em; 380 | font-size: 36px; 381 | } 382 | 383 | .contact-form form { 384 | max-width: 85%; 385 | margin: 1rem auto; 386 | text-align: center; 387 | margin-bottom: 3em; 388 | } 389 | 390 | .contact-form form .input-box { 391 | display: flex; 392 | justify-content: center; 393 | flex-wrap: wrap; 394 | } 395 | 396 | .contact-form form .input-box input, 397 | .contact-form form textarea { 398 | width: 100%; 399 | padding: 1em; 400 | font-size: 18px; 401 | color: black; 402 | background: rgb(241, 241, 241); 403 | border-radius: .8rem; 404 | margin: 1rem 0; 405 | resize: none; 406 | margin-bottom: 0.6em; 407 | } 408 | 409 | .footer { 410 | position: relative; 411 | bottom: 0; 412 | width: 100%; 413 | padding: 40px 0; 414 | background-color: black; 415 | } 416 | 417 | .footer .social { 418 | text-align: center; 419 | padding-bottom: 25px; 420 | color: white; 421 | } 422 | 423 | .footer .social a { 424 | font-size: 24px; 425 | color: white; 426 | border: 2px solid blue; 427 | width: 40px; 428 | height: 40px; 429 | line-height: 38px; 430 | display: inline-block; 431 | text-align: center; 432 | border-radius: 50%; 433 | margin: 0 8px; 434 | box-shadow: inset 0 0 10px blue, 0 0 10px blue; 435 | transition: 0.3s ease; 436 | } 437 | 438 | .footer .social a:hover { 439 | transform: scale(1.2) translateY(-10px); 440 | color: blue; 441 | border: 2px solid blue; 442 | } 443 | 444 | .footer ul { 445 | margin-top: 0; 446 | padding: 0; 447 | font-size: 18px; 448 | line-height: 1.6; 449 | margin-bottom: 0; 450 | text-align: center; 451 | } 452 | 453 | .footer ul li a { 454 | color: white; 455 | border-bottom: 3px solid transparent; 456 | transition: 0.3s ease; 457 | } 458 | 459 | .footer ul li a:hover { 460 | border-bottom: 3px solid blue; 461 | } 462 | 463 | .footer ul li { 464 | display: inline-block; 465 | padding: 0 15px; 466 | } 467 | 468 | .footer .copyright { 469 | margin-top: 15px; 470 | text-align: center; 471 | font-size: 12px; 472 | color: white; 473 | } 474 | 475 | 476 | 477 | @media (max-width: 480px) { 478 | .contact-form { 479 | flex-direction: column; 480 | } 481 | 482 | .home { 483 | flex-direction: column; 484 | 485 | } 486 | 487 | .navbar { 488 | flex-direction: column; 489 | width: 100% 490 | } 491 | 492 | .img-box img { 493 | width: 100%; 494 | } 495 | 496 | .about { 497 | flex-direction: column; 498 | } 499 | 500 | menu-icon { 501 | display: block; 502 | } 503 | 504 | .navbar { 505 | position: absolute; 506 | top: 100%; 507 | right: 0; 508 | width: 50%; 509 | padding: 1rem 3rem; 510 | background: #080808; 511 | border-bottom-left-radius: 2rem; 512 | border-left: 2px solid blue; 513 | border-bottom: 2px solid blue; 514 | display: none; 515 | } 516 | 517 | .navbar a { 518 | display: block; 519 | font-size: 2rem; 520 | margin: 3rem 0; 521 | color: blue; 522 | } 523 | 524 | 525 | 526 | 527 | 528 | } --------------------------------------------------------------------------------