Juggling both the roles of designer and developer, I brought my portfolio website to life with tools like Figma, Next.js, and Tailwind CSS. If you are reading this article on my website, chances are you have already explored the end result.
Design
With the vision of creating an engaging digital space, I crafted both mobile and desktop design prototypes within Figma. Prioritizing intuitive layouts and visually compelling designs, the aim was to captivate and resonate with visitors.
The style guide of this website.
High-fidelity mobile layout created in Figma.
Mobile and desktop mockup of the Gallery page.
Development
This site took shape during the initial release of Next.js 14. The framework offered a variety of advantages such as rapid development, server-side rendering, and TypeScript support. The new Server Action feature facilitated seamless integration of database access and authentication. Tailwind CSS enabled me to seamlessly tailor pages to various screen sizes, ensuring a pleasant browsing experience on any device.
An integral feature of the website is the content management system. Given the evolving nature of my work, maintaining a dynamic Gallery and Projects page was imperative. Thus, I developed an original CMS powered by MongoDB. Accessible via an authentication-protected admin page, it allowed effortless content editing.
The admin control panel of this website.
Central to the website is a touch of interactive creativity on the landing page, infusing it with a playful essence. The concentric rings not only serve as captivating visual elements but also respond to mouse movements, providing visitors with a delightful surprise. If examined closely, the rings’ thickness is randomly generated, offering a subtle variance with each refresh.
A prototype of the rings on the landing page.
Next Steps
Looking ahead, I plan on introducing more interactive animations through the Framer Motion library, aimed at further enhancing the user interaction and immersion.