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.
Interactive AI Field
A dependency-free canvas renders luminous data streams that bend around the pointer, move autonomously on touch devices, and freeze cleanly for reduced motion.
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 are declared in HTML and the native system font stack requires no webfont request.
- 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, documentary imagery, and restrained 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