{"id":30769414,"url":"https://github.com/nuxtmint/selfie","last_synced_at":"2025-10-09T21:14:14.187Z","repository":{"id":312226375,"uuid":"1021243930","full_name":"NuxtMint/selfie","owner":"NuxtMint","description":"An elegant and modern portfolio that looks like a Resume","archived":false,"fork":false,"pushed_at":"2025-07-17T07:19:41.000Z","size":2187,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-29T11:05:28.911Z","etag":null,"topics":["nuxtjs","pocketbase","tailwindcss"],"latest_commit_sha":null,"homepage":"https://selfie.nuxtmint.com/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NuxtMint.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-17T05:44:49.000Z","updated_at":"2025-08-22T06:12:56.000Z","dependencies_parsed_at":"2025-08-29T11:05:30.573Z","dependency_job_id":"c6f3d605-ea32-4879-85cb-9359a95da34d","html_url":"https://github.com/NuxtMint/selfie","commit_stats":null,"previous_names":["nuxtmint/selfie"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/NuxtMint/selfie","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NuxtMint%2Fselfie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NuxtMint%2Fselfie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NuxtMint%2Fselfie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NuxtMint%2Fselfie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NuxtMint","download_url":"https://codeload.github.com/NuxtMint/selfie/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NuxtMint%2Fselfie/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002069,"owners_count":26083285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxtjs","pocketbase","tailwindcss"],"created_at":"2025-09-04T22:34:54.463Z","updated_at":"2025-10-09T21:14:14.178Z","avatar_url":"https://github.com/NuxtMint.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Nuxt Portfolio Template\n\n\u003e **Sponsored by [HostedPocket.com](https://hostedpocket.com/)** - The easiest way to host PocketBase in the cloud\n\nA 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.\n\n**✨ [Get other templates at NuxtMint.com](https://nuxtmint.com/)**\n\n## 🌟 Features\n\n- **🎨 Modern Design**: Clean, professional layout with dark/light theme support\n- **📱 Fully Responsive**: Mobile-first design that looks great on all devices\n- **⚡ Performance Optimized**: Built with Nuxt 4 for maximum speed and SEO\n- **🗄️ Dynamic Content**: Powered by PocketBase for easy content management\n- **🌙 Theme Toggle**: System preference detection with localStorage persistence\n- **🔧 Type Safe**: Full TypeScript support with proper type definitions\n\n## 🛠️ Tech Stack\n\n- **[Nuxt 4](https://nuxt.com/)** - The Intuitive Vue Framework\n- **[PocketBase](https://pocketbase.io/)** - Open source backend in 1 file\n- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[Nuxt Icon](https://nuxt.com/modules/icon)** - Icon component with 100k+ icons\n\n## 📋 Prerequisites\n\n- **Node.js** (v18 or higher)\n- **npm**\n- **PocketBase** instance (local or hosted)\n\n## 🚀 Quick Start\n\n### 1. Clone \u0026 Install\n\n```bash\n# Clone the repository\ngit clone \u003cthis-repo-url\u003e\ncd nuxt-portfolio\n\n# Install dependencies\nnpm install\n```\n\n### 2. Environment Setup\n\nCreate a `.env` file in the root directory:\n\n```bash\n# Copy the example environment file\ncp .env.example .env\n```\n\nUpdate the `.env` file with your PocketBase URL:\n\n```env\n# PocketBase Configuration\nPOCKETBASE_URL=http://localhost:8090\n# or your hosted PocketBase URL\n# POCKETBASE_URL=https://your-pocketbase-instance.hostedpocket.com\n\n# Demo Mode (optional)\nDEMO=false\n```\n\n### 3. PocketBase Setup\n\n#### Option A: Local PocketBase\n\n1. **Download PocketBase** from [pocketbase.io](https://pocketbase.io/)\n2. **Start PocketBase**:\n   ```bash\n   ./pocketbase serve\n   ```\n3. **Access Admin Panel**: Open `http://localhost:8090/_/` and create an admin account\n\n#### Option B: Hosted PocketBase (Recommended)\n\n1. **Sign up** at [HostedPocket.com](https://hostedpocket.com/)\n2. **Create a new instance**\n3. **Update** your `.env` file with the hosted URL\n\n### 4. Import Database Schema\n\n1. **Open PocketBase Admin Panel** (`http://localhost:8090/_/` or your hosted URL)\n2. **Go to Settings** → **Import collections**\n3. **Upload** the `database/pocketbase.json` file\n4. **Click Import** to create all collections\n\n### 5. Seed the Database\n\nWe'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.\n\n#### Automatic Seeding (Recommended)\n\n1. **Add superuser credentials** to your `.env` file:\n\n   ```env\n   # Superuser credentials for seeding\n   SUPERUSER_EMAIL=your-admin@example.com\n   SUPERUSER_PASSWORD=your-admin-password\n   ```\n\n2. **Run the seeding script**:\n\n   ```bash\n   npm run seed\n   # or\n   node scripts/seed-database.js\n   ```\n\n3. **Verify the data** (optional):\n   ```bash\n   npm run verify\n   # or\n   node scripts/verify-data.js\n   ```\n\nThe seeding script will create:\n\n- **1 Profile record** - Your personal information and contact details\n- **3 Experience records** - Sample work history with technologies\n- **2 Education records** - Academic background and certifications\n- **3 Skills categories** - Frontend, Backend, and Tools \u0026 DevOps\n- **4 Project records** - Portfolio projects with GitHub/demo links\n\n#### Manual Seeding (Alternative)\n\nIf you prefer to add data manually or customize the sample data:\n\n1. **Open PocketBase Admin Panel** (`http://localhost:8090/_/` or your hosted URL)\n2. **Navigate to Collections** and add records to each collection:\n   - **profile**: Personal info, contact details, availability status\n   - **experience**: Work history with job titles, companies, and technologies\n   - **education**: Academic background and certifications\n   - **skills**: Technical skills organized by category\n   - **projects**: Portfolio projects with descriptions and links\n\n#### Customizing Sample Data\n\nTo customize the sample data before seeding:\n\n1. **Edit** `scripts/seed-database.js`\n2. **Update** the data objects with your information\n3. **Run** the seeding script with your custom data\n\n### 6. Start Development\n\n```bash\n# Start the development server\nnpm run dev\n```\n\nVisit `http://localhost:3000` to see your portfolio!\n\n## 🏗️ Project Structure\n\n```\nnuxt-portfolio/\n├── app/                          # Nuxt 4 app directory\n│   ├── components/              # Vue components\n│   │   ├── demo/               # Demo-specific components\n│   │   ├── AppHeader.vue       # Site header\n│   │   ├── AppFooter.vue       # Site footer\n│   │   ├── HeroSection.vue     # Hero/intro section\n│   │   ├── ExperienceSection.vue\n│   │   ├── EducationSection.vue\n│   │   ├── SkillsSection.vue\n│   │   ├── ProjectsSection.vue\n│   │   └── ContactSection.vue\n│   ├── composables/            # Vue composables\n│   │   ├── usePocketBase.ts    # PocketBase integration\n│   │   └── useTheme.ts         # Theme management\n│   ├── pages/                  # Page components\n│   │   └── index.vue           # Homepage\n│   ├── types/                  # TypeScript definitions\n│   │   └── index.ts            # Type definitions\n│   └── app.vue                 # Root component\n├── database/                   # Database configuration\n│   └── pocketbase.json         # PocketBase schema export\n├── public/                     # Static assets\n├── server/                     # Server-side code (if needed)\n├── .env.example               # Environment variables template\n├── nuxt.config.ts             # Nuxt configuration\n└── package.json               # Dependencies\n```\n\n## 🚀 Deployment\n\n### Deploy to Cloudflare Pages (Recommended)\n\nCloudflare Pages offers excellent performance, global CDN, and seamless integration with Nuxt.\n\n1. **Setup Wrangler Configuration**:\n\n   ```bash\n   # Copy the example wrangler config\n   cp wrangler.jsonc.example wrangler.jsonc\n   ```\n\n2. **Update wrangler.jsonc** with your project details:\n\n   ```jsonc\n   {\n     \"name\": \"your-portfolio-name\",\n     \"compatibility_date\": \"2024-03-01\",\n     \"pages_build_output_dir\": \"./dist\",\n     \"env\": {\n       \"production\": {\n         \"vars\": {\n           \"POCKETBASE_URL\": \"https://your-pocketbase-url.com/\",\n           \"SUPERUSER_PASSWORD\": \"your_password\",\n           \"SUPERUSER_EMAIL\": \"your_email@example.com\",\n           \"DEMO\": \"false\"\n         }\n       }\n     }\n   }\n   ```\n\n3. **Deploy via Wrangler CLI** :\n\n   ```bash\n   # Install Wrangler CLI\n   npm install -g wrangler\n\n   # Login to Cloudflare\n   wrangler login\n\n   # Deploy\n   npm run build\n   npm run deploy\n   ```\n\n### Other Platforms\n\nThis Nuxt application can be deployed to any platform that supports Node.js or static hosting. Check the [Nuxt deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more options.\n\n## 🎨 Customization\n\n### Styling\n\n- **Colors**: Modify Tailwind classes in components\n- **Fonts**: Update `nuxt.config.ts` to add custom fonts\n- **Layout**: Adjust component structure and spacing\n\n### Content\n\n- **Sections**: Add/remove sections by editing `pages/index.vue`\n- **Components**: Customize individual section components\n- **Data**: Update content through PocketBase admin panel\n\n### Features\n\n- **Analytics**: Add tracking codes to `nuxt.config.ts`\n- **SEO**: Customize meta tags in page components\n- **Performance**: Optimize images and add lazy loading\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🙏 Acknowledgments\n\n- **[HostedPocket.com](https://hostedpocket.com/)** for sponsoring this project\n- **[NuxtMint.com](https://nuxtmint.com/)** for premium Nuxt templates\n- **[Nuxt Team](https://nuxt.com/)** for the amazing framework\n- **[PocketBase](https://pocketbase.io/)** for the simple yet powerful backend\n\n---\n\n**✨ [Get more premium Nuxt templates at NuxtMint.com](https://nuxtmint.com/)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxtmint%2Fselfie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxtmint%2Fselfie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxtmint%2Fselfie/lists"}