Baran Dursun — Personal Portfolio

A modern, fully static personal portfolio site. No frameworks, no build step — pure HTML, CSS, and vanilla JS.

Live features:

• Dark / light mode (persisted via localStorage)
• Scroll-triggered reveal animations, with staggered delays on cards and timeline items
• Scroll progress bar at the top of the page
• Active nav link tracking based on scroll position (bounds cached, recomputed on resize)
• Vertical timeline for experience
• Case-study cards with screenshots, plus a compact project card grid
• Responsive mobile nav with hamburger → X animation
• SEO layer: canonical URL, Open Graph + Twitter cards, JSON-LD Person schema, sitemap.xml, robots.txt

---

Getting started

No install required. Open directly in a browser:

open index.html

Or run a local dev server for proper asset loading:

npx serve .
# → http://localhost:3000

# Alternative with Python
python3 -m http.server 8000
# → http://localhost:8000

---

File structure

├── index.html         # All content and markup (incl. SEO head + JSON-LD)
├── styles.css         # Design system, layout, animations, dark mode
├── script.js          # Theme toggle, scroll progress, reveals, active nav, mobile nav
├── resume.pdf         # CV — linked from the contact section
├── sitemap.xml        # Single-URL sitemap
├── robots.txt         # Allow-all + sitemap reference
├── assets/
│   ├── photo.jpg      # Profile photo (used in hero)
│   ├── og-image.png   # 1200×630 social share image
│   └── shots/         # Case-study screenshots
└── README.md

---

Customization

Colors & fonts

All design tokens are in styles.css under :root. The main accent color is green (--accent). To change the palette, update only these variables — nothing else needs to change.

:root {
  --accent:       rgb(22, 125, 19);
  --accent-hover: rgb(18, 105, 15);
  --accent-soft:  rgba(22, 125, 19, 0.10);
  /* ... */
}

Content

All text content is in index.html. Sections in order: Hero → About → Experience → Projects → Contact. Each section is a <section> tag with a matching id.

Resume

Replace resume.pdf in the root folder. The download button in the contact section points to it automatically.

Profile photo

Replace assets/photo.jpg. The image is displayed at 300 × 300 px in a circular crop — square source images work best. Keep it small (resize to ~640 px, JPEG quality ~82).

---

Deployment

Deployed on Railway and live at kemalbarandursun.com (with www as an alias). The service is connected to this GitHub repo — every push to main triggers a redeploy.

railway.json selects the Railpack builder, which detects the root index.html and serves the site as static files (via Caddy). No build command needed.

To deploy the local working tree directly without pushing:

railway up

Custom domains are managed in the Railway dashboard under Service → Settings → Networking.

---

Tips for job applications

• Keep project links up to date (GitHub repos or live demos) so recruiters can see your work.
• When you update your CV, replace resume.pdf in this folder with the new file so the site always points to the latest version.

---

Browser support

Works in all modern browsers (Chrome, Firefox, Safari, Edge).

---

License

Personal use. Not intended for redistribution as a template.