🌐 Personal Website — Static Portfolio

This repository implements a static personal portfolio site showcasing projects, experience, education, and contact. Deployed to GitHub Pages with automatic CI/CD. Vanilla HTML, CSS, and JavaScript, no framework. Fast, accessible, and zero-cost hosting.

🎯 Project Overview

The goal of this project is to:

• Build a clean, fast-loading portfolio site without framework overhead.
• Present projects, experience, education, volunteering, and contact in a clear, scannable layout.
• Deploy reliably via GitHub Actions with automatic updates on every push to main.
• Keep the stack simple: HTML, CSS, JavaScript only — no build step for local development.

This site demonstrates that a polished, interactive portfolio can be shipped with vanilla web technologies.

🔴 Live Site

https://florykhan.github.io

Screenshot of the portfolio homepage

✨ Key Features

• Hero & Intro — tagline, CTA links (Resume, GitHub, LinkedIn), profile photo.
• Featured Projects — cards linking to project detail pages with demo/report labels and tech tags (e.g. GymWhisper, TelusGuardAI).
• Narrative Timeline — horizontal marquee showcasing career path: Gallery → SFU → Synkron → Projects → Next.
• Skills & Tech Stack — languages, ML/data tools, web tools grouped in chips.
• Experience, Education, Volunteering — entries with company/institution logos, roles, dates, bullets, and skill tags.
• Posts — cards linking to LinkedIn write-ups (ML Hackathon, TelusGuardAI, GymWhisper).
• Contact — Formspree-powered form plus email, LinkedIn, GitHub links.
• Interactions — sticky nav, scroll reveals, type-on-scroll effects, timeline marquee animation.
• Responsive layout for mobile and desktop.

🧱 Repository Structure

florykhan.github.io/
│
├── src/                                      # Source files (development)
│   ├── assets/                               # Images, icons, resume PDF
│   │   ├── icons/
│   │   ├── images/
│   │   └── Ilian-Khankhalaev-Resume.pdf
│   │
│   ├── pages/                                # HTML pages
│   │   ├── index.html                        # Home page
│   │   ├── projects.html                     # Projects listing
│   │   ├── narrative/                        # Narrative timeline pages
│   │   │   ├── gallery.html
│   │   │   ├── sfu.html
│   │   │   ├── synkron.html
│   │   │   ├── projects.html
│   │   │   └── next.html
│   │   └── projects/                         # Project detail pages
│   │       ├── gym-whisper.html
│   │       ├── network-impact-analyzer.html
│   │       ├── personal-website.html
│   │       └── ...
│   │
│   ├── scripts/                              # Vanilla JavaScript
│   │   ├── timeline-marquee-extend.js
│   │   ├── type-on-scroll.js
│   │   ├── scroll-arrow.js
│   │   ├── text-scramble-reveal.js
│   │   └── gallery-carousel.js
│   │
│   └── styles/
│       └── main.css                          # All styles
│
├── scripts/
│   └── deploy-prepare.sh                     # Build step for GitHub Pages
│
├── .github/workflows/
│   └── deploy.yml                            # GitHub Actions CI/CD
│
├── dist/                                     # Output (generated, not tracked)
│
├── .gitignore
├── LICENSE
└── README.md

🗒️ Note:
The dist/ directory is generated by deploy-prepare.sh during CI and is not tracked by Git. Paths are rewritten so links work at the site root (https://florykhan.github.io/). Local development uses src/ directly — paths assume pages are under src/pages/.

🧰 Run Locally

You can run this site on your machine with no build step — just open or serve the src/ directory.

1️⃣ Clone the repository

HTTPS (recommended):

git clone https://github.com/florykhan/florykhan.github.io.git
cd florykhan.github.io

SSH (if you have keys configured):

git clone git@github.com:florykhan/florykhan.github.io.git
cd florykhan.github.io

2️⃣ Open or serve the site

Option A — Direct open (some paths may break for nested pages):

open src/pages/index.html

Option B — Serve locally (recommended):

cd src && python3 -m http.server 8000

Then open http://localhost:8000/pages/index.html in your browser.

3️⃣ Paths

All paths assume pages live under src/pages/. Styles, scripts, and assets are referenced relative to that structure.

📦 Deployment

• Automatic: Push to main → GitHub Actions runs deploy-prepare.sh → builds dist/ → deploys to Pages.
• Setup: In GitHub repo Settings → Pages → Source, set GitHub Actions.
• The deploy-prepare script copies src/ into dist/ and rewrites ../styles/, ../assets/, ../scripts/ so links work at the site root.

📄 Project Detail Page

For a full write-up, see the project detail page on the live site, which covers the problem and context, functionality, tech stack, architecture, and key takeaways:

Personal Website — Project Detail

🚀 Future Directions

Possible improvements for future iterations:

• Add a blog — static markdown → HTML pipeline or lightweight CMS.
• Dark / light theme toggle — persist preference with prefers-color-scheme or localStorage.
• Performance — lazy-load images, critical CSS, reduce main.css size.
• Accessibility — axe audit, skip links, improved focus management.
• i18n — optional multi-language support for key pages.

🧠 Tech Stack

• Frontend: HTML, CSS, JavaScript (vanilla, no framework)
• Hosting: GitHub Pages
• CI/CD: GitHub Actions
• Form: Formspree (contact form email delivery)
• Version Control: Git + GitHub

🧾 License

MIT License, feel free to use and modify with attribution. See the LICENSE file for full details.

👤 Author

Ilian Khankhalaev
CS Student, Simon Fraser University
📍 Vancouver, BC | florykhan@gmail.com | GitHub | LinkedIn