GUIPM.DEV

Go to the web application ↗

📒 Table of Contents

• 📍 Overview
  • ⚠️ Disclaimer
• ✨ Features
• 🤖 Demo
• 🎨 Layout
• 🛠 Technologies
  • Website
  • Server
  • Utils
• 🚀 Getting Started
  • ✔️ Prerequisites
  • 📦 Installation
  • ⚙️ Usage
• 📄 License
• 👏 Acknowledgments

📍 Overview

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.

⚠️ Disclaimer

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!

✨ Features

🖱️ 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

🤖 Demo

guipm-dev.mp4

🎨 Layout

The layout of the application was designed by guipm.dev and is available on Figma.

🛠 Technologies

The following tools were used to build the project:

Website

* See the package.json file

Server

Utils

🚀 Getting Started

✔️ Prerequisites

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.

📦 Installation

1. Clone the back end repository:

git clone https://github.com/guipmdev/guipm-dev-json-server/

2. Change to the back end directory:

cd guipm-dev-json-server

3. Install the dependencies:

npm install

4. Go back and clone the project repository:

cd ..

git clone https://github.com/guipmdev/guipm-dev/

5. Change to the project directory:

cd guipm-dev

6. Install the dependencies:

npm install

⚙️ Usage

1. Enter the back end directory:

cd guipm-dev-json-server

2. Start the JSON Server:

npm run dev

3. Change to the project directory:

cd ../guipm-dev

4. Rename the file .env.local.example to .env.local and insert the necessary information:

mv .env.local.example .env.local

5. Run the Panda codegen script:

npm run prepare

6. Start the web application:

npm run dev

7. Access http://localhost:3000/ to view the application

📄 License

This project is licensed under the terms of the MIT license. See the LICENSE file for additional info.

👏 Acknowledgments

• 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!

↑   Return to the top   ↑