Screenshot of Designo's hero section

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

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
Solution design comparison

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
Mobile Google PageSpeed results
Google PageSpeed desktop results, all green with performance with a near perfect 99
Desktop Google PageSpeed results

Tech stack

  • Frontend development

    • TypeScript logo

      TypeScript

    • React Logo

      React

    • TailwindCSS logo

      TailwindCSS

    • Next.js logo

      Next.js

  • CMS

    • Sanity logo

      Sanity

  • Deployment & version control

    • Vercel logo

      Vercel

    • Github logo

      GitHub

  • Design

    • Framer logo

      Figma

  • Development tools

    • VSCode logo

      VSCode

Got a design needing translation to code?