You are browsing as a guest. Sign up (or log in) to start making projects!

Scribbles & Semicolons

  • 4 Devlogs
  • 11 Total hours

A notebook-inspired personal website showcasing my projects, experiments and proof that "it'll only take five minutes" is the biggest lie I've ever told myself before gaslighting myself into believing I was almost done 🥀

Ship #1

My personal site, it's built around a notebook metaphor instead of a standard portfolio layout. Grid paper background, hand-drawn margin annotations and a Marginalia section for things that don't fit under "projects". Built with HTML, CSS and a small amount of JavaScript (very small indeed). Full writeup of the process is in the devlog!

Try project → See source code →
Open comments for this post

2h 4m 21s logged

Devlog 4 - probably the last one before this ships


I keep telling myself this is close to done which is exactly what I said the last three times so take that with the appropriate amount of salt. But this time there’s a real reason to believe it. Most of what’s left is polish not decisions anymore.

what actually changed

The site went through more identities than I’d like to admit before landing on the notebook look. I tried a blueprint version, a PCB/circuit-board version, a GitHub-dark version. All of them looked fine. But none of them looked like it suited me, it was a very conflicting feeling. The notebook one stuck because it’s the only one where the metaphor does real work! grid paper, a spiral binding, margin notes with actual arrows pointing at the sentence that matters. It made sense in my head so I left it that way.


Once the theme was settled, most of the work was making it feel less templated and more like something a person actually wrote. Early drafts of the About section kept reusing the same few phrases without me noticing. Every project blurb ending on the same self-deprecating note. Once I caught it, I went back through line by line and cut the repeats until it actually sounded like me instead of me imitating myself. The newest piece is Marginalia. A small section for the stuff that doesn’t fit under “projects” because it’s not a project, it’s just what I’m reading right now; that could mean a design thinking book, German grammar drills, Meditations, my interest about semiconductors. It’s styled as loose index cards taped down at odd angles instead of a clean list on purpose. A tidy bulleted list would’ve looked like a resume section. This is supposed to look like stuff pinned to a corkboard because that’s closer to what it actually is. There’s a colophon now too, tucked at the very bottom. What I built it with, what it’s set in. Small thing but I like that it’s there.

why it’s taking this long

Two honest reasons, no dressing them up. College session started back up and coursework wins every time it competes with a side project for hours in a day. That’s not a complaint, it’s just the actual constraint. I can’t build fast on a hobby site when the thing paying for the degree needs the same brain. And I’ve just been tired. Just the ordinary physical exhaustion of stacking coursework on top of a project I care about where neither one gets the focus it deserves and both end up a little slower for it. Some nights the right call was closing the laptop instead of pushing out a section that would’ve needed redoing anyway.


Neither of those is a great excuse for a slow devlog cadence but they’re the true ones.


what’s actually left

Contact section still isn’t back in. dropped it a while ago, might need to rebuild it now that the rest of the layout has moved on. I do need suggestions and opinions for that. And there’s a couple of real bugs to clean up before this goes anywhere public. And then it’s done or at least done enough to stop calling it a work in progress

0
0
8
Open comments for this post

3h 15m 30s logged

Devlog 3

There are already enough portfolios on the internet. You know the ones with dark background, giant gradient blob, “Hi, I’m X” followed by twelve technology logos and a call-to-action that says “Let’s Connect.” They’re polished but they don’t really tell you anything about the person behind them. And I wanted something different. The idea slowly became a notebook. Not a perfect one, one that’s been carried around for a while. Grid paper, handwritten annotations, sticky notes, typewriter text, little arrows pointing at things that probably didn’t need explaining but got explained anyway


The About section became surprisingly personal. Instead of listing hobbies, I wrote about why I enjoy electronics, why medieval engineering fascinates me and why I keep pulling things apart until I understand how they work. It feels much more honest than anything else. Marginalia is probably my favorite section so far. It’s exactly what the name suggests! the things I’m currently reading, learning or obsessing over. German grammar drills, Meditations, semiconductors.. they’re all snapshots of whatever has my attention at the moment. The little sticky notes scattered around the page make it feel like someone actually uses this notebook instead of simply displaying it. I also hid a small easter egg in the navigation. Every personal website deserves at least one thing that exists purely because it made its creator smile.


This devlog ended up being less about adding new features and more about polishing what was already there. Most of the time went into fixing CSS quirks, adjusting spacing, repositioning elements and making everything feel a little more cohesive. None of the changes were particularly flashy on their own but together they made the site feel much closer to the notebook aesthetic I had in mind. It’s one of those sessions where a dozen tiny tweaks ended up making a much bigger difference than a single new feature ever could

0
0
7
Open comments for this post

2h 18m 13s logged

Devlog 2


Getting the About section written took longer than I expected. Because it’s surprisingly difficult to write about yourself without sounding like you’re trying to impress someone. I rewrote the same paragraphs more times than I’d like to admit, slowly replacing things that sounded good with things that actually felt like me. The Projects section had a different problem. Turns out writing code is easier than writing about the code you’ve already written. Summarizing months of work into a few sentences, choosing screenshots, deciding what to leave out and figuring out what someone would actually find interesting is its own little design challenge. The biggest change, though, ended up being the handwritten notes


At first, the page looked like every other portfolio I’d seen. Project title, description, repository link, repeat. It worked but it didn’t feel like my notebook. The little margin notes, project statuses and honest comments about what went well (or didn’t) gave each project a bit of personality. Ironically, those tiny annotations took longer to write than some of the summaries. Maybe building a portfolio isn’t really about showing everything you’ve made

0
0
4
Open comments for this post

3h 9m 46s logged

Devlog 1: Trial and error will be the end of me


This page took almost three hours and somehow none of that time was spent writing code. I mean- it was.. BUT YOU GET MY POINT. The hardest part wasn’t building it. It was deciding what it should even look like. I went through idea after idea, scrapped most of them then spent way too long trying to imagine the layout in my head. How much space should there be between sections? Is this too empty? Too crowded?


The funny part is that I wanted this site to feel like one of my real notebooks. Except my real notebooks look like they survived a natural disaster. They’re full of arrows pointing nowhere, thoughts squeezed into the margins, things crossed out three times and random ideas that only make sense because I wrote them. Turns out translating that into a website without making it look completely chaotic is… surprisingly DIFFICULT! GRRAAHH


Every project reminds me of the same thing. Starting is the hardest part. Finding a direction, committing to a design and figuring out the layout and spacing always takes me longer than writing the code itself. Eventually something clicks. Until then, it’s mostly moving things around, staring at them, moving them back and pretending it’s part of the process, ay i mean it kinda IS part of the process! ANYWAYS, as i was saying- trial and error is genuinely going to be the end of me one day.

0
0
5

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…