The project
The Curriculum Vitae is a personal project that showcases frontend development and design skills through a creative, newspaper-inspired layout. The site demonstrates expertise in accessibility, performance, and modern web development practices while presenting professional experience in an engaging, memorable format.
The goal was to create something that stood out from typical portfolio sites - something that would catch attention, demonstrate technical skills, and show attention to detail in both design and code quality. The newspaper aesthetic provides a unique visual identity while maintaining excellent usability and accessibility standards.
Design approach
The design takes inspiration from traditional newspaper layouts, complete with columns, headlines, and classified sections. This approach allows for creative typography, interesting content hierarchy, and a distinctive visual style that reflects both technical capability and design sensibility.
Despite the creative layout, the site maintains strict accessibility standards. All colour combinations meet WCAG2 AA standards (and many meet AAA), ensuring the site is usable by everyone. The design also works beautifully across all device sizes, from mobile phones to large desktop displays.
Performance focus
Performance was a key consideration from the start. The site scores top marks for Core Web Vitals on both desktop and mobile, demonstrating that creative design doesn't have to come at the cost of speed. The site is built with Eleventy, a static site generator that outputs clean, fast HTML with minimal JavaScript.
By avoiding heavy frameworks and focusing on progressive enhancement, the site loads quickly and works reliably across all browsers and devices. This approach showcases that modern web development doesn't always require complex tooling - sometimes the best solution is the simplest one.
Performance and Core Web Vitals
The site consistently achieves excellent performance scores, proving that fast, accessible websites don't need to sacrifice creativity or visual appeal.
Mobile
Performance:
100%
Accessibility:
100%
Best practices:
100%
Search Engine Optimisation:
100%
Full details
-
Largest Contentful Paint:
1.8s
Success: < 2.5s Warning: 2.6s - 4s Error: > 4s
-
First Contentful Paint:
0.9s
Success: < 1.8s Warning: 1.81s - 3s Error: > 3s
-
Speed Index:
1s
Success: <3.4s Warning: 3.5s - 5.8s Error: > 5.8s
-
Cumulative Layout Shift:
0
Success: < 0.1 Warning: 0.11 - 0.25 Error: > 0.25
-
Total Blocking Time:
0ms
Success: < 200ms Warning: 201ms - 600ms Error: > 600ms
-
Page weight:
240KB
Success: < 1.50MB Warning: 1.50MB - 2.23MB Error: > 2.23MB
Desktop
Performance:
100%
Accessibility:
100%
Best practices:
100%
Search Engine Optimisation:
100%
Full details
-
Largest Contentful Paint:
0.4s
Success: < 2.5s Warning: 2.6s - 4s Error: > 4s
-
First Contentful Paint:
0.3s
Success: < 1.8s Warning: 1.81s - 3s Error: > 3s
-
Speed Index:
0.3s
Success: <3.4s Warning: 3.5s - 5.8s Error: > 5.8s
-
Cumulative Layout Shift:
0
Success: < 0.1 Warning: 0.11 - 0.25 Error: > 0.25
-
Total Blocking Time:
0ms
Success: < 200ms Warning: 201ms - 600ms Error: > 600ms
-
Page weight:
240KB
Success: < 1.50MB Warning: 1.50MB - 2.23MB Error: > 2.23MB
Tech used
- Static site generation with Eleventy
- CSS transformations with PostCSS
- Front end build tasks with Gulp
- Hosted on Vercel
- Code stored on GitHub
Showcasing skills
This project serves as both a portfolio piece and a demonstration of best practices in modern web development. It shows that creative design, excellent performance, and strong accessibility can all coexist in a single project. The site continues to evolve, with ongoing improvements to both design and technical implementation.
The Curriculum Vitae demonstrates that personal projects can be just as valuable as client work when it comes to showcasing skills and capabilities. Sometimes the best way to show what you can do is to build something you're passionate about.