Sponsored by HostedPocket.com - The easiest way to host PocketBase in the cloud
A modern, responsive portfolio website built with Nuxt 4, PocketBase, and Tailwind CSS. Perfect for developers, designers, and professionals who want to showcase their work with a clean, performant, and SEO-optimized portfolio.
✨ Get other templates at NuxtMint.com
- 🎨 Modern Design: Clean, professional layout with dark/light theme support
- 📱 Fully Responsive: Mobile-first design that looks great on all devices
- ⚡ Performance Optimized: Built with Nuxt 4 for maximum speed and SEO
- 🗄️ Dynamic Content: Powered by PocketBase for easy content management
- 🌙 Theme Toggle: System preference detection with localStorage persistence
- 🔧 Type Safe: Full TypeScript support with proper type definitions
- Nuxt 4 - The Intuitive Vue Framework
- PocketBase - Open source backend in 1 file
- Tailwind CSS - Utility-first CSS framework
- Nuxt Icon - Icon component with 100k+ icons
- Node.js (v18 or higher)
- npm
- PocketBase instance (local or hosted)
# Clone the repository
git clone <this-repo-url>
cd nuxt-portfolio
# Install dependencies
npm installCreate a .env file in the root directory:
# Copy the example environment file
cp .env.example .envUpdate the .env file with your PocketBase URL:
# PocketBase Configuration
POCKETBASE_URL=http://localhost:8090
# or your hosted PocketBase URL
# POCKETBASE_URL=https://your-pocketbase-instance.hostedpocket.com
# Demo Mode (optional)
DEMO=false- Download PocketBase from pocketbase.io
- Start PocketBase:
./pocketbase serve
- Access Admin Panel: Open
http://localhost:8090/_/and create an admin account
- Sign up at HostedPocket.com
- Create a new instance
- Update your
.envfile with the hosted URL
- Open PocketBase Admin Panel (
http://localhost:8090/_/or your hosted URL) - Go to Settings → Import collections
- Upload the
database/pocketbase.jsonfile - Click Import to create all collections
We've created an automated seeding script to populate your database with sample data. This is much faster than manually entering data through the admin panel.
-
Add superuser credentials to your
.envfile:# Superuser credentials for seeding SUPERUSER_EMAIL=your-admin@example.com SUPERUSER_PASSWORD=your-admin-password
-
Run the seeding script:
npm run seed # or node scripts/seed-database.js -
Verify the data (optional):
npm run verify # or node scripts/verify-data.js
The seeding script will create:
- 1 Profile record - Your personal information and contact details
- 3 Experience records - Sample work history with technologies
- 2 Education records - Academic background and certifications
- 3 Skills categories - Frontend, Backend, and Tools & DevOps
- 4 Project records - Portfolio projects with GitHub/demo links
If you prefer to add data manually or customize the sample data:
- Open PocketBase Admin Panel (
http://localhost:8090/_/or your hosted URL) - Navigate to Collections and add records to each collection:
- profile: Personal info, contact details, availability status
- experience: Work history with job titles, companies, and technologies
- education: Academic background and certifications
- skills: Technical skills organized by category
- projects: Portfolio projects with descriptions and links
To customize the sample data before seeding:
- Edit
scripts/seed-database.js - Update the data objects with your information
- Run the seeding script with your custom data
# Start the development server
npm run devVisit http://localhost:3000 to see your portfolio!
nuxt-portfolio/
├── app/ # Nuxt 4 app directory
│ ├── components/ # Vue components
│ │ ├── demo/ # Demo-specific components
│ │ ├── AppHeader.vue # Site header
│ │ ├── AppFooter.vue # Site footer
│ │ ├── HeroSection.vue # Hero/intro section
│ │ ├── ExperienceSection.vue
│ │ ├── EducationSection.vue
│ │ ├── SkillsSection.vue
│ │ ├── ProjectsSection.vue
│ │ └── ContactSection.vue
│ ├── composables/ # Vue composables
│ │ ├── usePocketBase.ts # PocketBase integration
│ │ └── useTheme.ts # Theme management
│ ├── pages/ # Page components
│ │ └── index.vue # Homepage
│ ├── types/ # TypeScript definitions
│ │ └── index.ts # Type definitions
│ └── app.vue # Root component
├── database/ # Database configuration
│ └── pocketbase.json # PocketBase schema export
├── public/ # Static assets
├── server/ # Server-side code (if needed)
├── .env.example # Environment variables template
├── nuxt.config.ts # Nuxt configuration
└── package.json # Dependencies
Cloudflare Pages offers excellent performance, global CDN, and seamless integration with Nuxt.
-
Setup Wrangler Configuration:
# Copy the example wrangler config cp wrangler.jsonc.example wrangler.jsonc -
Update wrangler.jsonc with your project details:
-
Deploy via Wrangler CLI :
# Install Wrangler CLI npm install -g wrangler # Login to Cloudflare wrangler login # Deploy npm run build npm run deploy
This Nuxt application can be deployed to any platform that supports Node.js or static hosting. Check the Nuxt deployment documentation for more options.
- Colors: Modify Tailwind classes in components
- Fonts: Update
nuxt.config.tsto add custom fonts - Layout: Adjust component structure and spacing
- Sections: Add/remove sections by editing
pages/index.vue - Components: Customize individual section components
- Data: Update content through PocketBase admin panel
- Analytics: Add tracking codes to
nuxt.config.ts - SEO: Customize meta tags in page components
- Performance: Optimize images and add lazy loading
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
- HostedPocket.com for sponsoring this project
- NuxtMint.com for premium Nuxt templates
- Nuxt Team for the amazing framework
- PocketBase for the simple yet powerful backend
{ "name": "your-portfolio-name", "compatibility_date": "2024-03-01", "pages_build_output_dir": "./dist", "env": { "production": { "vars": { "POCKETBASE_URL": "https://your-pocketbase-url.com/", "SUPERUSER_PASSWORD": "your_password", "SUPERUSER_EMAIL": "your_email@example.com", "DEMO": "false" } } } }