pearl-bot System Requirements Document

1. Introduction

This document outlines the system requirements for the "pearl-bot" project, a world-class, modern, responsive personal portfolio website for Harshita Ramakrishna Moger, a Software Engineer, Python Developer, and AI Enthusiast. The website aims to showcase her skills, projects, and achievements in a visually appealing manner, targeting potential recruiters from top tech companies.

2. System Overview

The portfolio website will be a single-page application built using modern web technologies, specifically React.js with Vite, Tailwind CSS, and Framer Motion for animations. It will feature a premium, clean, minimalistic UI inspired by Apple, with glassmorphism effects, smooth scrolling, and modern typography. The site will be fully responsive, supporting both dark and light modes, and optimized for performance, accessibility, and SEO. Deployment will be configured for GitHub Pages and Vercel.

3. Functional Requirements

Hero Section

• As a visitor, I want to see a professional photo and name of Harshita Ramakrishna Moger, so I can identify the owner of the portfolio.
• As a visitor, I want to see an animated typing effect displaying Harshita's roles, so I can quickly understand her expertise.
• As a visitor, I want to read a short introduction about Harshita, so I can learn more about her background.
• As a visitor, I want to have CTA buttons to download Harshita's resume and contact her, so I can easily take action.
• As a visitor, I want to access Harshita's social profiles (GitHub, LinkedIn, LeetCode, HackerRank) via icons, so I can explore her online presence.

About Me Section

• As a visitor, I want to read about Harshita's educational background as a Computer Science Engineering Graduate, so I can understand her qualifications.
• As a visitor, I want to know about Harshita's passion for building scalable applications and her quick learning ability, so I can appreciate her skills and interests.

Skills Section

• As a visitor, I want to view Harshita's skills displayed as animated cards with progress bars, so I can assess her proficiency in various areas.
• As a visitor, I want to see specific skills such as Python, HTML, CSS, and Flask, so I can understand her technical expertise.

Experience Section

• As a visitor, I want to learn about Harshita's internship experience in Android App Development with GenAI Integration, so I can evaluate her practical experience.

Featured Projects Section

• As a visitor, I want to explore detailed descriptions of Harshita's projects, including technologies used and features, so I can assess her project work.
• As a visitor, I want to access live demos and GitHub repositories for Harshita's projects, so I can see her work in action.
• As a visitor, I want to learn about specific projects like Detecting Fake Video, Image & Voice using Generative AI and Blockchain, and Face Emotion Recognition, so I can understand her project scope and impact.
• As a visitor, I want to understand the technical aspects such as CNN, DNN, MFCC, and Blockchain Verification used in Harshita's projects, so I can appreciate the complexity and innovation involved.

Achievements Section

• As a visitor, I want to view Harshita's certifications and achievements, such as the Infosys Springboard Python Certification and participation in a Hackathon, so I can recognize her accomplishments.

GitHub Statistics Section

• As a visitor, I want to see Harshita's GitHub contribution graph, streak, top languages, and total repositories, so I can gauge her activity and expertise.

Coding Profiles Section

• As a visitor, I want to access Harshita's coding profiles via cards, so I can explore her coding skills further.

Resume Section

• As a visitor, I want to download Harshita's resume and view an embedded preview, so I can review her qualifications in detail.

Contact Section

• As a visitor, I want to fill out a contact form with fields for name, email, subject, and message, so I can easily reach out to Harshita.
• As a visitor, I want the contact form to integrate with EmailJS, so my message is sent directly to Harshita.

Footer

• As a visitor, I want to access social links and a back-to-top button, so I can navigate the site easily.

Animations and Interactions

• As a visitor, I want to experience smooth animations and interactions, such as fade, slide, and scale effects, so the site feels dynamic and engaging.
• As a visitor, I want to see high-quality micro interactions and Framer Motion throughout the site, so the user experience is enhanced.

Extra Features

• As a visitor, I want features like a loading screen, custom cursor, scroll-to-top button, and theme toggle, so the site is user-friendly and visually appealing.
• As a visitor, I want to experience a mouse-follow gradient, particle background, and optimized images, so the site is visually engaging and performs well.
• As a visitor, I want the site to support Open Graph and SEO metadata, so it is optimized for search engines and social media sharing.
• As a visitor, I want to filter and search projects, so I can easily find specific work by Harshita.

Project Structure

• As a developer, I want a clean folder structure with components, pages, sections, assets, hooks, utils, data, and styles, so the codebase is organized and maintainable.
• As a developer, I want to use reusable React components and professional code comments, so the code is efficient and easy to understand.

4. User Personas

• Harshita Ramakrishna Moger: The owner of the portfolio, a Software Engineer looking to showcase her skills and projects to potential recruiters.
• Recruiters: Individuals from tech companies seeking talented software engineers for potential hiring.

5. Core User Flows

Visitor Exploring the Portfolio

1. Visit the homepage.
2. View the hero section with Harshita's photo, name, and roles.
3. Navigate through sections: About Me, Skills, Experience, Projects, Achievements, GitHub Stats, Coding Profiles, Resume, and Contact.
4. Interact with CTA buttons, social icons, and project links.
5. Fill out the contact form to reach Harshita.

6. Visuals Colors and Theme

• Primary Color: #6366F1
• Primary Light: #A5B4FC
• Secondary Color: #06B6D4
• Accent Color: #8B5CF6
• Highlight: #F59E0B
• Background: #0F172A
• Surface: rgba(15, 23, 42, 0.8)
• Text: #FFFFFF
• Text Muted: #9CA3AF
• Border: rgba(255, 255, 255, 0.2)

7. Signature Design Concept

The homepage will feature an interactive galaxy map where each star represents a section of the portfolio. Users can click on a star to zoom into that section, with smooth transitions and animations powered by @react-three/fiber and @react-three/drei. The background will subtly morph colors based on the time of day, creating a dynamic and immersive experience. Hovering over stars will highlight connections between related sections, providing a seamless navigation experience.

8. Interaction Model & Motion Direction

The intended interaction model for the landing page is "parallax," with layered depth via scroll. Decorative layers, such as atmospheric blobs and particle fields, will translate at different speeds, while real content stays in normal flow and scrolls naturally. This approach is ideal for creating a visually rich first impression. Internal pages will maintain a "static" interaction model for clarity and readability.

9. Non-Functional Requirements

• Fast loading and SEO optimized.
• Accessible (WCAG compliant).
• Fully responsive for mobile, tablet, and desktop.

10. Tech Stack

• Frontend: React.js + Vite, Tailwind CSS, Framer Motion, React Icons, React Router (if needed).
• Backend: EmailJS for contact form integration.
• Deployment: GitHub Pages and Vercel.

11. Assumptions and Constraints

• The website must be deploy-ready for GitHub Pages and Vercel.
• The design must impress recruiters from top tech companies.
• The site must be production-ready with no placeholders.

12. Glossary

• CTA: Call to Action
• WCAG: Web Content Accessibility Guidelines
• SEO: Search Engine Optimization
• UI: User Interface
• UX: User Experience
• CNN: Convolutional Neural Network
• DNN: Deep Neural Network
• MFCC: Mel-Frequency Cepstral Coefficients