Portfolio website
Hiren Gajjar’s portfolio website addresses the common challenge of showcasing developers technical skills, projects, and professional experience in a concise, visually appealing manner. The site provides a high-performance, user-friendly experience to help potential employers and collaborators quickly assess Hiren’s expertise. Designed with simplicity, clarity, and speed as guiding principles, the website emphasizes effective communication of skills and achievements.
The portfolio is built using modern web technologies, including React, GSAP animations, Tailwind and Node.js, ensuring a responsive and scalable platform. It integrates tools like Git for version control, Node Package Manager(npm) for managing dependencies and deployment scripts, and Render for hosting, highlighting Hiren’s proficiency in handling large codebases and full-stack development. Explore the project live here or view the repository on GitHub and demo.
Research (Weeks 1–2)
Studies suggested portfolio websites speak louder than a resume PDF for developers, so I decided to build a product that would allow me to showcase all my skills. The question of how to effectively present my skills, projects, and experience in a clean, user-friendly manner led me to research the common features of successful developer portfolios. The most common traits of great portfolios were simplicity, speed, and clarity in design and development. While deciding on the tech stack, I realized that most large and medium-scale organizations use React for building the frontend due to its flexibility and performance, Node.js for the backend, and ContextAPI for state management. I set a timeline for the project, planning to complete the design and wireframes in the third week, followed by development and deployment in weeks four to ten, and wrapping up with testing in the final weeks.
Design (Weeks 2-4)
The tagline of my portfolio is Aiming for Clearer, Faster, and Simpler, which I kept in mind while designing, choosing the colors, images, and tone. While design and user interface are important aspects of a digital product, code quality and performance are equally essential. Therefore, I aimed to create a simple, minimalist, and high-performing web product. White and black created a professional and minimal tone by providing high contrast, clarity, and elegance, allowing the focus to remain on the content without distractions.
Development (Weeks 4-11)
The most amount of time I spent was on development. Even though the project was a single-page application, there was a lot of work to be done. Starting with the backend, I set up the development environment with Node, Git, GitHub, and VSCode. The next step was to sign up for MongoDB Atlas Cloud service for the database. Once the database service was available, I built an HTTPS server with Express, installed CORS (Cross-Origin Resource Sharing), and body-parser. Further, creating the REST API was tricky and critical, using Mongoose as an ORM (Object Relational Mapping). Creating the MongoDB Schema and Model was quite easy. The very next step was to create Routes and Middlewares. At last, I added the database connection and tested the API using Postman to get the backend up and running.
Secondly, the majority of my time was consumed by frontend development. After setting up React, Tailwind, GSAP, and FramerMotion libraries, the next step was to break the design into atomic-level components that were reusable. The entire frontend code was divided into two parts: Components and Animation Components. Components were basically the functions that created the user interface, whereas animation components worked behind the scenes and were triggered on specific movement, depending on the device and how the user browsed through the website. Overall, the frontend code was written mobile-first, with a very precise focus on responsiveness. The use of Tailwind made the process quick and easy to iterate on through trial and error. The most important aspect of development was integrating the backend API with the frontend, and thankfully Axios made it very easy. At last, after testing both ends, I deployed the code on render.com.
Testing (Weeks 12-13)
Testing played a crucial role in this product. During the process, I had chances to get feedback from many people, and I spent considerable time testing frontend usability with tools like Hotjar and UserTesting and accessibility with Wave, Axe, and Chrome DevTools. Performance testing was done using Google Lighthouse and GTMetrix, from which I received extremely insightful results, not just in terms of performance but also where the code was lagging. At last, I tested the backend again with the frontend and Postman.
