System Requirements Document (SRD)

Project Name: mammoth-portfolio

1. Introduction

The mammoth-portfolio project aims to create a visually stunning, highly interactive, and award-worthy portfolio website for Jaga Rabari, a talented web developer from India. The website will showcase Jaga's skills, projects, and expertise in web development, with a focus on frontend UI, animations, and real-world projects. Built using HTML, CSS, and JavaScript, the portfolio will serve as a professional online presence to impress recruiters and potential clients within seconds.

This document outlines the system requirements, design concepts, and technical specifications for the mammoth-portfolio project.

2. System Overview

The mammoth-portfolio website will be a multi-page portfolio designed to highlight Jaga Rabari's skills and projects. The website will feature a dark neon-tech theme with advanced animations, smooth transitions, and interactive elements. It will include the following pages:

1. Home: A landing page with a hero section, skills overview, and featured projects.
2. About: A detailed biography of Jaga Rabari, including his skills, experience, and photo.
3. Projects: A gallery of projects with filtering options.
4. Project Detail Page: A dedicated page for each project, showcasing its problem statement, solution, technologies used, screenshots, and learnings.
5. Contact: A functional contact form with validation.

The website will be responsive, optimized for performance, and built with clean, modular code.

3. Functional Requirements

As Jaga Rabari:

• I should be able to showcase my skills, projects, and experience.
• I should be able to display my GitHub projects dynamically using the GitHub API.
• I should be able to filter projects by tech stack.
• I should be able to provide detailed information about each project on a separate page.
• I should be able to receive messages through a functional contact form.

As a Visitor:

• I should be able to view a visually stunning homepage with interactive animations.
• I should be able to navigate between pages smoothly.
• I should be able to explore Jaga's projects and filter them by technology.
• I should be able to view detailed information about each project.
• I should be able to contact Jaga through a form with validation.

4. User Personas

1. Admin (Jaga Rabari)

• Role: Website owner and developer.
• Responsibilities: Upload and manage project details, maintain the website, and respond to contact form submissions.

2. Visitor

• Role: Recruiters, potential clients, or collaborators.
• Responsibilities: Explore Jaga's portfolio, view projects, and contact Jaga for opportunities.

5. Visuals Colors and Theme

Color Palette

The mammoth-portfolio will feature a unique neon-tech theme with the following custom color palette:

• Background: #0A0F1F (Deep Midnight Blue)
• Surface: #1B2435 (Dark Slate)
• Text: #E8E8F2 (Soft White)
• Accent: #00FFD1 (Neon Aqua)
• Muted Tones: #4A5568 (Muted Gray)

Typography

• Primary Font: Poppins
• Secondary Font: Inter

6. Signature Design Concept

Interactive Neon Universe

The homepage will feature a Three.js-based animated background resembling a glowing neon universe. Visitors will be greeted with a mesmerizing particle system that reacts to mouse movements, creating an immersive experience.

Key Features:

• Hero Section: A typing animation introduces Jaga Rabari as a web developer, with glowing text effects.
• Custom Cursor: The cursor will transform into a glowing orb that changes color when hovering over interactive elements.
• Project Cards: Cards will "flip" and glow when hovered over, revealing project details.
• Smooth Transitions: Page transitions will feature a fade-in/out effect with glowing borders.
• Interactive Elements: Buttons and links will have hover animations with gradient glows.

This design will captivate visitors and leave a lasting impression, making the portfolio unforgettable.

7. Non-Functional Requirements

• Performance: The website must load in under 2 seconds on a standard broadband connection.
• Responsiveness: The website must be fully functional on devices with screen sizes ranging from 320px to 4K.
• Accessibility: The website must adhere to WCAG 2.1 AA standards.
• SEO: Include meta tags, alt attributes, and semantic HTML for search engine optimization.
• Maintainability: Code must be modular, well-documented, and easy to update.

8. Tech Stack

• Frontend: HTML, CSS (with custom animations), JavaScript
• Backend: None (static website)
• APIs: GitHub API for dynamic project fetching
• Tools:
  • GSAP for animations
  • IntersectionObserver API for scroll-triggered animations
  • EmailJS for contact form functionality

9. Assumptions and Constraints

Assumptions:

• The website will be hosted on a static hosting platform (e.g., GitHub Pages, Netlify).
• The GitHub API will provide all necessary project data.
• Visitors will primarily access the website on modern browsers.

Constraints:

• The website must be built using only HTML, CSS, and JavaScript.
• No backend server or database will be used.

10. Glossary

• Glassmorphism: A design trend that uses frosted-glass effects with transparency and blur.
• Three.js: A JavaScript library for creating 3D graphics in the browser.
• GitHub API: A RESTful API that allows developers to fetch data from GitHub repositories.
• EmailJS: A service that enables sending emails directly from JavaScript without a backend.
• GSAP: GreenSock Animation Platform, a library for creating high-performance animations.

This document provides a comprehensive roadmap for building the mammoth-portfolio project. Let me know if you'd like to refine any section or proceed with development!