Nishita-1250755042

Link: https://kunalsehgalkunalsehgal-crypto.github.io/shree-krishna/

Name -Nishita

Class- BCA 2nd year

Roll no -1250755042

Divine Krishna Website
Technical Documentation

Simple explanation of the technologies, sections and working

1. Project Overview

This project is a single-page website called “Divine Krishna”. It is designed as a visual and interactive spiritual experience. The page contains information about Krishna, a timeline, divine leelas, Bhagavad Gita shlokas, quotes, sacred places, a gallery and a quiz.

The project is mainly a front-end project. There is no backend, database, API, React application or server-side code visible in the supplied files. The main work is done in HTML, CSS and JavaScript.

2. Technologies Used

HTML5: Used to create the page structure and all main sections such as the navbar, hero, about, timeline, leelas, Gita, gallery and quiz.

CSS3: Used for the complete visual design: colors, layouts, responsive design, glass effect, animations, hover effects, cards, buttons and modal/lightbox styling.

Vanilla JavaScript: Used for all interactive features. No JavaScript framework such as React, Vue or Angular is used.

Canvas 2D API: Used for the floating particle effect in the background.

DOM API: JavaScript creates and changes HTML elements dynamically using methods such as createElement, querySelector and appendChild.

IntersectionObserver: Used to reveal cards and content when they enter the screen while scrolling.

localStorage: Used to save the user’s best quiz score in the browser.

CSS Media Queries: Used to make the page work on desktop, tablet and mobile screen sizes.

Google Fonts: The HTML loads Cinzel, Cormorant Garamond and Outfit from Google Fonts.

Important point: the project has a “3D” feel, but it does not use Three.js or another 3D library. The 3D card effect is made with normal CSS transforms and JavaScript mouse movement.

3. Project Files and Their Job

index.html: Main page structure. It contains the sections, buttons, containers and basic page metadata.

styles.css: Controls the complete look of the website and responsive behavior.

app.js: Controls the dynamic content and all interactive features.

./img/: The JavaScript expects the website images inside an img folder, such as hero.jpg, radha.jpg, makhan.jpg, kaliya.jpg, govardhan.jpg and gita.jpg.

4. Overall Working Flow

  1. The browser first loads index.html.
  2. index.html loads styles.css for the design and app.js for the interactive behavior.
  3. The HTML contains empty containers for some sections, for example the timeline, leelas, places and gallery.
  4. app.js reads the data stored in JavaScript arrays and creates the required cards/elements dynamically.
  5. CSS gives those generated elements their final design.
  6. User actions such as scrolling, clicking cards, changing gallery filters, opening images and answering quiz questions are handled by JavaScript event listeners.
  7. Everything runs in the user’s browser. The quiz best score is the only information saved locally, using localStorage.

5. Navigation Bar

The navbar stays at the top of the page. It contains links to the main sections: Home, About Krishna, Divine Leelas, Bhagavad Gita, Sacred Places, Gallery and Quiz.

On desktop, the links are shown normally. On smaller screens, a burger button is shown. When the burger is clicked, JavaScript adds or removes the “open” class on the navigation menu.

The navbar also changes when the user scrolls. JavaScript adds the “scrolled” class after the page has moved more than 40 pixels. This gives the navbar a darker background and blur effect.

The active menu item is also detected during scrolling. JavaScript checks the position of sections and adds the “active” class to the matching link.

6. Hero Section

The hero is the first full-screen area of the website. It contains the Krishna background image, a moon effect, title, short description and two buttons.

The “Begin the Journey” button moves to the About section, while “Take the Quiz” moves directly to the Quiz section. The hero also uses a parallax effect, so the background and moon move at a different speed while scrolling.

The title and other content use CSS animations so they appear smoothly when the page loads.

7. About Krishna Section

This section gives a short introduction to Krishna and shows three information cards: The Flute Player, The Beloved of Vrindavan and The Eternal Guide.

The cards have a glass-style design. JavaScript also adds a small 3D tilt effect when the mouse moves over them. The mouse position is used to calculate rotateX and rotateY values.

8. Interactive Timeline

The timeline shows important stages in Krishna’s journey, from Birth in Mathura to Kurukshetra.

