Skip to main content

​
Get Started in 5 Minutes

This quick start guide will have you running the portfolio locally in no time. Follow these simple steps to clone, install, and run the project.
Prerequisites: Make sure you have Node.js 20 or later installed on your machine. You’ll also need npm, yarn, or pnpm as your package manager.

​
Quick Start Steps

1

Clone the Repository

First, clone the repository from GitHub to your local machine:
git clone https://github.com/ThalysonRibeiro/my-portfolio-fullstack.git
cd my-portfolio-fullstack
This downloads all the source code and creates a new directory called my-portfolio-fullstack.
If you plan to create your own version, consider forking the repository first on GitHub, then clone your fork instead.
2

Install Dependencies

Install all required packages using your preferred package manager:
npm install
This installs all dependencies listed in package.json, including:
  • Next.js 16 and React 19
  • Tailwind CSS 4 and Radix UI components
  • Framer Motion for animations
  • React Hook Form and Zod for form handling
  • And many more…
Installation typically takes 1-3 minutes depending on your internet connection and package manager.
3

Run the Development Server

Start the development server with Turbopack for ultra-fast hot reloading:
npm run dev
The development server starts on port 3000 by default. You’ll see output like:
▲ Next.js 16.1.5
- Local:        http://localhost:3000
- Turbopack:    enabled

✓ Starting...
✓ Ready in 1.2s
The dev script uses Turbopack (next dev --turbopack) for significantly faster build times compared to Webpack.
4

View in Browser

Open your browser and navigate to:
http://localhost:3000
You should see the portfolio homepage with:
  • Hero Section: Introduction and call-to-action
  • About Section: Professional background and skills
  • Projects Section: Showcase of work with interactive cards
  • Contact Form: Functional contact form with validation
  • GitHub Stats: Dynamic statistics from GitHub
  • Footer: Links and additional information
The first load might take a moment as Next.js compiles the pages. Subsequent navigation is instant thanks to the App Router.
5

Start Customizing

Now that everything is running, you can start making it your own! Here are some quick wins:Content Updates:
  • Edit src/utils/content.json to update text content and metadata
  • Modify src/app/layout.tsx to change site metadata and SEO settings
Styling Changes:
  • Update Tailwind configuration in tailwind.config.ts (if present) for theme customization
  • Edit component styles in src/components/ directories
Component Modifications:
  • Customize hero section in src/components/hero.tsx
  • Update header navigation in src/components/header.tsx
  • Modify project cards in src/components/projects.tsx
With Turbopack enabled, changes you make appear almost instantly in the browser - no need to refresh!

​
What You Just Installed

Your development environment now includes:

​
Core Framework

  • Next.js 16 with App Router and Turbopack
  • React 19 with latest features
  • TypeScript 5 for type safety

​
UI Components

  • Tailwind CSS 4 for styling
  • Radix UI accessible components
  • Framer Motion animations
  • Lucide React icons

​
Development Tools

  • ESLint for code quality
  • Prettier for code formatting
  • TypeScript compiler

​
Available Scripts

Here are the npm scripts you can use during development: 
npm run dev
# Starts Next.js development server with Turbopack
# Available at http://localhost:3000

​
Verify Your Installation

Let’s make sure everything is working correctly:
1

Check the Homepage

Navigate to http://localhost:3000 and verify the page loads without errors.
2

Test Hot Reload

Open src/app/page.tsx and make a small change. Save the file and confirm the browser updates automatically.
3

Test Navigation

Click on navigation links in the header. Pages should load instantly without full page refreshes.
4

Check Console

Open browser developer tools (F12) and check the console for any errors. A clean installation should have no errors.
If you encounter any errors during installation or startup, check the Installation Guide for detailed troubleshooting steps.

​
Next Steps

Now that you have the portfolio running:

Detailed Installation

Learn about prerequisites, environment variables, and troubleshooting

Project Structure

Understand the codebase organization and architecture

Customization Guide

Make the portfolio your own with custom content and styling

Deployment

Deploy your portfolio to production on Vercel or other platforms

​
Common Quick Start Issues

If port 3000 is occupied, you can specify a different port:
PORT=3001 npm run dev
Then access the site at http://localhost:3001
If you get EACCES errors during installation:
# On macOS/Linux, avoid using sudo
# Instead, fix npm permissions:
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH
If you see module not found errors after installation:
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

​
Getting Help

If you run into issues:
  1. Check the Installation Guide for detailed troubleshooting
  2. Review the GitHub Issues
  3. Ensure you’re using Node.js 20 or later: node --version
  4. Try clearing your cache: rm -rf .next
The Next.js and React communities are very active. If you encounter framework-specific issues, the Next.js documentation is an excellent resource.

Build docs developers (and LLMs) love

Get started for freeTalk to us