Frontend · HTML · CSS · JavaScript
eraykulkizaga.com
Portfolio Website
A minimalist, performant personal portfolio built entirely from scratch with pure HTML, CSS and JavaScript — no frameworks, no build tools. Designed for speed, accessibility, and clean code.
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.
Parallax Layers
Subtle depth effects on the hero section via CSS transforms driven by scroll position, disabled automatically for users who prefer reduced motion.
Certificate Slider
Auto-advancing image carousel inside each certificate card. Pixel-based JS translation (not %-based) ensures exact alignment across all card widths.
Responsive Navigation
Sticky header with a glassmorphism effect on desktop. Full-screen overlay menu on mobile with focus trapping, Escape key support, and ARIA attributes.
Contact Form
Mailto-based form that opens the user's email client with pre-filled subject and body — no backend, no third-party service, no privacy concerns.
Implementation Highlights
- IntersectionObserver powers all reveal animations with a 0.12 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.offsetWidthat runtime so slide transitions are always exact, even on resize. - Sticky header hides on scroll-down, re-appears on scroll-up using a velocity threshold — reduces visual noise while keeping navigation accessible.
- Animated counters use
easeOutCubiceasing and trigger only when the element enters the viewport. - 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.
- Minimal paint budget — backdrop-filter only on the sticky header, box-shadow only on hover, no heavy gradients in the critical path.
- Deployed on GitHub Pages with a custom domain (
eraykulkizaga.com) and CNAME record.
Technologies Used
Structure
Styling
Behaviour
Performance
SEO & Meta
Deployment
Site Structure
Pages
- index.html — Hero, Projects, About, Skills, Certificates, Contact sections
- project-sign-language.html — Turkish Sign Language Translator detail page
- project-emu-book-exchange.html — EMU Book Exchange 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/ — All static assets (hero GIF, logos, cert photos)
- manifest.webmanifest — PWA manifest for add-to-home-screen
- sitemap.xml — All page URLs for search engines
- CNAME — Custom domain record for GitHub Pages