Quickstart

Get Up and Running

This guide will help you clone, configure, and run Portfolio Moretto on your local machine. You’ll go from zero to a fully functional portfolio in less than 10 minutes.

Check Prerequisites

Before you begin, make sure you have the following installed:Node.js (version 16.x or higher)

node --version
# Should output v16.x.x or higher

npm (comes with Node.js)

npm --version
# Should output 8.x.x or higher

If you don’t have Node.js installed, download it from nodejs.org. We recommend the LTS (Long Term Support) version.

Git (for cloning the repository)

git --version

Clone the Repository

Clone the Portfolio Moretto repository to your local machine:

git clone https://github.com/fedemoretto11/portfolio-moretto.git
cd portfolio-moretto

Make sure to replace the repository URL with your actual repository URL if you’ve forked the project.

Install Dependencies

Install all required npm packages using the package manager:

npm install

This will install all dependencies listed in package.json, including:

{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-i18next": "^14.0.5",
  "i18next": "^23.10.0"
}

The installation typically takes 1-2 minutes depending on your internet connection.

Configure Firebase (Optional)

The portfolio uses Firebase for storing project data and images. If you want to use your own Firebase project:

Create a Firebase Project

Go to Firebase Console
Click “Add project” and follow the setup wizard
Enable Firestore Database and Storage in your project

Get Your Firebase Credentials

In Firebase Console, go to Project Settings (gear icon)
Scroll down to “Your apps” and click the web icon (</>)
Register your app and copy the firebaseConfig object

Create Environment File

Create a .env.development file in the project root:

touch .env.development

Add your Firebase configuration:

.env.development

VITE_apiKey=your-api-key-here
VITE_authDomain=your-project.firebaseapp.com
VITE_projectId=your-project-id
VITE_storageBucket=your-project.appspot.com
VITE_messagingSenderId=your-messaging-sender-id
VITE_appId=your-app-id

Never commit your .env.development file to version control. It’s already included in .gitignore to prevent accidental commits.

Environment Variables in Code

The Firebase configuration is accessed using Vite’s environment variable syntax:

src/components/db/data.js

const firebaseConfig = {
  apiKey: import.meta.env.VITE_apiKey,
  authDomain: import.meta.env.VITE_authDomain,
  projectId: import.meta.env.VITE_projectId,
  storageBucket: import.meta.env.VITE_storageBucket,
  messagingSenderId: import.meta.env.VITE_messagingSenderId,
  appId: import.meta.env.VITE_appId,
};

If you skip Firebase setup, the app will still run but project data won’t be loaded from the database. You can add projects manually or work on other features first.

Start the Development Server

Launch the development server with hot module replacement:

npm run dev

You should see output similar to:

VITE v4.4.5  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

Open your browser and navigate to http://localhost:5173/

Vite provides extremely fast hot module replacement (HMR). Any changes you make to your code will be reflected in the browser almost instantly without a full page reload.

Explore the Application

Your portfolio is now running! Here’s what you can explore:

Main Sections

