Personal portfolio of Aariyan Apu, Full Stack Web Developer from Bangladesh. Built with Next.js 16, React 19, Tailwind CSS v4, and TypeScript.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 (strict) |
| Styling | Tailwind CSS v4 |
| UI Components | shadcn/ui + Radix UI |
| Icons | Lucide React |
| Linter / Formatter | Biome |
| Package Manager | Bun |
Prerequisites: Bun installed.
# 1. Clone the repository
git clone https://github.com/your-username/portfolio.git
cd portfolio
# 2. Install dependencies
bun install
# 3. Start the development server
bun run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
bun run dev |
Start development server |
bun run build |
Create production build |
bun start |
Start production server |
bun run lint |
Run Biome linter |
bun run format |
Format all files with Biome |
bunx shadcn@latest add <component-name>
# Examples
bunx shadcn@latest add card
bunx shadcn@latest add dialogportfolio/
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout — fonts, metadata
│ │ ├── page.tsx # Homepage
│ │ └── globals.css # Tailwind theme, color tokens, base styles
│ ├── components/
│ │ └── ui/ # Reusable UI components (shadcn/ui conventions)
│ │ └── button.tsx
│ ├── lib/
│ │ └── utils.ts # cn() helper — clsx + tailwind-merge
│ └── utils/
│ └── Kenfolg.otf # Local display / title font
├── CLAUDE.md # Guidance for AI coding assistants
├── biome.json # Linter + formatter config
├── components.json # shadcn/ui config
├── next.config.ts # Next.js config (React Compiler enabled)
└── package.json
This project uses two fonts, both loaded via next/font for zero layout shift and automatic optimization.
Applied globally to <body>. This is the default font everywhere — no class needed.
<p>This already uses Quicksand.</p>To use explicitly via Tailwind:
<p className="font-sans">Quicksand text</p>A custom .otf font stored at src/utils/Kenfolg.otf. Use it via the font-title Tailwind utility.
<h1 className="font-title">Aariyan Apu</h1>
<span className="font-title text-4xl">Display Text</span>- Place the font file in
src/utils/ - Register it in
src/app/layout.tsx:
import localFont from "next/font/local";
const myFont = localFont({
src: "../utils/MyFont.otf",
variable: "--font-my-font",
});- Add the variable to
<body>:
<body className={`... ${myFont.variable} antialiased`}>- Expose it in
src/app/globals.cssinside@theme inline:
@theme inline {
--font-my-font: var(--font-my-font), sans-serif;
}- Use it anywhere with
font-my-font.
Colors are defined in src/app/globals.css using CSS custom properties in the OKLch color space with full dark mode support. To change the palette, update the values in :root (light) and .dark (dark).
The Tailwind theme is configured entirely in CSS — there is no tailwind.config.* file.
MIT — free to use, fork, and adapt.