What’s about a portfolio website challenge with the latest frontend technology …

You don’t have an idea about where to start your portfolio website?? Here is a portfolio website challenge :)

The purpose of this challenge is to work on/improve your front end skills and also have your own portfolio website.

Requirements

• use NextJs as a frontend framework (use npx create-next-app portfolio --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter")
• use styled-components as a style plugin (example how to install it https://themeptation.medium.com/how-to-use-styled-components-on-nextjs-and-typescript-1c5388e36eb)
• use https://jsonplaceholder.typicode.com/ as an API
• use Axios to fetch data (https://github.com/axios/axios)
• use motion framer for animation (https://reacttricks.com/animating-next-page-transitions-with-framer-motion/)
• should be responsive
• jest & enzyme for unit test
• cypress (end to end test) if you can use it it would be a great
• create a portfolio with 5 pages (Home, AboutMe, Projects, Skills, Contact)
• hosted on github

To Do

1. Create an account on GitHub if you don’t have one already — https://github.com/
2. Use GitHub pages to host your website.

To help you

• Getting started with GitHub — https://guides.github.com/activities/hello-world/
• Getting started with GitHub pages — https://pages.github.com/ | https://guides.github.com/features/pages/
• Setting up your website with GitHub pages and dot tech — https://www.youtube.com/watch?v=eKv8YLaxeb8&t=160s
• Best practices for creating a portfolio website — https://www.springboard.com/blog/programmer-portfolio/

N.B: drop me a comment with the final result or any question :)

Inspirations

Here some design inspirations

Personal Portfolio

Portfolio

Portfolio

Personal Portfolio Website Design

Personal Portfolio Template

Enjoy coding ^^