Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/iwinser117/react-portafolio/llms.txt

Use this file to discover all available pages before exploring further.

Running Hector Portfolio on your own machine requires only Node.js, npm, and Git. The project uses Webpack DevServer for a fast local development loop with hot reloading, and a single npm run build command produces a fully optimized production bundle ready for deployment.

​
Prerequisites

Before you begin, make sure the following tools are installed:

​
Setup Steps

1

Clone the repository

Download the source code and navigate into the project directory:
git clone https://github.com/iwinser117/react-portafolio.git && cd react-portafolio
2

Install dependencies

Install all Node.js dependencies declared in package.json:
npm install
This will install both dependencies (React, MUI, i18next, EmailJS, etc.) and devDependencies (Webpack, Babel loaders, plugins, etc.).
3

Start the development server

Launch the Webpack DevServer in development mode:
npm run local
This runs webpack server --config webpack.config.dev.js, which compiles the application, starts the dev server with hot reloading enabled, and opens your browser automatically.
4

Open the app in your browser

The dev server listens on port 3007 by default. If your browser didn’t open automatically, navigate to:
http://localhost:3007
You should see the Hector Portfolio home page running locally.

​
NPM Scripts

The package.json defines three scripts for different stages of development and deployment:
ScriptCommandDescription
npm run localwebpack server --config webpack.config.dev.jsStarts Webpack DevServer with hot reloading on port 3007
npm run startwebpack --config webpack.config.dev.jsOne-time build using the development Webpack config (no server)
npm run buildwebpack --mode production --config webpack.config.jsProduction build with minification — outputs to dist/

​
Environment Variable: EmailJS Key

The contact form uses @emailjs/browser to send messages. It reads the service key from the Email_key environment variable, which is injected at build time via Webpack’s DefinePlugin.
Create a .env file in the project root before starting the dev server or running a build:
Email_key=your_emailjs_service_key_here
You can obtain your service key from the EmailJS dashboard. Without this variable, the contact form will not be able to send emails.

​
Production Build

To generate a deployment-ready bundle, run: 
npm run build
Webpack compiles the application in production mode using webpack.config.js, applying the following optimizations:
  • CSS extraction and minification via MiniCssExtractPlugin and CssMinimizerWebpackPlugin
  • JavaScript minification via TerserWebpackPlugin
  • Clean output directory via CleanWebpackPlugin
  • Static assets copied to dist/assets/
The final output lands in the dist/ directory at the project root.

​
SPA Routing on Netlify

The public/_redirects file ships with the following rule: 
/*    /index.html  200
This rule tells Netlify to serve index.html for every route request, which is required for React Router’s client-side routing to work correctly after a hard refresh or a direct URL navigation to a deep link such as /blog/my-post.

Build docs developers (and LLMs) love

Get started for freeTalk to us