Adding New Portfolio Projects
Relevant source files
The following files were used as context for generating this wiki page:
This guide outlines the technical process for expanding the "Work" section of the AETHER portfolio. The portfolio utilizes a modular HTML structure combined with CSS-driven animations and JavaScript-enabled interactive effects to showcase developer projects.
Adding a new project involves three primary steps: preparing the static assets, updating the HTML structure in the work section, and ensuring the project card inherits the global "Aether" geometric styles and interactivity.
Sources: index.html:183-228, README.md:1-21
Project Architecture and Structure
Portfolio projects are housed within a grid container that utilizes CSS Flexbox or Grid for responsiveness. Each project is represented as a work-item div that contains imagery, descriptive text, technical tags, and external links.
Data Flow for Project Rendering
The following diagram illustrates how the project information is structured within the DOM and how the AetherPortfolio engine applies interactive logic to these elements.
The AetherPortfolio engine targets elements with the [data-tilt] attribute to apply perspective transformations during user interaction.
Sources: aether-script.js:3-72, aether-style.css:411-440
Implementation Steps
1. Asset Preparation
New project images should be placed in the assets/ directory. Based on the existing implementation, project images typically follow a specific naming convention.
| Asset Type | Directory | Recommended Naming | Description |
|---|---|---|---|
| Project Preview | assets/ | project-X-aether.jpg | Main visual for the project card |
| Decorative Shapes | assets/aether-shapes/ | shape-X.svg | Optional geometric background elements |
Sources: README.md:8-16
2. HTML Configuration
New projects must be added as work-item elements within the <div class="work-grid"> section of index.html.
| Element | Class/Attribute | Purpose |
|---|---|---|
| Card Container | work-item | Main wrapper; supports data-tilt for JS effects |
| Image Wrapper | work-image | Contains the <img> and the hover work-overlay |
| Technical Tags | work-tech | Flex container for <span> tags representing technologies |
| Project Link | work-link | Anchor tag targeting the repository or live site |
Sources: index.html:183-228, aether-style.css:435-500
3. Styling and Interactivity
The aether-style.css file defines specific hover states and entry animations for project cards.
/* Example of project card entry animation */
.work-item {
opacity: 0;
transform: translateY(50px);
animation: fadeUp 0.8s ease forwards;
}
/* Staggered delay for new items */
.work-item:nth-child(3) { animation-delay: 0.3s; }
Sources: aether-style.css:411-424
Interactivity is handled by the initTilt() method in aether-script.js, which calculates the mouse position relative to the work-item to create a 3D parallax effect.
Sources: aether-script.js:63-82
Summary
To add a project, insert a new work-item block in index.html, supply a preview image in assets/, and ensure the data-tilt attribute is present for interactivity. The system automatically handles the layout via work-grid and applies entrance animations and hover effects defined in aether-style.css.