Frontend · HTML · CSS · JavaScript
eraykulkizaga.com
Portfolio Website
A minimalist personal portfolio built entirely from scratch with semantic HTML, modern CSS and focused JavaScript — no frameworks or build tools. Designed for clarity, accessibility, and responsive performance.
Key Features
Zero Dependencies
Built entirely with vanilla HTML, CSS and JavaScript. No React, no Vue, no bundler — just a browser and a text editor.
Reveal on Scroll
Elements fade and slide in as they enter the viewport using IntersectionObserver. Falls back gracefully when JavaScript is disabled.
System Motion
The opening signature, developer console, runtime signals, and reveal transitions create motion without a video or third-party visual.
Certificate Slider
User-controlled certificate previews use pixel-based translation to stay aligned across every card width.
Responsive Navigation
Sticky glass-style navigation on desktop and a full-width mobile menu with focus trapping, Escape key support, and accurate ARIA state.
Direct Contact
A visible email address and direct links to LinkedIn, GitHub, and the current CV remove unnecessary form friction.
Implementation Highlights
- IntersectionObserver powers reveal animations with a 0.15 threshold — elements animate exactly once as they scroll into view.
- CSS custom properties (
--bg, --text, --border, --shadow) enable effortless theming from a single :root block. - Pixel-based slider reads
container.clientWidthat runtime so slide transitions remain aligned after resize. - Sticky navigation remains available throughout the page, with a separate keyboard-trapped mobile dialog at smaller breakpoints.
- Focus management returns keyboard focus to the originating control after menus and image previews close.
- Image modal for certificate previews — click any cert image to zoom in, close with Escape or backdrop click.
- JSON-LD structured data (Person + Website schemas) embedded for search engine rich results.
Design Principles
- No layout shift — image dimensions declared in HTML, fonts loaded with
font-display: swap. - Accessible by default — skip-to-content link, ARIA labels on interactive elements, focus-visible outlines, keyboard navigable mobile menu.
- Prefers-reduced-motion respected — all animations and transitions are disabled via a single media query block.
- Semantic HTML throughout —
header, main, section, article, footer, navused appropriately. - Mobile-first responsive — layouts adapt from 1-column on phones to 3–4 columns on wide screens using CSS Grid breakpoints.
- Purposeful visual system — alternating light and dark scenes, restrained gradients, and code-native motion create hierarchy without an animation library.
- Deployed on GitHub Pages with the custom domain
www.eraykulkizaga.comand a CNAME record.
Technologies Used
Structure
Styling
Behaviour
Performance
SEO & Meta
Deployment
Site Structure
Pages
- index.html — Hero, Projects, Experience, About, Skills, Credentials, and Contact sections
- project-sign-language.html — Award-winning SignTurk project detail page
- project-supportflow.html — SupportFlow AI project detail page
- project-eraykulkizaga.html — This portfolio site detail page
- privacy.html — Privacy policy
- 404.html — Custom not-found page
Assets
- style.css — Single shared stylesheet across all pages
- script.js — Single shared JS file, feature-detected at runtime
- images/ — Logos, credentials, social artwork, and SignTurk product media
- manifest.webmanifest — PWA manifest for add-to-home-screen
- sitemap.xml — All page URLs for search engines
- CNAME — Custom domain record for GitHub Pages