![Screenshot of Designo's hero section](https://cdn.sanity.io/images/09o5vx8x/production/9a1eb15196253f2cbaae4acf57f6b86bb481b917-1920x947.png?w=3840&q=90&fit=clip&auto=format)
Designo
Transformed a Figma design into a responsive, self-managed site.
- Sanity
- Next.js
- Development
- Design to code
What's a Frontend Mentor challenge?
It's a platform that provides front-end challenges with professional web designs to help people starting out web developing practice their skills in a realistic workflow.
I still do some from time to time but I can now design myself so I create my own challenges.
![Screenshot of Designo's hero section](https://cdn.sanity.io/images/09o5vx8x/production/9a1eb15196253f2cbaae4acf57f6b86bb481b917-1920x947.png?w=3840&q=90&fit=clip&auto=format)
Why bother doing 'em?
Well at the time I didn't have much design skills, mostly just developing skills but small single paged projects.
This opened up eyes to actually working with a design piece of software and precisely type it out in code.
Don't believe me? Look below, no different between the design and mine.
![Frontend Mentor Designo Guru challenge solution and design comparison](https://cdn.sanity.io/images/09o5vx8x/production/6972c897a437f0d345410242b0dc903d23d1c83b-1920x955.png?w=3840&q=90&fit=clip&auto=format)
Perks of Next.js
It's everything you want from an actual site which I can create for you, including the instant loading, responsiveness, and SEO setup.
![100 performance on mobile based on Google PageSpeed](https://cdn.sanity.io/images/09o5vx8x/production/9f8bd2c426f8598a4ed53a0801faa6d4ce246deb-1920x955.png?w=3840&q=90&fit=clip&auto=format)
![Google PageSpeed desktop results, all green with performance with a near perfect 99](https://cdn.sanity.io/images/09o5vx8x/production/01aff32319e2903060d33deb51c9f78e8ddceb7d-1920x955.png?w=3840&q=90&fit=clip&auto=format)
Tech stack
Frontend development
TypeScript
React
TailwindCSS
Next.js
CMS
Sanity
Deployment & version control
Vercel
GitHub
Design
Figma
Development tools
VSCode