Johnny Gérard — Frontend Engineer
Delivering Enterprise-Grade Frontend Solutions at Scale
I build high‑performance interfaces that meet deadlines and move business metrics.
Project Highlights
High-Impact Frontend Solutions
- 01
Golden Bean Coffee — A Fictional Café Website
- Frontend Engineering
- AI Design
Overview
The Golden Bean Coffee website is a static, multi-page application built with Astro and deployed on Cloudflare Pages for zero-cost hosting. It demonstrates a modern frontend architecture that emphasizes performance, accessibility, and maintainability. Core features include progressive enhancement—ensuring the site remains functional without JavaScript—along with mobile-first responsive design and theme awareness through a light/dark toggle.
User-focused functionality is built in from the ground up. A validated contact form makes communication seamless, while a privacy-first Google Maps integration respects consent before loading third-party services. These choices show how engineering decisions improve usability and trust.
Behind the scenes, the site leverages semantic HTML, structured data, and SEO best practices to maximize visibility. Performance is strengthened through HTTP caching, image optimization, and efficient font loading strategies. The outcome is a professional, production-ready website that runs fast, adapts well, and operates at virtually no ongoing cost.
Tech Stack
Framework
Astro
Styling
Tailwind CSS
Icon Library
Phosphor Icons
Hosting
Cloudflare Pages
AI-Generated Content
Copy & Design
GPT-5
Logo & Illustrations
GPT-Image 1
Images
Imagen 4
- 02
Frieda — A SaaS Landing Page
- Frontend Engineering
- Motion Design
Overview
Frieda is a finance dashboard solution designed by Royalz Store, accompanied by a signup landing page. From the mobile and desktop Figma layers, I delivered a fully responsive and pixel-perfect implementation of the landing page. In addition, I infused the design with delightful animations to enhance user experience.
Tech Stack
React Framework
Next.js
UI Library
Radix UI
Animation Library
GSAP
Styling
Tailwind CSS
Hosting
Vercel
AI-Generated Content
Copy
ChatGPT
Headshots
getimg.ai
- 03
OceanInsights — A Blog Post
- Frontend Engineering
- AI Design
Overview
From a suggested prompt (“A blog post about…”), I utilized Figma AI to generate a complete design for OceanInsights, a digital platform dedicated to uncovering oceanic mysteries, advancing marine research, and promoting ocean conservation.
The primary challenge was transforming a single desktop layer into a fully responsive webpage. By leveraging fluid typography and AI-suggested layouts, I successfully delivered a seamless and accessible user experience across all device types.
Tech Stack
React Framework
Next.js
Styling
Tailwind CSS
Hosting
Vercel
AI-Generated Content
Copy & Images
Figma AI
Headshot
DALL·E 3
Video
getimg.ai
Industry‑Recognized Credentials
Certified by Leading Technology Providers and Institutions
- Microsoft
- Oracle
- OpenEDG
- VMware by Broadcom
- MongoDB
IT Certifications
Certified Angular Developer
Alain Chautard — Google Developer Expert
View credentialJanuary 2024
Spring Certified Professional
VMware
View credentialSeptember 2023
MongoDB Associate Developer
MongoDB
View credentialDecember 2022
Azure Fundamentals
Microsoft
View credentialSeptember 2022
Java SE 8 Programmer
Oracle
View credentialSeptember 2021
Certified Associate Python Programmer
OpenEDG
View credentialJuly 2021
Database Fundamentals
Microsoft
View credentialMay 2021
C Certified Associate Programmer
OpenEDG
View credentialJanuary 2021
Introduction to Programming Using HTML and CSS
Microsoft
View credentialJuly 2020
Introduction to Programming Using JavaScript
Microsoft
View credentialJuly 2020
Programming in C#
Microsoft
View credentialAugust 2019
Open Source Contributions
Empowering Engineers to Accelerate Development
Next.js Theme Provider Plugin
A Next.js plugin to build applications that respond to user preferences for light or dark themes.
View on GitHubnpm packageNext.js 15 Starter
Kick-start your new Next.js project with a battle-tested, zero-config template.
View on GitHubGitHub template
Source Code Repository Analytics
A Bird’s-Eye View of Key Repository Metrics
Frontend Mentor Challenges
Explore an extensive catalog of 30+ Angular and React-based solutions on the Frontend Mentor platform.
Browse all solutionsBlog & Insights
In-Depth Technical Articles to Advance Your Frontend Engineering Skills
About Me
Frontend Engineer Committed to Excellence

Johnny Gérard
Frontend Engineer
With extensive experience crafting responsive, performant, and visually appealing frontend solutions using React, Next.js, and Angular, I specialize in transforming complex requirements into elegant and user-friendly digital experiences. My approach integrates technical precision with a keen eye for aesthetics, consistently delivering high-quality outcomes that meet business goals.
Why Work with Me
Learn the principles that power my modern frontend solutions.
Accessibility & Compatibility
I ensure your product reaches the broadest audience possible by strictly adhering to accessibility standards and guaranteeing compatibility across all major browsers. Your users experience seamless interactions everywhere, every time.
Performance & Scalability
My code is optimized for peak performance, significantly reducing loading times and enhancing user satisfaction. Built with scalability in mind, your frontend will effortlessly handle growth and increasing complexity without compromising speed or reliability.
Maintainability & Reusability
By writing clean, modular, and reusable code, I make future development and maintenance straightforward, efficient, and cost-effective. You save resources today and avoid technical debt tomorrow.
Responsiveness & SEO
I build responsive websites that look and function flawlessly on all devices, enhancing user experience and engagement. Additionally, I leverage SEO best practices to improve your site's visibility and ensure higher rankings in search engines.
Security & Privacy
I prioritize robust security practices and strict data privacy standards to protect your users' information and ensure compliance with industry regulations. Your customers' trust is maintained at all times.
Collaboration & Communication
Clear, proactive communication is central to my process. I ensure you're always informed, involved, and confident throughout the project lifecycle.
These principles aren't just best practices—they're the foundation of every project I deliver.
Let’s Build Something Impactful
I’m available now and open to new opportunities—freelance, contract, or full-time.