Eddy Castillo — Enterprise Software Developer Portfolio

A modern, responsive personal portfolio landing page for Eddy Castillo, a Senior Microsoft-stack Software Developer.

Features

• Fully static — no build tools, no dependencies, no server required
• Responsive — desktop, tablet, and mobile layouts
• Sticky header with glass blur effect on scroll
• Smooth scroll navigation with active section highlighting
• Scroll-reveal animations using IntersectionObserver
• Mobile hamburger menu
• Language toggle (EN / ES) — Spanish is ready, expand keys in script.js to complete it
• Contact form that opens the user's default email client via mailto:
• Code card visual in the hero section with floating animation
• No frameworks, no build step, no npm

---

Tech Stack

Layer	Technology
Markup	HTML5 (semantic)
Styles	CSS3 — custom properties, grid, flexbox
Scripting	Vanilla JavaScript (ES6+)
Icons	Font Awesome 6.5 (CDN)
Fonts	Inter + JetBrains Mono (Google Fonts)

---

File Structure

personal-page/
├── index.html    — Full page markup, all sections
├── styles.css    — All styles, variables, responsive breakpoints
├── script.js     — Navigation, animations, language toggle, contact
└── README.md     — This file

---

How to Run Locally

1. Download or clone all four files into a single folder.
2. Open index.html in any modern browser (Chrome, Edge, Firefox, Safari).

That's it — no server, no install, no build step.

Tip: For the best experience during development, use VS Code with the Live Server extension. Right-click index.html → "Open with Live Server".

---

Customization

1. Set your real email address

In script.js, find this line (around line 165) and replace the placeholder:

const recipientEmail = 'your-email@example.com';

Also update the mailto: link in index.html for the direct email social button:

<a href="mailto:your-email@example.com" class="social-link">

2. Update your social profile URLs

In index.html, find the contact section and replace the placeholder URLs:

<!-- LinkedIn -->
<a href="https://linkedin.com/in/YOUR-USERNAME" ...>

<!-- GitHub -->
<a href="https://github.com/YOUR-USERNAME" ...>

3. Change the accent color

All design tokens live in styles.css inside :root. Change --accent to any hex value:

:root {
  --accent:       #3b82f6;   /* Main brand blue */
  --accent-dark:  #2563eb;   /* Hover/pressed state */
  --accent-light: #60a5fa;   /* Light variant, gradients */
  --bg-base:      #09111f;   /* Page background */
}

4. Add Spanish translations

In script.js, the i18n.es object already has full Spanish content. To extend it:

1. Add a key/value pair to i18n.en for any new text you add to the HTML.
2. Add the matching Spanish translation to i18n.es.
3. Add data-i18n="your.key" to the corresponding HTML element.

To add a third language (e.g. French):

const i18n = {
  en: { ... },
  es: { ... },
  fr: {
    'nav.services': 'Services',
    // ... rest of keys
  }
};

Then add a button in the lang-toggle div in index.html:

<button class="lang-btn" data-lang="fr">FR</button>

5. Add a profile photo

To add your photo to the About section, insert an <img> tag inside .about__body in index.html and add matching CSS in styles.css.

---

Browser Support

Works in all modern browsers that support CSS Grid, CSS custom properties, and the IntersectionObserver API:

• Chrome 64+
• Firefox 63+
• Safari 12.1+
• Edge 79+

---

License

Personal use. Feel free to adapt for your own portfolio.