coral-portfolio

Introduction

The coral-portfolio project aims to create a simple, two-page portfolio website. This document outlines the system requirements necessary to achieve the desired functionality and design for the project.

System Overview

The coral-portfolio website will serve as a personal portfolio for showcasing work, skills, and contact information. It will consist of two main pages: a homepage and a contact page. The website will be designed to be visually appealing and easy to navigate, providing visitors with a clear understanding of the user's professional background and capabilities.

Functional Requirements

• As a User, I should be able to view a homepage that showcases my portfolio work.
• As a User, I should be able to navigate to a contact page to find ways to reach me.
• As a User, I should be able to update my portfolio content easily.
• As a User, I should be able to create new portfolio entries to showcase additional work.

User Personas

• User: The individual whose portfolio is being showcased. This user will manage the content of the portfolio and ensure it is up-to-date.

Core User Flows

• User visits the homepage -> views portfolio work -> navigates to contact page -> finds contact information.
• User logs in -> updates portfolio content -> creates new portfolio entries -> saves changes.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F97316 (Vibrant Orange)
• accent: #10B981 (Emerald Green)
• highlight: #F59E0B (Amber)
• bg: #F3F4F6 (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2) (Light Gray)

Signature Design Concept

The homepage will feature an interactive "floating gallery" concept using @react-three/fiber and @react-three/drei. The gallery will consist of portfolio pieces that float in a 3D space. Users can click and drag to explore the gallery, with each piece expanding into view upon selection. This immersive experience will make the portfolio stand out and engage visitors in a unique way.

Interaction Model & Motion Direction

• Landing/Home Page: Parallax interaction model with layered depth via scroll. The floating gallery will translate at different speeds, creating a dynamic and engaging visual experience.
• Internal Pages: Static interaction model for clarity and ease of navigation, focusing on content readability.

Non-Functional Requirements

• The website should load within 3 seconds on a standard broadband connection.
• The website should be responsive and accessible on all major browsers and devices.
• The website should adhere to accessibility standards (WCAG 2.1).

Tech Stack

• Frontend: React for Web
• Backend: Not applicable for a static portfolio
• Database: Not applicable for a static portfolio
• Local Orchestration: Docker
• Server-side Orchestration: Not applicable for a static portfolio

Assumptions and Constraints

• The portfolio will be hosted on a static site hosting service.
• No backend or database is required as the portfolio is static.
• The user will manually update the portfolio content.

Glossary

• Portfolio: A collection of work samples and professional information.
• Static Site: A website with fixed content that does not require server-side processing.
• Parallax: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.