Navneel

  • ./home
  • /projects
  • /experience
  • /contact
./home/projects/experience/contact

Portfolio

Screenshot

project screenshot

Overview

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.

Tech Stack

    Framework: Next.js

    Styling: Sass (SCSS)

    Database: Firestore Database (NoSQL)

    Storage: Firestore Storage

    Email / Notifications: Resend

    Design & Prototyping: Figma

    Deployment: Vercel

Problem Statement

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.

Get in Touch

Need a developer? I'm available for freelance and job inquiries!

navneel-444

navneel-444

navneel-nandran

navneel-nandran

navneel.nandran@gmail.com

navneel.nandran@gmail.com

Key Features

    Server-Side Rendering with Next.js

    -

    Ensures fast initial page loads and predictable performance across network conditions.

    Project Card → Detail Page Navigation

    -

    Separates high-level scanning from deep dives, allowing visitors to browse projects quickly while supporting detailed case studies without cluttering the main layout.

    Performance-Focused Asset Strategy

    -

    Uses locally hosted SVGs and minimal client-side JavaScript to reduce bundle size and runtime overhead.

    Consistent Grid-Based Layout System

    -

    Provides predictable spacing and visual hierarchy across breakpoints, preventing layout drift as new projects and sections are added.

    Modular Content Structure

    -

    Organizes project data for reuse across summary cards and detail pages, simplifying updates and reducing duplication.

    Analytics Tracking

    -

    Lightweight tracking of project detail page views to understand visitor behavior and inform future design improvements.

    Error Handling and Fallbacks

    -

    Graceful handling of missing or failed project data ensures the site remains functional and navigable under all conditions.

Architecture

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.

What I learned

    Next.js Fundamentals

    -

    Gained deeper understanding of routing, server-side rendering, and how to structure a fast, scalable React-based project.

    Server-Side Rendering (SSR)

    -

    Learned how to fetch and pre-render content dynamically, improving initial load performance and SEO while maintaining security of sensitive data.

    Firestore (Database & Storage)

    -

    Learned how to structure NoSQL collections for text content, manage media in Storage with signed URLs, and integrate them efficiently with SSR.

    Performance & UX Tradeoffs

    -

    Understood how to balance immediate content rendering, image loading states, and modular layouts to optimize both perceived and actual performance.

    Security in Frontend Architecture

    -

    Practiced securing assets, using signed URLs, and separating client and server responsibilities to minimize exposure.

Future Improvements

    Protected CMS Interface

    -

    Implement an authenticated admin page to securely add and manage projects in Firestore, reducing manual updates and improving workflow.

    Dark Mode with System Preference

    -

    Enhance user experience by respecting OS-level dark/light mode settings for accessibility and visual comfort.

    Accessibility Enhancements

    -

    Conduct audits to improve keyboard navigation, ARIA support, focus management, color contrast, and ensure all interactive elements are accessible for all visitors.

    Performance & Analytics

    -

    Further optimize image loading, implement caching strategies, and track visitor interactions to inform iterative improvements and maintain fast, responsive pages.