📚 node [[personal-website]]

I love the personal website; it says so much about who someone is, what they stand for, and how they'd like to represent themselves - from both a technical and an aesthetic perspective. One of my favorite pastimes is browsing these sites and trying to learn more about the people behind them.

My site can be found at https://jacob.chvatal.com.

Inspiration

Animated

  • https://github.com/zzh8829/zihao :: An excellent game on his website that involves placing blocks in various places, build with a combination of hugo and node. uses twien.js to show some great animations working!

  • https://www.zx2c4.com/# :: Love that this fetches projects from git as well as shows a scrolling interface through their source code. I should make a website like this to showcase my own projects via the github api! See https://github.com/jakeisnt/projects.

  • https://github.com/xdesro/vogue :: There is so much dynamism here! Very enjoyable to interact with.

  • https://tatianamac.com/ :: Lots fo detail but none of it is distracting. So many important articles!

  • https://willcrichton.net/# :: It's a personal website that's playable inside a game boy! This is a major motivation for me to work on this wiki platform -- I want a single source of truth for all of my web spaces, but I also want to be able to render different representations of my website depending on how I'd like to display it at any given time. The question is, though, how I should best separate these concerns!

  • http://umru.pcmusic.info/ :: This rendered animation in the background is... a lot.

  • https://simone.computer/#/ :: Just incredible! Like an old windows machine, complete with animated screensaver if the user stops browsing for awhile.

  • http://eeerik.com/ :: Another web portal; this feels so much more modern. I love the idea of developing little applets and running them inside the web portal. The bootup page is fantastic as well!

  • https://seththompson.org/ :: This is a website I'd love to have if I were more of a designer. I love how cluttered it is, displaying tons of information yet managing it super well. Seriously brutalistdesign that's incredible to follow. Love that they're now pursuing a school of architecture after working at Google!

  • https://antyfest.ru/en?mc_cid=ce7cd9a7c7&mc_eid=538eb81695 :: fun website for checking out festivals - with ants?

  • https://sno2wman.dev/ :: This is just a circle with several social media links, but I love the animations that go along with it. The source code can be found here

  • https://eyeondesign.aiga.org/ :: The eyes that flash when you first open the site make this experience!

Beyond web

  • novel design!a website that interfaces with a physical device, a pi, and flashes a smiley face whenever someone visits the page. lends some personal, physical characteristics to an otherwise void webspace. they also have very good book recommendations

  • https://hyena.network/geocity/: an incredible array of wild designs, designed to resemble a window system. i'm getting some rugrats, early 2000s energy from this one.

  • ins-studio:: Love mousing over the different subjects to view more detail about them throughout the website. Incredibly well-designed work.

Minimal

  • http://mikhailkhoury.com/ :: I patterned my current website after mikhail's. It's incredibly minimal and feels mysterious and personal at the same time.

  • https://mackenzie.blue/ :: Love the phone animation, the fading blue text, the red border, and all of the sections showcasing little art projects in between. Great model!

  • https://nthea.xyz/ :: Big fan of her fits and her web work doesn't disappoint - done in good taste. Love the functionality of the interactive menus.

  • http://ryanhileman.com/ :: No CSS! Super communicative with brief descriptions of all of their projects and interests. There is no mystery to what they've made.

  • http://ryandoeng.es/ :: "And the gears notch and the engines wheel."Academia

  • https://omar.yt/ :: incredibly simple. super easy to read their website just by looking at it. wish there were more substance though...

  • https://shifrakhan.com/ :: the minimalism speaks to a lot of their accomplishments; seems like a very impressive person.

  • https://craze.co.uk/ :: They fille the space incredibly well with this design, even though it's clearly designed with minimalism in mind. Love that navigation and 'back' are entirely built into the site. Try this out for a personal website sometime.

  • http://charlix.cx/ :: This is incredible! The website is blurry. Figure out how this is accomplished!

  • http://www.call-with-current-continuation.org/ :: That ascii art is beautiful. I love how much dynamism it adds to their website without having to introduce any graphics. I wonder if there's some way to generate cool ascii art to showcase on different websites...

  • https://ofcr.se/ :: Phrased introduction similar to my website but with much more information on it. It's worth considering adding more words to mine; this reads very well.

  • https://ariellam.com/ :: I love the frames! This website has some excellent design work behind it.

  • https://inns.studio/ :: This isn't exactly javascript minimal, but the scrolling feels incredible here.

  • https://aaron.ng/ :: The font is a bit strong - don't think I'm a fan of the headings - but I like a lot of Aaron's ideas!

  • https://zvava.org/ :: That graphic at the top is some incredible work. I love the dots and zig-zags - not something that's seen often!

  • http://000024.org/ :: No CSS! This is a Programming Languagesresearcher for sure. Lots of interesting projects to check out.

  • https://gndclouds.cc/ :: Love the boxes and colors!

  • https://whitequark.org/ :: Of the essay type, from a very impressive and prolific programmer working on systems and programming languages tasks. Their lab notebookis definitely worth a peek as well.

  • https://benkettle.xyz/ :: Love how minimal this site is with little to no design requirements.

  • https://samgildea.space/ :: Such a fun site to navigate. Shoutout to Sam. Easy and fun to use; the animations are excellent.

  • https://www.dandevri.es/ :: Great blocks with lots of dotgrid styles!

  • https://mariaadelaide.com/ :: Incredibly simple. Shows project name and collaborators every time. Great source of inspiration for web development; lots to learn here. Their project here: https://cornelljournalofarchitecture.cornell.edu/ seems super useful as well.

  • https://parkimminent.com/ :: Incredibly simple and easy to navigate!

  • https://eti.tf/ :: Incredible logo on the main page. Their bookmarks are also super useful and relevant as well.

  • https://www.liangela.com/ :: The projects and work experience are put front and center here. Love the styling they've used for navigating their journal - apt reflection on personal experiences - as well as their colors and choices. Read their writing and learn to write more like them! It all seems to just flow together.

  • https://alexbo.land/ :: There is very little here but it feels like a bridge to a ton of content.

  • https://romainaubert.com/ :: Another iteration on a simple, clean design that's super easy to navigate.

