A multi-page agency portfolio website built with Next.js 13, TypeScript, and TailwindCSS. Demonstrates App Router, server-side rendering, dynamic routing, dark/light theme, and responsive design.
| Page | Route | What it shows |
|---|---|---|
| Home | / |
Hero section with CTA |
| Portfolio | /portfolio |
Gallery with category filters (Illustrations, Websites, Applications) |
| Blog | /blog |
Blog post listing |
| About | /about |
Company story with image |
| Contact | /contact |
Contact form |
| Dashboard | /dashboard |
Authenticated dashboard |
- Dark / Light Mode — Theme toggle with persistent preference
- Responsive Design — Mobile-first layout that works across all screen sizes
- Dynamic Routing — Next.js App Router with nested routes (
/portfolio/illustrations,/portfolio/websites, etc.) - Image Optimization — Using
next/imagefor automatic lazy loading, resizing, and format conversion - Server-Side Rendering — Pages rendered on the server for fast initial load and SEO
- Category Filtering — Portfolio gallery filterable by Illustrations, Websites, and Applications
| Technology | Purpose |
|---|---|
| Next.js 13 | React framework with App Router and SSR |
| TypeScript | Type-safe development |
| TailwindCSS | Utility-first responsive styling |
| Netlify | Continuous deployment and hosting |
# Clone the repo
git clone https://github.com/gypsicoder/demopedia.git
cd demopedia
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000 to see the app.
demopedia/
├── src/ # Application source code
│ ├── app/ # Next.js 13 App Router pages
│ └── components/ # Reusable React components
├── public/ # Static assets and images
├── next.config.js # Next.js configuration
├── tailwind.config.js # TailwindCSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.