Pahachaan

Personal portfolio site template for all kind of techies - fully customizable via Nuxt Studio.

Preview

Performance

Features

A minimal, content-driven template for personal portfolios that's free to use.

100% Content-Driven: All personal data managed through the /content/ directory
Nuxt Studio Compatible: Full support for Nuxt Studio - edit content visually without touching code
Fully Responsive: Adaptive navbar and layout that works on all devices
Dynamic Content: Automatically displays latest blog articles on homepage
Flexible Contact Links: Social media profile links loaded from content
Light & Dark Mode: Built-in theme switching
Custom Theme Picker: Visitors can tune primary color, neutral palette, border radius, and color mode
Minimal Mode: Optional env flag to hide decorative icons across contact links, projects, blog cards, announcements, and footer banners
Live Visitor Counter: Real-time visitor presence powered by Ably
Status Monitoring Widget: Optional OpenStatus badge for public uptime visibility
SEO Optimized: 100% SEO compatible with dynamic OG images for social media
RSS & Sitemap Support: Blog posts are exposed through /rss.xml and sitemap entries
LLM-Friendly Metadata: nuxt-llms support for AI-readable site context
MDC Syntax: Use Vue components directly in Markdown files
Mermaid Diagrams: Render Mermaid code blocks inside content pages
Blog Reading Tools: Pinned/collapsible table of contents and print-friendly article credits
Design System Documentation: DESIGN.md documents the Editorial Technical visual identity with machine-readable tokens (Google DESIGN.md format)

Quick Start

1. Fork & Clone

Click the Use this template button or fork this repository, then clone it:

git clone <your-repo-url>
cd pahachaan

2. Install Dependencies

bun install

This repository uses Bun for installs and scripts (bun.lock). Use bun run <script> for package.json scripts (for example bun run build).

3. Configure Environment

Create a .env file with the following variables:

# Your site URL
NUXT_PUBLIC_SITE_URL=https://yoursite.com

# Your name
OWNER_NAME=Your Name

# Openstatus widget slug (optional - for uptime monitoring)
STATUS_SITE_SLUG=your-slug

# Umami analytics (optional)
NUXT_PUBLIC_UMAMI_SCRIPT_URL=https://cloud.umami.is/script.js
NUXT_PUBLIC_UMAMI_WEBSITE_ID=your-website-id

# Ably realtime visitor presence (optional)
ABLY_API_KEY=your_ably_api_key

# Minimal mode — hide icons in links, projects, blog, announcements, and footer (optional)
NUXT_PUBLIC_MINIMAL_MODE=false

# Twitter handle (optional)
TWITTER_HANDLE=@yourhandle

# Local Nuxt Studio route (optional - defaults to /_studio)
STUDIO_ROUTE=/_studio

# GitHub repository configuration (required for Studio)
STUDIO_GITHUB_OWNER=your-github-username
STUDIO_GITHUB_REPO=your-repo-name
STUDIO_GITHUB_BRANCH_NAME=main

# GitHub OAuth for Studio production mode (optional - for deployed sites)
STUDIO_GITHUB_CLIENT_ID=your_github_client_id
STUDIO_GITHUB_CLIENT_SECRET=your_github_client_secret

4. Start Development Server

bun dev

Visit http://localhost:3000 to see your site!

Content Structure

All personal content is managed through the /content/ directory. Edit these files to customize your portfolio:

Core Configuration Files

`content/home.json`

Your homepage hero section:

{
  "name": "Your Name",
  "pronouns": "she/her",
  "title": "Your Professional Title",
  "bio": "Your bio description..."
}

`content/seo.json`

SEO metadata and site configuration:

{
  "code": "seo",
  "headline": "Hello, I'm",
  "title": "Your Name | Title",
  "description": "Your site description...",
  "coverImage": "/avatar.jpg",
  "theme": "#374151",
  "colorMode": "dark"
}

`content/contact.json`

Social links displayed on homepage:

{
  "contact": [
    {
      "name": "Github",
      "icon": "i-simple-icons-github",
      "url": "https://github.com/yourusername"
    },
    {
      "name": "LinkedIn",
      "icon": "i-simple-icons-linkedin",
      "url": "https://linkedin.com/in/yourusername"
    }
  ]
}

Available Icons: Use any icon from Iconify with the format i-{collection}-{icon}

`content/footer.json`

Footer configuration and affiliate section:

{
  "title": "Footer",
  "github": "https://github.com/yourusername/repo",
  "blog": "https://yourblog.com",
  "linkedin": "https://linkedin.com/in/yourusername",
  "twitter": "https://x.com/yourhandle",
  "affiliate": {
    "title": "Affiliate Title",
    "description": "Affiliate description",
    "url": "https://affiliate-link.com"
  }
}

Content Pages

