System Requirements Document (SRD)

Project Name: shiny-portfolio

1. Introduction

The shiny-portfolio project is a modern, 3D portfolio website designed for Lovely Verma, a young creative designer and digital marketer based in India. This portfolio aims to showcase Lovely's skills, projects, and personality in a visually stunning and interactive way, leveraging cutting-edge web technologies and design principles. The website will serve as a versatile tool for personal branding, attracting freelance clients, and impressing potential employers.

The design will feature a dark futuristic theme with neon accents, smooth animations, and interactive elements to create an unforgettable user experience.

2. System Overview

The shiny-portfolio system will be a responsive, interactive website optimized for desktop and mobile devices. It will include the following key features:

• Dark Futuristic Theme: A sleek, modern design with neon accents (purple, blue, pink) and a 3D animated gradient background.
• Hero Section: A bold introduction with animated 3D text, a subtitle highlighting Lovely's expertise, and a glowing call-to-action button.
• Interactive Animations: Scroll-triggered animations, hover effects with 3D tilt, and smooth page transitions.
• Core Sections:
  • About Me: Featuring an animated avatar or 3D illustration.
  • Skills: Interactive progress bars showcasing Lovely's expertise.
  • Projects: 3D cards with hover depth effects to highlight portfolio items.
  • Contact: A glassmorphism-style form for easy communication.
• Style: A mix of glassmorphism and neumorphism with clean UI and soft shadows.

3. Functional Requirements

Hero Section

• As User, I should see my name in large 3D animated text.
• As User, I should see a subtitle: “Creative Designer & Digital Marketer.”
• As User, I should see a glowing call-to-action button.

Animations

• As User, I should experience scroll-triggered animations.
• As User, I should see hover effects with 3D tilt.
• As User, I should experience smooth page transitions.

About Me Section

• As User, I should see an animated avatar or 3D illustration representing me.

Skills Section

• As User, I should see interactive progress bars showcasing my skills.

Projects Section

• As User, I should see 3D cards with hover depth effects for each project.

Contact Section

• As User, I should see a glassmorphism-style form for communication.

4. User Personas

Primary User: Lovely Verma

• Role: Creative Designer & Digital Marketer
• Goals: Showcase skills, attract freelance clients, and impress potential employers.
• Needs: A visually stunning portfolio that highlights creativity and expertise.

Secondary User: Potential Clients

• Role: Businesses or individuals seeking design and marketing services.
• Goals: Evaluate Lovely's skills and portfolio to decide on collaboration.
• Needs: Easy navigation, clear presentation of skills and projects, and a contact form.

Tertiary User: Employers/Agencies

• Role: Companies looking to hire creative talent.
• Goals: Assess Lovely's capabilities and fit for their team.
• Needs: Professional presentation and detailed information about skills and experience.

5. Visuals Colors and Theme

Color Palette

• Background: #0D0D0D (Dark Black)
• Surface: #1A1A2E (Deep Midnight Blue)
• Text: #FFFFFF (Bright White)
• Accent: #8E44AD (Neon Purple), #3498DB (Neon Blue), #E91E63 (Neon Pink)
• Muted Tones: #4B4B4B (Soft Gray)

This palette creates a dark futuristic aesthetic with vibrant neon highlights, ensuring a visually striking experience.

6. Signature Design Concept

Concept: Interactive 3D Universe Homepage

The homepage will immerse users in a 3D universe where floating geometric shapes (spheres, cubes, pyramids) slowly orbit around a central glowing sphere. The sphere will display Lovely's name in large, animated 3D text, with the subtitle “Creative Designer & Digital Marketer” rotating around it like a halo.

Details:

• Animations: The geometric shapes will move gently, creating a sense of depth and motion. Hovering over shapes will trigger subtle color shifts and tilt effects.
• Call-to-Action Button: A glowing button will pulse rhythmically, inviting users to explore further.
• Transitions: Clicking the button will initiate a smooth zoom-in effect, transitioning to the About Me section.
• Micro-Interactions: As users scroll, sections will appear as if they are being "unveiled" from the darkness, with glowing edges and soft shadows.

This design will make the homepage unforgettable, setting the tone for the rest of the portfolio.

7. Non-Functional Requirements

• Performance: The website must load within 3 seconds on standard broadband connections.
• Responsiveness: The design must adapt seamlessly to desktop, tablet, and mobile devices.
• Accessibility: Ensure compliance with WCAG 2.1 standards for accessibility.
• Security: Protect user data submitted via the contact form using HTTPS and secure backend practices.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

AI Models

• GPT 5.4 for user-friendly responses

AI Tools

• Langchain
• Litellm for LLM Routing

Local Orchestration

• Docker
• docker-compose

Server-Side Orchestration

• Kubernetes

9. Assumptions and Constraints

Assumptions

• The target audience primarily uses modern browsers like Chrome, Edge, and Firefox.
• The website will be hosted on a cloud platform with scalable resources.

Constraints

• The design must adhere to the dark futuristic theme with neon accents.
• Development must be completed within 3 months.

10. Glossary

• 3D Tilt: A hover effect where elements appear to tilt in 3D space based on cursor movement.
• Glassmorphism: A design style that uses transparency and blur effects to create a frosted glass appearance.
• Neumorphism: A design style that combines flat design with skeuomorphic elements, creating soft shadows and a 3D-like effect.
• Scroll-Triggered Animation: Visual effects activated as the user scrolls through the page.
• Interactive Progress Bars: Graphical bars that visually represent the progress or proficiency in a skill, often animated.
• Responsive Design: A design approach that ensures a website looks and functions well on all devices, from desktops to smartphones.