Portfolio

Index

1. Introduction
2. Clone the repository
3. Set up the project
4. Install dependencies
5. Final steps
6. Using Docker
   1. Run with Docker Compose (Recommended)
   2. Build Docker image manually
7. Learn More
8. Deploy on Vercel
9. Credits

Introduction

My professional minimalist portfolio website made with Next.js, bootstrapped with create-next-app, powered by ▲Vercel!

This project has been developed on a Linux system. To learn more about the system, visit the Dotfiles repository.

/
├── public/
│   ├── fonts/
│   │   └── *.woff2
│   ├── icons/
│   │   ├── */
│   │   │   └── *.svg
│   │   └── *.svg
│   ├── images/
│   │   ├── about.avif
│   │   └── home.avif
│   └── favicon.ico
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── send/
│   │   │       └── route.js
│   │   ├── layout.jsx
│   │   └── page.jsx
│   ├── components/
│   │   ├── context/
│   │   │   └── */
│   │   │       └── *.jsx
│   │   ├── layout/
│   │   │   └── */
│   │   │       └── *.jsx
│   │   └── sections/
│   │       └── */
│   │           └── *.jsx
│   ├── styles/
│   │   └── *.css
│   └── translations/
│       └── *.json
├── CONTRIBUTING
├── LICENSE
├── .env
├── docker-compose.yaml
├── Dockerfile
├── jsconfig.json
├── next.config.mjs
├── package-lock.json
└── package.json

Clone the repository

Open a terminal in the directory where you store your repositories and clone it with the following command:

# HTTPS
git clone https://github.com/FJrodafo/Portfolio.git

# SSH
git clone git@github.com:FJrodafo/Portfolio.git

Set up the project

This project needs a .env file based on .env.example with your environment variables related to your email service (Make sure you have an Resend account created, you can create one in the Resend official website):

cp .env.example .env

[!IMPORTANT]

This same environment variable must be configured in the Vercel website if the application is to be deployed on that service.

Install dependencies

As well, this project must be initialized and the necessary dependencies installed with the following command:

npm i

Final steps

If you have Node v24.x or higher installed on your machine, then you are good to go!

To check if you already have Node installed on your machine, run node -v in your terminal. Otherwise, you will need to install Node v24.x or higher or, as a last option, check out the Docker alternative.

Finally, if you have Node installed, run the development server with the following command:

npm run dev
# Press 'Ctrl + C' to exit

Open http://localhost:3000 in your favorite browser to see the result (The page auto-updates as you edit the project files).

Using Docker

You can find a Docker image of this project ready to be pulled on GitHub Packages or Docker Hub official website!

Pull the latest image with the following commands:

# GitHub Packages
docker pull ghcr.io/fjrodafo/portfolio:1.0.0

# Docker Hub
docker pull fjrodafo/portfolio:1.0.0

[!CAUTION]

Do not include a .env file in the Docker image. Environment variables, such as RESEND_API_KEY, must be provided at runtime.

Run with Docker Compose (Recommended)

Make sure to create the .env file before continuing (This file is used only at runtime, is ignored by Git and Docker, and is not included in the image).

Build the container:

docker compose build

Run the container:

docker compose up -d

Stop the container:

docker compose down

Open http://localhost:3000 in your favorite browser to see the result.

[!IMPORTANT]

If you already have applications that use port 3000, you will need to change the host port before creating the Docker container so that it can run correctly on a free port.

Build Docker image manually

If you prefer not to use Docker Compose, you can build and run the image manually.

If you don’t have Node v24.x or higher installed on your machine, you can build a Docker image by running the Dockerfile.

Open a terminal and run the following command:

docker build -t portfolio .

After the build completes, you can run your container with the following command:

docker run -dp 3000:3000 --env-file .env portfolio

You can even specify the environment variable value directly with the following command:

docker run -dp 3000:3000 -e RESEND_API_KEY=your_resend_api_key portfolio

Open http://localhost:3000 in your favorite browser to see the result.

[!IMPORTANT]

If you already have applications that use port 3000, you will need to change the host port before creating the Docker container so that it can run correctly on a free port.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Credits

Icons from Boxicons and IconScout.