ProjectsSunnyside
Sunnyside
Stack
- Next.js
- React
- TypeScript
- Tailwind
Rebuilt in Next.js, October 2026 · History
Sunnyside repository (opens in a new tab)
What it is
An agency landing page with services, projects, and contact, built from a supplied design.
Why it exists
I built this agency page during my post-bootcamp job search as work for Breakthrough Development. I wanted a deployed landing-page reference I could later tailor.
How it works
Responsive sections, hover states and a menu toggle implement the landing page. Its navigation and social links return to the page root, and there is no contact submission.
Story
An agency page I could turn into code.
Sunnyside gave me a full landing page to work through: service sections, project imagery, navigation and a layout that changed with the screen size.
I wanted the practice to leave me with useful implementation references, and an agency page was another kind of interface in that set.
I built the responsive sections, hover states and menu toggle in React with TypeScript, then deployed the demo as a layout and interaction reference. The agency, marketing copy and pictured work belong to the challenge design. They are not a client engagement or my business results.
The deployed page gives me something concrete to revisit when I evaluate future templates.
Design: Frontend Mentor (opens in a new tab)'s Sunnyside agency landing page challenge. Build: Royer Adames. The demo is an October 2026 rebuild by AI coding agents; the code link is my 2021 original.
History
Rebuilt in Next.js
· By AI coding agents
Before:
Stack
- React
- TypeScript
- Sass
Every Frontend Mentor project moved to one locked stack: Next.js, TypeScript and Tailwind CSS.
- Changed Create React App with Sass to Next.js with Tailwind CSS.