rossjrw / rossjrw.github.io Goto Github PK

Cards are dated as fuck. Material design did them, and now material design is out.

My cards have backgrounds, which really helps to break up the monotony. But it's not enough. The rectangles. softly-rounded though they are, are still painful to look at. Rectangles should only be to contain text, that's my new opinion, and even then try to avoid it.

Consider this: Maitreya's card has a large blue pentagon to the left, dipping underneat the image and cutting slightly offscreen, containing the gradient that the current background does. A grey stripe extends rightwards from it, barely visible against the white background but still clearly there, much thinner vertically than the pentagon but still tall enough to contain at least the text though perhaps only half the title. Overall, the project is taller on the left, and shorter on the right. There is space for two small projects, one in the upper right, one in the lower left.

That being said, there's still the polybullets showing shapes from triangles to hexagons. I could see a case for having a bit of shape variety.

• Logo animation
• Name animation - the j could extend to launch its dot towards r1, r1 hits it like a pinball whacker to r2 which hits it back with less force, it bounces off s1 onto o where it slowly rolls back towards r1, who hits it hard enough that it gets wedged in the w, and the r's panic a bit (or maybe the j stretches up to intercept)
• Project animation, activated by scroll

It'd be real neat to have some automatically-updating stats on the page.

For example: something like https://github.com/anuraghazra/github-readme-stats (the top languages thing):

Or maybe a line of text beneath each project like "This project represents XX% of my GitHub commits in the past year". Would also be pretty neat to show profile pictures of contributors.

https://profile-summary-for-github.com/user/rossjrw as inspiration

Vercel is looking good for this. Maybe not - looks like it's just frontend.

I would need a simple backend. Nuxt.js can take my Vue components, render them on the server, and send them as static HTML, which is fine for my purposes. I would need that rendering to include the stats that I want. I don't want those stats to be calculated from raw on every page load, so I'd need to cache them somehow.

GitHub has a real nice GraphQL API. The rate limit is 5000 points per hour, so assuming I max it out - which I definitely won't - at worst I'll be able to update the stats once per hour. Once per day is probably optimal.

Build flow:

• New commits to the backend trigger a build.
• The result of the build is put into a container. (?)
• The container is uploaded to ECR.
• The lambda uses the code from the ECR.

Server flow:

• EventBridge is scheduled to produce an event every day.
• The event triggers the Lambda.
• The Lambda talks to Github and gets the relevant data, then saves it to S3.
• CloudFront is set up to point to S3 as a CDN.

Then the client flow:

• On load, the data is requested from CloudFront.
• When it arrives, the projects are filled with the relevant data.

There's no space for Nuxt in the above workflow, but that's fine, because I didn't really care about it in the first place.

I would like to set up the AWS stuff using Terraform.

Gathered a bunch of old Pipeworks boards. Think it would be pretty interesting to have a thing that animates smoothly between them on a loop to show the progression of the game.

Question is, how?