A modern portfolio website ecosystem with a public-facing site and a private content management system.
A modern, bilingual portfolio website ecosystem with a public-facing site and a private content management system. Built with Next.js 16, TypeScript, Firebase, and Tailwind CSS 4. This project serves as a living proof of concept for "Agentic-First" and AI-Native engineering, demonstrating how rapid execution (48 hours from zero to production) can be achieved with modern tools and AI workflows.
๐ฏ Project Philosophy
I designed this portfolio to be more than just a static site. It demonstrates:
- Technical Product Management: Clean architecture, scalable systems, and a focus on maintainability.
- AI Integration: A structure prepared for future agentic workflows and built with AI assistance.
- Global Reach: First-class bilingual support (Turkish/English) with
next-intl.
- Polished Authenticity: A design system that is bold, playful, and minimalist.
๐๏ธ Architecture
The project is structured as a Monorepo using npm workspaces.
graph TD
User[Visitor] --> Website[apps/website]
Admin[You] --> CMS[apps/admin]
subgraph Firebase
Firestore[(Firestore DB)]
Storage[(Storage Bucket)]
end
Website -->|Read Only| Firestore
Website -->|Read Only| Storage
CMS -->|Full CRUD| Firestore
CMS -->|Upload| Storage
Core Stack
Applications
1. Public Website (apps/website)
The public-facing portfolio.
- i18n: Middleware-based routing with
next-intl.
- Content: Markdown-based blog with
react-markdown.
- Theming: Dark/Light mode support.
2. Admin Panel (apps/admin)
A secure, private CMS to manage content.
- Forms:
react-hook-form + zod validation.
- UI:
shadcn/ui (Radix Primitives).
- Interactivity:
@dnd-kit for drag-and-drop reordering.
- Security:
firebase-admin for server-side privileged access.
๐ Data Structures & Model
The data model is designed to support rich cross-linking between projects, experiences, and blog posts. Below is the high-level class diagram of the data entities.
For the full schema and TypeScript interfaces, see DATA_STRUCTURES.md.
erDiagram
%% CORE COLLECTIONS
PROJECT {
string id PK
string title
string subtitle
string description
string image
string smallImage
int featured
string status
int sortOrder
string githubUrl
string link
string_array tags
object_array gallery "List<GalleryItem>"
object_array urls "List<Link>"
object_array relatedExperience "List<RelatedItemStub>"
object_array relatedEducation "List<RelatedItemStub>"
object_array relatedPosts "List<RelatedItemStub>"
}
EXPERIENCE {
string id PK
string title
string workTitle
string description
string years
string image
object_array urls "List<Link>"
object_array relatedProjects "List<RelatedItemStub>"
}
EDUCATION {
string id PK
string title
string department
string years
string gpa
int sortOrder
object_array urls "List<Link>"
object_array relatedProjects "List<RelatedItemStub>"
object_array relatedPosts "List<RelatedItemStub>"
}
POST {
string id PK
string title
string slug
string excerpt
string content
string date
string coverImage
string smallImage
string status
string_array tags
object_array relatedProjects "List<RelatedItemStub>"
object_array relatedExperience "List<RelatedItemStub>"
object_array relatedEducation "List<RelatedItemStub>"
}
%% STANDALONE COLLECTIONS
ACHIEVEMENT {
string id PK
string title
string description
string date
string icon
int sortOrder
}
RECOMMENDATION {
string id PK
string name
string thought
string status
timestamp createdAt
string photoUrl
string linkedinUrl
}
HERO_SETTINGS {
string id PK "singleton"
string fullName
string greeting
string role
string description
string logoText
string imageUrl
string resumeUrl
object socials
}
%% RELATIONSHIPS (LOGICAL)
%% Modeled as Many-to-Many via Denormalized Stubs
PROJECT }|..|{ EXPERIENCE : "contains related stub"
PROJECT }|..|{ EDUCATION : "contains related stub"
PROJECT }|..|{ POST : "contains related stub"
POST }|..|{ EXPERIENCE : "contains related stub"
POST }|..|{ EDUCATION : "contains related stub"
๐ Documentation & Resources
Detailed documentation for the project's internals:
๐ค Upcoming: LLM Rules & Workflow
I am preparing to share the exact System Instructions and Rules I used to build this project in 2 days. This won't just be a prompt dump; it will be a comprehensive guide on:
- Context Loading Protocol: How to ensure the AI "knows" your project structure before writing a single line of code.
- Memory Management: Strategies for keeping the AI's context window clean and focused on the active task.
- Agentic Role Switching: How to make the AI switch hats (e.g., from "Product Manager" to "Frontend Architect" to "QA Engineer").
Establishing these rules is critical. Just like you need a linter for your code, you need a "Context Linter" for your AI interactions. Stay tuned for the release!
๐ Getting Started
-
Clone the Repository:
git clone https://github.com/meanllbrl/portfolio.git
cd portfolio
npm install
-
Environment Setup:
- Create a project at Firebase Console.
- Website: Copy
apps/website/env.example to .env.local and add your Firebase Config.
- Admin: Copy
apps/admin/env.example to .env.local, add Firebase Config, and your Admin Service Account Key.
-
Run Locally:
npm run dev:website # Starts website on localhost:3000
npm run dev:admin # Starts admin on localhost:3001
๐ Security
- Firestore Rules: Reads are public for content; writes are locked down.
- Admin SDK: The Admin app uses a server-side Service Account to bypass rules for content management.
- Safety: Admin keys are never exposed to the client.
๐ License
This project is open-source under the MIT License.
