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.
- Editorial Design: Warm paper palette, Archivo display type (variable width axis), IBM Plex Mono annotations, chapter-numbered sections, and a fixed left index rail on desktop.
- Masthead hero: Expanded-capital name, risograph double-print accent, rotating ring-type seal, live Accra clock.
- Asymmetric Layout: Index-style work rows with follow-cursor cover stamps, chapter rules, git-like experience timeline.
- Live GitHub Stats: Real data (repos, stars, followers, languages, contribution heatmap) with count-up animations — fetched with timeouts and graceful fallbacks.
- 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, count-up stats — all disabled under
prefers-reduced-motion. - Responsive: Left rail collapses into a fullscreen top-bar menu on mobile.
- Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
- Fonts: Archivo (variable, width axis) + IBM Plex Mono (Google Fonts, loaded async so first paint never blocks)
- PDF Generation: jsPDF (client-side)
- Data:
data/content.json(used by the PDF generator), GitHub REST API (live stats)
-
Clone the repository:
git clone https://github.com/catsika/catsika.github.io.git
-
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.
- Page content lives directly in
index.html(project cards, skills, experience, etc.). data/content.jsonfeeds the client-side PDF resume generator.- Design tokens (colors, fonts, radii) are CSS variables at the top of
css/styles.css.
Push to main — GitHub Pages serves the repo at https://catsika.github.io/.
MIT © 2026 Clifford Atsika