Skip to main content

​
Overview

Portfolio Javier Navas is a modern, macOS-inspired portfolio website built with React Router 7. This guide will help you set up the project locally and start the development server.
This portfolio features an interactive desktop environment with draggable windows, a terminal emulator, calendar, photo gallery, and more.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (version 18 or higher)
  • npm, yarn, pnpm, or bun package manager
  • A MongoDB instance (optional, for calendar events)

​
Installation

1

Clone the repository

First, clone the repository to your local machine:
git clone <repository-url>
cd porrtfolioreact
2

Install dependencies

Install the project dependencies using your preferred package manager:
npm install
This will install all required dependencies including:
  • React Router 7 (@react-router/node, @react-router/serve)
  • React 19 and React DOM
  • TailwindCSS 4 for styling
  • react-draggable for window management
  • MongoDB driver (optional)
3

Configure environment variables

Create a .env file in the root directory for optional MongoDB integration:
MONGODB_URI=mongodb://localhost:27017
MONGODB_DB=portafolio
MONGODB_COLLECTION_NFQ=nfq
MongoDB is optional. The application will work without it, but calendar events from the database won’t be displayed.
The MongoDB integration is used to store dynamic calendar events. If you don’t configure MongoDB, the app will use static calendar data from app/textos.ts.
4

Start the development server

Run the development server with hot module replacement (HMR):
npm run dev
The application will be available at http://localhost:5173.
5

Explore the desktop environment

Once the server is running, you’ll see:
  • Interactive Desktop with a macOS-style menu bar and dock
  • Terminal Window that opens automatically with ASCII art welcome screen
  • Desktop Icons for Projects, Experience, Studies, and Photos folders
  • Draggable Windows that can be minimized, maximized, and closed
Try typing help in the terminal to see available commands!

​
What You’ll See

When you first open the application:
  1. Menu Bar (top) - Displays the portfolio owner’s name and system information
  2. Desktop Area - Contains folder icons on the left side
  3. Terminal Window - Opens automatically with ASCII art banner: 
         ██╗ █████╗ ██╗   ██╗██╗███████╗██████╗
     ██║██╔══██╗██║   ██║██║██╔════╝██╔══██╗
     ██║███████║██║   ██║██║█████╗  ██████╔╝
██   ██║██╔══██║╚██╗ ██╔╝██║██╔══╝  ██╔══██╗
╚█████╔╝██║  ██║ ╚████╔╝ ██║███████╗██║  ██║
 ╚════╝ ╚═╝  ╚═╝  ╚═══╝  ╚═╝╚══════╝╚═╝  ╚═╝
  4. Dock (bottom) - Quick access to all applications

​
Terminal Commands

The terminal supports the following commands:

help

Display all available commands

about

Show information about the portfolio owner

ls / dir

List files in the current directory

cd <folder>

Navigate into a folder (proyectos, trabajos, estudios)

cat <file.txt>

Read a file’s contents

open cv.pdf

Open or download the CV

ping <project>

Get info and URL for a specific project

git init

Display GitHub profile link

clear

Clear the terminal screen

​
Available Scripts

The project includes several npm scripts defined in package.json:

​
Development

npm run dev
Starts the React Router development server with HMR at http://localhost:5173.

​
Build

npm run build
Creates an optimized production build in the build/ directory with:
  • build/client/ - Static assets (JS, CSS, images)
  • build/server/ - Server-side code for SSR

​
Production Server

npm run start
Starts the production server using the built application at http://localhost:3000.

​
Type Checking

npm run typecheck
Runs TypeScript type checking and generates React Router types.

​
Project Structure

Here’s a quick overview of the main files and folders: 
porrtfolioreact/
├── app/
│   ├── routes/
│   │   └── home.tsx              # Main route with Desktop component
│   ├── components/
│   │   ├── Desktop.tsx           # Main desktop environment
│   │   ├── Window.tsx            # Draggable window component
│   │   ├── Terminal.tsx          # Terminal emulator
│   │   ├── Calendar.tsx          # Calendar with events
│   │   ├── PhotoGallery.tsx      # Photo viewer
│   │   ├── MenuBar.tsx           # Top menu bar
│   │   └── Dock.tsx              # Bottom dock
│   ├── textos.ts                 # Content and data (projects, jobs, studies)
│   └── lib/
│       └── mongodb.server.ts     # MongoDB integration
├── public/
│   └── fotos/                    # Photo gallery images
├── package.json
└── react-router.config.ts

​
Next Steps

Explore Features

Learn about all the interactive features and components

Customize Content

Customize the portfolio content for your own use

Deploy

Deploy your portfolio to production

Components

Dive into the component architecture
The portfolio uses React Router 7 with server-side rendering enabled by default. Check react-router.config.ts to configure SSR settings.

​
Troubleshooting

​
Port already in use

If port 5173 is already in use, React Router will automatically try the next available port.

​
MongoDB connection errors

If you see MongoDB connection errors in the console:
  1. Check that your MongoDB instance is running
  2. Verify the MONGODB_URI in your .env file
  3. The app will continue to work with static calendar data

​
Hot Module Replacement not working

If HMR stops working:
  1. Stop the dev server (Ctrl+C)
  2. Clear the .react-router/ cache directory
  3. Restart with npm run dev

​
Getting Help

If you encounter any issues:

Build docs developers (and LLMs) love

Get started for freeTalk to us