Case study
Full-Stack Portfolio Platform with CMS and Analytics
A full-stack developer portfolio platform built with Next.js, TypeScript, Prisma, and MySQL, featuring a custom administrative CMS for projects, career history, technologies, media, and resumes. The application provides bilingual content, privacy-focused first-party analytics, OneDrive storage integration, administrative authentication, SEO, and an automated quality and security pipeline.
Technologies
The problem
Traditional developer portfolios often keep their content directly in source code, requiring code changes and deployments whenever a project, professional experience, or profile information needs to be updated. External analytics and storage platforms may also introduce unnecessary dependencies while providing limited control over privacy, data structure, and content administration. The goal was to build a self-managed platform capable of managing professional content through an administrative interface while tracking visitor interactions and applying production-oriented engineering practices.
The solution
A full-stack application was developed using Next.js and TypeScript, including an administrative CMS responsible for managing the content displayed on the public portfolio. Projects, professional experiences, and technologies are stored in MySQL through Prisma, including independent Portuguese and English translations. The administrative interface manages project publishing states, featured projects, associated technologies, images, resumes, career information, and global website configuration. A custom OneDrive-backed API is integrated as the application's media storage layer, while the database stores the corresponding file metadata. A first-party analytics solution was also implemented to track page views, resume downloads, project interactions, and external link clicks while minimizing the amount of visitor information collected.
Responsibilities
Responsible for the complete architecture and development of the platform, including the public interface, administrative CMS, relational database design, authentication, internationalization, media management, and analytics. Also responsible for OneDrive storage integration, administrative security mechanisms, database migrations and seeds, SEO, automated testing, CI pipeline configuration, and production deployment processes.
Technical decisions
Next.js was selected as the full-stack framework to keep the public website, administrative interface, and server-side application logic within the same project. TypeScript was used across the entire codebase to improve type safety and maintainability. Prisma with MySQL/MariaDB provides persistence for projects, translations, technologies, professional experiences, media, sessions, and analytics events. Localized content is modeled separately by locale, allowing Portuguese and English versions to coexist without duplicating the main domain entities. Administrative authentication uses database-backed sessions and additional rate-limiting mechanisms for login attempts. Instead of relying directly on a conventional object storage service, the platform integrates a custom OneDrive-backed API for media and resume storage. First-party analytics were implemented to maintain control over collected information and reduce the amount of potentially identifying visitor data. The GitHub Actions pipeline validates linting, TypeScript types, tests, coverage, production build, and dependency vulnerabilities before changes are integrated.
Results
The project resulted in a fully manageable professional portfolio platform that can be updated without manually modifying application source code. The custom CMS manages projects, career history, technologies, media, resumes, and site configuration, while internationalization provides the complete experience in both Portuguese and English. The application also provides first-party visitor metrics, integrates external file storage, and applies an automated quality process before production deployment. The final result transforms a traditional portfolio website into an extensible, production-oriented full-stack application.