System Requirements Document (SRD)

Project Name: ruby-website Version: 1.1 Prepared For: Oleh M. Country: GB Last Updated: 2025

1. Introduction

This document outlines the system requirements for ruby-website, a personal or fan-oriented website inspired by the edgy, punk-rock aesthetic of Avril Lavigne's iconic 2010 era. The site aims to deliver a bold, nostalgic, and interactive web experience with dark grunge visuals, dynamic content sections, and a strong personal branding identity.

This SRD has been updated to include an Idea Submission feature, allowing visitors to submit creative ideas or suggestions directly through the website.

2. System Overview

ruby-website is a frontend-focused web application built with React. It serves as a personal branding or fan-style website with sections for music/media, gallery, events, a blog-style news feed, and a contact/idea submission portal. The site draws heavy aesthetic inspiration from early 2010s punk-rock web design — dark backgrounds, neon accents, grungy textures, and bold typography.

The system will support:

• Public-facing content pages
• A media gallery
• A blog/news feed
• An idea/suggestion submission form
• An admin panel for managing submitted ideas and content

3. Functional Requirements

• As a Guest, I should be able to browse the homepage and see featured content such as album covers, music videos, and news updates
• As a Guest, I should be able to navigate between sections: Music, Gallery, Tour Dates, Blog, and Contact
• As a Guest, I should be able to view a bio/about page with integrated quotes and lyrics
• As a Guest, I should be able to view a gallery of images with hover animations
• As a Guest, I should be able to submit an idea or suggestion through the Idea Submission form
• As a Guest, I should receive a confirmation message after successfully submitting an idea
• As a User, I should be able to register and log in to the website
• As a User, I should be able to track the status of my submitted ideas
• As a User, I should be able to edit or delete my previously submitted ideas
• As a Admin, I should be able to log in to a secure admin panel
• As a Admin, I should be able to view all submitted ideas from guests and users
• As a Admin, I should be able to approve, reject, or archive submitted ideas
• As a Admin, I should be able to manage blog posts, gallery images, and tour date entries
• As a Admin, I should be able to respond to submitted ideas with a status update or comment

5. User Personas

5.1 Guest

• An unauthenticated visitor browsing the site
• Can view all public content, explore the gallery, read the blog, and submit ideas anonymously
• No account required

5.2 User (Registered)

• A registered member of the site
• Can submit ideas with their identity attached, track submission status, and manage their own submissions
• Has a personal profile/dashboard

5.3 Admin

• The site owner or moderator (likely Oleh himself)
• Has full control over content management, idea moderation, and site configuration
• Accesses a secure admin panel not visible to public users

6. Visuals, Colors and Theme

The visual identity of ruby-website is rooted in the punk-rock, grunge aesthetic of the early 2010s — dark, raw, and unapologetically bold.

Color Palette

Typography

• Headings: Bold, distressed serif or grunge-style fonts (e.g., Bebas Neue, Black Han Sans)
• Body: Clean sans-serif for readability against dark backgrounds (e.g., Inter, DM Sans)
• Accent Text / Quotes: Handwritten or brush-style font (e.g., Permanent Marker, Caveat)

Textures & Effects

• Subtle noise/grain overlay on backgrounds
• Scratched or torn-edge dividers between sections
• Glow effects on neon accent elements
• Distressed border styles on image cards

7. Signature Design Concept

⚡ "SHATTERED GLASS STAGE" — The Living Punk Homepage

Imagine landing on ruby-website and being hit with the feeling of walking into a dark underground concert venue — the stage is set, the lights are low, and something is about to happen.

The Homepage Experience:

The entire landing page is built as a shattered glass mosaic — the background is a deep void black (#0D0B0E) with a massive, high-resolution cracked glass texture layered over it. Each shard of glass is an interactive panel that subtly catches light as the user moves their cursor across the screen, creating a parallax shimmer effect as if the glass is real and refracting neon light.

Hero Section:

• A central title — the site name or tagline — is rendered in a dripping neon magenta graffiti font, as if spray-painted onto the cracked glass
• Behind the text, a looping cinemagraph (a near-still video where only one element moves — e.g., a flickering neon sign, smoke drifting, or sparks falling) plays silently, giving the page a living, breathing quality
• On page load, the title shatters into view — letters fly in from different directions like broken glass assembling itself, accompanied by a subtle glass-crack sound effect (optional, muted by default)

Cursor Interaction:

• The user's cursor leaves a trailing neon magenta spark trail as it moves — like dragging a lit sparkler across the screen
• Hovering over any glass shard panel causes it to glow from behind with a bruised purple-to-electric-lime gradient, as if a light source is behind the wall

Navigation:

• The nav bar is styled as a punk wristband — a horizontal strip of black leather texture with metal stud separators between menu items
• On hover, each nav item gets a quick electric zap animation — a brief flash of neon green lightning bolt appears beside the text

Scroll Behaviour:

• As the user scrolls down, the shattered glass homepage "falls away" — shards animate downward and off-screen, revealing the next section beneath, as if the glass floor has given way
• Each section transition uses a torn paper / ripped edge reveal, consistent with the grunge aesthetic

Idea Submission Section:

• The idea submission form is styled as a backstage pass — a rectangular card with a lanyard graphic at the top, a barcode at the bottom, and the form fields styled as handwritten lines on the pass
• Submitting an idea triggers a stamp animation — a red "SUBMITTED" stamp slams down on the pass with a satisfying thud micro-interaction

Mobile Experience:

• On mobile, the shattered glass effect is simplified to a static cracked texture with neon glow borders
• Tap interactions replace hover effects — tapping a section causes a brief ripple crack animation emanating from the touch point

This design is bold, immersive, and completely unforgettable — it doesn't just reference the 2010 punk-rock era, it resurrects it with modern web capabilities.

8. Non-Functional Requirements