Anthony Aouad — Portfolio

Personal site of Anthony Aouad, Backend & AI Solutions Engineer (Beirut). Vite + vanilla TypeScript + GSAP/ScrollTrigger. Deployed to GitHub Pages at /FollowAntz/.

The concept

The site is an integration: the visitor is a request traveling through a pipeline. One continuous trace runs from hero to footer; sections come online as the trace reaches them. The full motion system (two easing tokens, five durations, five behaviors) is documented in src/styles/tokens.css and mirrored in src/motion/config.ts.

Develop

npm install
npm run dev       # dev server
npm run build     # typecheck + production build → dist/
npm run preview   # serve dist/ locally

Assets

Source images live in assets-src/; optimized WebP output in public/images/ (regenerate with the scripts below — all output is committed, the scripts only run when assets change):

npm run assets:images      # assets-src/* → public/images/*.webp (≤200KB)
npm run assets:screenshot  # capture osste.com hero → public/images/osste.webp
npm run assets:og          # render public/og.png + apple-touch-icon.png

The screenshot/OG scripts drive a local Microsoft Edge via puppeteer-core (no browser download).

Contact form

The copy-email interaction always works. The Web3Forms payload form activates when a key is present at build time:

# .env.local (gitignored)
VITE_WEB3FORMS_KEY=your-access-key

Create the key at web3forms.com with the contact email address, then rebuild.

Verification

node scripts/verify.mjs <out-dir> (with npm run preview running) screenshots every section and checks console errors, reduced-motion behavior, no-JS rendering, and mobile overflow.