Portfolio — Clifford Atsika

An editorial, print-inspired developer portfolio: Swiss typography, oversized display type, a fixed index rail, and live GitHub activity data — designed like a beautifully typeset annual report rather than a template.

Features

• Editorial Design: Warm paper palette, Space Grotesk display type, IBM Plex Mono annotations, oversized outline section numbers, and a fixed index rail.
• Asymmetric Layout: Right-aligned hero lede, alternating work rows, git-style experience timeline.
• Live GitHub Stats: Real data (repos, stars, followers, languages, contribution heatmap) with count-up animations.
• Client-Side PDF Resume: The Resume link generates and downloads a PDF resume in-browser (jsPDF), no assets required.
• Motion: Marquee tech ticker, scroll reveals, and count-up stats — all disabled under prefers-reduced-motion.
• Responsive: Fixed rail becomes a top bar with menu on mobile.

Tech Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
• Fonts: Space Grotesk + IBM Plex Mono (Google Fonts)
• PDF Generation: jsPDF (client-side)
• Data: data/content.json (used by the PDF generator), GitHub REST API (live stats)

Getting Started

1. Clone the repository:

   git clone https://github.com/catsika/catsika.github.io.git

2. Serve locally:

   npm install
   npm run dev        # npx live-server . --port=3000
   # or
   python -m http.server 8000

Note: live GitHub stats and the JSON loader require HTTP (they won't work from file://). The page content is static HTML and works everywhere.

Customization

• Page content lives directly in index.html (project cards, skills, experience, etc.).
• data/content.json feeds the client-side PDF resume generator.
• Design tokens (colors, fonts, radii) are CSS variables at the top of css/styles.css.

Deployment

Push to main — GitHub Pages serves the repo at https://catsika.github.io/.

License

MIT © 2026 Clifford Atsika