Skip to main content
This guide covers everything you need to know to install and set up the portfolio website on your local machine.

​
Prerequisites

Before you begin, ensure you have the following installed:

​
Node.js (Required)

The portfolio requires Node.js 18 or higher. 
node --version
You should see output like v18.0.0 or higher.

​
Package Manager (Choose One)

You’ll need a package manager to install dependencies. The project works with:
  • npm (comes with Node.js)
  • yarn - Install with npm install -g yarn
  • pnpm - Install with npm install -g pnpm

​
Git (Required)

You’ll need Git to clone the repository: 
git --version
If you don’t have Git installed, download it from git-scm.com.

​
System Requirements

The portfolio is a lightweight Astro application with minimal system requirements.
RequirementMinimumRecommended
Node.jsv18.0.0v20.0.0+
RAM2 GB4 GB+
Storage500 MB1 GB+
OSmacOS, Linux, WindowsAny

​
Installation Steps

1

Clone the repository

Open your terminal and run:
git clone https://github.com/avivkeller/avivkeller.github.io.git
cd avivkeller.github.io
If you plan to customize the portfolio for your own use, consider forking the repository first on GitHub.
2

Install dependencies

Install all required packages:
npm install
This will install the following key dependencies:
package.json
{
  "dependencies": {
    "@astrojs/sitemap": "3.5.1",
    "@tailwindcss/vite": "4.1.12",
    "astro": "5.13.4",
    "astro-icon": "1.1.5",
    "astro-seo": "0.8.4",
    "tailwindcss": "4.1.12"
  }
}
3

Verify installation

Confirm everything is installed correctly by running:
npm run dev
You should see output similar to:
🚀 astro v5.13.4 started in 123ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose
Open http://localhost:4321 in your browser to view the site.
4

Optional: Run type checking

Verify TypeScript types are correct:
npm run check:types
5

Optional: Run linting

Check code quality with ESLint:
npm run lint
To automatically fix issues:
npm run lint:fix

​
Project Structure

After installation, you’ll have this structure: 
avivkeller.github.io/
├── public/                 # Static assets
│   ├── favicon.ico
│   ├── robots.txt
│   └── assets/
├── src/
│   ├── assets/            # Images and media
│   ├── components/        # Astro components
│   │   ├── cards/        # Card components
│   │   ├── common/       # Shared components
│   │   ├── navigation/   # Header and Footer
│   │   ├── sections/     # Page sections
│   │   └── ui/           # UI elements
│   ├── data/             # Content data files
│   │   ├── index.ts      # Site config & social links
│   │   ├── projects.ts   # Projects data
│   │   ├── achievements.ts
│   │   └── experience.ts
│   ├── layouts/          # Page layouts
│   ├── pages/            # Route pages
│   ├── styles/           # Global CSS
│   └── types/            # TypeScript types
├── astro.config.mjs      # Astro configuration
├── tailwind.config.mjs   # Tailwind configuration
├── tsconfig.json         # TypeScript configuration
└── package.json          # Dependencies

​
Available Scripts

The package.json defines these npm scripts:
ScriptCommandDescription
devnpm run devStart development server
buildnpm run buildBuild for production
previewnpm run previewPreview production build
check:typesnpm run check:typesRun TypeScript type checking
lintnpm run lintRun ESLint
lint:fixnpm run lint:fixAuto-fix ESLint issues
format:checknpm run format:checkCheck code formatting
format:writenpm run format:writeAuto-format code

​
Troubleshooting

​
Port already in use

If port 4321 is already in use: 
npm run dev -- --port 3000
This will start the server on port 3000 instead.

​
Node version issues

If you see errors about Node.js compatibility, ensure you’re using Node.js 18 or higher.
node --version
If your version is below 18, upgrade Node.js:
  • Using nvm: nvm install 18 && nvm use 18
  • Direct download: Visit nodejs.org

​
Module resolution errors

If you encounter module resolution errors:
  1. Delete the node_modules folder: 
    rm -rf node_modules
  2. Delete the lock file: 
    rm package-lock.json  # or yarn.lock / pnpm-lock.yaml
  3. Reinstall dependencies: 
    npm install

​
Build errors with TailwindCSS

This project uses Tailwind CSS v4. If you see Tailwind-related errors:
  1. Ensure you have the correct version: 
    npm list tailwindcss
    Should show version 4.1.12 or higher.
  2. Clear the Astro cache: 
    rm -rf .astro
  3. Rebuild: 
    npm run build

​
Permission errors on Windows

On Windows, you may need to run your terminal as Administrator for some npm operations.
Alternatively, configure npm to use a different directory: 
npm config set prefix "C:\Users\YourUsername\AppData\Roaming\npm"

​
Environment Variables

This portfolio doesn’t require environment variables by default. However, if you plan to add features like analytics or contact forms, create a .env file:
.env
# Example environment variables
PUBLIC_SITE_URL=https://your-domain.com
PUBLIC_GA_ID=your-google-analytics-id
Variables prefixed with PUBLIC_ are exposed to the client-side code in Astro.

​
IDE Setup

For the best development experience: Install these extensions:
  1. Astro - Official Astro language support
  2. Tailwind CSS IntelliSense - Tailwind class autocompletion
  3. ESLint - JavaScript/TypeScript linting
  4. Prettier - Code formatting
The project includes a .vscode/extensions.json file that will prompt you to install recommended extensions.

​
Other IDEs

For other editors, ensure you have:
  • Syntax highlighting for .astro files
  • TypeScript support
  • ESLint integration

​
Next Steps

Now that installation is complete:

Quickstart Guide

Follow the quickstart to customize your portfolio.

Project Structure

Learn about the codebase organization.

Add Projects

Start adding your own projects to the portfolio.

Customize Styling

Make the design your own with custom styles.

Build docs developers (and LLMs) love

Get started for freeTalk to us