The timeline content is not hard-coded as individual HTML cards. It is stored in the TIMELINE JavaScript array. JavaScript loops through that array, creates each timeline item and adds it to the timeline container.

When a timeline item is clicked, JavaScript removes the “on” class from all timeline items and adds it to the clicked item. CSS then highlights its dot.

While the user scrolls, JavaScript also calculates how far the timeline is visible and changes the height of the gold progress line.

9. Divine Leelas Section

This section shows six Krishna stories: Makhan Chor, Kaliya Mardan, Govardhan Leela, Radha Krishna, Sudama’s Rice and Kans Vadh.

The stories are stored in the LEELAS array. JavaScript creates a picture card for every item and places it inside the leela grid.

When a user clicks a leela card, the openModal() function runs. It fills the modal with the story title, image and description, then opens it. The page scroll is locked while the modal is open so the background does not move.

10. Bhagavad Gita / Shloka Section

The Gita section shows a background image and one shloka at a time. Each shloka has Sanskrit text, Hindi meaning, English meaning and a chapter/verse reference.

The data is stored in the SHLOKAS array. The paintShloka() function takes the current item and puts its data into the HTML elements.

When “Next Shloka” is clicked, the index increases. The modulo operator is used so that after the last shloka, the display goes back to the first one.

A small fade animation is restarted each time the shloka changes.

11. Divine Thoughts / Quotes

This section displays short quotes from the QUOTES array.

The user can click “Another Thought” to show the next quote. The quote also changes automatically every 9 seconds, but only when the browser tab is visible.

The quote transition is made by changing opacity and vertical position and then updating the text after a short delay.

12. Sacred Places Section

The Sacred Places section contains Mathura, Vrindavan, Govardhan and Dwarka.

The places are stored in the PLACES array. JavaScript creates a card for every place and adds it to the place grid.

Clicking a place opens the same type of modal used by the leelas. The modal shows the place name, image and description.

13. Gallery Section

The gallery contains Krishna-related images grouped into categories such as Krishna, Radha, Leela and Gita.

JavaScript automatically creates the filter buttons from the categories in the GALLERY array. The “All” button shows every image.

When a category is selected, JavaScript uses filter() to create a smaller list and then calls renderGallery(). renderGallery() clears the old gallery and creates the images again using the selected list.

The gallery uses CSS columns to create a masonry-style layout. On smaller screens, CSS reduces the number of columns.

Clicking an image opens a lightbox. The lightbox has previous and next buttons, a close button and keyboard support using the left/right arrow keys and Escape.

14. Quiz Section

The quiz has 10 questions and gives the user 15 seconds for each question. The questions and correct answers are stored in the QUESTIONS array.

The quiz has three states: Start, Play and Result. JavaScript shows one state at a time by adding or removing the “hidden” class.

When the quiz starts, the question index and score are reset. loadQ() loads the current question and creates four answer buttons.

A timer starts for every question using setInterval(). The timer decreases once every second. When it reaches zero, the answer function is called automatically and the question is treated as unanswered.

After an answer, all options are disabled. The correct option is highlighted. If the user selected the wrong option, that option is also highlighted as wrong. The score is increased only when the selected answer is correct.

At the end, finish() shows the result screen. The score is animated inside a circular progress ring.

The best score is saved using localStorage with the key “krishna_quiz_best”. This means the best score stays in that browser/device until the browser storage is cleared.

15. Final Call-to-Action and Footer

The final section gives the user two clear next actions: Explore the Leelas and Read the Gita.

The footer repeats the main navigation links and the Divine Krishna branding. These are normal anchor links that move the user to the related section.

16. Modal and Lightbox

There are two different popup systems.

  • Modal: used for reading a full leela or sacred place story.
  • Lightbox: used for viewing gallery images in a larger view.

Both are hidden by default with CSS. JavaScript adds the “open” class when they need to appear.

The modal can be closed using its close button or backdrop. The lightbox can be closed with its close button, by clicking the background or by pressing Escape.

17. Scroll Reveal Animation

The project uses IntersectionObserver for scroll-based reveal animations. Elements with classes such as reveal, card, pic-card and tl-item are observed.

When an element enters the visible area, JavaScript adds the “in” class. CSS changes its opacity and transform, so the element moves up and becomes visible.

