- ✨ Overview & Introduction
- 🌟 Feature Highlights
- 🏛️ Architecture & Design
- 🛠️ Getting Started
- 💡 Usage & Workflows
- 🛡️ Security & Performance
⚠️ Limitations & Roadmap- 🤝 Contributing
- 📜 License & Credits
- 📚 Appendix
This repository contains the source code for a modern, full-stack developer portfolio. Built with the Next.js 15 App Router and powered by a high-performance Elysia.js API backend, it bridges the gap between a static resume and a dynamic real-time dashboard.
Modern developers are defined by more than just a static list of skills. This platform aggregates:
- Professional Identity: Projects, certifications, and experience managed via Sanity CMS.
- Real-time Activity: Live Spotify "Now Playing", Discord presence, and Wakatime coding metrics.
- Social Proof: A Firebase-powered Guestbook and dynamic GitHub contribution statistics.
- Hiring Managers seeking deep technical insights and verifiable activity.
- Developers looking for a high-end boilerplate featuring Next.js 15 + Elysia.
- Open Source Enthusiasts interested in API orchestration patterns.
- Command Palette (KBar): Global navigation and quick actions via
Cmd+K. - Visual Excellence: Utilizes MagicUI (BlurFade, BorderBeam) and Framer Motion for smooth, layout-aware transitions.
- Glassmorphism & Theming: Deeply integrated Dark Mode with custom shader backgrounds.
- PWA Ready: Fully offline-capable with a custom manifest and service worker configuration.
- Elysia.js Integration: Blazing fast API routes running alongside Next.js using Bun for high-throughput data fetching.
- Sanity.io CMS: Content is decoupled from code, allowing for real-time updates to projects and resumes without redeployment.
- Intelligent Caching: Custom SWR (Stale-While-Revalidate) logic and Redis integration to bypass external API rate limits.
- Spotify: Real-time playback status, top tracks, and artist rankings.
- Lanyard: Live Discord status tracking (Online/Idle/DND) and activity monitoring.
- GitHub: Dynamic repository pinning and real-time contribution graphing.
- n8n Workflows: Automated content synchronization bots.
Tip
Use the Command Palette (Ctrl/Cmd + K) to quickly jump between the Guestbook, Projects, and Stats pages!
The project follows a Modular Monolith pattern. While Next.js handles the UI and SSR, a specialized internal API layer (Elysia) handles external data orchestration.
graph TD
User((User Browser)) --> NextJS[Next.js 15 App Router]
NextJS --> Elysia[Elysia.js API Engine]
subgraph "External Providers"
Spotify[(Spotify API)]
GitHub[(GitHub GraphQL)]
Sanity[(Sanity CMS)]
Discord[(Lanyard/Discord)]
Firebase[(Firebase Auth)]
end
subgraph "Internal Logic"
Redis[(Redis Cache)]
Security[Security Middleware]
SanityClient[Sanity Live Content]
end
Elysia --> Security
Security --> Redis
Redis --> Spotify
Redis --> GitHub
Redis --> Discord
NextJS --> SanityClient
SanityClient --> Sanity
NextJS --> Firebase
| Layer | Technology | Responsibility |
|---|---|---|
| Runtime | Bun | Blazing fast execution, package management, and testing. |
| Framework | Next.js 15 | React Server Components (RSC) and App Router. |
| API Engine | Elysia.js | High-performance Type-safe API endpoints (/api/v1). |
| CMS | Sanity.io | Headless content management for structured data. |
| Database | Redis / Firebase | Caching layer and Real-time Guestbook persistence. |
| Styling | Tailwind CSS | Utility-first design with complex animations. |
- Bun (Recommended) or Node.js 20+
- Docker (Optional, for containerized deployment)
- Sanity.io Account for the content studio
- Firebase Project for Guestbook functionality
-
Clone the repository
git clone https://github.com/WomB0ComB0/portfolio.git cd portfolio -
Install Dependencies
bun install
-
Environment Setup Copy the example environment file and fill in your secrets:
cp .env.example .env.local
Important
You must configure the following keys in .env.local or the app will fail to fetch core content:
NEXT_PUBLIC_SANITY_PROJECT_IDGITHUB_TOKEN(Personal Access Token)SPOTIFY_CLIENT_ID&SPOTIFY_CLIENT_SECRET
View All Environment Variables
| Variable | Usage |
|---|---|
REDIS_URL |
Connection for Upstash or local Redis. |
NEXT_PUBLIC_FIREBASE_CONFIG |
Stringified JSON of your Firebase client config. |
SANITY_API_READ_TOKEN |
Token for fetching private content from Sanity. |
WAKATIME_API_KEY |
To display coding activity stats. |
Development Mode:
bun devProduction Build:
bun run build
bun startContent is decoupled via Sanity. To edit your resume or projects without code changes:
- Run the Sanity Studio locally:
bun sanity start(or use the deployed studio). - Edit "Projects", "Experience", or "Certifications".
- The Next.js frontend uses Sanity Live Content to reflect changes instantly.
Cmd + K: Open the menu.- Search: Start typing to filter routes or search blog posts.
- Theme: Toggle between light and dark modes instantly.
The project includes a robust set of maintenance utilities in the scripts/ directory:
bun run scripts/cleanup.ts: Removes unused assets and temp files.bun run scripts/audit.ts: Runs security audits on dependencies.bun run scripts/package-cost.ts: Analyzes bundle size impacts of new packages.
- Lighthouse Score: Aiming for 95+ in all categories.
- Runtime: Powered by Bun for < 10ms API response times.
- Image Optimization: Automated WebP conversion and CDN delivery via Sanity.
🔍 Proactive Defense:
- CIDR-based Banning: Located in
src/lib/security/banlist-cidr.tsto block malicious IP ranges. - CSRF Protection: Integrated middleware for all mutation-heavy API routes.
- Rate Limiting: Redis-backed sliding window rate limiter to prevent API abuse.
- XSS Sanitization: Custom filters for Guestbook entries to prevent script injection.
- Cold Starts: If using serverless Redis (Upstash), initial API calls may have 100-200ms latency.
- Guestbook Moderation: Requires manual deletion in the Firebase console for now.
- AI Chatbot: Integrate a "Digital Twin" using Gemini/GPT to answer questions about my resume.
- Internationalization: Multi-language support (i18n) for global reach.
- Advanced Analytics: Custom dashboard for page-specific web vitals.
- N8N Automation: Expanded workflows for auto-sharing blog posts to LinkedIn/Twitter.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create.
- Fork the Project
- Create your Feature Branch (
git checkout -b feat/AmazingFeature) - Commit your Changes (
git commit -m 'feat: Add some AmazingFeature') - Push to the Branch (
git push origin feat/AmazingFeature) - Open a Pull Request
✅ Code Style: This project uses Biome for linting and formatting. Ensure you run bun run lint before committing.
- License: Distributed under the MIT License. See
LICENSEfor more information. - Maintainer: WomB0ComB0
- Acknowledgments:
Q: Why use Elysia.js inside Next.js? A: Elysia provides superior type safety and performance for heavy data processing and third-party API orchestration that Next.js standard API routes sometimes struggle to handle efficiently at scale.
Q: Can I use this for my own portfolio? A: Absolutely! Follow the Getting Started guide, but ensure you replace the Sanity and Firebase credentials with your own.
| Issue | Solution |
|---|---|
| Sanity CORS Error | Ensure your local domain (localhost:3000) is added to the Sanity Project Settings. |
| Spotify Not Updating | Check if your Refresh Token has expired or if your App is still in "Development Mode" in the Spotify Dashboard. |
| PWA Not Installing | PWAs require HTTPS. Use a tunnel like ngrok or deploy to Vercel/Netlify for testing. |
