Skip to main content
This guide will walk you through setting up the Drakk3 Portfolio project on your local machine.

​
Prerequisites

Before you begin, ensure you have the following installed:

Node.js

Version 22.12.0 or higher is required. Check your version with node --version.
Consider using a Node version manager like nvm or fnm to easily switch between Node versions.

​
Installation

1

Clone the repository

Clone the project repository to your local machine:
git clone <repository-url>
cd drakk3-portfolio
2

Install dependencies

Install all required dependencies using npm:
npm install
This will install:
  • Astro 6 - The web framework
  • React 19 - For interactive components
  • Tailwind CSS v4 - For styling
  • shadcn/ui - UI component primitives
  • And other dependencies
You can also use yarn or pnpm:
# Using yarn
yarn install

# Using pnpm
pnpm install
3

Start the development server

Run the development server:
npm run dev
The site will be available at http://localhost:4321Expected output:
astro v6.0.2 ready in XXX ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose
4

Open in browser

Navigate to http://localhost:4321 in your browser to see the portfolio.You should see the portfolio homepage with the Navbar, Hero, Skills, Projects, Contact, and Footer sections.

​
Development Workflow

​
Hot Module Replacement (HMR)

The development server supports hot module replacement. Changes to your code will automatically reflect in the browser without requiring a full page reload.

​
Available Commands

Here are the main npm scripts you’ll use during development: 
# Start development server (localhost:4321)
npm run dev

# Build for production (outputs to dist/)
npm run build

# Preview production build locally
npm run preview

# Run Astro CLI commands
npm run astro

​
Building for Production

1

Create production build

Generate an optimized production build:
npm run build
This creates a dist/ directory with static files ready for deployment.
2

Preview production build

Test the production build locally:
npm run preview
This serves the built site from the dist/ directory, allowing you to verify the production build before deployment.
The production build is optimized and may behave differently from the development server. Always test with npm run preview before deploying.

​
Troubleshooting

If you see an error about Node version, ensure you’re using Node.js 22.12.0 or higher:
node --version
If you need to upgrade, visit nodejs.org or use a version manager like nvm:
nvm install 22.12.0
nvm use 22.12.0
If port 4321 is already in use, Astro will automatically try the next available port. You can also specify a custom port:
npm run dev -- --port 3000
If you encounter module resolution errors, try deleting node_modules and reinstalling:
rm -rf node_modules package-lock.json
npm install

​
Next Steps

Now that you have the portfolio running locally, explore these topics to understand the project better:

Architecture

Learn about the project structure and technology stack

Components

Explore the Astro and React components used in the portfolio

Styling

Understand the Tailwind CSS v4 setup and theming

Development

Learn best practices for developing the portfolio