Portfolio

A personal portfolio built using Next.js 15 (App Router) with Server-Side Rendering (SSR), dynamic routing, and MVC architecture, designed to showcase projects, skills, and experience. It supports SEO optimization, fast navigation, and clean code structure to make a strong impression on recruiters and clients.

NextJs

React

Tailwind

TypeScript

Html

CSS

Project Requirements

Build a fully responsive and accessible personal website.

Use Next.js App Router for routing and layout handling.

Enable Server-Side Rendering for SEO-friendly project and blog pages.

Create dynamic routes for individual projects and blog posts.

Optimize image handling and metadata for SEO.

Deploy on Vercel for instant scalability.

Approaches Used

Next.js 15 App Router for modern layout and nested routing structure.

Dynamic routing using [slug] and generateMetadata() for blog/projects.

Server-side rendering (SSR) using generateStaticParams() and fetch() from server components.

Used Axios for API integration with loading & error handling.

Reusable UI components (Cards, Layout, Hero, etc.) with Tailwind CSS.

Metadata API and robots.txt for SEO optimization.

Folder-based MVC separation for logic, views (components), and models (data functions).

Challenges and Solutions

Managing SSR with dynamic content

Used generateStaticParams for pre-rendered paths and fallback loading for new content.

Structuring a scalable folder hierarchy

Used domain-based folder separation and MVC-inspired logic separation.

SEO optimization for each dynamic page

Implemented custom metadata.js in each route and semantic HTML tags.

Organizing reusable components

Created a ui/ and shared/ folder system for atomic component usage.

Project Structure


   portfolio-website/
├── app/                    # App router directory
│   ├── layout.js           # Root layout for shared components
│   ├── page.js             # Home page (SSR)
│   ├── projects/           # Dynamic route: /projects/[slug]
│   │   ├── [slug]/page.js  # Project details rendered using dynamic metadata
│   ├── blog/               # Blog route with dynamic routing
│   │   ├── [slug]/page.js
│   ├── about/page.js       # About me
│   └── contact/page.js     # Contact form page
├── components/             # Reusable UI components (Navbar, Footer, Card, etc.)
├── lib/                    # Model/data logic (fetching markdown, CMS, etc.)
├── styles/                 # Global styles and Tailwind config
├── public/                 # Static assets (images, favicons)
├── .env.local              # Environment variables
├── tailwind.config.js
├── next.config.js
└── README.md

How It Works

📦 Setup & Installation

Clone the repository: `git clone https://github.com/your-repo.git`
Install backend dependencies: `cd backend && npm install`
Start backend: `npm run dev`
Install frontend dependencies: `cd frontend && npm install`
Start frontend: `npm run dev`

Installation

Backend

no backend need

Frontend

cd portfolio && npm install & npm run dev

API Endpoints

Method	Route	Description
POST	/api/auth/login	User login
POST	/api/auth/register	Register new user
GET	/api/home	Fetch homepage content with featured sections
GET	/api/projects	Get all portfolio projects
GET	/api/projects/:id	Get project details by ID
POST	/api/projects	Add a new project (Admin only)
GET	/api/articles	Get all articles/blog posts
GET	/api/articles/:slug	Get article by slug
POST	/api/articles	Publish a new article (Admin only)
GET	/api/about	Fetch about page content
PUT	/api/about	Update about page content (Admin only)