Building My Portfolio Website: A Journey with React, GitHub Integration, and GitHub Pages Deployment

Introduction

I recently built my portfolio website at https://arjun-computer-geek.github.io/ using modern web technologies and wanted to share the technical journey, challenges faced, and solutions implemented. This blog post covers everything from the tech stack to GitHub integration, Dev.to blog integration, and the deployment challenges I encountered.

🎨 The Tech Stack & Design Philosophy

Modern React with TypeScript

I chose React 18 with TypeScript for type safety and better developer experience. The project uses Vite as the build tool for lightning-fast development and optimized production builds.

Beautiful UI with shadcn/ui and Tailwind CSS

The design system is built on shadcn/ui components with Tailwind CSS for styling. This combination provides:

• Consistent, accessible components
• Dark mode support out of the box
• Responsive design with utility classes
• Beautiful animations and transitions

Key Design Features

• Glass morphism effects with backdrop blur
• Gradient backgrounds and text effects
• Smooth animations using CSS keyframes
• Responsive grid layouts for projects and blog posts
• Interactive hover effects and micro-interactions

🔗 GitHub Integration: Real-time Project Data

GitHub API Integration

One of the most exciting features is the real-time GitHub integration. I created a comprehensive GitHub service that fetches:

// Key features of the GitHub integration
- User repositories with filtering (no forks, no archived, public only)
- GitHub statistics (stars, forks, languages)
- Pinned repositories based on configuration
- Experience calculation based on first commit date
- Repository topics and metadata

Implementation Details

The GitHub integration uses React Query (TanStack Query) for efficient data fetching with:

• Caching strategies (5-minute stale time, 30-minute garbage collection)
• Retry logic with exponential backoff
• Error handling and fallback states
• Rate limiting considerations

Pinned Repositories System

I implemented a smart pinning system that allows me to highlight specific projects:

// Configuration-based pinning
const PINNED_REPOSITORIES = ["portfolio-website", "awesome-project"];
const PINNED_TOPICS = ["portfolio", "showcase", "featured"];

This system automatically pins repositories based on their name or topics, making it easy to showcase my best work.

📝 Dev.to Blog Integration

Real-time Blog Feed

The portfolio includes a live feed of my Dev.to blog posts using their public API:

// Fetching Dev.to posts
fetch("https://dev.to/api/articles?username=arjun_computer_geek");

Features Implemented

• Search functionality across titles, descriptions, and tags
• Responsive grid layout for blog cards
• Tag filtering and display
• Pagination with "View All" functionality
• Error handling and loading states

Blog Card Design

Each blog post card features:

• Cover image support
• Publication date
• Tag display (with overflow handling)
• Hover effects and animations
• Direct link to Dev.to

🚀 GitHub Pages Deployment Challenges & Solutions

The Routing Problem

The biggest challenge was client-side routing on GitHub Pages. GitHub Pages doesn't support server-side routing, which means direct navigation to routes like /projects would result in a 404 error.

Solution: HashRouter Implementation

I implemented a dual-router system:

// Development: Clean URLs with BrowserRouter
// Production: Hash-based URLs with HashRouter
const Router =
  process.env.NODE_ENV === "production" ? HashRouter : BrowserRouter;

404.html Redirect Solution

For direct navigation support, I created a public/404.html file that handles redirects:

<!-- 404.html handles direct navigation -->
<script>
  const path = window.location.pathname;
  if (path !== "/") {
    window.location.href = "/#" + path;
  }
</script>

SPA Routing Solution for GitHub Pages

I implemented a comprehensive SPA routing solution based on the spa-github-pages approach. This solution handles both direct navigation and URL restoration:

<!-- Script in index.html for SPA routing -->
<script type="text/javascript">
  // Single Page Apps for GitHub Pages
  // MIT License
  // https://github.com/rafgraph/spa-github-pages
  // This script checks to see if a redirect is present in the query string,
  // converts it back into the correct url and adds it to the
  // browser's history using window.history.replaceState(...),
  // which won't cause the browser to attempt to load the new url.
  // When the single-page app is loaded further down in this file,
  // the correct url will be waiting in the browser's history for
  // the single-page app to route accordingly.
  (function (l) {
    if (l.search[1] === "/") {
      var decoded = l.search
        .slice(1)
        .split("&")
        .map(function (s) {
          return s.replace(/~and~/g, "&");
        })
        .join("?");
      window.history.replaceState(
        null,
        null,
        l.pathname.slice(0, -1) + decoded + l.hash
      );
    }
  })(window.location);
</script>

This solution works by:

1. Detecting redirects from the 404.html page
2. Restoring the original URL in the browser history
3. Allowing React Router to handle the routing properly
4. Maintaining clean URLs for users while working with GitHub Pages limitations

How the Complete Routing Solution Works

1. User visits yoursite.com/projects directly
2. GitHub Pages serves the 404.html file
3. 404.html script redirects to yoursite.com/#/projects
4. index.html script restores the URL to yoursite.com/projects
5. React Router handles the routing to the Projects component

This creates a seamless experience where users can:

• Bookmark direct URLs like yoursite.com/projects
• Share clean links without hash symbols
• Navigate directly to any route
• Maintain browser history properly

GitHub Actions Workflow

I set up automated deployment using GitHub Actions:

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: "./dist"

  deploy:
    environment:
      name: github-pages
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/deploy-pages@v4

🎯 Key Features & Components

1. Hero Section

• Animated gradient backgrounds
• Call-to-action buttons
• Social media links

2. About Section

• Personal introduction
• Skills overview
• Professional summary

3. Experience Section

• Timeline-based experience display
• Company logos and descriptions
• Duration calculations

4. Skills Section

• Categorized skill display
• Progress indicators
• Interactive hover effects

5. Projects Section

• Featured projects showcase
• GitHub integration
• Live repository data

6. Blog Section

• Dev.to integration
• Search functionality
• Responsive grid layout

7. Contact Section

• Contact form
• Social media links
• Professional information

🛠️ Development Tools & Workflow

Lovable Integration

I integrated Lovable for component tagging and development workflow optimization:

// Vite config with Lovable
import { componentTagger } from "lovable-tagger";

export default defineConfig(({ mode }) => ({
  plugins: [react(), mode === "development" && componentTagger()].filter(
    Boolean
  ),
}));

📱 Responsive Design & Performance

Mobile-First Approach

• Responsive breakpoints for all screen sizes
• Touch-friendly interactions
• Optimized layouts for mobile devices

Performance Optimizations

• Code splitting with React Router
• Lazy loading for components
• Image optimization and compression
• Caching strategies for API calls

🎨 Design System & Styling

Custom CSS Variables

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... more variables */
}

Animation System

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
  }
}

🔧 Configuration & Setup

Environment Configuration

• Base URL configuration for GitHub Pages
• API endpoints configuration
• Development vs production settings

Build Configuration

// vite.config.ts
export default defineConfig({
  base: "/",
  server: {
    host: "::",
    port: 8080,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

🚀 Deployment Process

1. Build Process

npm run build

2. GitHub Pages Configuration

• Source: Deploy from a branch
• Branch: main
• Folder: / (root)

3. Automatic Deployment

• GitHub Actions triggers on push to main
• Builds the project
• Deploys to GitHub Pages
• Updates live site automatically

🎯 Lessons Learned & Best Practices

1. Router Configuration

• Always test routing in production environment
• Use HashRouter for GitHub Pages
• Implement proper 404 handling

2. API Integration

• Implement proper error handling
• Use caching strategies
• Consider rate limiting

3. Performance

• Optimize bundle size
• Implement lazy loading
• Use proper caching headers

4. User Experience

• Provide loading states
• Handle error scenarios gracefully
• Ensure accessibility

🔮 Future Enhancements

Planned Features

• Blog CMS integration for custom blog posts
• Analytics dashboard for portfolio insights
• Dark/Light mode toggle
• Internationalization support
• PWA capabilities

Technical Improvements

• Server-side rendering for better SEO
• Image optimization with next-gen formats
• Advanced caching strategies
• Performance monitoring

📚 Resources & References

Technologies Used

• React 18
• TypeScript
• Vite
• Tailwind CSS
• shadcn/ui
• React Query
• GitHub API

Deployment Resources

• GitHub Pages
• GitHub Actions
• React Router

🎉 Conclusion

Building this portfolio website has been an incredible learning experience. The combination of modern React practices, beautiful UI design, and seamless GitHub integration creates a powerful showcase for my work. The challenges with GitHub Pages routing taught me valuable lessons about deployment strategies and user experience considerations.

The live GitHub integration and Dev.to blog feed make the portfolio dynamic and always up-to-date, while the beautiful design system ensures a professional and engaging user experience.

You can visit the live portfolio at: https://arjun-computer-geek.github.io/

You can explore the complete source code here: https://github.com/arjun-computer-geek/arjun-computer-geek.github.io

Feel free to explore the codebase and reach out if you have any questions about the implementation!

This blog post covers the technical implementation of my portfolio website. The project demonstrates modern web development practices, API integration, and deployment strategies that can be applied to other projects.