`content/index.md`

Homepage announcement using MDC component:

---
title: "Home"
---

## ::announcement

title: "Your Announcement Title"
description: "Announcement description"
url: "https://your-link.com"
image: "https://your-image.png"

---

::

`content/uses.md`

Your tech stack and tools:

---
title: "Uses"
description: "My daily tech setup and tools"
icon: "solar:monitor-smartphone-outline"
---

##### Workstation

- Your laptop
- Your monitor
  ...

`content/resources.md`

Resources and guides you want to share:

---
title: "Resources"
description: "Collection of free resources"
icon: "solar:bookmark-linear"
---

Your content here...

Collections

`content/projects/*.json`

Individual project entries:

{
  "title": "Project Name",
  "url": "https://project-url.com",
  "thumbnail": "/projects/logo/project.png",
  "thumbnailBg": "bg-gray-900",
  "thumbnailAlt": "Project logo",
  "category": "development",
  "heading": "Project Title",
  "description": "Project description",
  "status": "active",
  "role": "Author"
}

Status Options: active, wip, completed, abandoned

`content/projects/index.json`

Projects page metadata:

{
  "title": "Projects",
  "description": "Your projects description",
  "icon": "solar:folder-with-files-outline"
}

`content/blog/*.md`

Blog posts with frontmatter:

---
title: "Post Title"
description: "Post description"
published: "2024-01-01"
path: "/blog/post-slug"
cover: "/blog/cover.png"
thumbnail: "/blog/thumbnails/thumb.png"
---

Your blog content here...

`content/shop/*.json`

Shop items or products:

{
  "title": "Product Name",
  "icon": "solar:shop-2-outline",
  "url": "https://product-url.com",
  "category": "templates",
  "heading": "Product Heading",
  "description": "Product description"
}

Design System

Visual identity, typography, colors, layout, components, and guardrails live in DESIGN.md. The site follows an Editorial Technical direction: zinc neutrals, serif headings, Barlow body text, bordered list rows, and minimal motion.

DESIGN.md uses the open Google DESIGN.md format — YAML design tokens in frontmatter plus prose sections — so humans and AI coding agents share one source of truth for UI decisions.

Topic	Where
Colors, type scale, spacing, radius	YAML tokens in `DESIGN.md`
Component patterns (navbar, list rows, cards)	`DESIGN.md` → Components
Voice, audience, positioning	PRODUCT.md
Theme defaults	`app/app.config.ts`

Validate the design file locally:

npx @google/design.md lint DESIGN.md

When customizing UI, read DESIGN.md before changing shared styles. Prefer updating tokens and documented patterns over one-off Tailwind in page components.

Editing with Nuxt Studio

Nuxt Studio is an open-source module that provides a visual interface to edit your content. It's already configured in this template and can be accessed both locally and in production.

Accessing Studio Locally

Studio is pre-configured and ready to use in development:

Start your dev server: bun dev
Visit http://localhost:3000/_studio (or the route set in STUDIO_ROUTE)
Start editing your content visually

Optional: Customize the Studio route by setting STUDIO_ROUTE in your .env file:

STUDIO_ROUTE=/admin  # Access Studio at /admin instead of /_studio

Accessing Studio in Production

To enable content editing on your deployed site, you need to set up GitHub OAuth authentication:

1. Create GitHub OAuth App

Go to GitHub Developer Settings
Click New OAuth App
Configure:

Application name: Your app name
Homepage URL: https://yourdomain.com
Authorization callback URL: https://yourdomain.com

Copy your Client ID and Client Secret

2. Update Environment Variables

The repository configuration is already set via environment variables. Update your .env or deployment platform's environment variables:

# GitHub repository (already configured via env.example)
STUDIO_GITHUB_OWNER=your-github-username
STUDIO_GITHUB_REPO=your-repo-name
STUDIO_GITHUB_BRANCH_NAME=main

# Nuxt Studio route (optional - defaults to /_studio)
STUDIO_ROUTE=/_studio

# GitHub OAuth credentials (add these)
STUDIO_GITHUB_CLIENT_ID=your_github_client_id
STUDIO_GITHUB_CLIENT_SECRET=your_github_client_secret

3. Deploy and Edit

Deploy your site to a platform that supports SSR (Vercel, Netlify, Cloudflare Pages, etc.)
Visit https://yourdomain.com/_studio (or the route set in STUDIO_ROUTE)
Click Login with GitHub and authorize
Start editing - changes commit directly to your repository!

Tips:

Use Cmd/Ctrl + . as a shortcut to open Studio
Studio works on any branch - just set STUDIO_GITHUB_BRANCH_NAME to target different branches

Configuration

Studio is pre-configured in nuxt.config.ts to read from environment variables:

