personal website

personal website 2.0

Tasks

2021-11-01 tasks

• add 404 page
• migrate to next / check out using vercel
• add search
• add now/about page
• add acknowledgments

someday

• fix shortcode for gallery image, need more lightweight way of putting in a gallery of images or also enabling lightroom for all images in my posts, generally manipulating images in posts is a huge issue
  • also need to look into how to handle lazy loading but for remote ones

Core

• add anchors
  • https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726/15 Spatial thing that people (maybe can move around or only insert first) Shows who touched / added what
• instead of something like dark mode, do transports into different worlds and change the background into abstract css patterns that match
  • ex: forest -> css back ground lines are mostly straight and look like trees
  • ex: ocean -> css lines look like waves/foam
  • ex: sky -> look like clouds
  • ex: mountains -> look like mountains

Future Developments

sidebar

.sidebar {
  position: absolute;
  left: 10vh;
  margin: auto 0;
  display: flex;
  height: 100vh;
  margin-top: 10vh;
  flex-direction: column;

  a {
    color: $color-blueberry;
    cursor:pointer;
  }
}

kaleidospace

vignettes

Thinking that it should be like showing flashes of diff pieces of my life. this is kinda like kaleidospace or more like the View-Master where you can flip through diff pieces of life. I want them to get very specific fragments of my life to augment the very abstract high-level things that you see.

Where to source the data from? Can be manual at first but want this to be automated…

• maybe augment with tag from obsidian brain? like#vignette
• and you can “pin” like 5 that are always there?

fits-stream

Sharing

1/ I’ve been incrementally updating my website, and it’s felt so empowering to have a space on the internet that is completely in my control.

I can tweak it depending on how I’m feeling day-to-day, and there’s no pressure to conform to established design norms.

2/ Personal websites feel like a space for exploration, play, and expression solely for you on the internet.

It’s your land and room and exhibition all-in-one on the world wide web, and it’s one of the few digital spaces where the vibe is completely under your creative control.

3/ I want to make my website feel like a digital extension of myself…

• cozy lounges with personal creations decorating the walls
• scattered mementos for story reminders
• worn artifacts and shiny new gadgets showing the evolution of interest
• decorative accents as style taste

4/ going to drop in updates as they come for my progress on this goal!

5/ I’ve been putting off implementing a navbar for a while because I didn’t just want to add another hamburger menu. I just started off exploring some headers with emojis for expressiveness and came up with this fun solution to make it mobile-friendly

This was my one of my first active, novel design creations, so I was really proud of it despite how small of a change it was.

6/ fits stream I wanted to share out my album of outfit of the days and found a way to do some on my own terms via my website to have a personal, ever-growing collection of them.

7/ animations I’ve been really into animations lately. Here’s a few fun ones I added recently and some other hidden ones that you’ll have to find for yourself :) https://twitter.com/spencerc99/status/1455787106278674432?s=20

Development Log

2022-11-13

updated fits page to be 3 cols so it is more browsable

2022-10-15

• added marquee at the bottom corresponding to status.spencerchang.me/api to take in what i read, listening to, quote, last run, etc.
  • timestamp next to them in “Spencer epoch time”\
• tried to add windows to the site but iframe scroll handling is jank :(

2022-10-07

• added lichen background and supported dark mode, cleaned up navbar

2021-11-15

major design changes, got rid of avatar and font stylings and added a bunch of fun animations.

2021-11-01

added filtering of favorites to fits stream

2021-10-11

lot of performance and usability improvements

• made website more performant by adding thumbnails for image posts, took forever because ^2f303d
• added a permalink to fits-stream as well as making responsive images and lazy load
• looked at lighthouse and Core Web Vitals for improving my performance too.

added copy link button and snackbar flow

2021-10-04

• added in react rendering support
• added in “fits” section, going to experiment with automatically uploading photos from my fit album up there
  • can this evolve into something that others use as a simple lightweight way to share a continuous series of photos?
  • alternative is finsta
  • struggled with resolving data on a static website generator. In this case, I want to use JSON to store my actual fit data and ideally want to be able to avoid any sort of remote loading and have hugo build it and generate the react appropriately. Unfortunately not great connectivity here because Hugo only lets you access these templates inside content template files and then inserts on build, so there’s no access before then.
  • Currently I got it working by remote loading the data but I’m thinking it’ll be better to use like json-data-loader or something like that to avoid that remote call and I don’t think it should add extra memory because it should all get minified?

2021-08-04

experimented with new navbar to navigate between different sections. Was thinking for a while how to make it work on mobile and ended up collapsing down to emojis to preserve the playfulness

https://github.com/spencerc99/personal-website-3.0/commit/805fd13d2fa71b5cc8941ddeaf6f32114db69853