Thank you to everyone who gave feedback on the site design: Karlie, Kelly, Mom, Dad, Mel, and Sam!
Making a personal website from scratch is rare, with simple tools like Wordpress or Squarespace covering the needs of most! What you lose in their simplicity, is a high degree of flexibility and workflow productivity though, and since I do so many things, in different formats, media, for different audiences, and different goals, I found that my story doesn't quite fit into a premade template
The Multifacet
All I make is in conversation with all I make, one big internal family of interests and curiosities. I feel uncomfortable ranking my creativity or categorizing aspects of myself like that - so to showcase projects I've worked on, I really wanted project categories to be on the same eye-line, all visible at once, no names longer than any other, none given visual or symbolic advantage over another. I chose verse, music, video, codes as decent separators, even though many of the projects in one category has huge spillover into the others. The accordion-like UI on the front page is my solution to this, a custom React component I call a "Multifacet", because what create is always multifaceted!
The Deep Field
The background stars and galaxies are three layers of transparent images created using VerseView. They're essentially clusters of lines and dots in precise but randomized patterns to resemble stars and spirals!
The farthest objects are spiral and elliptical galaxies, and they are even slightly red-shifted! 🤩
The Stack
Vercel's NextJS server hosts the website, written in TypeScript, using React for UI, and TailwindCSS for styling.
Content pages (like this one!) are written in extended markdown MDX, which allows React components to be embedded within!
Markdown is natural to write text and embed simple things like images and links in, while React powers the more complex UI
For instance, to make things italic or bold in markdown, you just write:
Make things _italic_ or __bold__, or you can embed code easily like: `const x = 5`
And as far as React goes, to show a YouTube video (from within the same file as the Markdown text!) its just,
<>
<YouTubeEmbed url="https://www.youtube.com/watch?v=K4BVCHL93KM"/>
</>
Which shows up as,
YouTubeEmbed is a function holding the aesthetic and functional
details always needed to show a video in a consistent way,
const YouTubeEmbed = ({url}: {url: string}) => {
return (
<div className='flex-col items-center justify-center w-full aspect-video'>
<ReactPlayer
url={url}
width='100%'
height='100%'
controls={true}
config={{
youtube: {
playerVars: {
rel: 0, // disable suggested
showinfo: 0, // disable title
controls: 1, // show controls
modestbranding: 1, // hide logo
},
},
}}
/>
</div>
)
}
This cleans up repetitive HTML + CSS that'd be needed to embed a video, and I can change the look of all videos on the site at once!
Extremely grateful to open source projects, their maintainers, supporters, and contributors, for making modern web dev so powerful! 🙏