Deploying to GitHub Pages

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• js/myJs.js
• css/style.css
• css/spinload.css
• sound/sound.mp3
• img/cuteCat.jpg

Deploying the yeuems.io application to GitHub Pages involves hosting a collection of static assets including HTML, CSS, JavaScript, and multimedia files. The project functions as a client-side application that requires no server-side processing, making it compatible with GitHub's static hosting service.

The application architecture relies on an entry point file, index.html, which orchestrates the loading of external libraries and local scripts to create an interactive "crush" confession interface.

Static Asset Architecture

The project is structured to serve files directly from the repository root and subdirectories. GitHub Pages identifies index.html as the primary entry point for the web service.

Directory Structure Requirements

• Root Directory: Contains index.html.
• CSS Directory: Stores style.css and spinload.css for visual presentation and animations.
• JS Directory: Contains myJs.js for application logic.
• Asset Directories: Contains img/ for background and popup images and sound/ for audio feedback.

Sources: index.html:1-81, js/myJs.js:1-131, css/style.css:1-75

Dependency Management

The application utilizes Content Delivery Networks (CDNs) to load external frameworks, reducing the need for local package management during deployment.

Dependency	Purpose	Source
jQuery 3.4.1	DOM manipulation and event handling	code.jquery.com
SweetAlert2	Interactive popup dialogs	cdn.jsdelivr.net
Bootstrap 4.3.1	Responsive layout and button styling	stackpath.bootstrapcdn.com
Pacifico Font	Custom typography for headers	fonts.googleapis.com

Sources: index.html:18-30, index.html:66-79

Initialization and Preloading Logic

When the site is deployed and accessed, a preloader mask obscures the content while initial scripts load.

The preloader behavior is defined in css/spinload.css using a high z-index (9999999) and animated rect elements. JavaScript initiates the transition to the main content after a 600ms delay.
Sources: css/spinload.css:2-10, js/myJs.js:18-26

Application Logic and Interaction Flow

The interactive core of the application is managed by js/myJs.js. It utilizes a configuration object, textConfig, to manage all display strings, allowing for easy localization or modification before deployment.

Text Configuration Model

The textConfig object contains keys text1 through text12, defining the sequence of messages shown to the user.
Sources: js/myJs.js:1-15

User Interaction Sequence

The application implements a non-linear flow where certain user actions (like hovering over the "No" button) trigger evasive UI behaviors.

The evasive logic for the "No" button uses Math.random() to reposition the element when the mouse enters its area, effectively preventing the user from selecting the negative option.
Sources: js/myJs.js:58-75, js/myJs.js:101-125

Visual Components and Styling

Styles are applied through two primary CSS files. css/style.css handles the layout of the confession interface, including responsive design for mobile devices via @media queries.

Component Positioning

• Background: A fixed element (#bg) with a blur filter (4px) and cover sizing.
• Buttons: The yes and no buttons use absolute positioning to facilitate the movement logic in JavaScript.
• Mobile Support: The layout shifts button percentages and font sizes when the screen width is below 500px.

Sources: css/style.css:18-30, css/style.css:48-75

Deployment Checklist for GitHub Pages

1. Repository Setup: Ensure all files (index.html, js/, css/, img/, sound/) are pushed to a GitHub repository.
2. Asset Linking: Verify that all href and src paths in index.html are relative (e.g., js/myJs.js) to ensure they resolve correctly on the GitHub Pages domain.
3. Redirect Configuration: The final action in myJs.js redirects users. Ensure the destination URL is correct in the onClose handler.

   onClose: () => {
     window.location = "https://www.facebook.com/lekientrung.info/";
   },
   

   Sources: js/myJs.js:122-124

Deployment to GitHub Pages is successful once the repository is set to "Deploy from a branch" (usually main) in the GitHub repository settings under "Pages". The project significance lies in its use of purely client-side technologies to deliver a dynamic, interactive experience without requiring backend infrastructure.