scenic-poems

byJafar

I have written 4 poems which are in html form are capable of creating website

HomePoem
Home

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

System Requirements Document (SRD)

Project Name: scenic-poems

1. Introduction

The scenic-poems project is a website designed to showcase the poetic works of Mohammed Ayub, written with the help of Al-Wahaab. The website will present the poems exactly as provided by the author, ensuring no modifications or errors. The design will reflect the spiritual, celestial, and devotional themes of the poems, creating an immersive and elegant experience for readers.

2. System Overview

The scenic-poems website will feature:

  • A single index page that displays all poems in an organized and visually appealing manner, inspired by the reference design provided by the user.
  • Navigation links for each poem, allowing readers to access the full text seamlessly.
  • A design inspired by celestial and Islamic motifs, incorporating the visual reference images provided by the user.
  • Interactive elements such as hover effects, smooth scrolling, and animations to enhance user engagement.
  • Selective re-run capability, enabling user-triggered regeneration of the System Requirements Document (SRD).

The website will be optimized for both desktop and mobile devices, ensuring accessibility and responsiveness.

Page 2 of 5

3. Functional Requirements

  • As a User, I should be able to view all poems on a single index page.
  • As a User, I should be able to click on a poem title or link to read the full poem.
  • As a User, I should experience smooth scrolling and hover effects for interactive elements.
  • As a User, I should see the poems displayed exactly as provided, without any modifications.
  • As a User, I should experience a design that reflects the celestial, spiritual, and devotional themes of the poems.
  • As a User, I should be able to regenerate the System Requirements Document (SRD) selectively when needed.

4. User Personas

1. Reader

  • Description: Individuals interested in poetry, spirituality, and Islamic themes.
  • Goals: To read and experience the poems in a visually engaging and immersive format.
  • Needs: Easy navigation, clear typography, and an aesthetically pleasing design.

2. Administrator

  • Description: The author or designated individual responsible for managing the website.
  • Goals: To ensure the poems are displayed correctly and the design aligns with the intended themes.
  • Needs: Tools to regenerate the System Requirements Document (SRD) selectively and manage website updates.

5. Visuals Colors and Theme

The website will follow a celestial and spiritual theme inspired by the reference images provided.

Page 3 of 5

Color Palette:

  • Background: #0F0F0F (Deep Black)
  • Surface: #1A1A1A (Charcoal Gray)
  • Text: #EDEDED (Soft White)
  • Accent: #FFD700 (Radiant Gold)
  • Muted Tones: #3E3E3E (Muted Gray)

These colors will create a serene and elegant atmosphere, emphasizing the spiritual and celestial themes of the poems.

6. Signature Design Concept

The homepage will feature a celestial-inspired design with the following elements:

  • Header: A glowing Arabic calligraphy of "Bismillah hir rahman nir rahim" paired with its English translation, as shown in the reference image.
  • Interactive Poem Cards: Each poem will be displayed as a card with a title, a brief excerpt, and a "Read Poem" link. Hovering over the card will reveal subtle animations, such as a glowing border or a soft fade-in effect.
  • Background: A starry night sky with subtle twinkling animations to evoke a sense of serenity and spirituality, matching the reference image.
  • Transitions: Smooth scrolling between sections, with a gentle fade effect as users navigate.
  • Footer: A dua section with glowing Arabic text and its English translation, creating a peaceful conclusion to the page.

7. Non-Functional Requirements

  • The website must be responsive and accessible across all devices (desktop, tablet, and mobile).
  • The design must strictly adhere to the reference images provided by the user.
  • The website must load within 3 seconds on standard internet connections.
  • The text must be displayed exactly as provided, with no modifications.
  • The website must include selective re-run capability for regenerating the System Requirements Document (SRD).

8. Tech Stack

Page 4 of 5

Frontend:

  • React.js for building the website interface.

Backend:

  • Python with FastAPI for handling backend logic.

Database:

  • MySQL for storing poem metadata.

AI Tools:

  • Not applicable for this project.

Local Orchestration:

  • Docker and Docker Compose for containerization.

Server-Side Orchestration:

  • Kubernetes for deployment and scaling.

9. Assumptions and Constraints

Assumptions:

  • The user’s poems will remain unchanged and will be displayed exactly as provided.
  • The website will follow the celestial and spiritual design inspired by the reference images.
  • The user prefers a single-page layout for the website.
Page 5 of 5

Constraints:

  • The design must strictly adhere to the reference images provided by the user.
  • The website must be optimized for performance and accessibility.
  • No additional features or modifications to the poems are allowed.

10. Glossary

  • Tahajjud: A voluntary night prayer in Islam.
  • Durood: Sending blessings upon the Prophet Muhammad ﷺ.
  • Al-Wahaab: One of the names of Allah, meaning "The Giver of Gifts."
  • Al-Wadūd: One of the names of Allah, meaning "The Most Loving."
  • Masjid al Nabawi: The Prophet's Mosque in Madinah.
  • Qalb: Arabic word for "heart."
  • Sukoon: Arabic word for "peace" or "tranquility."
Home design preview
Home: View Index
Home: Browse Poems
Home: Hover Poem Card
Poem: Read Full Poem
Home: Scroll Back
Home: Select Next Poem