studio: {
  route: process.env.STUDIO_ROUTE,
  repository: {
    provider: "github",
    owner: process.env.STUDIO_GITHUB_OWNER,
    repo: process.env.STUDIO_GITHUB_REPO,
    branch: process.env.STUDIO_GITHUB_BRANCH_NAME,
  }
}

No code changes needed! Just set your environment variables in .env or your deployment platform.

Studio Features

Visual Editor: Edit markdown files with a markdown editor interface.
MDC Components: Insert components like ::announcement directly in the editor
Live Preview: See changes in real-time
File Management: Create, edit, and delete content files
Git Integration: Changes are committed directly to your GitHub repository (production mode)
Multi-Branch Support: Target different branches for staging/production workflows

Learn more in the Nuxt Studio documentation.

Customization

Adding New Projects

Create a new JSON file in content/projects/ with a number prefix (e.g., 18.myproject.json):

{
  "title": "My New Project",
  "url": "https://example.com",
  "thumbnail": "/projects/logo/myproject.png",
  "thumbnailBg": "bg-blue-500",
  "thumbnailAlt": "My project logo",
  "category": "development",
  "heading": "My Project",
  "description": "Description of my project",
  "status": "active",
  "role": "Creator"
}

Adding Blog Posts

Create a new markdown file in content/blog/:

---
title: "My Blog Post"
description: "Post description"
published: "2024-11-08"
path: "/blog/my-blog-post"
cover: "/blog/my-post.png"
thumbnail: "/blog/thumbnails/my-post.png"
---

# My Blog Post

Your content here...

Modifying Contact Links

Edit content/contact.json to add, remove, or modify social links. Find icons at Iconify.

Changing Colors and Theme

Edit content/seo.json to change the theme color and default color mode.

Minimal Mode

Set NUXT_PUBLIC_MINIMAL_MODE=true to strip decorative icons from the UI while keeping text and links intact. This affects:

Contact link icons on the homepage
Project card thumbnails
Blog card cover images
Announcement avatars
Footer banner icons (for example GitHub and affiliate avatars)

Useful when you want a cleaner, text-first layout without editing individual content files.

Deployment

Nuxt supports various hosting platforms:

Vercel: Zero-config deployment
Netlify: Automatic builds from Git
Cloudflare Pages: Edge deployment
And more: Check Nuxt deployment docs

Deploy to Vercel

# Install Vercel CLI
bun install -g vercel

# Deploy
vercel

Tech Stack

Nuxt 3 - Vue.js Framework
Nuxt Content 3 - File-based CMS
Nuxt UI - UI Component Library
Nuxt Studio - Visual Content Editor
Tailwind CSS - Utility-first CSS
VueUse - Vue Composition Utilities

Contributing

Contributions are welcome!

Fork the repository
Create a feature branch: git checkout -b feature/my-feature
Make your changes
Commit: git commit -am 'Add new feature'
Push: git push origin feature/my-feature
Open a Pull Request to the develop branch

For bugs and feature requests, please open an issue.

License

This project is open source and available under the MIT License.

Credits

Original inspiration: Fayaz Ahmed's Zooper template
Built with love using Nuxt and Nuxt Content

Made with ❤️ for the dev community. Feel free to fork, customize, and make it your own!

Name		Name	Last commit message	Last commit date
Latest commit History 336 Commits
.agents/skills		.agents/skills
.bb		.bb
.claude/skills		.claude/skills
.cursor/hooks/state		.cursor/hooks/state
.github		.github
.hermes/skills		.hermes/skills
.vscode		.vscode
app		app
content		content
docs/superpowers		docs/superpowers
public		public
scripts		scripts
server		server
.env.example		.env.example
.gitignore		.gitignore
.npmrc		.npmrc
AGENTS.md		AGENTS.md
DESIGN.md		DESIGN.md
LICENSE		LICENSE
PRODUCT.md		PRODUCT.md
README.md		README.md
bun.lock		bun.lock
content.config.ts		content.config.ts
env.example		env.example
nuxt.config.ts		nuxt.config.ts
package.json		package.json
skills-lock.json		skills-lock.json
tailwind.config.ts		tailwind.config.ts
todo.md		todo.md
tsconfig.json		tsconfig.json
wrangler.toml		wrangler.toml

Folders and files

Latest commit

History

Repository files navigation

Pahachaan

Personal portfolio site template for all kind of techies - fully customizable via Nuxt Studio.

Preview

Performance

Features

Quick Start

1. Fork & Clone

2. Install Dependencies

3. Configure Environment

4. Start Development Server

Content Structure

Core Configuration Files

content/home.json

content/seo.json

content/contact.json

content/footer.json

Content Pages

content/index.md

content/uses.md

content/resources.md

Collections

content/projects/*.json

content/projects/index.json

content/blog/*.md

content/shop/*.json