A Next.js–based portfolio website built using server-side rendering to deliver fast page loads and smooth navigation between project cards and detailed case studies. The site is intentionally designed around recruiter scanning behavior, emphasizing layout clarity, performance, and a clean UI to communicate technical decisions efficiently.
Many portfolios prioritize aesthetics at the expense of clarity, resulting in slow load times, confusing navigation, and content that is difficult to scan for both technical and non-technical visitors. In addition, tightly coupled layouts and hardcoded content make portfolios difficult to maintain as projects grow or change. This project focuses on addressing both user-facing and structural issues by building a portfolio that is fast, easy to navigate, and intentionally structured for long-term maintainability.
Ensures fast initial page loads and predictable performance across network conditions.
Separates high-level scanning from deep dives, allowing visitors to browse projects quickly while supporting detailed case studies without cluttering the main layout.
Uses locally hosted SVGs and minimal client-side JavaScript to reduce bundle size and runtime overhead.
Provides predictable spacing and visual hierarchy across breakpoints, preventing layout drift as new projects and sections are added.
Organizes project data for reuse across summary cards and detail pages, simplifying updates and reducing duplication.
Lightweight tracking of project detail page views to understand visitor behavior and inform future design improvements.
Graceful handling of missing or failed project data ensures the site remains functional and navigable under all conditions.
Project content is fetched server-side to deliver fast initial loads while keeping sensitive data secure. Images use signed URLs from Firestore Storage, ensuring time-limited access without exposing storage publicly. Each section’s text renders immediately, and images display a loading state so visitors can start reading without delay.
By handling content and media on the server, we reduce exposure of internal structures and prevent unauthorized access, demonstrating careful consideration of security at the frontend and data layer. This setup separates client UI from content fetching, allowing modular updates and scalable project additions while maintaining performance and security.
Gained deeper understanding of routing, server-side rendering, and how to structure a fast, scalable React-based project.
Learned how to fetch and pre-render content dynamically, improving initial load performance and SEO while maintaining security of sensitive data.
Learned how to structure NoSQL collections for text content, manage media in Storage with signed URLs, and integrate them efficiently with SSR.
Understood how to balance immediate content rendering, image loading states, and modular layouts to optimize both perceived and actual performance.
Practiced securing assets, using signed URLs, and separating client and server responsibilities to minimize exposure.
Implement an authenticated admin page to securely add and manage projects in Firestore, reducing manual updates and improving workflow.
Enhance user experience by respecting OS-level dark/light mode settings for accessibility and visual comfort.
Conduct audits to improve keyboard navigation, ARIA support, focus management, color contrast, and ensure all interactive elements are accessible for all visitors.
Further optimize image loading, implement caching strategies, and track visitor interactions to inform iterative improvements and maintain fast, responsive pages.
