System Requirements Document (SRD)

Project Name: swift-portfolio

1. Introduction

The swift-portfolio project is a modern, visually stunning portfolio website designed for Nathan LaFrenais' creative media brand, NJL Photo and Video. This platform will showcase Nathan's photography and videography work in a sleek, cinematic, and professional manner, emphasizing high-quality visuals and a premium user experience.

The website will serve as a digital portfolio to attract clients seeking premium visuals for portraits, lifestyle shoots, and cinematic videography. It will embody a clean, minimal, and slightly moody aesthetic with strong contrasts, aligning with the brand's identity.

This document outlines the system requirements for the swift-portfolio project, ensuring clarity and alignment with Nathan's vision.

2. System Overview

The swift-portfolio website will be a responsive, mobile-first platform that highlights the premium quality of NJL Photo and Video's work. The system will include:

• A cinematic hero section combining autoplay highlight reels and stills slideshow to emphasize the tagline: "Capture the Moment".
• A streamlined single-page layout integrating portfolio, services, and about sections into the homepage for a cohesive user experience.
• A focus on storytelling through visuals, emphasizing emotional connections in every photo and video shoot.
• Smooth animations and transitions to enhance user engagement.
• A contact section replacing the footer, prominently displaying Nathan's contact details and a simple booking form.
• Embedded Instagram reels at the top of the homepage and further down the page to showcase Nathan's work dynamically.
• AI-generated photos integrated into the homepage to complement Nathan's portfolio and enhance the storytelling.

The platform will be built using modern web technologies, ensuring scalability, performance, and ease of maintenance.

3. Functional Requirements

• As a User, I should see a fullscreen cinematic hero section with an autoplay highlight reel transitioning into a stills slideshow.
• As a User, I should see a headline: "Capture the Moment" and a subheadline: "Photography & Videography by NJL" in the hero section.
• As a User, I should have CTA buttons: "View Work" and "Book a Shoot" in the hero section.
• As a User, I should see embedded Instagram reels at the top of the homepage and further down the page to showcase Nathan's work dynamically.
• As a User, I should experience hover effects on portfolio items (zoom, dark overlay, title fade-in).
• As a User, I should read a short bio integrated into the homepage, highlighting Nathan's passion for capturing moments and creating professional visuals.
• As a User, I should see a Services section integrated into the homepage, displaying clean cards for Photography Sessions, Videography Projects, and Content Creation.
• As a User, I should see a "Why Choose NJL" section highlighting high-quality visuals, attention to detail, affordability, fast turnaround, and strong visual storytelling.
• As a User, I should be able to fill out a simple contact/booking form with fields for Name, Email, Type of Shoot, and Message.
• As a User, I should see a "Get in Touch" section with Nathan's contact details:
  • Email: contact.njl.photoandvideo@gmail.com
  • Phone: (442) 462-2228
  • Instagram: @njl_photo2026
• As a User, I should see AI-generated photos integrated into the homepage to enhance the visual storytelling.

4. User Personas

1. Client

• Description: Individuals or businesses seeking professional photography and videography services.
• Goals:
  • View Nathan's portfolio to assess quality.
  • Book a session or inquire about services.
  • Gain confidence in NJL Photo and Video's professionalism and expertise.

2. Visitor

• Description: Casual browsers or potential clients exploring NJL Photo and Video's work.
• Goals:
  • Explore the portfolio for inspiration.
  • Learn about NJL Photo and Video's services.
  • Share the website with others.

5. Visuals Colors and Theme

Color Palette

• Background: #121212 (Rich Black)
• Surface: #1F1F1F (Dark Slate)
• Text: #EAEAEA (Soft White)
• Accent: #FFD700 (Subtle Gold)
• Muted Tones: #8C8C8C (Muted Gray)

This palette reflects a high-end, cinematic aesthetic with strong contrast and subtle luxury.

6. Signature Design Concept

Hybrid Cinematic Hero Section with Instagram Integration

The homepage will feature a hybrid cinematic hero section that combines an autoplay highlight reel with a stills slideshow, emphasizing the tagline: "Capture the Moment".

• Autoplay Highlight Reel: A short, looping video showcasing Nathan's best shots with smooth transitions and subtle text overlays.
• Stills Slideshow: After the reel, the section transitions into a loop of high-quality stills, each fading in gently.
• Instagram Reels Integration: Nathan's Instagram reels will be embedded at the top of the homepage and further down the page, providing dynamic, real-time updates of his work.

Interactive Elements:

• Text animations (fade-in headline and subheadline).
• Parallax scrolling effect as users scroll down.
• Hover effects on CTA buttons with a glowing border animation.

Mood and Feel:
The hero section will immediately captivate visitors, setting the tone for a premium, visually striking experience.

7. Non-Functional Requirements

• The website must load in under 3 seconds on standard broadband connections.
• The design must be fully responsive and optimized for mobile, tablet, and desktop devices.
• All animations and transitions must be smooth, with no noticeable lag.
• The website must adhere to accessibility standards (WCAG 2.1 AA).
• The contact form must be secure and prevent spam submissions.
• The system must support selective re-run capability to allow user-triggered SRD regeneration.

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

9. Assumptions and Constraints

• The website will primarily target a US-based audience, with English as the default language.
• The website will use placeholder content during development, to be replaced with Nathan's actual portfolio.
• The project will adhere to a fixed timeline and budget, with scope adjustments as needed.

10. Glossary

• Hero Section: The topmost section of a webpage, designed to grab attention with impactful visuals and messaging.
• CTA: Call-to-Action, a button or link prompting user interaction.
• Parallax Scrolling: A design effect where background content moves slower than foreground content, creating depth.
• WCAG: Web Content Accessibility Guidelines, standards for making web content accessible to all users.
• Masonry Layout: A grid layout where items are arranged optimally based on available vertical space, creating a visually appealing flow.
• Selective Re-run Capability: A feature allowing users to regenerate specific sections of the SRD without affecting the entire document.