# Bluefolio Starter A clean beginner-friendly personal portfolio website built with only `index.html` and `style.css`. ## Masterplan - Provide a simple, professional portfolio template for beginner web developers. - Help users present profile, skills, education, projects, certificates, and contact information in one responsive page. - Keep the code easy to read and customize: no JavaScript, no build tools, no external dependencies. - Use a blue, white, and black visual theme with reusable cards, grids, and section styles. - Prioritize semantic HTML, accessible navigation, smooth anchor scrolling, and mobile-friendly layout. ## Tech Stack & Architecture - **HTML:** `index.html` contains the full single-page portfolio. - **CSS:** `style.css` contains all layout, theme, responsive, and interaction styles. - **No JavaScript:** all navigation is handled through anchor links such as `href="#skills"`. - **No backend / API:** this is a static site only. - **No external CDNs or frameworks:** uses system fonts via `Arial, Helvetica, sans-serif`. - **State management:** none. Visual interaction is limited to CSS hover/focus/active states. - **Architecture pattern:** one-page section-based layout: - Sticky header navigation links to page sections by `id`. - Shared `.container`, `.section`, `.section-light`, `.card`, `.btn`, and grid classes provide reusable styling. - Theme values are centralized in `:root` CSS variables using HSL triplets, e.g. `--primary: 221 83% 53%;`. - **Important gotcha:** skill progress widths are currently inline styles in `index.html`, e.g. ``. Update those inline values when changing skill levels. ## File Structure ```text . ├── index.html # Single-page portfolio markup: header, Home, About, Skills, Education, Projects, Certificate, Contact └── style.css # Full styling: CSS variables, layout utilities, cards, grids, timeline, responsive rules ``` ## Key Features ### Sticky Header Navigation - Implemented in `index.html` with: - `

` - `

` - `.logo` - `.nav-links` - Links point to section IDs: - `#home` - `#about` - `#skills` - `#education` - `#projects` - `#certificate` - `#contact` - `style.css` uses: - `position: sticky` - `top: 0` - `z-index: 10` - translucent white background with `backdrop-filter: blur(10px)` - Smooth scrolling is enabled globally with: ```css html { scroll-behavior: smooth; } ``` ### Home / Hero Section - Section ID: `home` - Classes: `.hero`, `.section`, `.hero-content` - Includes: - eyebrow text: “Welcome to my portfolio” - main heading: “Hello, I'm Your Name” - beginner-focused intro paragraph - CTA button linking to `#projects` - Visual treatment: - large minimum height - blue radial gradient - light background gradient - responsive heading with `clamp(40px, 8vw, 72px)` ### About Section - Section ID: `about` - Uses `.two-column` layout: - left side: eyebrow and heading - right side: `.card.soft-card` with beginner bio text - Designed for easy editing by replacing placeholder text only. ### Skills Section - Section ID: `skills` - Uses `.section-light`. - Grid class: `.skills-grid` - Skill cards use: - `.card` - `.skill-card` - `tabindex="0"` for keyboard focus styling - Current skills: - HTML — 85% - CSS — 75% - JavaScript Basics — 55% - Responsive Design — 70% - Progress bars use: ```html

