Project overview
I designed and developed a full-stack portfolio platform to present my software engineering work through polished project case studies, reusable skill profiles, and an accessible, responsive interface. Rather than maintaining a static website, I built a database-driven content management system (CMS) that allows me to update the portfolio through a protected administration dashboard.
Project type: Personal full-stack web application
My contribution: Frontend development, backend functionality, database design, admin workflows, media management, and deployment
Live website: sandeepabeykoon.me
The problem
A conventional portfolio often requires editing source code whenever a new project, skill, or achievement needs to be added. It can also be difficult to present detailed engineering work while keeping the homepage concise and easy to navigate.
My goal was to build a portfolio that works as a maintainable software product: easy for visitors to explore, straightforward for me to update, and structured to communicate both technical decisions and practical outcomes.
What I built
- Responsive public website: A streamlined homepage presenting selected projects, technical skills, background, credentials, and contact options across desktop and mobile screens.
- Dynamic project case studies: Dedicated project pages featuring summaries, technology stacks, screenshots, detailed explanations, and verified links to live applications or source code.
- Protected admin CMS: Authenticated tools to create, edit, reorder, feature, publish, and unpublish projects without changing application code.
- Reusable content management: Structured administration of skills, categories, and courses or certifications, with skills linked to the projects in which they were used.
- Media and gallery management: Cloud-backed image uploads, project cover images, and independently managed screenshot galleries with captions and display ordering.
- HTML-first case-study editing: Direct HTML authoring with a live preview and sanitization safeguards, allowing more flexible project descriptions without a formatting toolbar.
- Discoverability and contact: Search and social-sharing metadata, public-facing contact forms, and administrative handling of incoming messages.
Technical architecture
The platform uses Next.js App Router, React, TypeScript, and Tailwind CSS for the application interface. Server-side functionality is implemented through Next.js server features and API routes. Prisma ORM provides access to a PostgreSQL database that stores portfolio content and its relationships.
NextAuth supports administrator authentication, while Amazon S3 handles uploaded media. The application is deployed through Vercel and connected to a custom domain.
How content moves through the system
- An authorized administrator creates or edits content through the CMS.
- Server-side logic validates and saves the changes in PostgreSQL through Prisma.
- Images are uploaded separately and associated with project records.
- Published records are rendered as responsive project cards and individual case-study pages.
Key engineering decisions
Database-driven content instead of hardcoded sections
Projects, skills, credentials, and galleries are stored as structured records. This separates content from presentation and makes it possible to expand the portfolio without repeatedly editing frontend components.
Reusable skills and consistent project technology stacks
Projects reference existing skill records, allowing technology names and visual presentation to remain consistent across the homepage and detailed project pages.
Flexible HTML editing with safety controls
For detailed case studies, I introduced an HTML source editor with a live preview. An allow-list-based sanitization process helps prevent unsafe markup from being saved or displayed while preserving supported headings, lists, links, and layout elements.
Separate screenshot gallery
Screenshots are managed independently of article content, allowing images to be reordered and captioned without rewriting the case study. This keeps visual evidence easy to maintain.
Outcome and lessons learned
The result is a publicly deployed portfolio at sandeepabeykoon.me, with a dedicated management experience for maintaining projects and supporting content. It demonstrates the integration of frontend engineering, database modeling, authenticated workflows, cloud media storage, responsive design, and production deployment within one application.
The project strengthened my understanding of designing maintainable content systems, organizing related data, balancing editing flexibility with security, and turning a personal website into a more complete software product.
