My personal portfolio site, where I show off some of my work and spend too much time trying to optimise fonts.
- Astro - Lightweight & easy to use
- TypeScript - Just a little here and there
- CSS - Plain and simple
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview- Custom font optimisation with critical CSS subsets (this post was my bible)
- Accessible navigation and content
- Playful animations and SVG filters (another rabbit hole of note)
- Interactive Lilly photo toggle (the most important feature)
- (in progress) Fully responsive design that works everywhere
- Implement OpenGraph tags for better sharing on social media
- Link to view/download my CV
- Implement a colour picker to let users choose their own theme colour
- Add a dropdown for colour blind users to switch to a more accessible palette
- Add more "whimsical" things (as Joshua W. Comeau calls it)
├── public/
│ └── fonts/ # Optimized font subsets
├── src/
│ ├── components/ # Astro components
│ ├── icons/ # SVG icons
│ ├── images/ # Project screenshots & Lilly pics
│ ├── pages/ # Site pages
│ ├── scripts/ # Client-side JS
│ └── styles/ # Global CSS
└── astro.config.mjs # Astro configuration
Initial design by the talented Amber Jones!
- Font optimisation techniques from Jono Alderson
- Circle scribble animation on links from Mariusz Dabrowski
- "Fuzzy" SVG filters from John D. Jameson
- Project cards glowy borders from Elpeeda
- Project tags/technologies expanding borders from LukyVJ
- Sun and moon icons from Vjacheslav Trushkin
- Big sparkle and heart from BRIX Templates
- Underlines from Kate Birukova
- Down arrow and project link star and arrow from Abhijit Chirde
- Diamond from Valery Belaziorau
- Lilly arrow from Sanel Selimovic
- Smiley face from Mary Amato
- LinkedIn and GitHub logo icons from Maria Ko
- Mail icon from Streamline
Deployed on Netlify because it's easy and works great with Astro.
MIT License. That being said, please don't just entirely copy this!
Here lies the "built with too much caffeine, not enough sleep" comment that everybody has for some reason.