Isonnymichael.Github.Io

isonnymichael.github.io

Personal portfolio website for Sonny Michael Wijaya — built with React, Vite, and Tailwind CSS. Deployed automatically to GitHub Pages via GitHub Actions.

Live: [isonnymichael.github.io](https://isonnymichael.github.io)

Tech Stack

• React 19 + Vite
• Tailwind CSS v4
• Framer Motion for animations
• GitHub Actions for CI/CD and data fetching

How it works

GitHub data (repos, languages, contribution calendar, PRs) is fetched at **build time** using a GitHub token stored as a repository secret. The data is written to static JSON files in `public/` and bundled into the site — no token is ever shipped to the browser.

The workflow runs automatically on every push to `master` and once daily via cron to keep data fresh.

Project Structure

src/
  App.jsx                       # Root layout
  data/config.jsx               # Static config: links, stack, social items
  hooks/useGitHubData.js        # Fetches pre-built GitHub JSON at runtime
  components/
    Sidebar.jsx                 # Profile, languages, tech stack
    ContributionsSection.jsx    # Open source PR contributions
    CommitsSection.jsx          # Contribution heatmap
    RepositoriesSection.jsx     # Paginated repo cards
    SocialSection.jsx           # Social media links
    ContactSection.jsx          # Contact links
    HoverAnimCard.jsx           # Animated card wrapper
    SkeletonCard.jsx            # Loading skeleton
    StackItem.jsx               # Tech icon with tooltip
    SectionCard.jsx             # Section wrapper with header
scripts/
  fetch-github-data.js          # Build-time GitHub data fetcher
.github/workflows/
  deploy.yml                    # Build, fetch data, deploy to Pages

Local Development

**1. Clone and install**

git clone https://github.com/isonnymichael/isonnymichael.github.io.git
cd isonnymichael.github.io
npm install

**2. Create `.env.local` with your GitHub token**

GITHUB_TOKEN=your_g