Resume-Like

Brutalist

Quirky/Novel

  • https://github.com/diracdeltas/random-training :: A bit of a sloppy site that generates random training workouts. Love the slapped together aesthetic that feels both quick and deliberate; if it weren't purposeful, there would certainly be more padding issues.

  • https://niksethi.com/ :: This website is a conversation - a choose your own adventure that walks the reader through their accomplishments! Great work.

  • https://t-ravis.com/#r=start&c=look :: The personal website as a dungeon crawler.

  • https://v-os.ca/ :: All of the wild visuals, graphics and navigation quirks here make this site incredibly fun to navigate. I've never seen anything like it!

  • https://copiona.com/dise%C3%B1o/2019/10/08/collagetober.html :: An incredible brutalist theme and work. This is a joy to browse and explore; it has just enough color to engage the user but is minimal enough to not distract from the art and content that's such a focal point of the site.

Blog

  • https://paco.sh/blog :: Nice layout here; great font and spacing. Love the light interaction hovering over each article. Shows just the right amount of information with good enough padding.

  • http://seenaburns.com/ :: This 'devlog', as it's labeled, catalogues a lot of cool visual code experiments. Love the way it's concisely presented - and the style really stays out of the way.

  • http://www.brendangregg.com/ :: I don't think that this was a conscious effort or a particular exercise in web design, but I love how easy it is to see exactly what Brendan's written and worked on!

  • http://npisanti.com/main/index.html :: Little more than a feed of different animated web experiments; I love that it showcases all of these cool code animations. Definitely a great source of inspiration for some 3D tidbits. It would be excellent if I could add this feature in this Wiki

  • https://ellen.cool/ :: this website looks like it's completely handwritten - it could have been composed on my remarkable. love the look. worth trying out for a project of my own!

Retro

  • https://blog.256bit.org/ :: Incredible visual that looks like a boot screen.

  • http://www.cyberdelia.party/ :: This website doesn't say much of anything, but I love the waves of ascii characters that are generated and displayed!

  • http://apgwoz.com/ :: A website that looks just like a manpage! Love how simple it is as well as the blinking cursor at the bottom.

  • https://flak.tedunangst.com/post/good-idea-bad-implementation-crosstalk :: Love the blocks here. Excellent choice of font as well. Feels retro and modern at the same time! Wish there were a bit more padding... The loading animation looks incredible but it's a bit annoying when interacting with the site for longer periods of time.

  • https://ertdfgcvb.xyz/ :: Wonderful text and code animations. It's so exciting to watch this! Definitely inspired - look into how these things can be imitated.

  • https://rosswintle.uk/ :: A terminal hosted at the top of the website! Shares similar values in terms of sustainable web design as well : )

  • https://benshapi.ro/ :: This looks just like a BIOS screen - perhaps it's meant to resemble an old not-quite-computer-GUI though. I love the loading animation and the color scheme; really feels like I'm booting up an ancient IBM machine.

  • https://amandayeh.com/ :: inspired by retro computing and classic mac window management. love all of the little quirks hiding on the site and the gifs! great way to present previous projects as well. her friend https://yg.is/ 's website is incredibly well designed as well.

Photography

Others!

https://edmondng.ca/output/snake great inspiration for motion graphics hosted on a website. see if i can do something like this for my personal site.

📖 stoa (open document) at doc.anagora.org/personal-website
⥱ context