This portfolio is a full-stack application that combines a clean, accessible interface with dynamic routing and backend integration. Built from scratch without templates, it reflects both my design instincts and technical competence.

Concept & Design

Designed directly in Figma, based on a clear mental vision. I didn’t follow any formal design methodology due to the simplicity of the layout, but prioritized usability and clarity across devices.

Tech Stack

Frontend: Next.js (App Router), React, TypeScript
Styling: Tailwind CSS, CSS Modules, Vanilla CSS Animations
Backend: MongoDB (data via API)
Deployment: Vercel
Version Control: GitHub

Navigation & Routing Strategy

Implemented using Next.js App Router, with advanced URL behavior:

Project dialog routes are dynamically pushed only when opened.
When visited directly via a shareable URL, middleware ensures the dialog appears with relevant content — despite the route not being a traditional page.

Component & State Architecture

Component design is modular, enabling reuse and scalability. Dialog state is managed so that transitions are smooth and persistent across reloads or URL entries.

Backend Integration

All project data is fetched from MongoDB via a custom API. This ensures that new projects can be added and displayed without changing the frontend.

(Note: There’s a separate admin UI I’ve built for adding data, which runs locally. It’s excluded here as it's not part of the public deployment.)

Accessibility & Semantics

Used semantic HTML tags consistently to enhance accessibility and SEO. The layout is designed to be fully keyboard-navigable.

Animations & Interactivity

Animations are lightweight and implemented using vanilla CSS to maintain performance.

Hover transitions
Scroll-based reveals
Smooth modal transitions

Deployment & Workflow

Hosted on Vercel
Source code and issue tracking managed via GitHub
Built as a single repository for simplicity and maintainability

Outcome

This project represents my ability to design and build end-to-end web applications — from UX to code to deployment. It serves not only as a portfolio but also as a demonstration of:

Semantic, maintainable code
Routing logic and deep linking
API integration and modularity
Design execution and responsiveness

Projects

Personal Portfolio

AltFlow