Personal Portfolio Platform
Built and operate a personal portfolio platform that combines a Next.js frontend, an API backend, admin-managed content, project galleries, notes with file uploads, contact handling, and a self-hosted production deployment.
Stack
Next.js + API
Frontend and backend platform
Content
Dynamic
Projects, notes, resume, uploads
Deploy
Self-hosted
HTTPS production environment
Status
In progress
Features are still being added
Project Gallery
1/4
Problem
A static portfolio would require code changes for every new project, note, image, or resume update, and it would not show the engineering work behind content management and deployment.
Challenge
The challenge was turning a personal website into a maintainable product: secure admin access, durable uploads, dynamic content, rich note rendering, responsive galleries, caching, and production hardening without making the system heavy.
Architecture
How the pieces fit together.
The frontend uses Next.js App Router with ISR caching. A typed API layer manages projects, notes, uploads, resume content, and contact messages, while the production environment runs behind an HTTPS edge layer with separated public and administrative workflows.
Architecture View
System structure and decision flow
Next.js Frontend
Public portfolio, notes, projects, resume, and localized routes.
Express API
REST endpoints for content, uploads, contact messages, and admin actions.
Admin CMS
Project galleries, note files, image cropping, and dynamic updates.
HTTPS Edge
Public entry point with separated production services.
Dataset / Inputs
- Portfolio content, uploaded project media, technical notes, resume data, contact messages, and production deployment configuration.
Technical Decisions
- Use a full-stack architecture instead of a static-only portfolio so content can be managed without code changes.
- Keep public content cached with ISR while preserving no-store behavior for authenticated admin workflows.
- Store uploaded media persistently and reference files through controlled API paths.
- Place the app behind an HTTPS edge layer and keep administrative workflows separated from public content.
Implementation Details
- Next.js renders the public portfolio, localized routes, project pages, notes, and resume views.
- Express and Prisma expose REST endpoints for projects, notes, uploads, profile data, contact messages, and admin actions.
- The admin dashboard supports project galleries, cover images, image cropping, PDF/HTML note files, and Markdown content.
- Production is deployed as separated application services behind a public HTTPS entry point.
Metrics / Results
- The site supports dynamic projects, gallery uploads, image cropping, PDF/HTML note attachments, Markdown and KaTeX rendering, contact messages, hardened admin flows, self-hosted deployment, and is still actively being expanded.
Lessons Learned
- A portfolio becomes more useful when content operations are part of the system, not manual code edits.
- Caching improves perceived speed, but admin routes and public routes need different freshness rules.
- Upload handling has to consider persistence, validation, previews, and long-term deploy behavior together.
Future Improvements
- Move uploads to object storage for simpler backups and CDN delivery.
- Add search and filtering across projects and technical notes.
- Introduce richer analytics and uptime monitoring after the custom domain is attached.
- Continue expanding the admin workflow as new portfolio needs appear.