A single-page personal portfolio for Melanie Baratto, a Software Developer with a front-end specialty based in Toronto.
Built as a deliberate exercise in editorial typography, motion, and craft — without a framework, without a build step, and without a node_modules folder.
🌐 Live: melaniesigrid.github.io
- Single static HTML file — no build pipeline, no dependencies, deploys via drag-and-drop
- "The Press Run" project showcase — seventeen independent projects laid out as letterpress plates on an asymmetric editorial spread, grouped into five runs (The Line, The Workshop, The Laboratory, The Reading Room, The Assay); hovering a plate "pulls an impression" (paper floods up from the base, type reverses to ink, the registration crosshair rotates)
- Ten-language i18n (EN, ES, DE, FR, HE, RU, PT, UK, ZH, AR) with full RTL support for Arabic and Hebrew, browser-language auto-detect, and
localStoragepersistence - Editorial brutalist aesthetic —
Antondisplay +Cormorant Garamonditalic +IBM Plex Mono+DM Sans - Scroll-driven motion — staggered reveals, fill-on-scroll text, parallax cursor effects on work cards, animated mesh background
- Glassmorphism, drop-in letter animations with idle breathing/shimmer/ghost-echo, custom cursor with adaptive light/dark detection
- Functional contact form wired to Formspree with full client-side validation, sending state, and live region status announcements
- Full accessibility pass — skip link,
:focus-visiblerings, semantic landmarks,aria-livefor form status,aria-pressedfor toggles,aria-hiddenon decorative elements - SEO complete — Open Graph tags, Twitter cards, Schema.org
Person+Occupation+awardstructured data,knowsLanguagearray, dynamic<html lang>updates - Mobile-first responsive —
vh+vwclamps, sticky nav with adaptive theming, dedicated touch breakpoints
| Layer | Technology |
|---|---|
| Markup | HTML5 (single file) |
| Styling | CSS3 (custom properties, Grid, Flexbox, clamp(), aspect-ratio) |
| Motion | CSS keyframes + IntersectionObserver + Vanilla JS scroll listeners |
| Type | Google Fonts (Anton, Cormorant Garamond, IBM Plex Mono, DM Sans) |
| Forms | Formspree |
| Hosting | GitHub Pages |
| i18n | Custom vanilla translation engine (no library) |
Why no framework? A portfolio is a content site, not an application. React would have meant a build pipeline, a bundle the browser must parse before painting, and a hosting story more complex than git push. The single-file approach loads instantly and stays maintainable at this scale.
git clone https://github.com/melaniesigrid/melaniesigrid.github.io.git
cd melaniesigrid.github.io
# Serve locally with any static server:
python3 -m http.server 8000
# or
npx serveOpen http://localhost:8000 and you're running the production site.
.
├── index.html # Entire site — markup, styles, scripts, translations
├── images/
│ ├── melaniemainpic.webp # About-section portrait (with Roko)
│ ├── BlockchainFuturistConference.webp # NEAR section gallery
│ ├── nearBountyWinners.webp # NEAR banner team photo
│ ├── discordWinnerAnnouncement.webp # NEAR section gallery
│ ├── blockchainConferenceViews.webp # NEAR section gallery
│ └── melsmeta.webp # Mel's Meta logo
└── README.md # You are here
Adding a new language — extend the i18n object in the inline <script> near the bottom of index.html:
const i18n = {
en: { /* ... */ },
ja: {
"nav.work": "仕事",
"nav.expertise": "専門",
// ... matching keys for every entry in `en`
}
};Then add a button in the .lang-dropdown markup:
<button class="lang-option" data-lang-set="ja">
<span>日本語</span>
<span class="lang-option-code">JA</span>
</button>Updating the contact form endpoint — replace the Formspree URL in the submit handler. The form ID is contactForm.
Adjusting the theme — all colors and type tokens live in CSS custom properties at the top of <style>:
:root {
--ink: #0E0E0E;
--paper: #F4F1EC;
--red: #E8380D;
--D: 'Anton', Impact, sans-serif; /* Display */
--S: 'Cormorant Garamond', Georgia, serif; /* Serif italic */
--M: 'IBM Plex Mono', monospace; /* Mono */
--B: 'DM Sans', system-ui, sans-serif; /* Body */
}- Single HTTP request for HTML; remaining requests are images and Google Fonts only
- No JavaScript framework to parse before first paint
will-changehints scoped to animated elements onlyIntersectionObserverfor scroll-triggered animations (noscrolllisteners except for hero logo + section detection)- Images served as WebP for further size reduction and quick load.
- Skip-to-main link for keyboard users
- Visible
:focus-visibleoutlines on all interactive elements - Semantic landmarks (
<nav>,<section>,<footer>) aria-label,aria-pressed,aria-expanded,aria-modalwhere appropriate- Form errors and status announced via
role="alert"andaria-live="polite" - Decorative motion elements marked
aria-hidden - Custom cursor disabled on touch devices via
@media (hover: none) - All translations update
<html lang>and<html dir>for screen-reader correctness
Melanie Baratto — Software Developer · Front-End Specialty 📍 Toronto, ON
- ✉️ melaniesigrid@protonmail.com
- 💻 GitHub
- ✍️ Medium
- 🚀 Wellfound
This repository is published publicly so the live site can be hosted via GitHub Pages, but the code, content, design, copy, photographs, and personal information are not licensed for reuse, redistribution, or derivative works. If you'd like to discuss using parts of this work, please reach out first. The content — copy, photographs, design choices, and personal information — is © Melanie Baratto and is not licensed for reuse.
Built with intention. No frameworks were harmed in the making of this portfolio.