Deploying to GitHub Pages
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The AETHER portfolio project is designed as a static web application optimized for deployment via GitHub Pages. The repository structure is specifically organized to function as a User Page, indicated by the repository naming convention and the presence of a root-level index.html file. This architecture allows the site to be served directly from the GitHub infrastructure without the need for a backend server or complex build pipelines.
The deployment scope encompasses the core HTML structure, geometric CSS styling, and the "Aether" JavaScript engine that manages interactive elements like scroll progress and tilt effects. By leveraging a flat file structure at the root, the project ensures high performance and immediate availability upon pushing to the main branch.
Sources: README.md:1-5, index.html:1-10
Repository Structure and Static Assets
To ensure successful deployment to GitHub Pages, the project maintains a specific directory hierarchy. GitHub Pages serves files from the root directory by default for user/organization sites.
File Organization
The project includes several key directories and files that must be present at the root level for the web server to resolve dependencies correctly:
| Path | Description | Type |
|---|---|---|
index.html | Entry point for the GitHub Pages web server. | HTML |
aether-style.css | Main stylesheet containing geometric minimalism variables and animations. | CSS |
aether-script.js | Main logic engine for UI interactions and state management. | JavaScript |
assets/ | Directory containing background images and SVG shapes. | Directory |
aether-fonts/ | Contains variable fonts like SF-Pro and Inter for typography. | Directory |
Sources: README.md:1-24, index.html:10-14
Resource Linking
The index.html file uses relative paths to ensure that assets are correctly fetched when hosted on the github.io domain. For example, fonts are preloaded and stylesheets are linked without leading slashes to remain relative to the deployment root.
<link rel="preload" href="aether-fonts/SF-Pro-Variable.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="aether-style.css">
Sources: index.html:10-11
Deployment Architecture
The deployment follows a standard Static Site Generation (SSG) flow where the browser fetches and executes assets directly.
Component Flow
The following diagram illustrates how GitHub Pages serves the AETHER portfolio components to a client:
This diagram shows the relationship between the hosted repository and the final rendering in the client's browser, highlighting how the script and style components interact with the DOM once loaded.
Sources: README.md:1-5, aether-script.js:1-10
Client-Side Initialization
Once deployed and loaded, the AetherPortfolio class initializes the user interface. Because GitHub Pages is a static host, all "dynamic" behavior—such as the loading screen and scroll tracking—is handled via client-side JavaScript.
Execution Sequence
- DOM Content Loaded: The browser finishes parsing the HTML.
- Class Instantiation:
new AetherPortfolio()is called. - Loader Sequence: The
aether-loaderis displayed for 2000ms before fading out. - Observer Attachment:
IntersectionObserverinstances are attached to skill bars and stat counters to trigger animations as the user scrolls.
Conclusion
Deploying the EPIC-SUPREME-PORTFOLIO to GitHub Pages involves maintaining a clean root-level directory structure as defined in the project's layout. By utilizing relative asset paths and a client-side JavaScript engine for interactivity, the portfolio remains a highly performant, serverless solution that leverages GitHub's native hosting capabilities.
Sources: README.md:1-5, index.html:245-247