``` - Update the inline `width` value to change the progress amount. ### Education Section - Section ID: `education` - Uses `.timeline` and `.timeline-item`. - Each timeline item includes: - `.timeline-dot` - `.card` - Current entries: - Bachelor's Degree / Diploma - Higher Secondary Education - Web Development Learning - Intended for replacing placeholders like “Your College or University Name” and “Your School Name”. ### Projects Section - Section ID: `projects` - Uses `.section-light`. - Grid class: `.projects-grid` - Project cards use `.card.project-card`. - Expected content pattern: - project title - short description - button/link using `.btn.btn-small` - Current first project: - Personal Portfolio - link points to `#home` - Original requirements call for 2–4 beginner projects. Maintain that range unless intentionally redesigning. ### Certificate Section - Section ID: `certificate` - Navigation label is singular: `Certificate`. - Grid class in CSS: `.certificate-grid` - Card class in CSS: `.certificate-card` - Intended to display certificates as simple cards with titles and short metadata/descriptions. - If changing the section ID, also update the header nav link `href="#certificate"`. ### Contact Section - Section ID: `contact` - Grid class in CSS: `.contact-grid` - Expected contact placeholders: - email - phone - LinkedIn - GitHub - CSS includes focus styling for `.contact-card a:focus-visible`, so contact links should be actual `` elements when possible: - `mailto:your.email@example.com` - `tel:+1234567890` - LinkedIn profile URL - GitHub profile URL ### Accessibility - Main nav uses `aria-label="Main navigation"`. - Skill progress wrappers have `aria-label`. - Interactive cards in Skills use `tabindex="0"` so hover/focus visual styles are available by keyboard. - Focus-visible styles are defined for: - nav links - `.btn` - `.card` - `.contact-card a` - Keep heading order logical: - one `h1` in Home - `h2` for major sections - `h3` for cards/items ## Design Guidelines ### Visual Style - Clean, modern, beginner-friendly portfolio. - Color theme: - white background - blue primary accents - dark black/navy text - light blue-gray section backgrounds - Primary color comes from: ```css --primary: 221 83% 53%; ``` - Main text color comes from: ```css --foreground: 222 47% 11%; ``` - Light section color comes from: ```css --secondary: 210 40% 96%; ``` ### Typography - Uses system font stack: ```css font-family: Arial, Helvetica, sans-serif; ``` - Headings use tight line height and negative letter spacing: ```css h1, h2, h3 { line-height: 1.2; letter-spacing: -0.03em; } ``` - `h1` and `h2` use `clamp()` for responsive scaling. ### Layout - Main content width is controlled by `.container`: ```css width: min(1120px, calc(100% - 32px)); ``` - Most sections use: ```css .section { padding: 80px 0; } ``` - Reusable card styling is centralized in `.card`. - Reusable button styling is centralized in `.btn` and `.btn-small`. ### Responsive Behavior - Grids are desktop-first: - `.skills-grid` - `.projects-grid` - `.certificate-grid` - `.contact-grid` - Base grid uses `repeat(4, 1fr)`. - When modifying responsive rules, ensure cards collapse cleanly on tablets and mobile. - Header nav uses `flex-wrap: wrap`; this avoids overflow but can make the sticky header taller on small screens. - Since there is no JavaScript, there is no hamburger menu. Keep nav labels short enough to wrap neatly. ### Interactions - Cards lift slightly on hover: ```css .card:hover { transform: translateY(-2px); } ``` - Buttons lift on hover and scale slightly on active press. - Disabled button style exists using: ```css .btn[aria-disabled="true"], .btn.disabled ``` Use this for placeholder project links if no real URL is available. ## App Flow ### Primary Journey 1. User lands on `#home`. 2. User reads name and intro. 3. User clicks “View My Projects” CTA. 4. Page scrolls smoothly to `#projects`. 5. User can inspect beginner project cards. 6. User navigates to `#contact` using the sticky header to find email, phone, LinkedIn, and GitHub. ### Editing Journey 1. Open `index.html`. 2. Replace: - “Your Name” - education placeholders - project titles/descriptions/links - certificate details - contact placeholders 3. Open `style.css` only if changing colors, spacing, layout, or responsiveness. 4. Test by opening `index.html` directly in a browser. ### Navigation Edge Cases - If a section ID changes, update both: - the section `id` - the matching nav link `href` - Sticky header may cover the top of an anchor target slightly on some viewport sizes. If this becomes noticeable, add `scroll-margin-top` to `.section`. - Long nav text can wrap because `.nav-links` uses `flex-wrap: wrap`; avoid adding many more top-level nav items without redesigning mobile navigation. ### Content Edge Cases - Project links currently may point to internal anchors such as `#home`. Replace with real URLs when available. - For unavailable project/certificate links, prefer: ```html Coming Soon ``` - Avoid adding JavaScript-dependent features unless the project scope changes. ## Conventions ### HTML Conventions - Keep the section order exactly: 1. `home` 2. `about` 3. `skills` 4. `education` 5. `projects` 6. `certificate` 7. `contact` - Use semantic elements: - `

` - `

` - Use `.container` inside every major section. - Use `.section-heading` for centered section titles. - Use `.eyebrow` for small uppercase section labels. - Use `.card` for any boxed content. - Use `.btn` for primary links/buttons and `.btn-small` for card-level CTAs. ### CSS Conventions - Prefer existing CSS variables in `:root` instead of hard-coded colors. - Use HSL variable syntax consistently: ```css color: hsl(var(--primary)); background: hsl(var(--secondary)); ``` - Reuse existing classes before adding new ones. - Keep all styles in `style.css`; do not add inline styles except current progress bar widths unless necessary. - New repeated layouts should use CSS Grid and follow the existing grid/card pattern. ### Adding a New Project Card Add inside the `.projects-grid` in `index.html`: ```html

Project Title

Short beginner-friendly project description.

View Project

``` ### Adding a New Skill Add inside `.skills-grid`: ```html

Skill Name

Short description of what this skill is used for.

``` ### Adding a New Section 1. Add a new `

` in `index.html`. 2. Add a matching nav item in `.nav-links`. 3. Use `.container`, `.section-heading`, `.card`, and existing grid utilities where possible. 4. Add only section-specific CSS to `style.css` if existing utilities are not enough. 5. Verify mobile layout because there is no JavaScript menu. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.