Worlando26/worlando26.github.io

SKILL.md — Personal Portfolio & Resume Website

Goal

Build a single-page, dark-theme personal portfolio / online CV for a creative professional, matching the reference design: a cinematic hero, an "About" split section, a 3-column "Resume" section, and a "Portfolio" gallery. Sober, premium, high-contrast, with a single cyan accent.

The site is 100% data-driven: every piece of text, every skill level, every image path lives in js/config.js. Editing content must never require touching HTML or CSS.

---

Tech stack (HARD RULES)

• Vanilla HTML5 + CSS3 + JavaScript only. No npm, no bundler, no framework, no build step.
• CDN-only for any external library. Allowed:
  • Google Fonts → Montserrat (weights 300, 400, 500, 600, 700, 800, 900)
  • Font Awesome 6 (free CDN) for all icons (nav, social, software badges, hobbies)
  • GSAP 3 + ScrollTrigger (CDN) for scroll animations
• All content lives in js/config.js as a single CONFIG object.
• Site must open by just double-clicking index.html (no server required), and also work fine when hosted as an addon domain on cPanel.

---

Content sources (READ THESE FIRST)

Before generating anything, Claude Code must:

1. Read README.md at the project root. It contains the owner's real personal info: full name, job title, tagline, bio, email, phone, address/city, social links, software skills + levels, languages + levels, personal skills, work experience (year ranges + company + role), education, "What I can do" services, design skills, and hobbies. Populate js/config.js entirely from this README. If a field is missing in the README, leave a clearly-marked "" placeholder in config.js (never invent fake data).

2. Scan the project for images (root and/or assets/img/):

   • The portrait photo → used in the About section and as the hero name block backdrop reference.
   • The hero/desk background image → used as the Home background.
   • All remaining project images → used as the Portfolio grid. Map whatever filenames exist into config.js. Do not hardcode paths in the HTML.

---

File structure

portfolio/
├── README.md            # owner info (content source) — provided by the user
├── SKILL.md             # this file
├── index.html
├── css/
│   └── style.css
├── js/
│   ├── config.js        # ALL editable content lives here
│   └── main.js          # nav, smooth scroll, GSAP animations, progress-bar fill
└── assets/
    └── img/
        ├── profile.jpg          # portrait (About)
        ├── hero-bg.jpg          # hero background
        └── portfolio/           # project images (gallery)

---

Design system

Colors (CSS variables, defined on :root)

--bg-hero:        #0A0A0C;   /* near-black, hero base behind the photo */
--bg-about:       #0B0B0E;   /* About section, almost pure black */
--bg-resume:      #11141F;   /* Resume section, dark navy-charcoal */
--bg-resume-grad: linear-gradient(160deg, #141826 0%, #0E111B 100%);
--accent:         #2EA9E0;   /* the single cyan-blue accent */
--accent-soft:    rgba(46,169,224,0.18);
--text-primary:   #FFFFFF;   /* headings, name */
--text-secondary: #C2C6CE;   /* body copy */
--text-muted:     #8A8F99;   /* sub-labels, captions */
--line:           rgba(255,255,255,0.12); /* progress tracks, dividers */
--overlay:        linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.7) 100%);

The accent is used ONLY for: active nav link, heading underlines, timeline dots, progress-bar fill + marker dots, and link hover. Keep it scarce.

Typography

• Font family: Montserrat everywhere.
• Name (hero): two lines — first name font-weight:300 + uppercase, last name font-weight:900 uppercase, ~clamp(48px, 7vw, 84px), tight line-height.
• Job title under the name: font-weight:400, uppercase, letter-spacing:0.45em, --text-muted, ~14px.
• Section titles (ABOUT, SOFTWARE SKILLS, etc.): font-weight:800, uppercase, ~18–26px, white, with a short cyan underline (≈48px wide, 3px tall, accent color, sitting just under the text).
• Body: font-weight:400, 15px, --text-secondary, line-height 1.7.

Spacing & layout

• Each main section (Home, About, Resume) is full-viewport-height on desktop (min-height:100vh), stacked vertically, scroll-snapped is optional.
• Content max-width ~1240px, centered, generous side padding (clamp 24px–80px).
• A small fullscreen / expand icon sits in the bottom-right corner of each section (decorative; fa-expand), matching the reference.

---

Sections

1. Top navigation (fixed / per-section)

• Left: links Home · About · Resume · Portfolio (font-weight:500, white). Active link = --accent. Smooth-scroll to the matching section.
• Right: phone icon (fa-phone) + phone number from config, white, ~13px.
• Transparent background over the hero; subtle dark bar over other sections.
• Collapses to a hamburger menu under 768px.

2. Home / Hero

• Full-screen background image (config.hero.background) with the --overlay gradient on top for legibility (content reads on the left).
• Left-aligned content block, vertically centered:
  • Name (two-weight treatment described above).
  • Job title (letter-spaced uppercase).
  • Two outlined pill buttons: Resume and Portfolio (1px white border, transparent fill, full-radius, hover → fill --accent, border --accent). Each scrolls to its section.
