System Requirements Document (SRD)

1. Introduction

This document outlines the requirements for creating a portfolio website for Akash Mandli, a Business Analyst and Project Management Enthusiast. The website will serve as a professional showcase of Akash's skills, experience, and achievements, while also providing an easy way for potential collaborators or recruiters to contact him.

2. System Overview

The portfolio website will be a modern, sleek, and interactive platform that highlights Akash Mandli's professional journey, technical skills, and key accomplishments. It will include sections for case studies, technical skills, workflows, and diagrams, along with a footer-based contact section for easy communication. The website will be responsive, ensuring a seamless experience across devices.

3. Functional Requirements as Story Points

• As a User, I should be able to view Akash Mandli's professional experience in a structured and visually appealing format.
• As a User, I should be able to explore case studies that highlight Akash's project impact and achievements.
• As a User, I should be able to view technical skills with visual examples like workflows, diagrams, and dashboards.
• As a User, I should be able to access Akash's LinkedIn profile, email, and phone number from the footer of the website.
• As a User, I should be able to navigate the website easily with a clean and intuitive layout.
• As a User, I should be able to view the website on both desktop and mobile devices without any loss of functionality or design quality.
• As a User, I should experience subtle animations and interactive elements that enhance the modern and sleek design of the website.
• As a User, I should be able to see a LinkedIn icon in the footer that links directly to Akash's LinkedIn profile.

4. User Personas

• Visitor: A general user who visits the website to learn about Akash Mandli's professional background, skills, and achievements.
• Recruiter: A potential employer or recruiter looking for detailed information about Akash's experience and skills.
• Collaborator: A professional or organization interested in collaborating with Akash on projects or initiatives.

5. Visuals Colors and Theme

The website will adopt a modern and sleek design with the following color palette:

• Primary Color: Deep Blue (#1E3A8A) – conveys professionalism and trust.
• Secondary Color: Light Gray (#F3F4F6) – ensures a clean and minimalistic look.
• Accent Color: Vibrant Orange (#F97316) – adds energy and draws attention to key elements like buttons or links.
• Text Color: Dark Gray (#374151) – ensures readability.
• Background Color: White (#FFFFFF) – maintains a clean and professional appearance.

The typography will use a combination of sans-serif fonts like Roboto or Open Sans for a modern and clean look.

The footer will match the overall theme of the website, using the Primary Color (Deep Blue) as the background with Text Color (Light Gray) for readability. The LinkedIn icon will use its recognizable blue color (#0A66C2) to maintain brand consistency.

6. Signature Design Concept

The homepage will feature an Interactive Timeline as the centerpiece of the design.

Concept Details:

• Visual Layout: The timeline will be a horizontal scrollable section that dynamically showcases Akash's career journey. Each milestone (e.g., job roles, education, key achievements) will appear as a card with a brief description, icons, and animations.
• Animations: As users scroll through the timeline, cards will "pop" into view with a smooth fade-in effect. Hovering over a card will expand it slightly, revealing more details.
• Background: A subtle gradient background that transitions from deep blue to light gray as users scroll, symbolizing growth and progress.
• Micro-interactions: Icons and elements on the timeline will have hover effects, such as slight rotations or color shifts, to make the experience engaging.
• Call-to-Action: At the end of the timeline, a prominent button will invite users to explore case studies or technical skills in more detail.
• Footer Integration: The footer will remain fixed at the bottom of the page, ensuring that contact information is always accessible.

The footer will include:

• Akash's LinkedIn icon (styled with hover effects that slightly enlarge the icon and change its color to a lighter blue).
• Akash's email and phone number, styled with clear and readable typography.
• A subtle animation where the footer elements fade in as the user scrolls to the bottom of the page.

This design concept ensures that the homepage is both visually striking and functionally informative, leaving a lasting impression on visitors.

7. Non-Functional Requirements

• The website must load within 3 seconds on a standard broadband connection.
• The website must be responsive and compatible with all major browsers (Chrome, Firefox, Safari, Edge).
• The website must adhere to accessibility standards (WCAG 2.1 Level AA).
• The website must be secure, with HTTPS enabled.
• The website must be optimized for SEO to improve visibility on search engines.

8. Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL with Alembic for migrations
• AI Tools: None required for this project
• Local Orchestration: Docker, docker-compose

9. Assumptions and Constraints

• The website will be hosted on a cloud platform with sufficient resources to handle expected traffic.
• Akash will provide all necessary content, including case studies, diagrams, and contact details.
• The project will adhere to the specified timeline and budget constraints.

10. Glossary

• BRD: Business Requirement Document
• SRS: Software Requirement Specification
• WCAG: Web Content Accessibility Guidelines
• SEO: Search Engine Optimization
• HTTPS: Hypertext Transfer Protocol Secure

This updated SRD includes the requirement to have the contact section in the footer, ensuring easy access to Akash's LinkedIn, email, and phone number. The LinkedIn integration has been visually designed to align with the website's modern and sleek theme. The document also incorporates a signature design concept to make the website visually engaging and memorable.