Why Does This Exist?

# AGENTS.md - AI Coding Agent Guidelines

Guidelines for AI coding agents working in this repository.

## Project Overview

A static single-page portfolio website built with vanilla HTML, CSS, and JavaScript.
Uses Tailwind CSS v4 via CDN for styling. No build system or package manager required.

## Tech Stack

| Category       | Technology                                |
|----------------|-------------------------------------------|
| Language       | HTML5, CSS3, Vanilla JavaScript (ES6+)    |
| CSS Framework  | Tailwind CSS v4 (CDN browser version)     |
| Fonts          | Google Fonts (Inter)                      |
| Build Tools    | None - static files served directly       |

## Project Structure

ai-portfolio/
├── index.html          # Main HTML file (single-page portfolio)
├── css/
│   └── style.css       # Custom CSS styles beyond Tailwind
├── js/
│   └── main.js         # JavaScript for animations and interactivity
├── prompt.md           # Prompt history tracking file
└── AGENTS.md           # This file - AI agent guidelines

## Conversation Logging

**IMPORTANT:** All user prompts must be logged to `prompt.md` for history tracking.

**Format:**
- When starting a new session, add a header: `# Session N` (where N is the session number)
- Log each prompt with: `## Prompt N` followed by the user's message
- Prompts are numbered sequentially starting from 0 within each session

## Code Style Guidelines

### JavaScript (js/main.js)
- Functions: camelCase (e.g., `initScrollAnimations`, `initContactForm`)
- Variables: camelCase (e.g., `animatedElements`, `navLinks`)
- Constants: SCREAMING_SNAKE_CASE (e.g., `CONTACT_EMAIL`)
- 4-space indentation, single quotes, semicolons required

### CSS (css/style.css)
- Naming: kebab-case, BEM-like (e.g., `.project-card`, `.timeline-line-top`)
- Tab indentation, one property per line
- Organized by component/feature sections

### HTML (index.html)
- Semantic HTML5 elements (nav, main, section, footer)
- Section IDs for navigation (`#about`, `#projects`, etc.)
- Use Tailwind utility classes for styling
- Mark editable sections with `<!-- EDIT: Description -->`

## Key Patterns

### Adding Content
**New Project:**
1. Copy an existing `.project-item` div in the Projects section
2. Update the date in `.project-date` (format: "Mon YYYY")
3. Modify title, description, tags, and links
4. Keep newest projects at the top

### Scroll Animations
<div class="animate-on-scroll">Content</div>
<div class="animate-on-scroll delay-200">Delayed content</div>

## Important Notes

1. **No Build Step:** Changes are immediately visible - just refresh the browser
2. **Tailwind via CDN:** No `tailwind.config.js` - use standard Tailwind classes
3. **Timeline Calculations:** `initTimelineLines()` in JS calculates line positions dynamically
4. **Mobile Responsive:** Timeline hides on mobile (< 768px)
5. **Page Transitions:** Smooth fade overlay on navigation clicks

# Prompts History

## Prompt 1
I want you to build a simple portfolio in html, css, js. You have access to
tailwind standalone with `<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>`.
You will build a modern dark themed with different section like, About me, Projects,
Education, Contact. For the about me section keep it simple make a simple description
i can change a placeholder picture. For the Project section, i want a bar on the left
side with a date from the most recent (top one) to the oldest (bottom). All of this
should be easy to add for me and modify. Keep the project structure as mentionned:
index.html, js/* -> all of the javascript, css/* -> all the css. I want animation
at some places but keep it sleek/minimalist.

## Prompt 2
Here is a list of issue is found/Modification you need to apply: When clicking a link
i would like a fade-in/out, on the project timeline there is a couple of thing to change
first there is an issue when a project card i hovered there is a little ball that you
should remove, the date should have a month and the year and should be on top of the bar.
The timeline should also have a space for the date (so no line around the date, add a
gap of 4 or 6).

## Prompt 3
From now on you should create a prompt.md with all the prompt i sent you with the number
in the order it has been sent. You should also get my previous messages.

## Prompt 4
I have a few more issue related to the timeline dates, the background for the date
doesnt match the backgroup of the page in this section

## Prompt 5
Add a small gap between the timeline and the project cards

## Prompt 6
I want you to add a contact form that prefill an email, add text contact info beside it.
Replace the twitter logo to the current X logo.

## Prompt 7
The mailto link didn't work when everything filled out

# Session 2

## Prompt 0
Please analyze this codebase and create an AGENTS.md file containing:
1. Build/lint/test commands - especially for running a single test
2. Code style guidelines including imports, formatting, types, naming conventions,
   error handling, etc.

The file you create will be given to agentic coding agents (such as yourself) that
operate in this repository. Make it about 150 lines long.

## Prompt 1
In the Agent.md you should mention the constant logging of conversation. When a new
session is created it should make a `# N Session` for example then the prompt with
the number of the prompt from 0 to n

## Prompt 2
In this project, there is an issue with the spacing on the left of the date where
the project card are too close you should add a spacing or make the spacing higher.

## Prompt 3
In the footer add a link to page. This page is called why does this exist. In this
you should explain this portfolio was ai generated for educationnal purpose to learn
the usage of LLM Agent. Prompt enginnering. Make sure to include Agents.md and
prompt.md in a formatted way.

## Prompt 4
Create a deployment plan using docker image, a reverse proxy already exist and i
posses a vps with a domain name `skyvence.dev`.

## Prompt 5
Ill update you before you do anything more the reverse proxy is already configured,
the proxy and the container will be on the same port so no need to expose a port in
the docker compose configuration. Do not include nginx reverse proxy configuration

## Prompt 6
The docker image can be hosted on ghcr.io for this matter i want you to make a github
action that build the image and pushes it to the registry.

## Prompt 7
Update why.html to include the latest logs

## Prompt 8
Add a small readme with a ci tag (skyvence/ai-portfolio) and update the necessary
file like why.html.

## Prompt 9
Here is an issue for you when hosting the website the image in /img/* doesnt
resolve can you fix it ? Do not forget to modify why.html

## Prompt 10
I still get a 404 in the network tab of my browser and the image doesnt show up.

# Session 3

## Prompt 0
I want you to add a simple filter on the timeline for the project. This filter should
have different tag like: web, prog, gamedev.

## Prompt 1
Update the why page with a link to the source code use the git remote for the link
(translate to https)

## Prompt 2
Update the docker deployment for docker stack (Current docker compose), standalone,
docker compose. Make a seperate folder to hold those configs.

## Prompt 3
Update readme to reflect the latest changes. Change npx to bun

## Prompt 4
Oh weird issue your tagging system doesnt show up correctly and does not work. It seems
like on the hosted version it doesn't have styling nor does it work as button

## Prompt 5
I want to use the picture in /img has favicon can you do it

## Prompt 6
update why.html with the latest logs

## Prompt 7
Modify the docker image to take in the @why/ so i can access via url/why instead of
why.html. update the links to reflect this change

# Session 4

## Prompt 0
I want you to make the porfolio responsive, you will also add a light theme toggle
default to dark. Add total view count for the portfolio