System Requirements Document (SRD)

Project Name: steel-portfolio

1. Introduction

The steel-portfolio project is a personal portfolio website designed for Dhruv Khandelwal from India. This website will serve as a platform to showcase Dhruv's skills, projects, and professional achievements, while also providing an avenue for potential clients, employers, or collaborators to connect with him.

The portfolio will be tailored to Dhruv's needs, ensuring it reflects his personality and professional aspirations. Locale-specific defaults such as Indian timezone (IST), currency (INR), and cultural nuances will be considered throughout the design and development process.

2. System Overview

The steel-portfolio system will be a responsive, visually appealing, and user-friendly website. It will feature sections for Dhruv's bio, skills, projects, and a contact page. The website will be optimized for both desktop and mobile devices, ensuring accessibility and seamless navigation.

The primary goal is to create a digital presence that highlights Dhruv's expertise and achievements, while also providing an intuitive interface for visitors to explore his work and reach out to him.

3. Functional Requirements

• As Dhruv, I should be able to showcase my bio prominently on the homepage.
• As Dhruv, I should be able to list my skills with visual indicators (e.g., progress bars or icons).
• As Dhruv, I should be able to display my projects with descriptions, images, and links to live demos or repositories.
• As Dhruv, I should be able to include a contact form for visitors to send inquiries directly to my email.
• As Dhruv, I should be able to update the content of my portfolio easily (e.g., through a CMS or admin panel).
• As a visitor, I should be able to navigate the website seamlessly across devices.
• As a visitor, I should be able to view Dhruv's bio, skills, and projects in an organized and visually appealing manner.
• As a visitor, I should be able to use the contact form to send inquiries to Dhruv.

4. User Personas

1. Admin (Dhruv Khandelwal)

• Role: Owner and primary user of the portfolio.
• Responsibilities: Updating content, managing inquiries, and ensuring the website remains functional and up-to-date.

2. Visitor

• Role: Potential client, employer, or collaborator exploring Dhruv's portfolio.
• Responsibilities: Viewing Dhruv's bio, skills, and projects, and reaching out via the contact form.

5. Visuals Colors and Theme

The steel-portfolio will feature a clean and modern design with the following color palette:

• Primary Color: Steel Blue (#4682B4) — to evoke professionalism and reliability.
• Secondary Color: Slate Gray (#708090) — for a sleek and neutral backdrop.
• Accent Color: Indian Yellow (#FFB700) — to add warmth and vibrancy, reflecting Dhruv's personality.
• Background Color: White (#FFFFFF) — for a clean and minimal look.

Typography:

• Headings: Sans-serif font (e.g., Poppins or Montserrat) for a modern feel.
• Body Text: Serif font (e.g., Roboto or Open Sans) for readability.

6. Signature Design Concept

The steel-portfolio homepage will feature a dynamic steel-textured background that subtly shifts and gleams as the user moves their cursor across the screen.

Key Features:

• Interactive Steel Animation: The homepage will have a steel-textured background that reacts to cursor movements, creating a shimmering effect. This will give the website a bold and unforgettable first impression.
• Floating Content Cards: Each section (Bio, Skills, Projects) will be displayed as floating cards that subtly "bounce" when hovered over, adding a playful yet professional touch.
• Micro-Interactions: Buttons and links will have smooth transitions, such as color shifts or slight enlargements, to enhance user engagement.
• Steel Typography: The website's logo and headings will use a custom steel-effect font, reinforcing the theme.

This design concept will make the homepage visually striking and memorable, ensuring visitors are captivated from the moment they land on the site.

7. Non-Functional Requirements

• The website must be responsive and optimized for mobile, tablet, and desktop devices.
• The website must load within 3 seconds on standard broadband connections.
• The contact form must be secure and prevent spam submissions.
• The website must comply with accessibility standards (WCAG 2.1).
• The website must support localization for Indian timezone (IST) and currency (INR).

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (preferred) or MariaDB, using Alembic for migrations

AI Tools (if applicable)

• GPT 5.2 for user-friendly responses in contact form automation

Local Orchestration

• Docker
• docker-compose

Server-Side Orchestration

• Kubernetes

9. Assumptions and Constraints

Assumptions

• Dhruv will provide all necessary content (bio, skills, project details, etc.) for the portfolio.
• The website will primarily target an Indian audience but should be accessible globally.
• The portfolio will not require advanced e-commerce or payment functionalities.

Constraints

• The website must adhere to the steel-themed design concept.
• The website must be lightweight and optimized for fast loading speeds.
• The backend must be developed using Python and FastAPI.

10. Glossary

• CMS: Content Management System, a tool to manage website content without coding.
• WCAG 2.1: Web Content Accessibility Guidelines, a standard for making web content accessible.
• IST: Indian Standard Time, the time zone used in India.
• Responsive Design: A design approach ensuring the website works well on all devices.
• Micro-Interactions: Small animations or design elements that enhance user experience.

This document outlines the requirements for the steel-portfolio project, ensuring it meets Dhruv Khandelwal's needs and creates a lasting impression on visitors.