My personal portfolio site, visible at oling.dev.
Built in raw HTML, CSS and TypeScript. No templates, frameworks or static site generators used.
The site is heavily optimised to be fast on mobile and desktop. In addition, it passes various accessibility tests (see below) and supports a range of displays and is custom-designed to be responsive for mobile.
The site scores 100/100/100/100 on Lighthouse for mobile and desktop, on both the home and about pages.
The site can be run statically (e.g. GitHub/Cloudflare Pages) or with server-side logic (e.g. Cloudflare Workers) - this is how oling.dev is deployed.
- Clone the repository and
cdinto it. - Transpile TypeScript into browser-friendly JS: run
tsc - Optional: run
npx wrangler devto run a local webserver, andnpx wrangler deployto deploy to Cloudflare Workers.
git clone https://github.com/draggie306/portfolio.git && cd ./portfolio && tsc && npx wrangler devBuild command: npm install typescript -g && tsc
Deploy command: npx wrangler deploy
Root directory: /
The site's design elements and overall experience are original ideas and creations. That being said, I did take inspiration for the following things:
- Hover element border effects: Fortnite.com
If you'd like to make a correction to the code, the grammar/English usage, or optimise something (such as the Medieval Tower Defense project's GIF into a webp), please open an issue and link a PR. It would be greatly appreciated!
If you would like to fork the repo and make adjustments for your own portfolio, I wouldn't mind a little shoutout somewhere :)