Kiple.dev
Personal Portfolio Landing Page Website built with Next.js. The final product showcases my work, as well as provides a personal summary and links, including a CV.
Personal Portfolio Landing Page Website built with Next.js. The final product showcases my work, as well as provides a personal summary and links, including a CV.
In 2024, I built a personal portfolio website to showcase my CV, skills, and personal projects in one convenient location. It also includes my contact links, making it easier for visitors to learn more about me. Since portfolios tend to be primarily static, I prioritized the following goals:
• Design, build, and deploy a professional website with a custom domain and HTTPS/SSL.
• Ensure the UI is responsive on both desktop and mobile devices.
• Emphasize styling, decoration, and visual identity to create a recognizable, creative, and modern look.
• Optimize performance for minimal lag and quick load times.
• Continue monitoring the website after deployment.
Additionally, I aimed for an exceptional final result by leveraging modern technologies and industry standards, challenging myself to maintain high quality throughout the process.
Screenshot of Figma prototype
(Click to enlarge)
I began with planning the content of the website. The most relevant elements were chosen to be a brief personal introduction, a full CV, a portfolio of previous projects, as well as personal contact links.
Then, the layout was prototyped and designed in Figma, which allowed me to quickly explore different user interface options. This was the quickest step of the process, as the initial prototype only took a few days. After first exploring a flashy dark theme with neon highlights, I ultimately opted for a calmer, minimalist, sleek dual-tone design. I added a flair of playfulness to brighten its professional demeanor by incorporating custom-made vector graphics created with Adobe Illustrator.
The website itself was made with the React library with TypeScript enabled, using the full-stack production-grade Next.js development framework. React's component-based structure allowed me to easily create a sophisticated, interactive user interface. Next.js, on the other hand, took care of optimization and performance, for example, by prefetching links improving the speed of client-side navigation, and statically optimizing pages by prerendering them to static HTML. To further reduce the payload size, I compressed the images to indexed-color while maintaining their original resolution, resulting in a final page size of under 1.5 MB.
UI responsiveness was achieved with TailwindCSS, an open source CSS framework. Besides considerably speeding up the CSS styling process, it allowed me to apply styling classes at different screen size breakpoints, giving me the flexibility to create a seamless experience across most devices. To help the design come alive, I used GSAP, an industry-standard, framework-agnostic animation library to add subtle movement to graphics and icons.
I ensured accessibility by giving elements labels, text alternatives and roles where necessary. Search engine optimization was improved by making the website compatible with Google's indexing and crawling tools, and using descriptive keywords in writing.