How I Built My Portfolio Website with React + Vite: Themes, Particles, GitHub Visualizations, and a Dev.to-Powered Posts Page

I recently rebuilt my personal portfolio to reflect how I like to build products: clear architecture, expressive UI, strong performance defaults, and data-backed sections that stay fresh.

Live website: https://singhamandeep007.github.io/

Repository: https://github.com/singhAmandeep007/singhAmandeep007.github.io

Table of Contents

• Project Overview
• Design Direction
• Architecture At A Glance
• Theme Engine (Multi Theme)
• Particles Background With Floating Tech Logos
• Resume Open Animation
• Projects Page
• Posts Page (Powered By Dev.to API)
• About Page + GitHub Contributions + GitHub Showcase
• Responsive UX + Sidebar Navigation
• Performance + Developer Experience
• What I Would Improve Next
• Final Thoughts

Project Overview

This portfolio is built with:

• React 18 + TypeScript
• Vite 5
• styled-components
• React Router (lazy route loading)
• tsParticles for animated background motion
• Dev.to API integration for articles
• GitHub GraphQL API integration for contribution and profile showcase widgets

The goal was simple:

1. Keep the UI visually alive without becoming noisy.
2. Keep content dynamic where possible (GitHub + Dev.to).
3. Keep the codebase modular and easy to personalize.

Design Direction

I wanted the experience to feel like a blend of developer identity and product polish:

• bright accent colors that can switch at runtime,
• subtle glassmorphism where it helps depth,
• playful details (handwave animation, envelope-style resume interaction),
• high-density information modules on About (contributions, profile metrics, repo cards).

The whole layout stays section-based, with each page having a clear visual job:

• Home: first impression + CTA
• Projects: proof of work
• Posts: writing and thought process
• About: profile depth + GitHub signal

Architecture At A Glance

I use a shared layout route that always renders:

• sidebar menu,
• active route outlet,
• theme toggler,
• particle background.

flowchart LR
  A[ThemeProvider + GlobalStyle] --> B[Shared Layout]
  B --> C[SidebarMenu]
  B --> D[Route Outlet]
  B --> E[ToggleTheme]
  B --> F[ParticlesContainer]

  D --> H[Home]
  D --> I[Projects]
  D --> J[Posts]
  D --> K[About]

  K --> L[GitHub Contributions GraphQL]
  K --> M[GitHub Showcase GraphQL]
  J --> N[Dev.to Articles API]

This structure keeps global behavior centralized while pages remain focused.

Theme Engine (Multi Theme)

One of my favorite parts is the theme system.

• Themes are created through a small theme factory (createTheme) using primary/background/font values.
• The app generates CSS variables for each theme class.
• Theme switching is class-based on document.documentElement for instant variable swapping.
• A small transition class smooths the color shift.

I also map theme colors into GitHub contribution chart palettes, so the data visuals feel native to whichever theme is active.

Particles Background With Floating Tech Logos

The background uses tsParticles in two layers:

• baseline moving particles,
• floating image particles sourced from my tech logo list.

A batched loader progressively injects logo particles so the effect ramps up instead of appearing all at once. It gives the page ambient motion while keeping content readable.

Resume Open Animation

Instead of a normal download button, I built a small envelope interaction:

• a cover flap rotates with rotateX,
• the letter slides out,
• click opens/closes,
• click on letter triggers resume download.

It is intentionally playful, but still functional and accessible.

Projects Page

The Projects page is data-driven from a single projects data source:

• markdown-supported descriptions,
• per-project stack icons,
• image/video slide support,
• fullscreen preview support.

I alternate layout direction between odd/even project items for visual rhythm on larger screens, then collapse to a single-column flow on mobile.

Posts Page (Powered By Dev.to API)

The Posts page fetches articles directly from my Dev.to account and renders them as cards with:

• cover image,
• tags,
• publish date,
• comments count,
• reactions count.

I filter out repost-like items by checking reading time so the page emphasizes full technical pieces.

About Page + GitHub Contributions + GitHub Showcase

This page combines static profile context with live GitHub data.

1) Contributions Calendar

I fetch contribution years and calendars from GitHub GraphQL, then render a custom SVG chart.

Features include:

• virtualized week rendering for smoother scroll,
• multiple visual modes (Heatmap, Forest, Garden, Skyline),
• year jump controls,
• auto-scroll playback,
• palette adaptation by active theme.

2) GitHub Showcase

I also built a profile showcase module using GraphQL to display:

• follower and repo metrics,
• contribution metrics (commits/PRs),
• language distribution bar,
• pinned/top repositories with topic badges.

Full About page context:

Responsive UX + Sidebar Navigation

Responsiveness is handled through centralized breakpoints and component-level media rules.

Key UX behaviors:

• focus-trapped sidebar menu,
• click-outside to close overlays,
• blur treatment on background content when overlays are active,
• typography scaling by breakpoint,
• horizontal overflow handling for dense visual modules.

This keeps keyboard and touch interactions practical across sizes.

Performance + Developer Experience

Some implementation decisions that helped:

• route-level lazy imports,
• manual chunk grouping for vendor and particle libraries,
• optional dev-time TypeScript/ESLint checking via environment toggles,
• build visualizer output for bundle inspection,
• strict TypeScript config and lint/format scripts.

For deployment, GitHub Actions builds and ships to GitHub Pages.

What I Would Improve Next

If I take this further, I would like to add:

1. richer skeleton/loading states instead of blank transitions,
2. offline support + cache strategy for API-backed sections,
3. more accessibility audits (focus indicators, reduced-motion pathways),
4. analytics on which projects/posts get most engagement.

Final Thoughts

This portfolio became more than a profile page. It is now a living frontend playground where I can experiment with UI systems, data visualizations, and interaction patterns in production.

If you want to explore or fork it:

• Live: https://singhamandeep007.github.io/
• Repo: https://github.com/singhAmandeep007/singhAmandeep007.github.io

I would love feedback on the architecture and UX decisions.