Clara Le.

About this website

Last updated on

Disclaimer: I built this website as a super newbie to everything mentioned below. I used a lot of copy-pasting lack the right terminology and best practices—so don't take my word for it.

The big picture

I envision this website as my personal corner of the internet—my very own playground. I am experimenting on it and have a few things planned ahead. Check out the Roadmap to know more.

Feel free to send me any feedback / improvement ideas on Twitter @clara__le or directly File an issue on Github.

Building Blocks

  • Robin might be the most important part of the equation, as I am always pestering him with questions—thank you!
  • blog starter example I used as a foundation (it already includes many of the following integrations out of the box)
  • Statically generated with Next.js and deployed with Vercel
  • Tailwind CSS for general styling and Tailwind Typography to generate responsive text styling
  • gray-matter to parse front matter and convert it into an object
  • next-mdx-remote to enable the use of JSX and components in MDX files
  • Framer Motion to create a few animations and modals (e.g. my menu overlay)
  • dates-fns to manipulate dates
  • Fontsource to easily set up self-hosted font bundles
  • The typefaces I use are Vesper Libre from the Mota Italic foundry (check out its creation process) and Source Sans Pro designed by Paul D. Hunt for Adobe.
  • Open Library API to get book covers and information for the Books and Antilibrary pages
  • TMDb API to get movie posters and information for the movies page

I will keep this list as updated as possible, but the source of truth lies in the package.json.

Tools & Extensions

This list will be useless for more seasoned coders, but might be handy for someone just starting out—past me would have appreciated it.

  • Visual Studio Code (a.k.a. VS Code) is apparently the code editor
  • GitHub to host the source code of my website
  • Prettier as a code formatter (VS Code extension)
  • Tailwind CSS IntelliSense adds autocomplete and syntax-highlighting for Tailwind CSS (VS Code extension)
  • MDX adds syntax highlighting for MDX files (VS Code extension)
  • Insert Date String just makes it easier to insert the current ISO date with Shift + Cmd + I (VS Code extension)