My personal portfolio site — built from scratch in vanilla HTML, CSS, and JavaScript. No frameworks, no build step, no dependencies.
This repo contains the source code for my personal portfolio site, plus 20 small interactive projects I've built while learning front-end development. The site is hosted on GitHub Pages and served from a custom domain.
Every project in this repo is hand-written vanilla JavaScript — no React, no Vue, no bundlers. The goal was to build a strong foundation in the language itself before reaching for libraries.
Visit alekseilopatin.com to see everything in action. Each project below also links directly to its live demo.
| Project | Stack | What it does |
|---|---|---|
| School Portal | Next.js · Supabase · Tailwind | Multilingual school management app — news feed, gradebook, and student art gallery. Teacher login with role-based access. Deployed on Vercel. |
| Project | What it does |
|---|---|
| Stopwatch | Start / stop / lap timer with millisecond precision |
| Music Player | Browser-based audio player with a playlist |
| Todo App | Classic add / complete / delete task manager |
| Shopping Cart | Add items, adjust quantities, calculate totals |
| Calorie Counter | Track daily calorie intake against a budget |
| Spreadsheet | Mini Excel-style spreadsheet with formulas |
| Student Cards | Student record cards with editable fields |
| Newspaper Layout | CSS layout exercise — print-style newspaper page |
| Project | What it does |
|---|---|
| Date Formatter | Convert dates between common formats |
| Decimal to Binary | Convert decimal numbers to binary, with steps |
| Roman Numerals Converter | Convert numbers to Roman numerals |
| Statistics Calculator | Mean, median, mode, range from a number list |
| Palindrome Checker | Check whether a string reads the same forwards and backwards |
| Telephone Number Validator | Validate US phone number formats |
| Project | What it does |
|---|---|
| Dragon Repeller | Text-based RPG — fight monsters, level up, defeat the dragon |
| Rock, Scissors, Paper, Lizard, Spock | The Big Bang Theory variant of the classic game |
| Platformer Game | Side-scrolling jump-and-run platformer |
| Advanced Dice Game | Multi-round dice game with scoring rules |
| Project | What it does |
|---|---|
| Critical Hits for D&D | Look up extended D&D critical-hit results by damage type |
| Operations Generator for Bands of Blades | Procedurally generates operations for the Band of Blades TTRPG |
- HTML5 — semantic markup
- CSS3 — flexbox, grid, custom properties, responsive design
- Vanilla JavaScript — DOM manipulation, event handling, local storage, no frameworks
- GitHub Pages — hosting
- Custom domain via CNAME
alekseilopatin.github.io/
├── index.html # Home page
├── styles.css # Site-wide styles
├── script.js # Site-wide scripts
├── kombucha.html # Personal/blog page
├── kombuchaBenefits.html
├── projects/ # Web apps, calculators, converters
│ ├── stopwatch/
│ ├── musicPlayer/
│ ├── todoApp/
│ └── ...
├── miniGames/ # Browser games
│ ├── dragonRepeller/
│ ├── platformer/
│ └── ...
├── rpgTools/ # Tools for tabletop RPGs
│ ├── criticalHits/
│ └── operationGenerator/
├── randomQuoteMachine/
├── stopwatch/
├── media/ # Images and other assets
├── CNAME # Custom domain config
├── robots.txt
├── sitemap.xml
└── LICENSE
No build step — just open index.html in a browser, or serve the folder with any static server:
# With Python
python -m http.server 8000
# With Node
npx serve
# Then open http://localhost:8000- Refactor shared UI patterns into reusable components
- Add a dark mode toggle across the site
- Improve mobile layouts on the older project pages
- Lighthouse pass for accessibility and performance
The code in this repository is released under the MIT License. Personal content (text, images, the "About" copy) is © Aleksei Lopatin and not covered by the license.