This is a solution to the Minimalist portfolio website challenge on Frontend Mentor
Your challenge is to build out this multi-page portfolio website and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your 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
- Click the "About Me" call-to-action on the homepage and have the screen scroll down to the next section
- Receive an error message when the contact form is submitted if:
- The
Name
,Email Address
orMessage
fields are empty should show "This field is required" - The
Email Address
is not formatted correctly should show "Please use a valid email address"
- The
If you would like to make your contact form actually send you the data, you could use a service like Formspree to hook it up.
- Semantic HTML5 markup
- Styled Components
- ReactJS
- ViteJS
Creating reusable components with React Router component and styled components is a little tricky.
While using SC in a router project, styling a link can be done in its scope within that styled component but this isn't a viable option if its a reusable Link component, it was tricky to figure out a solution but I eventually did. This requires importing the router's Link component in the styles, and export the styled Link component as a styled component instead.
import {Link} from "react-router-dom
export const StyledLink = styled(Link)`
`
The provided assets include images of multiple resolutions to be used differently for mobile and desktop view. Instead of switching them based on media queries, I used
The project asked for individual form validation errors but I did a bulk validation error i.e. the error shows up at the bottom of the form instead of showing up under each input.