Hero Section (/#hero) - Main introduction with call-to-action buttons
About (/#about) - Personal story and highlights
Skills (/#technology) - Technology stack showcase
Experience (/#works) - Professional work history
Projects (/#projects) - Project portfolio with filtering
Contact (/#contact) - Contact information and links

Language Switching

Click the language switcher in the header to toggle between English and Spanish:

src/components/Header/Header.jsx

// The application supports ES (Spanish) and EN (English)
// Translations are stored in:
// - src/components/dictionaries/es.json
// - src/components/dictionaries/en.json

Component Structure

The main app structure is defined in src/App.jsx:

src/App.jsx

import Footer from "./components/Footer/Footer"
import Header from "./components/Header/Header"
import MainContainer from "./components/Main/MainContainer"

function App() {
  return (
    <>
      <Header />
      <MainContainer />
      <Footer />
    </>
  )
}

Build for Production

When you’re ready to deploy your portfolio:

Create Production Build

Build the optimized production bundle:

npm run build

This command:

Bundles all JavaScript and CSS
Minifies and optimizes assets
Generates a dist/ directory with production-ready files

vite v4.4.5 building for production...
✓ 1234 modules transformed.
dist/index.html                  0.45 kB │ gzip:  0.30 kB
dist/assets/index-a1b2c3d4.css  23.45 kB │ gzip:  5.67 kB
dist/assets/index-e5f6g7h8.js  145.67 kB │ gzip: 48.90 kB
✓ built in 5.43s

Preview Production Build

Test the production build locally:

npm run preview

This starts a local server serving your production build at http://localhost:4173/

Deploy

The dist/ folder contains your production-ready static site. Deploy it to any static hosting service:

Vercel

Zero-config deployment with automatic HTTPS

Netlify

Continuous deployment from Git

Firebase Hosting

Google’s fast and secure hosting

GitHub Pages

Free hosting directly from your repository

Available Scripts

Here are all the scripts defined in package.json:

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  }
}

Command	Description
`npm run dev`	Start development server with HMR at `http://localhost:5173`
`npm run build`	Create optimized production build in `dist/` directory
`npm run lint`	Run ESLint to check code quality and catch errors
`npm run preview`	Preview production build locally at `http://localhost:4173`

Troubleshooting

Port Already in Use

If port 5173 is already in use:

# Vite will automatically try the next available port
# Or specify a custom port:
vite --port 3000

Firebase Connection Issues

If you see Firebase errors in the console:

Verify your .env.development file has all required variables
Check that your Firebase project has Firestore and Storage enabled
Ensure your Firebase rules allow read access

// Firestore Rules (for development)
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /projects/{project} {
      allow read: if true;
    }
  }
}

Node Version Issues

If you encounter errors related to Node.js version:

# Check your Node version
node --version

# Use nvm to switch versions if needed
nvm install 18
nvm use 18

The project requires Node.js 16.x or higher. Some dependencies may not work with older versions.

Next Steps

Customize Content

Learn how to personalize the portfolio with your own information

Firebase Setup

Set up Firestore database and add your projects

Internationalization

Understand the translation system and add more languages

Components Guide

Deep dive into the React component architecture

Need Help?

If you run into issues:

Check the GitHub repository for updates
Review the Vite documentation for build tool questions
Consult React docs for React-specific help
Visit Firebase docs for database and storage issues

Get Started

Architecture

Components

Development

Customization

Get Up and Running

Create a Firebase Project

Get Your Firebase Credentials

Create Environment File

Environment Variables in Code

Main Sections

Language Switching

Component Structure

Build for Production

Vercel

Netlify

Firebase Hosting

GitHub Pages

Available Scripts

Troubleshooting

Port Already in Use

Firebase Connection Issues

Node Version Issues

Next Steps

Customize Content

Firebase Setup

Internationalization

Components Guide

Need Help?

Build docs developers (and LLMs) love

Get Started

Architecture

Components

Development

Customization

​Get Up and Running

​Create a Firebase Project

​Get Your Firebase Credentials

​Create Environment File

​Environment Variables in Code

​Main Sections

​Language Switching

​Component Structure

​Build for Production

Vercel

Netlify

Firebase Hosting

GitHub Pages

​Available Scripts

​Troubleshooting

​Port Already in Use

​Firebase Connection Issues

​Node Version Issues

​Next Steps

Customize Content

Firebase Setup

Internationalization

Components Guide

​Need Help?

Build docs developers (and LLMs) love

Get Up and Running

Create a Firebase Project

Get Your Firebase Credentials

Create Environment File

Environment Variables in Code

Main Sections

Language Switching

Component Structure

Build for Production

Available Scripts

Troubleshooting

Port Already in Use

Firebase Connection Issues

Node Version Issues

Next Steps

Need Help?