A small transition delay is also added to different elements to make cards appear one after another instead of all at the same time.

18. 3D Tilt Effect

The 3D effect is created with JavaScript and CSS, not a 3D library.

When the mouse moves over a card, JavaScript finds the mouse position inside the card. That position is converted into rotateX and rotateY values. The card then slightly tilts toward the mouse.

When the mouse leaves, the transform is cleared and the card returns to its normal position.

19. Background Particles

The page has a floating gold particle effect behind the content. It is drawn on a HTML canvas.

JavaScript creates a list of particles with random positions, size, speed and opacity. The loop() function moves them and redraws them on every animation frame using requestAnimationFrame().

Particles that move above the screen are placed back at the bottom so the animation keeps running.

The particle animation is disabled when the user has enabled reduced motion in their operating system/browser.

20. CSS Design System

The CSS starts with variables for the main colors, text colors, glass background, shadows and gradients. This makes it easier to keep the same design across the website.

The main visual style is dark blue/purple with gold highlights. Many cards use a transparent glass background, blur and soft borders.

The page uses CSS Grid for the card layouts and CSS columns for the gallery.

21. Responsive Design

The page has responsive rules for different screen sizes.

  • At 980px and below, the gallery changes from 3 columns to 2 columns.
  • At 820px and below, the desktop navbar is replaced by a burger menu and the mobile menu slides into view.
  • At 820px and below, section and card padding is reduced.
  • At 560px and below, the gallery becomes a single column and the quiz result ring becomes smaller.
  • prefers-reduced-motion is supported, so animations and transitions are disabled when the user asks for reduced motion.

22. What Happens When a User Uses the Website

  • User opens the page → HTML loads the structure, CSS loads the design and JavaScript starts the interactive features.
  • Hero appears → background, moon, title animation and buttons are shown.
  • User scrolls → navbar changes, active navigation changes, parallax elements move, timeline progress changes and reveal animations run.
  • User clicks a leela/place → a modal opens with its content.
  • User clicks a gallery image → lightbox opens with image navigation.
  • User clicks a gallery category → only matching images are rendered.
  • User clicks Next Shloka → the next Gita item is displayed.
  • User clicks Another Thought or waits → the quote changes.
  • User starts the quiz → 10 questions are shown one by one with a 15-second timer.
  • User finishes the quiz → score and result message are shown, and the best score is saved locally.

23. Data and Storage

Most website content is stored directly inside app.js as JavaScript arrays: TIMELINE, LEELAS, PLACES, GALLERY, SHLOKAS, QUOTES and QUESTIONS.

This is why the project does not need a database for the current content. If the content needs to be changed, the arrays in app.js can be edited.

The only persistent user data used by the supplied code is the quiz best score, stored in browser localStorage.

24. Simple Technical Summary

Frontend: HTML + CSS + Vanilla JavaScript

Framework: No frontend framework used

Backend: No backend code supplied

Database: No database used

3D: CSS transforms + JavaScript mouse tracking

Animation: CSS animations, JavaScript and requestAnimationFrame

Dynamic content: JavaScript DOM creation

Image viewer: Custom JavaScript lightbox

Popup content: Custom JavaScript modal

Quiz storage: Browser localStorage

Particles: HTML Canvas 2D

Responsive: CSS media queries

Fonts: Google Fonts: Cinzel, Cormorant Garamond and Outfit

25. Important Notes

  • The supplied project is a client-side website. The files do not show a backend, login system, database or API integration.
  • The “3D” experience is made using CSS and JavaScript; there is no Three.js dependency in the supplied code.
  • The quiz score is local to the browser/device because it uses localStorage.
  • Images are loaded from a local ./img/ folder.
  • The page includes accessibility-related attributes for the modal/lightbox, such as aria-hidden and role=dialog.
  • The code supports reduced motion through prefers-reduced-motion.

26. File-Based Evidence

The HTML file defines the main page sections and loads styles.css and app.js. The CSS file contains the visual design, responsive rules and animations. The JavaScript file contains the data arrays, DOM creation, event handling, quiz logic, lightbox/modal logic and particle animation.

These points are directly visible in the supplied files: the HTML links the stylesheet and JavaScript file; the JavaScript contains the data and interactive functions; and the CSS contains the layout, animation and responsive rules.