System Requirements Document (SRD)

Project Name: shadow-portfolio

1. Introduction

The shadow-portfolio project is a dynamic and fully functional personal portfolio website designed for Bhavik Tanna, a final-year IT engineering student from Gujarat, India. The platform will serve as a showcase for Bhavik's technical skills, projects, achievements, and leadership experiences. It will also include a hidden admin panel for managing content dynamically, accessible only via a secret URL.

This document outlines the system requirements for building the shadow-portfolio, ensuring it aligns with Bhavik's vision of a polished, production-ready portfolio website with modern features like animations and a dark mode toggle.

2. System Overview

The shadow-portfolio system consists of two primary components:

1. Public Website:

   • Accessible by visitors to explore Bhavik's projects, achievements, skills, and contact details.
   • Features dynamic content that updates instantly based on admin inputs.
   • Includes a toggle for dark mode to enhance user experience.

2. Hidden Admin Panel:

   • Accessible only by Bhavik via a secret URL.
   • Enables Bhavik to add, edit, and delete projects, achievements, and other portfolio content.

The system will be built using modern web technologies, ensuring responsiveness, scalability, security, and a visually engaging experience.

3. Functional Requirements

Public Website Features:

• As a Visitor, I should be able to view Bhavik's name, intro, tagline, and profile photo on the homepage.
• As a Visitor, I should be able to access Bhavik's resume-style summary and social links (LinkedIn, GitHub).
• As a Visitor, I should be able to toggle between "All" and "Tech Only" filters to view categorized content.
• As a Visitor, I should be able to explore Bhavik's projects, achievements, and skills dynamically fetched from the database.
• As a Visitor, I should experience a responsive UI optimized for both mobile and desktop devices.
• As a Visitor, I should be able to toggle between light mode and dark mode.
• As a Visitor, I should experience smooth animations, such as fade-ins, hover effects, and scroll-triggered reveals.

Admin Panel Features:

• As Bhavik, I should be able to log in to the admin panel using my email and password.
• As Bhavik, I should be able to add, edit, and delete projects dynamically.
• As Bhavik, I should be able to add, edit, and delete achievements dynamically.
• As Bhavik, I should be able to upload images for projects and achievements.
• As Bhavik, I should be able to add external links (e.g., GitHub, live project URLs).
• As Bhavik, I should be able to access the admin panel via a hidden URL that is not publicly linked.

4. User Personas

Admin:

• Name: Bhavik Tanna
• Role: Owner and sole user of the admin panel.
• Goals: Manage portfolio content dynamically, ensuring it reflects his latest achievements and projects.

Visitor:

• Role: General public accessing the portfolio website.
• Goals: Explore Bhavik's technical skills, projects, achievements, and contact details.

5. Visuals Colors and Theme

Color Palette:

• primary: #2A2D8F (Royal Indigo)
• primary_light: #4C5ACF (Soft Periwinkle)
• secondary: #E94E77 (Crimson Pink)
• accent: #FFD54F (Golden Amber)
• highlight: #FF8A65 (Warm Coral)
• bg: #F0F4F8 (Light Mist Gray)
• surface: rgba(255, 255, 255, 0.95) (White with slight transparency)
• text: #1C1C1C (Charcoal Black)
• text_muted: #6D6D6D (Muted Gray)
• border: rgba(0, 0, 0, 0.15) (Subtle Black)

6. Signature Design Concept

Interactive Concept: "Dynamic Project Showcase Carousel with Dark Mode"

The homepage will feature an interactive carousel showcasing Bhavik's projects. Each project card will:

• Flip dynamically on hover to reveal details (title, description, tech stack, links).
• Include a "live preview" button that opens the project in a modal window.
• Animate into view with spring physics using framer-motion.

The carousel will be scrollable horizontally, with smooth transitions powered by gsap. Visitors can drag the carousel or use navigation arrows for seamless exploration.

Dark Mode Toggle:

• A toggle button will allow visitors to switch between light and dark modes.
• The dark mode will feature a sleek black background (#121212) with contrasting text and vibrant accent colors.
• The toggle state will persist across sessions using local storage.

Landing Page Animation:

• A subtle parallax effect will be applied to the background, featuring animated geometric shapes that respond to mouse movement.
• The tagline will type itself out dynamically, creating a hacker-console aesthetic using react-typical.

7. Interaction Model & Motion Direction

Landing Page Interaction Model:

• Parallax: Layered depth via scroll, with geometric shapes translating at different speeds.
• Animated: Hover transitions, spring physics, and scroll-triggered reveals for interactive elements.

Internal Pages:

• Static: Focus on clarity and readability for dashboard and admin panel pages.

8. Non-Functional Requirements

• Performance: Ensure fast load times (<2 seconds) for both public and admin pages.
• Security: Implement JWT-based authentication and secure hidden admin URL.
• Scalability: Design the system to handle future expansions (e.g., adding new sections).
• Accessibility: Ensure WCAG compliance for color contrast and keyboard navigation.
• Dark Mode Persistence: Ensure the dark mode toggle state persists across sessions.

9. Tech Stack

Frontend:

• React (with Vite)
• Tailwind CSS

Backend:

• Node.js + Express

Database:

• MongoDB

Authentication:

• JWT-based login system

Image Upload:

• Multer / Cloudinary

Deployment:

• Vercel (Frontend)
• Render (Backend)

10. Assumptions and Constraints

• The admin panel URL will remain confidential and not be linked anywhere on the public website.
• Bhavik will provide initial data for projects and achievements, which can be expanded later via the admin panel.
• Deployment will use free-tier services unless otherwise specified.
• The dark mode toggle will be implemented using local storage for persistence.

11. Glossary

• JWT: JSON Web Token, used for secure authentication.
• REST API: Representational State Transfer, a standard for backend communication.
• Multer: Middleware for handling file uploads in Node.js.
• Cloudinary: Cloud-based image management service.
• Vite: A fast build tool for modern web projects.
• GSAP: GreenSock Animation Platform, used for smooth animations.
• Framer Motion: A React library for animations and spring physics.

This SRD provides a comprehensive blueprint for building the shadow-portfolio project. Let me know if there are any additional features or adjustments you'd like to include!