One file per project
Every project, including this one, is a single JSON file that powers both its resume entry and its case study page. Change a fact once and it’s right everywhere.
- PHP
- Data Architecture
Personal Portfolio Site
- Live site: ariksavage.com
- Role: Owner
- Type: Personal project
- Date: Ongoing
This site is my portfolio, resume and painting gallery, all built by hand in PHP, Sass and vanilla JavaScript. No framework, no page builder, and it runs on my own self-hosted server.
Under the hood
A resume that tailors itself
The resume is data, not a document. Click a skill tag and every bullet and project gets scored and re-sorted by relevance, live. There’s even a console helper, window.tailor(), for lining it up with a specific job posting. It also prints to a tidy two pages.
- JavaScript
- PHP
Diagrams that pop
The case-study diagrams are hand-drawn SVG, themed with CSS and animated layer by layer as you scroll to them, with a static version for anyone who prefers reduced motion.
- SVG
- CSS
- JavaScript
- Accessibility
Images on autopilot
Drop in one screenshot and PHP (via Imagick) generates responsive WebP and JPEG sizes on first request, served through <picture> with lazy loading.
- PHP
- Image Optimization
- Performance Metrics
Little touches
A painting gallery with scroll-triggered reveals, content that flies in as each page loads, and fallback fonts sized to match the real ones so nothing jumps when they arrive. All hand-written CSS and vanilla JavaScript.
- JavaScript
- CSS
- UI/UX
Push to deploy
A push to main kicks off a GitHub Actions workflow on a self-hosted runner that validates the project data, builds the Sass and JavaScript and syncs everything into place.
- CI/CD
- Git
Stack & skills
- PHP
- Sass
- Vanilla JavaScript
- SVG
- Imagick
- Grunt
- GitHub Actions
- UI/UX
- JavaScript
- CSS