My Portfolio

View Demo

🧱 Built With

⚙️ Prerequisites

Make sure you have the following installed on your development machine:

• Node.js (version 18.16.0 or above)
• pnpm (package manager)

🚀 Getting Started

Follow these steps to initialize the application:

Project Setup

Install dependencies.

pnpm i

Compile and Hot-Reload for Development

Starts the development server.

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Compile and Minify for Production

Builds the production-ready code.

pnpm build

Analyze Code

Runs ESLint to analyze and lint the code.

pnpm lint

Start Preview Mode

Starts the Vite development server in preview mode.

pnpm preview

📂 Project Structure

The project structure follows a standard React application layout:

my-portfolio/
  ├── node_modules/               # Project dependencies
  ├── public/                     # Public assets
  ├── src/                        # Application source code
  │   ├── components/             # React components
  │   │   ├── global-components/  # Components used globally
  │   │   ├── icons/              # SVG icons
  │   │   │   ├── social/         # Social media icons
  │   │   │   └── technologies/   # Technologies icons
  │   │   ├── introduction/       # Components for the introduction section
  │   │   ├── navbar/             # Components for the navigation bar
  │   │   ├── projects/           # Components for the projects section
  │   │   └── skills/             # Components for the skills section
  │   ├── styles/                 # CSS stylesheets
  │   ├── interfaces/             # TypeScript interfaces and types
  │   ├── services/               # Service modules (e.g., API calls)
  │   ├── locale/                 # Localization files
  │   ├── i18n.ts                 # i18n configuration
  │   ├── App.tsx                 # Application entry point
  │   ├── main.tsx                # Main rendering file
  │   └── vite-env.d.ts
  ├── index.html                  # HTML entry point
  ├── package.json                # Node.js package configuration
  ├── pnpm-lock.yaml              # Lock file for the pnpm package manager
  ├── postcss.config.js           # PostCSS configuration
  ├── tailwind.config.js          # Tailwind configuration
  ├── tsconfig.json               # TypeScript configuration
  ├── tsconfig.node.json          # TypeScript configuration for Node.js
  └── vite.config.ts              # Vite configuration

✍🏼 Contact

Roberto Chavarria V. - [email protected] Project Link: https://github.com/rchavarria77/my-portfolio

ℹ️ Acknowledgments

• React 18 - A JavaScript library for building user interfaces
• Vite 5 - Next Generation Frontend Tooling
• TypeScript - Why not?!
• EsLint - Pluggable JavaScript linter
• Prettier - Opinionated Code Formatter
• Zod - Used to create form schemas
• React Hook Form - Used for form validations
• Husky - Native Git hooks
• i18next - An internationalization-framework
• EmailJS - Send email directly from code