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
• SEO Optimized: 100% SEO compatible with dynamic OG images for social media
• MDC Syntax: Use Vue components directly in Markdown files

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

git clone <your-repo-url>
cd pahachaan

bun install
# or npm install / pnpm install / yarn install

NOTE: This project uses Bun as the package manager. You can use npm, pnpm, or yarn if you prefer. You can safely delete bun.lock which is stale.

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

# 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

bun dev

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

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

Your homepage hero section:

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

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"
}

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}

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"
  }
}

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"

---

::

Your tech stack and tools:

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

##### Workstation

- Your laptop
- Your monitor
  ...

Resources and guides you want to share:

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

Your content here...

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

Projects page metadata:

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

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...

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"
}

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.

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

1. Start your dev server: bun dev
2. Visit http://localhost:3000/_studio (or the route set in STUDIO_ROUTE)
3. 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

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

1. Go to GitHub Developer Settings
2. Click New OAuth App
3. Configure:
   • Application name: Your app name
   • Homepage URL: https://yourdomain.com
   • Authorization callback URL: https://yourdomain.com
4. Copy your Client ID and Client Secret

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

1. Deploy your site to a platform that supports SSR (Vercel, Netlify, Cloudflare Pages, etc.)
2. Visit https://yourdomain.com/_studio (or the route set in STUDIO_ROUTE)
3. Click Login with GitHub and authorize
4. 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

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.

• 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.

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"
}

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...

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

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

Nuxt supports various hosting platforms:

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

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

• 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

Contributions are welcome!

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

For bugs and feature requests, please open an issue.

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

• 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!