# Dhanushkodi Portfolio Responsive single-page HTML/CSS portfolio for beginner developer Dhanushkodi Adhithan from Chennai. ## Masterplan - Present Dhanushkodi Adhithan as a beginner front-end developer with a clean, professional first portfolio. - Target users are recruiters, mentors, internship reviewers, and potential beginner-friendly project collaborators. - Provide all essential portfolio sections in one fast-loading page: Home, About, Skills, Education, Projects, Certifications, and Contact. - Keep the implementation beginner-editable: only `index.html` and `styles.css`, no JavaScript, no build step, no backend. - Prioritize semantic HTML, accessibility, mobile-first responsiveness, and easy content replacement. ## Tech Stack & Architecture - **Frontend:** Plain HTML5 and CSS3. - **JavaScript:** None. Interactivity is CSS-only. - **Backend/API:** None. The contact form uses a `mailto:` fallback and does not persist or send data through a server. - **Dependencies/CDNs:** None. Fonts use the system stack defined in `styles.css`; no external font import. - **Architecture:** Static single-page site. - `index.html` contains all page content, semantic landmarks, navigation anchors, and form markup. - `styles.css` contains design tokens, reset styles, layout utilities, navigation behavior, responsive rules, and component styling. - **Navigation pattern:** Fixed top header with anchor links to page sections. Smooth scrolling is handled by CSS via `html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }`. - **Mobile menu pattern:** CSS checkbox hack: - Hidden checkbox: `.nav-toggle` - Visible hamburger label: `.nav-toggle-label` - Menu reveal selector: `.nav-toggle:checked ~ .nav-menu` - **State management:** No app state. The only UI state is the checked/unchecked navigation checkbox controlled by the browser. - **Styling pattern:** CSS custom properties in `:root` use HSL triplets, consumed as `hsl(var(--primary))`, `hsl(var(--background))`, etc. ## File Structure ```text / ├── index.html # Single-page portfolio content, semantic sections, fixed nav, mailto contact form └── styles.css # Mobile-first responsive styling, CSS variables, hamburger nav, cards, grids, skill bars ``` ## Key Features ### Fixed Header and CSS-Only Navigation - `index.html` uses `

` and `

`. - Brand link points to `#home` and includes `.brand-mark` with initials `DA`. - Navigation links map directly to section IDs: - `#home` - `#about` - `#skills` - `#education` - `#projects` - `#certifications` - `#contact` - Mobile nav is controlled by: - `` - `` - `

`. - Each major section uses `aria-labelledby` with a matching heading ID. - Photo placeholder uses `role="img"` and an accessible label. - Navigation has `aria-label="Primary navigation"`. - Focus styles are defined for skip link and navigation controls. - Anchor scrolling accounts for fixed header using `scroll-padding-top`. ### Home Section - Implemented as `

`. - Contains: - Eyebrow text: “Beginner Web Developer” - Main heading: “Hi, I’m Dhanushkodi Adhithan.” - Short tagline about learning HTML, CSS, and modern tools - CTA button `.button.button-primary` linking to `#contact` - Summary card `.hero-card` with Chennai, Tamil Nadu location ### About Section - Implemented as `

`. - Uses `.two-column` layout. - Contains a 3–4 sentence beginner developer bio. - Includes location line: Chennai, Tamil Nadu. - Includes photo placeholder: - `

` - `

` - Initials `DA` - To replace with a real photo, update the placeholder area in `index.html` and add image styling in `styles.css` if needed. ### Skills Section - Implemented as `

`. - Uses `.skills-grid` and reusable `.card` components. - Skill groups: - Front-end: HTML, CSS - Tools: VS Code, Git - Skill bars are CSS-only: - `.skill-bar` - `.skill-fill` - Width utility classes such as `.width-70`, `.width-55`, `.width-45` - Current example levels: - HTML: Intermediate, 70% - CSS: Beginner, 55% - VS Code: Intermediate, 70% - Git: Beginner, 45% - Gotcha: skill bar values are not data-driven; update both visible text and width class when changing a skill. ### Education Section - Implemented as `

`. - Uses `.timeline` and `.timeline-item` articles. - Content model for each item: - Institution - Degree/course - Years - Designed for simple replacement with real education history. ### Projects Section - Implemented as a portfolio card grid. - Contains two example project cards. - Each project card should include: - Title - Short description - Technologies used - Placeholder links for live/demo and code - Links are expected to be replaced with actual URLs. - Gotcha: placeholder `href="#"` links should not be left in a production portfolio. ### Certifications Section - Implemented as a list of certificates. - Content model: - Certificate title - Issuer - Year - Intended for quick replacement as Dhanushkodi earns real certifications. ### Contact Section - Contains direct contact details: - Email link - Phone placeholder - Includes a simple form with fields: - Name - Email - Message - No backend exists. Form is expected to use `mailto:` fallback. - Gotcha: `mailto:` behavior depends on the visitor’s local email client and may not work consistently in all browsers/devices. ## Design Guidelines - **Palette:** Blue, white, and black/dark navy. - Primary accent: `--primary: 221 83% 53%` - Background: `--background: 0 0% 100%` - Foreground: `--foreground: 222 47% 11%` - Muted sections: `--muted: 210 40% 96%` - **Color implementation:** Use existing HSL CSS variables, e.g. `hsl(var(--primary))`; do not replace with mixed hex values unless refactoring consistently. - **Typography:** System UI stack: - `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` - Note: `Inter` is listed but not imported; browsers will use it only if locally installed. - **Layout:** Mobile-first. - `.container` caps width at `72rem`. - Sections use generous vertical padding via `.section`. - Grids such as `.hero-grid`, `.two-column`, and `.skills-grid` become wider layouts at responsive breakpoints. - **Visual style:** Clean modern cards, rounded corners from `--radius`, subtle shadows, blue accent highlights, white/muted backgrounds. - **Header:** Fixed, semi-transparent white with blur: - `.site-header` - `backdrop-filter: blur(16px)` - **Buttons:** Use `.button` base class plus variants such as `.button-primary`. - **Responsive behavior:** Mobile hamburger appears first; desktop layout should show full nav via media queries in `styles.css`. ## App Flow 1. User lands on `#home`. 2. Fixed header remains visible while scrolling. 3. User can navigate to each portfolio section using anchor links. 4. “Contact Me” CTA scrolls to `#contact`. 5. User reviews bio, skill levels, education, projects, and certifications. 6. User contacts Dhanushkodi through: - Email link - Phone placeholder - Contact form using `mailto:` ### Edge Cases - Fixed header can cover anchor targets if `scroll-padding-top` is removed or header height changes without updating it. - CSS-only hamburger remains checked until toggled again or page reloads. - Form submission depends on mail client support; there is no validation beyond native HTML attributes. - Placeholder links, phone number, education, projects, and certificates must be replaced before public use. ## Conventions - Keep all content in `index.html`; keep all presentation in `styles.css`. - Use semantic section structure: - `

` - `