Colophon
Woah I made a website; somebody hire me
The first time I built a portfolio site from scratch involved heavy use of Adobe Creative Suite, specifically Dreamweaver, Photoshop, Illustrator.
Now, the industry landscape is insane such that a fair amount of this site at the time of this writing was accomplished in ~3 weeks 🦥 by:
- lightly designing in Figma
- alternating between Cursor, VS Code, and ChatGPT
- debugging with Firefox and Chrome's developer tools, and
- using conscientious ✨ CSS ✨, quite surprisingly
That said, much of the coding was definitely not simply vibing. The challenge with going DIY was running into problems where solutions were not obvious. Sure, this code block works just fine elsewhere, but how do I make it work for this use case or that content? Also, the type scales still need more fiddling.
In an era where many portfolios lean on Webflow, Framer, Squarespace, and the like - not to mention the tandem urgency of my job search 💀 - I was swayed to sweat through creating something that spoke more to my own style.
Devil in the Details
Some details that went into this project include:
- Glitchy-esque svg filters thanks to CSS Doodle 🖌️
- Animations like Oneko.js 🐈
- Project panes inspired by Jhey 🍱
- Typography from VJ Type ⚜️
- FFmpeg for video compression and conversion 📽️
The more onerous web development tasks included nailing the responsive stylings and addressing cross-browser compatibility. The light/dark mode toggle is for some reason M A S S I V E on Safari. Tragically, I'm not good at everything.
The more enjoyable tasks involved image and video assets, animations, and interactions such as the project panes and glitchy texts. There's certainly an affinity for work that provides rapid multi-sensory feedback (visuals, audio, tactile textures, timing... that sort of thing)
I would have loved to illustrate some assets but publishing this ding dong thing sooner was a bigger urgency.
If you're a hiring manager or recruiter and you like what you see, please reach out. Negotiating hourly pay for shampooing carpets AIN'T CUTE.
Design and Dev Notes
| Date | Notes |
|---|---|
| July 19-20 | Compressed imgs and vids, reducing 70% of the starting file size at the start of the weekend (>330mb to ~98mb). Reorganized and cleaned more files and folders. Styled all notes, such as reorganizing html, padding and colors to the table, and lazy loading responsive images. Finished adding tabindices to index, Founts. Added Colophon. Launched MVP |
| July 18 | Delineated between fount-gallery and founts-gallery classes to deconstruct into separate gallery IDs. Finished adding and formatting Founts gallery content. Sussed out javascript iframe embed and styling. Cleaned up more html files. |
| July 17 | Rerouted select links to Figma slides, Youtube, or other websites. Deleted unused javascript and html. Created and inserted favicon assets and html. Finished migrating Notes, adding pane background videos. Added Founts content. Cleaned and reorganized files. Rescoped MVP. |
| July 16 | Added tabindices to index links and buttons. Built Projects page skeleton. Adjusted padding and alignment issues. |
| July 15 | Scrapped javascript approach in place of css for scrolly interaction. Vehemently shook fists at the world upon this realization and fixed layout issues. Merged scrolly fixes with responsive fixes on index html. Considered easter egg concept. Updated FigJam |
| July 14 | Diagrammed scrolly javascript code variations. Troubleshooting scrolling and responsive issues |
| July 11 | Researched note feed and content workflow strategies. Updated file architecture in FigJam and task priorities. Updated footer links. Created Founts html with banner skeleton and found browser redirect bug. |
| July 10 | Adjusted color, spacing, and other styles for responsiveness across select browsers. Added socials. Designed Notes template. Created and linked Notes pages. Migrating Notes. |
| July 9 | Adjusted divs, spans, and their css for projects-grid emoji and link alignment in mobile viewport widths. Made a chonkload of typography updates for scannability, legibility, style points, and comprehensive responsive behavior. Added margin lines in Notes section. |
| July 8 | Changed Art > Founts. Added panes.css variables for projects-grid columns and refactored corresponding html. Added and styled Notes section. Adjusted hover state for svg-filter feTurbulence effect. Adjusted welcome-heading and projects grids styles and refactored index html for responsiveness. Fixed Nav and Footer styles in light and dark modes. Edited and added portrait image |
| July 7 | Added 2nd project pane and fixed its sliding functionality. Adjusted content alignment with panes, main css and html |
| July 4 | Added content and video assets to Project panes on index. Tested svg code vs. Figma exports |
| July 3 | Cleaned up conflicts between panes css, main css, index html. Fixed pane js transitions. Set up local testing server |
| July 2 | Added panes css, js. Set up Project panes on index, designed and tweaked interactions |
| July 1 | Aligned divs and sized grids, layout on index |
| June 30 | Locally set up html, css, js files. Created new repo |
| June 29 | Created File Architecture |