System Requirements Document (SRD)

Project Name: Regal-Portfolio

1. Introduction

The Regal-Portfolio project is a bold, modern, and high-end portfolio presentation designed for OURS Creative Studio, a creative agency based in Zimbabwe (ZW). This portfolio aims to showcase the studio's expertise in graphic design, branding, printing, and advertising through a premium, visually striking, and innovative interface. The system will prioritize a clean, editorial-style aesthetic with a mix of corporate professionalism and street-inspired creativity, ensuring a strong identity that stands out in the competitive creative industry.

This document outlines the functional and non-functional requirements, user personas, visual design elements, and technical specifications necessary to deliver a seamless and impactful portfolio experience.

2. System Overview

The Regal-Portfolio system will serve as a digital portfolio for OURS Creative Studio, enabling the agency to:

• Present their creative work in a visually engaging and professional manner.
• Attract potential clients with a premium, high-quality design aesthetic.
• Highlight their unique approach to branding, design, and printing services.
• Provide an intuitive and interactive user experience that reflects their innovative identity.

The system will be accessible via web browsers and optimized for both desktop and mobile devices. It will feature a grid-based layout, bold typography, and a dark/light contrast system with vibrant accents to create a confident and powerful visual impact.

3. Functional Requirements

• As a User, I should be able to view a visually striking cover page with the agency's name, tagline, and a bold background design.
• As a User, I should be able to navigate through sections like Brand Introduction, Services, Design Showcase, and Contact seamlessly.
• As a User, I should be able to view a gallery of design work with full-page visuals, split layouts, and grid collages.
• As a User, I should be able to see mockups of branded items like hoodies, t-shirts, pens, and banners.
• As a User, I should be able to read short, impactful captions that explain the agency's process and services.
• As a User, I should be able to access contact information and a call-to-action to connect with the agency.
• As an Admin, I should be able to upload new designs and update portfolio content easily.
• As an Admin, I should be able to manage the order and layout of the design showcase.

4. User Personas

4.1 Creative Agency Client

• Description: Business owners, marketing professionals, or individuals seeking creative services.
• Goals: To evaluate the agency's portfolio, understand their services, and initiate contact for potential projects.
• Needs: A visually engaging and professional presentation that demonstrates the agency's expertise and creativity.

4.2 Admin (OURS Creative Studio Team)

• Description: Internal team members responsible for managing the portfolio content.
• Goals: To keep the portfolio updated with the latest designs and ensure the presentation aligns with the agency's identity.
• Needs: A user-friendly content management system for uploading and organizing portfolio items.

5. Visuals Colors and Theme

Color Palette

• Background: Deep Blue (#0A1F44)
• Surface: Charcoal Gray (#1C1C1E)
• Text: Off-White (#F5F5F7)
• Accent: Vibrant Orange (#FF6A00)
• Muted Tones: Slate Gray (#3A3A3C)

Typography

• Primary Font: Bold, editorial-style sans-serif (e.g., Montserrat or Poppins).
• Secondary Font: Minimal, clean sans-serif (e.g., Open Sans or Roboto).

Mood

• Confident, innovative, and premium with a mix of street and corporate aesthetics.
• Subtle elements like glows, gradients, grain textures, and soft shadows to enhance the visual appeal.

6. Signature Design Concept

Interactive Design Showcase with Dynamic Motion Effects

The homepage of the Regal-Portfolio will feature an interactive design showcase that feels alive and immersive. Upon landing, users will see a 3D carousel of portfolio items that rotate and expand as they hover over them. Each item will have a subtle glow and shadow effect, creating depth and a premium feel.

Key features of the homepage:

• Dynamic Background: A living gradient that shifts between deep blue and vibrant orange as users scroll.
• Motion Effects: Subtle animations where text and images slide, fade, or zoom into view.
• Interactive Grid: Clicking on a portfolio item will open a full-page modal with detailed visuals and descriptions.
• Micro-Interactions: Buttons and icons will have hover effects, such as color changes or slight enlargements, to enhance user engagement.

This bold and eccentric design will immediately captivate users and set the tone for the rest of the portfolio.

7. Non-Functional Requirements

• The system must load within 3 seconds on both desktop and mobile devices.
• The portfolio must be responsive and optimized for various screen sizes.
• The design must adhere to accessibility standards (e.g., WCAG 2.1).
• The system must support high-resolution images without compromising performance.
• The content management system must be intuitive and require minimal training for the admin team.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

AI Tools

• Litellm for LLM Routing

Local Orchestration

• Docker
• docker-compose

Server-Side Orchestration

• Kubernetes

9. Assumptions and Constraints

• The system will primarily serve clients in Zimbabwe, so the default currency and timezone will be ZWL and CAT (Central Africa Time), respectively.
• The portfolio will be hosted on a cloud-based server to ensure scalability and reliability.
• The admin team will have basic technical knowledge for managing the content management system.

10. Glossary

• Portfolio: A collection of creative work showcasing the agency's expertise.
• CMS: Content Management System, a tool for managing and updating portfolio content.
• Responsive Design: A design approach that ensures the system works seamlessly on various devices and screen sizes.
• WCAG: Web Content Accessibility Guidelines, standards for making web content accessible to all users.

This concludes the updated System Requirements Document for the Regal-Portfolio project. Let me know if there are additional changes or enhancements you'd like to make, johnsen!