How I Built This Site
Despite being a marketing student and a content creator, I've always been interested in design and technology. So, using my 5x hackathon experience, I decided to test my abilities by building a unique portfolio. This project means a lot to me, so I hope you like it as much as I do! (+ Please let me know if you find a bug.)
This site is also part of webring.ca, a ring of personal sites built by Canadian developers, designers and founders, made by Stanley Pang. Each member links to the next, one of the earliest ways people found new corners of the web. Use the leaf widget at the bottom of any page to hop along to someone else's sick website!
See the code on GitHub- 57 hours to build I don't want to talk about it.
- 27 commits Is this a lot or a little?
- 5 easter eggs Can you find them all?
Tools
What I used, and for what.
-
Claude Code
Wrote the HTML, CSS and JavaScript.
-
VS Code To manually edit HTML and CSS files (because Claude's writing sucks sometimes).
-
Figma Where I designed the logo myself! *Applause*
-
GitHub Where I host the site and store the code.
-
Vercel Where I deployed the site and purchased my domain.
-
Pinterest Where I sourced my artwork and graphics.
Stack
What it's made of.
- Code
- HTML, CSS and JavaScript.
- Pages
- One HTML file each, sharing one stylesheet and one script.
- Content
content.js, where I add videos, brand logos, products and quotes.- Type
- Charter for headings, your system font for everything else (no webfonts).
- Images
- Compressed before they ship for optimization.
- Hosting
- Vercel, connected to and deployed from my GitHub repository.