https://github.com/markonikolajevic/designo
https://github.com/markonikolajevic/designo
framer-motion frontend-mentor nextjs reactjs sass typescript vercel
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/markonikolajevic/designo
- Owner: MarkoNikolajevic
- Created: 2021-02-19T13:45:57.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-10-07T15:07:00.000Z (9 months ago)
- Last Synced: 2025-10-07T17:26:33.135Z (9 months ago)
- Topics: framer-motion, frontend-mentor, nextjs, reactjs, sass, typescript, vercel
- Language: TypeScript
- Homepage: https://designo.markonikolajevic.dev
- Size: 1.92 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Designo agency website solution
This is a solution to the [Designo agency website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/designo-multipage-website-G48K6rfUT). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
**Note: Delete this note and update the table of contents based on what sections you keep.**
## Overview
### The challenge
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Receive an error message when the contact form is submitted if:
- The `Name`, `Email Address` or `Your Message` fields are empty should show "Can't be empty"
- The `Email Address` is not formatted correctly should show "Please use a valid email address"
### Links
- [Project on Github](https://github.com/MarkoNikolajevic/designo)
- [Live site](https://designo-eight.vercel.app/)
## My process
### Built with
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/)
- [Next.js](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Sass](https://sass-lang.com/)
- [Reach Hook Form](https://react-hook-form.com/)
### What I learned
In this project I create more reusable components as I could to make my workflow easier. I practice a little of TypeScript learning some of its base features that I will use in my next projects.
## Author
- Website - [Marko Nikolajević](https://www.markonikolajevic.dev/)
- Frontend Mentor - [@MarkoNikolajevic](https://www.frontendmentor.io/profile/MarkoNikolajevic)
- Twitter - [@markez1317](https://twitter.com/markez1317)
- Linkedin - [Marko Nikolajević](https://www.linkedin.com/in/markonikolajevic/)