System Requirements Document (SRD)

Project Name: shiny-project

1. Introduction

The shiny-project is a modern, minimalist website inspired by the reference design provided by José Pedro Gomes. The website will focus on clean typography, elegant visuals, smooth navigation, and a professional aesthetic. It will showcase projects, services, methodology, and company information, while providing an intuitive user experience for both Portuguese (PT) and English (EN) audiences.

2. System Overview

The shiny-project website will serve as a digital portfolio and business platform for showcasing architectural and design services. It will feature:

• A visually striking homepage with a hero section.
• Dedicated sections for projects, services, methodology, and company information.
• Language toggle functionality (PT/EN).
• Contact options for easy communication.
• Responsive design optimized for desktop and mobile devices.

3. Functional Requirements

• As User, I should be able to view a visually appealing homepage with a hero section.
• As User, I should be able to navigate to sections for projects, services, methodology, and company information.
• As User, I should be able to toggle between Portuguese and English languages.
• As User, I should be able to view featured projects with detailed descriptions.
• As User, I should be able to access a contact form for inquiries.
• As Admin, I should be able to update project details, services, and company information.
• As Admin, I should be able to manage language translations for content.

4. User Personas

1. Admin

• Role: Website manager.
• Responsibilities: Update content, manage translations, and ensure functionality.

2. User

• Role: Visitor exploring the website.
• Responsibilities: Browse projects, services, and company information; submit inquiries via the contact form.

5. Visuals Colors and Theme

Color Palette (Inspired by Reference Design):

• Background: #F5F5F5 (Light Gray)
• Surface: #FFFFFF (White)
• Text: #2E2E2E (Dark Gray)
• Accent: #4A90E2 (Soft Blue)
• Muted: #C4C4C4 (Muted Gray)

Typography:

• Font Family: Sans-serif (e.g., "Roboto" or "Open Sans").
• Font Sizes: Large headings, medium subheadings, and small body text for readability.

6. Signature Design Concept

Floating Glass Panels with Dynamic Reflections

The homepage will feature a floating glass panel design that mimics glassmorphism effects. These panels will dynamically reflect light and subtly shift as the user scrolls, creating an immersive experience.

• Hero Section: A large glass panel displaying the tagline "Spaces Beyond Conventional" with a soft gradient overlay.
• Interactive Panels: Each section (Projects, Services, Methodology, About) will have its own floating panel that animates into view as the user scrolls.
• Micro-Interactions: Hover effects will create a ripple-like animation on buttons and links.
• Background: A blurred, gradient background that transitions based on the time of day (e.g., warm tones in the morning, cooler tones at night).

This design will make the website feel modern, engaging, and unforgettable.

7. Non-Functional Requirements

• Performance: The website should load within 3 seconds on standard broadband connections.
• Accessibility: Ensure compliance with WCAG 2.1 standards for accessibility.
• Responsiveness: The website must adapt seamlessly to various screen sizes (desktop, tablet, mobile).
• Security: Implement SSL encryption for secure data transmission.

8. Tech Stack

Frontend:

• React (Web).

Backend:

• Python with FastAPI.

Database:

• MySQL (preferred) or MariaDB with Alembic for migrations.

AI Tools:

• GPT 5.4 for user-friendly responses.

Local Orchestration:

• Docker and docker-compose.

Server-Side Orchestration:

• Kubernetes.

9. Assumptions and Constraints

• The website will primarily target Portuguese and English-speaking audiences.
• Content updates will be managed by the Admin user.
• The design must closely follow the reference image provided.

10. Glossary

• Hero Section: The prominent area at the top of the homepage that captures user attention.
• Glassmorphism: A design style that uses translucent elements with blurred backgrounds to mimic glass.
• WCAG: Web Content Accessibility Guidelines, a standard for ensuring web accessibility.
• SSL Encryption: Secure Sockets Layer, a protocol for encrypting data transmitted over the internet.