Skip to main content

​
Overview

Customizing the content of your portfolio involves updating text, links, and personal information across various components. This guide shows you exactly where to make these changes.

​
Hero Section

The Hero section is the first thing visitors see. It’s defined in src/components/Hero/Hero.jsx.

​
Personal Information

1

Open Hero Component

Navigate to src/components/Hero/Hero.jsx
2

Update Role and Location

Modify the tagline section:
Hero.jsx
<div className={styles.tagline}>
  <p className={styles.role}>Full Stack Engineer</p>
  <p className={styles.location}>BASED IN ESTELI, NICARAGUA</p>
</div>
Change to your role and location:
<div className={styles.tagline}>
  <p className={styles.role}>Frontend Developer</p>
  <p className={styles.location}>BASED IN SAN FRANCISCO, CA</p>
</div>
3

Update Headline

Modify the main headline:
Hero.jsx
<h1 className={styles.headline}>
  BUILDING <br />
  <span className={styles.outlineWord}>ROBUST</span> <br />
  SYSTEMS.
</h1>
4

Update Description

Change the description box content:
Hero.jsx
<div className={styles.descBox}>
  <p>
    I craft high-performance digital experiences with brutal
    efficiency. Specializing in scalable architecture, clean code,
    and user-centric interfaces.
  </p>
</div>

​
Profile Image

Update your profile photo:
Hero.jsx
<img
  src="/GustavoPeralta.webp"
  alt="Stylized developer portrait with tech aesthetic"
  className={styles.photo}
  fetchpriority="high"
  loading="eager"
/>
Place your image in the public/ folder and reference it with a leading slash. For example, /public/profile.webp becomes src="/profile.webp"

​
Developer Tag

Update the developer name tag:
Hero.jsx
<div className={styles.devTag}>&lt;GUSTAVO PERALTA /&gt;</div>
Change to your name: 
<div className={styles.devTag}>&lt;YOUR NAME /&gt;</div>

​
Hero CTAs

Update the call-to-action buttons in the Hero section:
Hero.jsx
<div className={styles.ctas}>
  <a href="#projects" className={styles.btnPrimary}>
    VIEW PROJECTS
    <span className="material-icons">arrow_downward</span>
  </a>
  <a 
    href="https://github.com/xItzHypeR" 
    target="_blank" 
    rel="noopener noreferrer" 
    className={styles.btnSecondary}
  >
    GITHUB
    <span className="material-icons">code</span>
  </a>
</div>
Always include target="_blank" and rel="noopener noreferrer" for external links to improve security and performance.
Update social links in src/components/Contact/Contact.jsx:
Contact.jsx
<div className={styles.links}>
  <a 
    target="_blank" 
    href="https://www.linkedin.com/in/gustavo-peralta-54a598249/" 
    className={`${styles.socialBtn} ${styles.socialBtnLight}`}
  >
    LINKEDIN
  </a>
  <a 
    target="_blank" 
    href="https://www.instagram.com/ItzHypeR.dev/" 
    className={styles.socialBtn}
  >
    INSTAGRAM
  </a>
</div>
Replace with your social media URLs: 
<div className={styles.links}>
  <a 
    target="_blank" 
    href="https://www.linkedin.com/in/your-profile" 
    className={`${styles.socialBtn} ${styles.socialBtnLight}`}
  >
    LINKEDIN
  </a>
  <a 
    target="_blank" 
    href="https://twitter.com/your-handle" 
    className={styles.socialBtn}
  >
    TWITTER
  </a>
</div>

​
CV/Resume Download

The resume download link is in the Navbar component at src/components/Navbar/Navbar.jsx:
Navbar.jsx
<a download href="/CV_Gustavo_Peralta.pdf" className={styles.outlineBtn}>
  DOWNLOAD RESUME
</a>
1

Add Your Resume

Place your PDF resume in the public/ folder. For example: public/Resume_John_Doe.pdf
2

Update the Link

Change the href attribute:
<a download href="/Resume_John_Doe.pdf" className={styles.outlineBtn}>
  DOWNLOAD RESUME
</a>

​
About Section

Update the About section in src/components/About/About.jsx.

​
Headline and Body Text

About.jsx
<h2 className={styles.headline}>
  PURE <br />CODE. <br />NO FLUFF.
</h2>
<p className={styles.body}>
  I don't just write code; I engineer solutions. My approach is
  rooted in mathematical precision and creative problem-solving. I
  believe in software that is fast, reliable, and accessible.
