Need to design a logo and design system to be used throughout the site.

I believe I have the font I want already picked out (the one currently on the site) but may want more.

• Small logo (circular icon)
  • To be used for favicon, upper corner, etc.
• Longer textual logo
• Others?

Once done:

• Add to sites

the sickest homepage u ever seen

To Do

• Design
  • Something in Papyrus font, lol.
  • Bows: 🎀 or ⋆𐙚₊˚⊹ ᡣ𐭩 or ˚⟡˖ ࣪
  • Gotta have something with three.js. The homepage should feel very human and like it's real.
• Link in my GitHub README bio once done

• Evaluate Tailwind 3 vs Tailwind 4 and if v4 is okay to use for this project even though it's still in alpha release
• Set up repo to use Tailwind
  • Install prettier-plugin-tailwindcss
• Restyle "Check back soon" page to use Tailwind styles as a "Hello World" for Tailwind
  • Edit: I even implemented dark mode on the "Check back soon" page :)

The one at the bottom of https://xeiaso.net contains the following, and I should have something like it:

Copyright 2012-2024 Xe Iaso (Christine Dodrill). Any and all opinions listed here are my own and not representative of any of my employers, past, future, and/or present.

Can also see bottom of https://arshsharma.com/about/:

Legal boilerplate: All opinions expressed on this site are mine alone.

Really have been contemplating whether shadcn-svelte is right for my project. After a bit of research, the three component libraries that I'd be okay using are

• shadcn-svelte
• Flowbite
• Skeleton UI

These are all fairly mature.

Found three fonts on fontshare.com that are nice:

• Sentient Crimson Pro is better for my site, plus it's open source.
• Erode Similar to Sentient, but Sentient is better.
• Crimson Pro ✅

Going with Crimson Pro for now. Later I found out about Google Fonts, and found Crimson Pro on there.

From the embed generator there, it produced the following to add to the document head:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

All the tutorials out there for adding a custom font with Tailwind are for v3 and not v4, so they all say to extend the font family in tailwind.config.js. As Tailwind 4 currently doesn't support that file (they will for back compat, just not yet), we will need to use the new CSS-native-feeling way. Their example looks like the following

@import "tailwindcss";

@theme {
  --font-family-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}

, so let's see if we can get it working.

Design

Landing Page

One common thing I see is where blogs are just a bunch of articles stacked in a list, like on microlink.io. I really don't think this is the best way to go about it, especially as the number of blog articles scales. The blog should not only be searchable, but also have topics to select from in some sort of way that effectively communicates which topics are available, like on kentcdodds.com. Search bars are a great tool for the right scenarios, but some people won't know what to search for, hence why we give them a "preview" of what's available with the topic selectors.

With the above said, let's still have a list of article (as table rows) and update the rows based on the tags/topic selectors and search bar.

Content Page

This is where the actual blog content will go. It will have a title, some sort of tiny display between the title and content for publish date and maybe tags, and the markdown renderer and article content. That's really it, aside from the header/footer.

Header/Footer

Will apply to all content pages and either the whole thing or parts of it will apply to the homepage.

MVP To Do

• Set up subdomain (DNS record, Vercel project)

• Decide on a markdown preprocessor or renderer. Do I want to support MDX? Can use mdsvex as my preprocessor if so.

  Update: definitely want to use mdsvex. Benefits are that I have a feeling I would end up using dynamic content in my markdown if it helps to educate a concept better. For example, including a chart or graph, or maybe a moving graph. When the benefits are strong and there are no cons (i.e., no performance overhead because of no runtime (everything is compiled at build time) and you can opt-in to components, i.e., regular markdown's simplicity remains).

  mdsvex also supports remark plugins, and one I am keen on integrating is remark-gfm which would support all the features I love from GFM on my own site.

• Initial Implementation

• Link in my personal GitHub README bio

Notes

• Make use of Svelte's HTML tag (<p>{@html string}</p>) to insert the generated HTML

Description

The actual work output of this is I want...

• A toggle button for light/dark mode
• A badge grouping for social media links

The social media links will be used as part of the contact page, but it's just an easy example piece of work to getting things working, while still providing real benefit.

The toggle switch for dark mode should switch the page's style (including the social media image logos), be persisted across page refreshes, and play nicely with Tailwind's built-in dark mode classes.

Updates

• Wow, getting shadcn-svelte to work with Tailwind 4 is hard. shadcn-svelte and pretty much anything that interfaces with Tailwind currently uses tailwind.config.{j,t}s

A few that need to be set up:

• blog.camball.io
• contact.camball.io (or maybe me.camball.io or about.camball.io?)
  • Does this need to be its own page? Wondering if it should just be camball.io/#contact instead.
• resume.camball.io - literally the sickest resume of all time.
• archive.camball.io - for an integration with @cameron_archives

Future ideas:

• design.camball.io
• studio.camball.io

Edit:

Holy. This turned into entire monorepo support. Solid 12 hour coding session went into this one lol. Not easy. Wrote a blog article on how to do it that'll be published on blog.camball.io when the blog is live though, which is exciting.

Make a fun page that's displayed on 404, etc.

From here,

• error.html is the page that is rendered when everything else fails. It can contain the following placeholders:
  • %sveltekit.status% — the HTTP status
  • %sveltekit.error.message% — the error message

Did quite a bit of research, and turns out that the best approach is to make the site mobile-first, instead of simply mobile-friendly. This is how Tailwind operates out of the box, I found out. With that, from here out I need to develop for mobile first and use breakpoints (as necessary) to build for larger screen sizes.

To assist in this process, I found out about Safari's Responsive Design Mode, and from there found it has an option to open in Simulator. I installed the latest iOS device simulators in Xcode and got my local dev setup working on a virtual iPhone 15 Pro Max, which is super exciting. Also had to figure out how to get a web inspector for within the simulated device. Turns out you have to go into Safari settings in the simulated device and turn off "Fraudulent Website Warning", then restart the device.

Light/Dark Modes

I had the below bullet points all written out, but Tailwind makes it super easy, so I don't need to manually write any media queries myself.

• Site styling should support light/dark mode styling and default to a "System" mode that attempts to read from prefers-color-scheme.
• If prefers-color-scheme isn't able to be read from, just default to light mode.

Toggle Switch

Tailwind provides sample code for doing the exact behaviour I described below.

• Provide a toggle that enables switching between modes. Toggle position must initialise to the value of prefers-color-scheme. Per the prior bullet point, if prefers-color-scheme isn't able to be read from, site (and toggle) should default to light mode.
• If user explicitly selects light or dark mode with the toggle, store their preference in a cookie if cookies are enabled. I don't know the first thing about how cookies are implemented yet so will need to learn about that. If can't store in a cookie, can store in localStorage.