A comprehensive Next.js portfolio website featuring a professional admin panel for content management. Built with modern web technologies and optimized for performance, accessibility, and clean design.
- Responsive Design: Fully optimized for mobile, tablet, and desktop environments.
- Modern Dark Mode: Refined Zinc-based deep charcoal palette with smooth transitions.
- High-Performance UI: Powered by shadcn/ui components for consistency and accessibility.
- Project Showcase: Advanced grid layout with support for pinned featured projects and tech stacks.
- Professional Timeline: Detailed work experience display with automatic formatting.
- Interactive Skills: Dynamic skill showcase using modern badges and icons.
- Integrated Contact: Functional contact form powered by Formspree.
- Visitor Analytics: Integration with GoatCounter for privacy-friendly tracking.
- Search Engine Optimization: Comprehensive meta tags and structured data for better visibility.
- Unified Dashboard: Centralized management using a tabbed interface.
- Project Management: Full CRUD operations with image and technology metadata.
- Career History: Timeline management with support for current and past positions.
- Skill Inventory: Individual and bulk operations for technical competency management.
- Configuration: Real-time updates for personal information, statistics, and system paths.
- Local Access: Direct access during development without complex authentication requirements.
- Next.js 15.3.5: React framework with Server-Side Rendering and Static Site Generation.
- React 19: Latest version utilizing modern hooks and patterns.
- Tailwind CSS 4: Next-generation utility-first CSS framework.
- shadcn/ui: Accessible and customizable component primitives.
- Lucide React: Modern and consistent icon set.
- AOS: Animate On Scroll for subtle entry effects.
- SweetAlert2: Professional feedback and confirmation modals.
- Formspree: Reliable contact form backend services.
- GoatCounter: Privacy-first web analytics.
my-portfolio/
├── components/ # UI and Feature components
│ ├── ui/ # shadcn/ui primitives
│ ├── CodeShowcase.js # Project architecture display
│ ├── ContactSection.js # Contact implementation
│ ├── Navbar.js # Navigation with Sheet (mobile)
│ ├── ProjectsGrid.js # Advanced project display
│ └── ... # Additional feature components
├── data/ # JSON-based content storage
│ ├── projects.json # Project metadata
│ ├── settings.json # Configuration and profile data
│ └── work.json # Career history
├── lib/ # Utilities and helpers
│ ├── utils.js # Tailwind class merging
│ └── seo.js # Metadata generation
├── pages/ # Next.js routing
│ ├── index.js # Main portfolio
│ ├── admin.js # Management dashboard
│ └── api/ # Local content APIs
└── styles/
└── globals.css # Core theme and shadcn variables
- Node.js 18 or higher
- Package manager (npm, yarn, pnpm, or bun)
-
Clone the repository:
git clone https://github.com/rdevz-ph/my-portfolio.git cd my-portfolio -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Access points:
- Portfolio: http://localhost:3000
- Admin Panel: http://localhost:3000/admin
- Push your repository to GitHub.
- Connect your repository to Vercel.
- The platform will automatically detect Next.js settings and deploy.
- Use
npm run buildfollowed bynpm run exportfor static hosting providers.
Content is managed via JSON files in the data/ directory. While these can be edited manually, the Admin Panel provides a visual interface for all operations during development.
- Contact Form: Update the endpoint in
ContactSection.jswith your Formspree ID. - Analytics: Configure your GoatCounter code in
lib/getGoatCounterViews.js.
Contributions are welcome. Please follow the standard workflow:
- Fork the project.
- Create a feature branch.
- Commit your changes.
- Open a pull request.
This project is licensed under the MIT License.
Romel Brosas
- Portfolio: https://romel-portfolio.vercel.app
- GitHub: @rdevz-ph
- Email: brosasromel01@gmail.com
Star this repository if you find it useful.