This project is a web application developed in Next.js and TypeScript for my personal portfolio site. It includes the About, Experience and Project sections, as well as a customized cursor to provide an interactive user experience.
The project connects to an API to fetch the data used on the website, and uses CSS-in-JS to style its components. Overall, it's a visually appealing and interactive platform that showcases the work and experience of its developer.
The back-end of this website is built with JSON Server and is not included in this repository. To test this application on your machine, you'll need to clone both repositories (front and back), make the respective configurations and run the scripts, but everything is in detail in the βοΈ Usage section!
π±οΈ Custom cursor for a more immersive experience
β‘ Focus on loading speed
π± Made in mobile first, meaning great viewing on mobile devices
π Dark mode always, to keep your eyes safe
β Built with SSR, so even without JavaScript all the information still remains visible
π Made with accessibility and SEO in mind
guipm-dev.mp4
The layout of the application was designed by guipm.dev and is available on Figma.
The following tools were used to build the project:
* See the package.json file
Before you begin, ensure that you have the following tools installed on your machine: Git, Node.js. It's also good to have an editor to work with the code, such as VSCode.
- Clone the back end repository:
git clone https://github.com/guipmdev/guipm-dev-json-server/
- Change to the back end directory:
cd guipm-dev-json-server
- Install the dependencies:
npm install
- Go back and clone the project repository:
cd ..
git clone https://github.com/guipmdev/guipm-dev/
- Change to the project directory:
cd guipm-dev
- Install the dependencies:
npm install
- Enter the back end directory:
cd guipm-dev-json-server
- Start the JSON Server:
npm run dev
- Change to the project directory:
cd ../guipm-dev
- Rename the file
.env.local.example
to.env.local
and insert the necessary information:
mv .env.local.example .env.local
- Run the Panda codegen script:
npm run prepare
- Start the web application:
npm run dev
- Access http://localhost:3000/ to view the application
This project is licensed under the terms of the MIT
license. See the
LICENSE file for additional info.
- Many thanks to Rocketseat for the tips I've received so far
- Credits to the dev Brittany Chiang for the site-resume style
- Credits to the dev Adenekan Wonderful for the cursor style and application background
Made with π by @guipm.dev - Feel free to contact me!