As a frontend developer, implement the AboutSection for the Home page. This section uses `useState(false)` for `isVisible` and an `IntersectionObserver` (threshold 0.12) via `useRef` to trigger a fade-in animation when scrolled into view, applying the `hm-section--visible` class. Render a two-column `hm-about__grid`: a text column with three `<p>` blocks describing Harshita Ramakrishna Moger, followed by a `hm-about__facts` role=list rendering the `facts` array (🐍 Python, 🤖 AI/ML, ⚛️ React, 🔗 Blockchain, ☁️ Cloud) as icon+label chips. Alongside, render a `hm-about__highlights` grid mapping the `highlights` array (4 items: Education, Focus Areas, Drive, Community) each as an icon, label, and value card. Apply `../styles/AboutSection.css` with the `hm-section`, `hm-about` BEM class structure.
As a frontend developer, implement the Navbar for the Home page. Uses `useState` for `scrolled` (window.scrollY > 50 passive scroll listener), `menuOpen` (mobile hamburger toggle with body scroll lock via `document.body.style.overflow`), `isDark` (theme toggle persisted to `document.documentElement` data-theme attribute), and `activeSection` (tracked via per-section `IntersectionObserver` at threshold 0.35 on all `navLinks` hrefs). Renders a `<nav>` with `hm-nav--scrolled` glassmorphism class, logo `<HRM/>` bracket markup, a mobile overlay div, and a `hm-nav__menu` containing a `<ul>` of `navLinks` (About, Skills, Experience, Projects, Contact) each applying `hm-nav__link--active` when activeSection matches, a theme toggle button calling `toggleTheme` (`useCallback`), and a hamburger button toggling `menuOpen`. Note: this component may already exist from a shared layout. Apply `../styles/Navbar.css`.
As a Frontend Developer, set up the global theme and design system for the portfolio. Configure Tailwind CSS with the custom color palette (Primary: #6366F1, Primary Light: #A5B4FC, Secondary: #06B6D4, Accent: #8B5CF6, Highlight: #F59E0B, Background: #0F172A, Surface: rgba(15,23,42,0.8), Text: #FFFFFF, Text Muted: #9CA3AF, Border: rgba(255,255,255,0.2)) in tailwind.config.js. Set up CSS custom properties for dark/light mode switching, global base styles (fonts, scrollbar, body), and a shared tokens file. Configure the data-theme attribute pattern used by the Navbar. Ensure all section CSS files can consume these tokens consistently.
As a Frontend Developer, initialize and configure the Vite + React project with all required dependencies. Set up: (1) Project scaffolding with src/components/, src/pages/, src/sections/, src/assets/, src/hooks/, src/utils/, src/data/, src/styles/ directories; (2) Install and configure Tailwind CSS, Framer Motion, React Icons, React Router; (3) Configure vite.config.ts with path aliases, build optimizations (code splitting, lazy loading), and asset optimization; (4) Set up index.html with SEO meta tags, Open Graph tags, favicon, and font imports (modern typography); (5) Configure ESLint and Prettier; (6) Create environment variable template (.env.example) for EmailJS keys. This is the foundation task all other frontend tasks depend on.
As a frontend developer, implement the AchievementsSection for the Home page. Uses `useState(false)` for `isVisible` and an `IntersectionObserver` (threshold 0.15) via `useRef` to trigger reveal animation via `hm-section--visible`. Renders a `hm-achievements__grid` by mapping the `achievements` array (3 items: Infosys Springboard Python Certification 🏆, Hackathon Participant ⚡, CS Engineering Graduate 📜), each rendered as a `hm-achievements__card` containing `hm-achievements__icon-wrap`, a `hm-achievements__type` badge span, `<h3>` title, issuer span, and description paragraph. Apply `../styles/AchievementsSection.css` with BEM classes.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the CodingProfilesSection for the Home page. Uses `useState(false)` for `isVisible` and an `IntersectionObserver` via `useRef` to trigger reveal animation. Renders the `profiles` array (GitHub, LinkedIn, LeetCode, HackerRank) as cards, each containing an inline SVG icon, platform name, handle, description, and an external link (`target='_blank'`). Each card uses a `color` prop for platform-specific accent theming. Apply `../styles/CodingProfilesSection.css` with BEM classes for the grid and individual card layout.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the ContactSection for the Home page. Uses `useState(false)` for `isVisible`, `useState` for `formData` (name, email, subject, message fields), and `useState('idle')` for `status` ('idle' | 'sending' | 'sent'). An `IntersectionObserver` (threshold 0.08) triggers the reveal class. Renders a `hm-contact__grid` with two columns: (1) `hm-contact__info` role=list mapping `infoCards` (📧 Email, 📍 Location, 💼 Open To) as `hm-contact__info-card` items; (2) a `<form>` with `onSubmit={handleSubmit}`, `noValidate`, containing labelled inputs for name, email, subject, and a textarea for message. `handleSubmit` sets status to 'sending', simulates async send via `setTimeout` (900ms), then sets status to 'sent' and resets formData, reverting to 'idle' after 4000ms. Apply `../styles/ContactSection.css` with `aria-labelledby='contact-title'` on the section.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the ExperienceSection for the Home page. Uses `useState(false)` for `isVisible` and an `IntersectionObserver` (threshold 0.15) via `useRef` for scroll-reveal. Renders a `hm-experience__timeline` div containing a vertical `hm-experience__line` and a mapped list of `experiences` (1 item: Android App Development with GenAI Integration Intern). Each experience renders as `hm-experience__item` containing a `hm-experience__dot`, and a `hm-experience__card` with: top row (duration + company), `<h3>` role title, description paragraph, `<ul>` of highlights (4 bullet points), and a tech tag row mapping `['Android', 'Java', 'Kotlin', 'GenAI APIs', 'REST APIs', 'Firebase']` as `hm-experience__tag` spans. Apply `../styles/ExperienceSection.css`.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the Footer for the Home page. Uses `useState(false)` for `showTop` and a passive scroll listener (`window.scrollY > 400`) to conditionally show a scroll-to-top button. The footer renders `hm-footer__inner` with: (1) `hm-footer__top` containing `hm-footer__brand` (logo `<HRM/>` bracket markup + tagline) and `hm-footer__columns` with two nav columns — 'Navigate' (About, Skills, Experience, Projects) and 'Connect' (Contact, GitHub, LinkedIn, Resume); (2) a `hm-footer__divider`; (3) `hm-footer__bottom` with dynamic copyright year via `new Date().getFullYear()` and `hm-footer__socials` row of SVG icon links (GitHub, LinkedIn). Conditionally renders a scroll-to-top button calling `window.scrollTo({ top: 0, behavior: 'smooth' })`. Note: this component may already exist from a shared layout. Apply `../styles/Footer.css`.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the GitHubStatsSection for the Home page. Uses `useState(false)` for `isVisible` and an `IntersectionObserver` (threshold 0.1) via `useRef` to trigger reveal. Renders a `hm-github__stats` grid mapping the inline `stats` array (📦 Repositories 15+, 🔥 Contributions 200+, 💻 Languages 8+, ⭐ Stars Earned 30+) as `hm-github__stat-card` items each showing icon, value, and label. Below, renders `hm-github__cards` with two cards: 'GitHub Stats' and 'Top Languages', each containing a `<img loading='lazy'>` pointing to `github-readme-stats.vercel.app` API URLs for username `HarshitaMoger` with `theme=radical` and dark background styling params. Apply `../styles/GitHubStatsSection.css`.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the HeroSection for the Home page. Implements a typewriter effect using `useState` for `roleIndex`, `text`, and `isDeleting`, driven by a `useCallback` `tick` function and a `useEffect` with dynamic `setTimeout` delays (88ms typing, 42ms deleting, 2400ms pause). Cycles through `roles` array: ['Software Engineer', 'Python Developer', 'AI Enthusiast', 'Full Stack Developer']. Renders a full-viewport `hm-hero` section with: (1) `hm-hero__bg` containing 4 animated `hm-hero__orb` divs and an `hm-hero__grid` decorative element; (2) `hm-hero__content` containing an availability badge with a pulsing `hm-hero__badge-dot`, an avatar with initials 'HR' and animated `hm-hero__avatar-ring` + `hm-hero__avatar-orbit`, an `<h1>` with the full name, a `hm-hero__role` with `aria-live='polite'` showing typewriter text and a blinking cursor span, an intro paragraph, and CTA buttons for scroll-to-projects and download-resume. Apply `../styles/HeroSection.css`.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the ProjectsSection for the Home page. Uses `useState(false)` for `isVisible` and an `IntersectionObserver` via `useRef` for scroll-reveal. Maps the `projects` array (2 items: 'Detecting Fake Video, Image & Voice using Generative AI and Blockchain' with tech=['Python','CNN','DNN','Blockchain','Flask','TensorFlow','MFCC'] marked `featured: true`; and 'Face Emotion Recognition' with tech=['Python','OpenCV','TensorFlow','CNN','Keras','NumPy']). Each project card renders: features list (4 bullet points each), tech tag pills, and a GitHub link using the `GitHubIcon` inline SVG component. Featured projects receive a distinct visual treatment. Apply `../styles/ProjectsSection.css` with BEM class structure.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the ResumeSection for the Home page. Uses `useState(false)` for `isVisible` and an `IntersectionObserver` (threshold 0.15) via `useRef` for scroll-reveal. Renders a `hm-resume__card` with two children: (1) `hm-resume__preview` — a decorative resume mockup built entirely from CSS skeleton lines using `hm-resume__preview-line` variants (--wide, --medium, --full) and `hm-resume__preview-heading` blocks across three preview sections; (2) `hm-resume__info` — showing name 'Harshita Ramakrishna Moger', role subtitle 'Software Engineer · Python Developer · AI Enthusiast', a `<ul>` of resume highlights (Education, Experience, Skills, etc.), and a download button linking to the resume PDF asset. Apply `../styles/ResumeSection.css`.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the SkillsSection for the Home page. Uses `useState(false)` for `isVisible`, `useState('All')` for `activeCategory`, and an `IntersectionObserver` (threshold 0.1) via `useRef`. Renders a `hm-skills__filters` role=group with filter buttons for each of the 7 categories (['All','Language','Frontend','Backend','Database','AI / ML','Tools']) using `aria-pressed` and `hm-skills__filter--active` class. Filters the `skills` array (10 skills: Python 92%, JavaScript 80%, HTML/CSS 88%, React 76%, Flask 82%, SQL 75%, TensorFlow 72%, OpenCV 78%, Git & GitHub 85%, Docker 65%) by `activeCategory`. Each skill renders as `hm-skills__card` with a header row (name + level %), a `hm-skills__bar` progress bar whose `hm-skills__bar-fill` width is animated from 0% to `skill.level%` only when `isVisible` is true via inline style. Apply `../styles/SkillsSection.css`.
Depends on:#9
Waiting for dependencies
As a Frontend Developer, implement shared global state management and custom hooks for the portfolio. Create: (1) useTheme hook — manages dark/light mode state, persists to localStorage, and syncs with document.documentElement data-theme; (2) useScrollSpy hook — tracks activeSection using IntersectionObserver, reusable across Navbar and sections; (3) useIntersectionObserver hook — generic reveal hook used by all sections for scroll-triggered animations; (4) a project data module in src/data/ exporting the projects, skills, achievements, experiences, and profiles arrays used across section components. Place hooks in src/hooks/ and data in src/data/ per the defined project structure.
Depends on:#14
Waiting for dependencies
As a Frontend Developer, implement the cross-cutting extra features specified in the SRD: (1) Loading screen component — full-page animated loader shown on initial page load, fades out after assets load; (2) Custom cursor — replaces default cursor with a styled dot/ring that follows mouse movement with lag effect; (3) Mouse-follow gradient — subtle gradient overlay that tracks cursor position on the hero/background; (4) Particle background — canvas or CSS-based particle field for hero section ambiance; (5) Scroll-to-top button — floating button that appears after scrolling 400px, smooth scrolls to top on click; (6) Scroll progress indicator — thin bar at top of viewport showing reading progress. These are global UI features placed in src/components/ and loaded in the root App component.
Depends on:#14#16
Waiting for dependencies
As a Frontend Developer, implement comprehensive SEO and metadata configuration: (1) Set up Open Graph meta tags (og:title, og:description, og:image, og:url, og:type) in index.html; (2) Add Twitter Card meta tags; (3) Create sitemap.xml listing all anchor sections; (4) Create robots.txt allowing all crawlers; (5) Add structured data (JSON-LD) for Person schema with Harshita's details; (6) Configure canonical URL; (7) Optimize all image assets with descriptive alt text; (8) Set up lazy loading for below-fold images; (9) Ensure all section headings follow a logical H1→H2→H3 hierarchy for accessibility and SEO.
Depends on:#16
Waiting for dependencies
As a Frontend Developer, implement the signature galaxy map design concept from SRD Section 7 using @react-three/fiber and @react-three/drei. Each star in the 3D scene represents a portfolio section. Clicking a star smoothly navigates/zooms to that section. Background subtly morphs colors based on time of day. Hovering over stars highlights connections between related sections. Implement the parallax interaction model (Section 8) for layered depth on scroll — decorative layers (atmospheric blobs, particle fields) translate at different speeds while real content stays in normal flow. This is the most visually distinctive feature of the portfolio and should be integrated into the hero/background layer.
Depends on:#16#14
Waiting for dependencies
As a DevOps Engineer, configure the portfolio for production deployment on GitHub Pages and Vercel: (1) Configure vite.config.ts base path for GitHub Pages (repository name as base); (2) Create vercel.json with SPA routing rewrites and build configuration; (3) Set up GitHub Actions workflow (.github/workflows/deploy.yml) for automated CI/CD — lint, build, and deploy to GitHub Pages on push to main; (4) Document environment variables needed (EmailJS keys) in .env.example and Vercel/GitHub Secrets setup guide; (5) Ensure build output is optimized (minification, tree-shaking, chunk splitting); (6) Write deployment guide in README.md covering both Vercel and GitHub Pages deployment steps.
Depends on:#16
Waiting for dependencies
As a Tech Lead, integrate the ContactSection frontend form with EmailJS service. Configure EmailJS service ID, template ID, and public key via environment variables. Ensure the handleSubmit function in ContactSection calls emailjs.sendForm() or emailjs.send() with the correct template parameters (name, email, subject, message). Verify emails are delivered to Harshita's inbox, handle error states gracefully in the UI, and document the EmailJS setup in the README. Note: depends on ContactSection task (e5121c79-6909-44ae-a384-9f46a81ab31a).
Depends on:#4
Waiting for dependencies
No comments yet. Be the first!