Personal Website

Introduction

Creating my own portfolio website has been one of the most defining projects in my development journey. What began as a simple static site has evolved into a robust, full-stack web application that reflects both my growth as a developer and my passion for clean, scalable architecture.

This website is not just a showcase of my work—it’s my digital identity, designed to give visitors, recruiters, and collaborators a clear and interactive overview of who I am, what I’ve built, and what I’m capable of.

Figure: Landing page of the portfolio website

Purpose of the Website

The main goal of this site is to serve as an interactive and dynamic resume, going beyond what a traditional CV can convey. It presents my projects, technical skills, and personal interests through a smooth, well-designed experience.
It also includes a built-in contact section, making it easy for visitors to reach out directly.

Figure: Contact section that allows easy outreach

Architecture Overview

Over time, the site has undergone a complete technical transformation. What once started as a front-end project built with Vite + Firebase is now a full-stack web application leveraging Next.js, Spring Boot, and PostgreSQL.

This evolution was driven by two main goals:

1. To improve SEO and performance through Server-Side Rendering (SSR).
2. To gain full control over the backend and data layer, moving away from vendor lock-in.

Technologies Used

Frontend

• Framework: Next.js (React + TypeScript)
  The migration to Next.js allows for SSR and static generation, which drastically improves SEO and first load times.
• Styling: Tailwind CSS
  Chosen for its utility-first approach and responsiveness.
• Features: Internationalization with i18next, Theme toggling (light/dark mode), Optimized image loading and metadata for SEO, Seamless integration with the backend API.

Backend

• Framework: Spring Boot (Java)
  A lightweight backend service that provides APIs for managing blog posts, projects, and contact requests.
• Database: PostgreSQL via Supabase
  Provides a reliable, scalable, and SQL-based data layer with a modern developer experience.
• Authentication: JSON Web Token (JWT) for secure access to the admin dashboard.

Deployment

• Frontend: Deployed on Cloudflare Workers for fast, globally distributed edge performance.
• Backend: Hosted on Azure App Service, ensuring easy scaling and continuous deployment.
• Database: Managed on Supabase, offering a secure and serverless PostgreSQL environment.
• CI/CD: Fully automated deployment pipeline via GitHub Actions—every push to main triggers automated builds, tests, and deployments for both the frontend and backend.

Figure: Overview of the technologies powering the site

My Role and Responsibilities

As the sole creator of the project, I handled every step—from design to deployment.

As Designer

I used Figma to prototype and refine every part of the user interface. My focus was on achieving a minimalist yet expressive design, ensuring readability, fluid navigation, and adaptability across devices.

Figure: Wireframe and layout design process

Figure: Final UI in light mode

Figure: Final UI in dark mode

As Developer

After finalizing the design, I chose to start implementing it using React with TypeScript. This allowed me to benefit from type safety, autocompletion, and better maintainability. During development, I integrated:

• i18next for internationalization
• Theme toggling for light/dark mode
• Firebase for real-time blog content
• Custom hooks and reusable components for better structure

Figure: Language and theme toggle buttons in bottom-right corner

This year, I decided to migrate to Nextjs and Springboot. The migration process allowed me to rethink the structure of my application:

• Migrated content structure from Firestore to a relational PostgreSQL schema.
• Built REST APIs in Spring Boot to serve blog data and admin requests.
• Integrated SSR data fetching and server components in Next.js.
• Set up automated deployment and database migrations through GitHub Actions.
• Implemented error tracking and logging for better maintainability.

Challenges and Lessons Learned

Migrating from a static Firebase site to a distributed full-stack setup was a significant leap. I had to tackle:

• Deployment orchestration across multiple cloud platforms.
• Secure communication between frontend and backend.
• Performance tuning for SSR and database queries.

These challenges deepened my understanding of DevOps practices, backend scalability, and cloud architecture design.

Conclusion

This portfolio website represents not just my technical skills but also my journey of continuous improvement.
By rebuilding it from a simple React app into a modern full-stack ecosystem powered by Next.js, Spring Boot, and PostgreSQL, I’ve learned to design, build, and maintain a complete production-grade application—from frontend polish to backend resilience.

It’s a project that will continue to evolve with me, both as a developer and as a creator.
Thank you for taking the time to explore it — and feel free to check it out live!