</p>
Customize to reflect your philosophy: 
<h2 className={styles.headline}>
  CREATIVE <br />DEVELOPER. <br />CLEAN CODE.
</h2>
<p className={styles.body}>
  I'm passionate about creating beautiful, performant web experiences.
  My focus is on modern frameworks, responsive design, and writing
  maintainable code that scales.
</p>

​
Skills List

The skills are defined as an array at the top of the file:
About.jsx
const skills = [
  'Java', 'C#', 'JavaScript (ES6+)', 'SQL',
  'React.js', 'Vite', 'Tailwind CSS', 'HTML5', 'CSS3',
  'Git', 'GitHub', 'VS Code', 'MySQL Workbench'
];
1

Update Skills Array

Replace with your tech stack:
const skills = [
  'React', 'TypeScript', 'Next.js', 'Node.js',
  'GraphQL', 'PostgreSQL', 'Docker', 'AWS',
  'Tailwind CSS', 'Jest', 'Cypress', 'Figma'
];
2

Component Auto-Updates

The component automatically renders these skills:
<ul className={styles.skillsList}>
  {skills.map((s) => (
    <li key={s} className={styles.skillItem}>
      <span className={styles.dot} />
      {s}
    </li>
  ))}
</ul>
The skills list uses a two-column grid layout automatically. Add or remove skills freely without worrying about layout.

​
About Section Image

Update the image URL:
About.jsx
<img
  src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=800&auto=format&fit=crop"
  alt="Minimalist laptop setup on a wooden desk"
  className={styles.photo}
/>
Replace with your own image: 
<img
  src="/workspace-photo.jpg"
  alt="My development workspace"
  className={styles.photo}
/>

​
Contact Section

Update the contact section heading and subtitle in src/components/Contact/Contact.jsx:
Contact.jsx
<h2 className={styles.title}>READY TO SCALE?</h2>
<p className={styles.subtitle}>
  Currently available for freelance projects and open to full-time
  opportunities. Let&apos;s build something that breaks the internet
  (in a good way).
</p>
Customize the messaging: 
<h2 className={styles.title}>LET'S WORK TOGETHER</h2>
<p className={styles.subtitle}>
  I'm available for freelance projects and collaborations.
  Reach out to discuss how we can build something amazing.
</p>
Update the site logo/title in src/components/Navbar/Navbar.jsx:
Navbar.jsx
<a href="#hero" className={styles.logo}>ITZHYPER.PORTFOLIO</a>
Change to your branding: 
<a href="#hero" className={styles.logo}>JOHN.DEV</a>

​
Meta Tags & SEO

Update meta information in index.html:
index.html
<meta name="description" content="ItzHyper's Full stack developer portfolio" />
<meta property="og:title" content="ItzHypeR | Full Stack Developer" />
<meta property="og:description" content="ItzHyper's Full stack developer portfolio" />
<meta property="og:image" content="https://portfolio-theta-amber-81.vercel.app/GustavoPeralta.webp" />
<title>Gustavo Peralta | Full Stack Developer</title>
1

Update Title

<title>Your Name | Your Role</title>
2

Update Meta Description

<meta name="description" content="Your professional description for search engines" />
3

Update Open Graph Tags

These control how your site appears when shared on social media:
<meta property="og:title" content="Your Name | Your Role" />
<meta property="og:description" content="Your portfolio description" />
<meta property="og:image" content="https://yoursite.com/preview-image.jpg" />
The Open Graph image should be an absolute URL (starting with https://) and ideally 1200x630 pixels for optimal display on social platforms.

​
Quick Reference Table

ContentFile LocationLine Reference
Hero headlinesrc/components/Hero/Hero.jsxLines 14-18
Hero descriptionsrc/components/Hero/Hero.jsxLines 20-26
Hero imagesrc/components/Hero/Hero.jsxLines 46-52
GitHub linksrc/components/Hero/Hero.jsxLines 33-36
Skills listsrc/components/About/About.jsxLines 3-7
About textsrc/components/About/About.jsxLines 16-23
Social linkssrc/components/Contact/Contact.jsxLines 71-74
Resume downloadsrc/components/Navbar/Navbar.jsxLine 15
Site titleindex.htmlLine 17

​
Next Steps

Projects Data

Learn how to add and customize your portfolio projects

Contact Form Setup

Configure EmailJS for the contact form

Build docs developers (and LLMs) love

Get started for freeTalk to us