Skip to main content
Get your portfolio website running locally in just a few minutes. This guide walks you through setup, configuration, and customization.

​
Prerequisites

Before you begin, ensure you have the following installed:

Node.js

Version 18.x or higher recommended

npm or yarn

Package manager for dependencies
Check your Node.js version with node --version

​
Installation

1

Clone the repository

Clone the Psi Lime Portfolio repository to your local machine:
git clone https://github.com/yourusername/psi-lime-portfolio.git
cd psi-lime-portfolio
2

Install dependencies

Install all required packages using npm or yarn:
npm install
This will install all dependencies including:
  • React 19 and React DOM
  • Vite build tool
  • Three.js and React Three Fiber for 3D graphics
  • EmailJS for contact form functionality
  • GSAP for animations
  • TailwindCSS for styling
  • Google reCAPTCHA v2
3

Configure environment variables

Create a .env file in the root directory to store your API keys:
touch .env
Add the following environment variables:
.env
# Google reCAPTCHA Site Key
VITE_SITE_KEY=your_recaptcha_site_key_here
Never commit your .env file to version control. Add it to .gitignore to keep your API keys secure.

​
Getting API Keys

EmailJS Configuration: The contact form uses EmailJS. You’ll need to update the configuration in src/components/Getcontact/Getcontact.jsx:
src/components/Getcontact/Getcontact.jsx
emailjs.sendForm(
  'service_dl7ji3p',  // Replace with your Service ID
  'template_pfbhj3g', // Replace with your Template ID
  form.current,
  'BbaI-yQrHrGFriM_6' // Replace with your Public Key
)
Google reCAPTCHA:
  1. Visit Google reCAPTCHA Admin
  2. Register your site with reCAPTCHA v2
  3. Copy the Site Key to your .env file as VITE_SITE_KEY
4

Start development server

Run the development server:
npm run dev
Your portfolio will be available at http://localhost:5173

​
Customization

Now that your portfolio is running, let’s personalize it with your information.

​
Update Personal Information

Edit src/components/Presentation/Presentation.jsx to update your hero section:
src/components/Presentation/Presentation.jsx
<h1 className="text-3xl md:text-5xl font-bold mb-3">
  Hi, I'm Jeronimo Diaz
</h1>
<h2 className="text-xl md:text-3xl text-[#b5b5b5] mb-5">
  Systems Engineer / React developer
</h2>
<p className="text-base md:text-lg leading-relaxed max-w-[500px] text-[#C7C7C7]">
  Passionate about learning new technologies and building innovative solutions 
  that improve user experience.
</p>
Update location and availability:
src/components/Presentation/Presentation.jsx
<div className="flex items-center gap-2">
  <FaLocationDot className="w-5 h-5 text-white" />
  <p className="text-sm text-[#C7C7C7]">Based in Mosquera</p>
</div>
<div className="flex items-center gap-2">
  <MdOutlineWork className="w-5 h-5 text-white" />
  <p className="text-sm text-[#C7C7C7]">Available now</p>
</div>
Modify your social media links in the same file:
src/components/Presentation/Presentation.jsx
<a href="https://github.com/JDiazRzo" target="_blank" rel="noopener noreferrer">
  <FaGithub className="w-6 h-6 text-white hover:text-[#3A76D9]" />
</a>
<a href="https://www.linkedin.com/in/jeronimo-diaz-rozo-a836b2312/" 
   target="_blank" rel="noopener noreferrer">
  <FaLinkedin className="w-6 h-6 text-white hover:text-[#3A76D9]" />
</a>
<a href="https://www.instagram.com/jdr.ro07/" 
   target="_blank" rel="noopener noreferrer">
  <FaInstagram className="w-6 h-6 text-white hover:text-[#3A76D9]" />
</a>

​
Add Your Projects

Edit src/components/ProjectsSection/Projects.jsx to showcase your work:
src/components/ProjectsSection/Projects.jsx
<SpotlightCard className="w-[320px]" spotlightColor="rgba(0, 229, 255, 0.2)">
  <div className="flex flex-col items-center gap-4 rounded-2xl p-6">
    <img src={Project1} alt="Music Store" className="w-full rounded-xl object-cover" />
    <div className="flex flex-col items-center gap-3 text-center">
      <h2 className="text-xl font-semibold text-white">Music Store</h2>
      <p className="text-[#C7C7C7] text-sm">
        Full stack music instrument store built with React, Tailwind and Supabase. 
        Features product catalog, brand filters, shopping cart and GSAP animations.
      </p>
      <div className="flex gap-3 py-7">
        <a href="https://github.com/JDiazRzo/MusicStore" 
           target="_blank" rel="noopener noreferrer">
          <button>Code</button>
        </a>
        <a href="https://music-store-xi-opal.vercel.app/" 
           target="_blank" rel="noopener noreferrer">
          <button>Preview</button>
        </a>
      </div>
    </div>
  </div>
</SpotlightCard>

​
Update Skills & Technologies

Modify the tech stack icons in src/components/Aboutme/Aboutme.jsx:
src/components/Aboutme/Aboutme.jsx
const icons = [
  {src: "/Icons/css.svg", alt: "css"},
  {src: "/Icons/git.svg", alt: "git"},
  {src: "/Icons/github.svg", alt: "github"},
  {src: "/Icons/html.svg", alt: "html"},
  {src: "/Icons/js.svg", alt: "javascript"},
  {src: "/Icons/mongo.svg", alt: "mongodb"},
  {src: "/Icons/node.svg", alt: "nodejs"},
  {src: "/Icons/postgre.svg", alt: "postgreSQL"},
  {src: "/Icons/python.svg", alt: "python"},
  {src: "/Icons/react.svg", alt: "react"},
  {src: "/Icons/tailwind.svg", alt: "tailwind"},
  {src: "/Icons/tensorfl.svg", alt: "tensorflow"},
];
Place your icon SVG files in the /public/Icons/ directory.

​
Customize Aurora Background

Adjust the animated background colors in src/App.jsx:
src/App.jsx
<Aurora
  colorStops={["#bce8fb","#b39ef5","#b624f9"]}
  blend={1}
  amplitude={1.0}
  speed={1.4}
/>
Modify colorStops to change the gradient colors, adjust speed for animation pace, and tweak amplitude for wave intensity.

​
Building for Production

1

Build the project

Create an optimized production build:
npm run build
This generates a dist folder with your compiled assets.
2

Preview production build

Test the production build locally:
npm run preview
3

Deploy

The portfolio includes a deploy script for GitHub Pages:
npm run deploy
This builds and deploys to the gh-pages branch automatically.

​
Next Steps

Components

Explore the reusable components and how to customize them

Customization

Learn how to customize styles, colors, and content

Deployment

Deploy your portfolio to various hosting platforms

Contact Form Setup

Configure EmailJS and reCAPTCHA for your contact form

​
Available Scripts

CommandDescription
npm run devStart development server with hot reload
npm run buildCreate optimized production build
npm run previewPreview production build locally
npm run lintRun ESLint to check code quality
npm run deployBuild and deploy to GitHub Pages
The development server runs on port 5173 by default. You can access it at http://localhost:5173

Build docs developers (and LLMs) love

Get started for freeTalk to us