• Bottom-left: social icon row (Behance, Facebook, LinkedIn, Instagram, Pinterest, Twitter/X, WhatsApp) from config.social — render only the ones that have a URL. White icons, hover → --accent.
• Bottom-right: expand icon.

3. About

• Two-column split: text left, large grayscale portrait right (config.about.photo, apply filter:grayscale(100%), fading into the black background on its left edge via a mask/gradient).
• Left column:
  • ABOUT title + cyan underline.
  • Email line (config.contact.email), --text-muted.
  • Bio paragraph(s) (config.about.bio), --text-secondary.
  • Bottom: location — city line + street line, centered, framed by short dashes/lines on each side (— Florida, Orlando — style) using config.contact.location.

4. Resume (3 columns)

Three equal columns on desktop; stack to 1 column on mobile.

Column A — Skills & languages

• SOFTWARE SKILLS: for each item in config.skills.software, render a row of: square rounded icon badge (1px border, the tool's letters or a Font Awesome brand icon) + label + a horizontal progress track with a filled portion and a cyan marker dot positioned at level% (0–100). Track = --line, fill + dot = --accent.
• LANGUAGES: label + same progress-track treatment (config.skills.languages).
• PERSONAL SKILLS: a single line of comma/dash-joined keywords (config.skills.personal), --text-secondary.

Column B — Experience & education

• EXPERIENCE: a vertical timeline. Each entry = a circular year badge (config.experience[].years, e.g. 2017 till present, accent fill, small white text) connected by a vertical line, next to company name (bold, uppercase) + role beneath (--text-muted). Iterate config.experience.
• EDUCATION: degree (bold) + institution beneath (config.education).

Column C — Services, design skills, hobbies

• WHAT CAN I DO ?: lines of dash-joined services (config.services).
• DESIGN SKILLS: lines of dash-joined strengths (config.designSkills).
• HOBBIES & INTERESTS: a 2-column grid of circular outline icons (1px border circle, Font Awesome icon inside) + caption beneath each (config.hobbies, e.g. Reading, Photography, Drawing, Travel).

5. Portfolio

• A responsive grid gallery (CSS grid, ~3 columns desktop / 2 tablet / 1 mobile, gap:16px) built from config.portfolio[] (each: image path, optional title, optional link).
• Each tile: image cover-fit, dark overlay on hover revealing the title in white + a cyan accent line. Subtle scale-up on hover.
• If config.portfolio is empty, hide the section gracefully.

---

config.js shape (Claude Code: fill this from README + images)

const CONFIG = {
  identity: {
    firstName: "",
    lastName: "",
    title: "",            // e.g. "Full Stack Developer"
  },
  contact: {
    phone: "",
    email: "",
    location: { city: "", street: "" },
  },
  social: {               // omit / leave "" to hide an icon
    behance: "", facebook: "", linkedin: "", instagram: "",
    pinterest: "", twitter: "", whatsapp: "",
  },
  hero: { background: "assets/img/hero-bg.jpg" },
  about: {
    photo: "assets/img/profile.jpg",
    bio: "",
  },
  skills: {
    software: [           // level: 0–100
      { name: "", icon: "Ps", level: 90 },
    ],
    languages: [
      { name: "", level: 90 },
    ],
    personal: "",         // "Creativity - Team Work - Organisation"
  },
  experience: [
    { years: "", company: "", role: "" },
  ],
  education: [
    { degree: "", school: "" },
  ],
  services: [],           // "Logo - Stationery - Branding"
  designSkills: [],       // "Creativity - Planning & Strategy"
  hobbies: [
    { name: "", icon: "fa-book" },   // Font Awesome icon name
  ],
  portfolio: [
    { image: "assets/img/portfolio/p1.jpg", title: "", link: "" },
  ],
};

---

Animations (GSAP + ScrollTrigger)

• Hero: name + buttons fade/slide up on load (staggered).
• Section titles + underlines: reveal on scroll into view.
• Resume progress bars: animate fill + dot from 0 to level% when the column enters the viewport.
• Timeline entries: fade-in staggered as they scroll in.
• Portfolio tiles: subtle fade-up stagger.
• Keep it tasteful — short durations (0.4–0.8s), power2.out easing. Respect prefers-reduced-motion (disable animations, show final state).

---

Responsive

• ≥ 992px: full layout (3-col resume, split about).
• 768–991px: resume → 2 columns, about photo shrinks.
• < 768px: everything stacks to 1 column, nav becomes hamburger, hero text scales down, fixed background → scroll (background-attachment:scroll) to avoid mobile bugs.

---

Definition of done

• index.html opens correctly with a double-click (no server).
• All four nav links smooth-scroll to their sections; active link highlights on scroll.
• Every text/image/skill value comes from config.js (zero hardcoded content in HTML).
• config.js was populated from the project's README.md, with "" placeholders for anything missing (no invented data).
• Portrait + hero + portfolio images are wired from the project's image files.
• Dark theme + single cyan accent matches the reference; Montserrat loaded.
• Fully responsive down to ~360px wide.
• GSAP animations present and prefers-reduced-motion respected.