Inspiration The primary inspiration for this project was the need to create a centralized, professional, and visually engaging online presence. In today's tech landscape, a simple resume is often not enough. The goal was to build a dynamic, single-page application that not only lists skills and projects but also demonstrates them through interactive design and a fluid user experience. It serves as a living resume and a testament to my capabilities in front-end development.
What it does This project is a fully responsive personal portfolio website for Nihar Thalkar. It functions as a comprehensive digital resume, designed to be a user's first point of contact. The site introduces Nihar and his key skills, provides a gallery of his most significant projects with links to their repositories, lists his competitive achievements, and includes an interactive contact form. The entire experience is wrapped in a modern, dark-themed UI with smooth animations and transitions to keep the user engaged.
How we built it The portfolio is built with a focus on modern front-end technologies, without requiring a complex build process.
HTML5 was used for the semantic structure of the site.
CSS3 handles all the styling, including the responsive layout achieved with Flexbox and Grid, custom animations, and pseudo-element effects.
JavaScript is the core of the site's interactivity. We used:
GSAP (GreenSock Animation Platform) to power the sophisticated animations for the navigation sidebar and other UI elements.
Typed.js to create the dynamic typing effect in the hero section.
Vanilla JavaScript for DOM manipulation, such as dynamically generating the project and achievement cards from data arrays, and for creating the interactive snow and 3D carousel effects.
GitHub Pages was chosen for deployment, providing a free, reliable, and straightforward way to host the static site and make it accessible to a global audience.
Challenges we ran into One of the main challenges was ensuring a high level of performance while integrating multiple animation-heavy JavaScript libraries. We had to be mindful of how GSAP, Typed.js, and the custom canvas animations interacted to avoid slowing down the site or causing rendering issues. Another significant challenge was perfecting the responsive design. Making sure that complex elements like the 3D carousel and the animated project grid adapted flawlessly across a wide range of devices—from large desktops to small mobile screens—required meticulous testing and fine-tuning of CSS media queries.
Accomplishments that we're proud of We are particularly proud of the seamless and polished user experience. The combination of the GSAP-powered sidebar, the subtle hover effects, and the interactive elements creates a professional and memorable impression. Another major accomplishment is the modularity of the content; the projects and achievements are generated dynamically from JavaScript arrays, which makes the portfolio incredibly easy to update with new work without ever needing to touch the underlying HTML. Finally, successfully deploying the site on GitHub Pages for free is a significant win, demonstrating the ability to deliver a high-quality product with minimal overhead.
What we learned This project was a deep dive into advanced front-end development. We learned how to orchestrate multiple JavaScript libraries to create a cohesive user experience. It provided valuable practice in advanced CSS techniques, particularly for creating complex layouts and animations that are both beautiful and responsive. Furthermore, the process of dynamically generating HTML content from data structures reinforced best practices for clean, maintainable code. The entire project served as a practical exercise in the complete development lifecycle, from initial coding to final deployment and version control with Git.
What's next for Nihar Thalkar Portfolio The portfolio is designed to evolve. The immediate next step is to connect the contact form to a backend service to make it fully functional. Following that, we plan to expand the project section with more detailed case studies for each entry, including live demos where applicable. There is also an opportunity to implement the three-globe feature, which is already included in the code, to create a stunning 3D visualization of my global projects or connections. Finally, we will continue to optimize the site's performance by compressing assets and refining the code.
Log in or sign up for Devpost to join the conversation.