Ambi.moe!

My personal website, ambi.moe, is one of my favorite projects this year. It is still a work in progress. In this blog post, I want to share the stack that I used and my thoughts while using them.

I wanted to build a little corner of the Internet that is all mine, while learning new things as a developer but I tend to forget things when I do not pay attention to them. So, I figured it would be nice to have a personal website where I can aggregate the knowledge and experiences I gained and will gain over the years.

Why ambi.moe?

Ambi has been my online moniker since 2015. The .moe domain is a way to market products on the internet deemed as moe. I like anime so it seemed perfect. While I used this domain to redirect to various social media accounts over the years, I also used it on my old Github page as well. The first version was just my old logo with an infinite rotating animation, a grid background pattern, and a vignette.

[1] First version of ambi.moe Currently, the website is in its 3rd version. I will try to describe, in good detail, the technologies I used hoping it will help anyone who wants to start their own website or is using the pieces of my current stack.

Stack

Foundation

Nextjs

I will admit that Next JS is a bit over-engineered for something as simple as a static website. I could have used something as simple as an Express server hosting a bunch of template files or using Vite, if I wanted to keep using React. For my blog, I’ve used the App Router, a new paradigm by Next built with React Server Components that allows server side rendering without the workarounds of Pages Router. SSR has a few advantages:

1. My content is fetched on the server side and then rendered upon initial page load. There is no need for the client to request content which improves performance.
2. The rendered content is also good towards Search Engine Optimization because your pages can be assigned meta tags, allowing search engines to index your pages and social media channels to create preview cards for your pages.
3. With client-side React, the initial page is blank. We have to wait for the client to download, parse, and execute the Javascript needed to render the page. This is no longer an issue with React Server Components.

Developing my site using App Router has mostly been a breeze. App Router is still on the edge as far as web technologies go, even though it is already two years out. The latest version, Next 15, is already out. I am planning to do an upgrade in the near future but it is not a priority as of now.

Styling and Components

Tailwind

After discovering Tailwind two years ago, it is now my go-to CSS framework for any front-end project. For those who don’t know, Tailwind is a CSS framework that uses utility classes to style your HTML elements directly. This allows developers to write as little CSS as possible, which is great for 99% of use cases.

1. It diminishes context switching between writing the HTML/JSX and writing CSS code.
2. Tailwind can resolve issues with naming selectors in your HTML and CSS, arguably the hardest problem in front-end development.

Tailwind accelerated my development time via the ease of creating responsive UI, configurability right out of the box, and VS Code extensions that perform autocomplete for Tailwind’s utility classes.

For the 1% of use cases, feel free to use good ol’ CSS. For example, the animation on my menu and some markdown components use CSS. Detractors would also say that the class list for the elements are so long that readability is affected. The @apply directive and composition will address this issue, mostly. As with any framework, check the pros and cons based on your situation.

Shadcn/ui

Built on top of Tailwind and a bunch of handpicked React component libraries, Shadcn UI is a collection of components that developers can copy and paste to their apps. You can add the components manually or through CLI commands. This allows control in how you build and style your components inside your applications while following a consistent style out of the box. This is great for starting up your apps quickly without building the components yourself like dialog boxes or carousels which I’ve used on my cosplay gallery.

Animations

I used Framer Motion’s scroll related APIs on my home and about pages to check if certain elements are visible to the user. All pages have a simple entry animation every time they are loaded as well.

I plan to add tiny animations throughout the website to enhance its aesthetics.

There are limitations on using Framer Motion on App Router. Exit transitions with AnimatedPresence, which I used for page transitions, are currently not supported because of how the App Router’s render stack is structured .A known workaround is adding a “frozen state” to the LayoutRouterContext, which is on my codebase right now but is not something I’m comfortable with using. For extra information about this, you can check the following links:

• [NEXT-1151] App router issue with Framer Motion shared layout animations #49279
• How to animate route transitions in app directory?

I’ve thought about using the View Transitions API. Currently, it is already opt-in on my custom Link component so I can include it when needed. I’ll probably do a deep dive on it, in a future article. While it is a nifty API, it is still not supported across all browsers.

Content Management (MDX, Shiki)

My blog is mostly powered by MDX, which allows JSX in markdown files. It is possible to embed components such as interactive charts or alerts, customize built-in elements or replace it with your own. MDX is also very extendable using plugins such as Remark-gfm that enables Github markdown elements like tables and images. Additionally, you can install Remark-frontmatter that allows metadata on each markdown file such as titles, dates, tags and excerpts. Here is a little snippet on how to use your own custom components using MDX and apply Tailwind classes:

import type { MDXComponents } from "mdx/types";
import { Footer } from "./footer"; 
import { CodeBlock } from "./code-block";

// This is an actual piece of code, I use to help inject
/* custom components on my markdown files!! */

export function mdxComponents(components: MDXComponents): MDXComponents {
  return {
    h1: (props) => <h1 className="text-2xl font-black" {...props}></h1>,
    h2: (props) => <h2 className="text-xl font-extrabold" {...props}></h2>,
    p: (props) => <p className="text-justify text-base" {...props}></p>,
    code: (props) => <CodeBlock {...props} />,
    pre: (props) => <>{props.children}</>,
    Footer,
    ...components,
  };
}

While MDX does not provide syntax highlighting by default, there are multiple plugins we can use to do syntax highlighting inside the markdown such as rehype-starry-night. However, I am using Shiki, a powerful highlighting library and includes my current theme on my VS Code environment, Poimandres. For example, this is a simple counter snippet highlighted by Shiki:

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((count) => count + 1)}>Increment</button>
    </div>
  );
}

I used transformers to add line numbers to code snippets and line highlights through transformerNotationHighlight. I also tried to create my own logic to automatically highlight comments but it was a bit difficult without creating my own syntax parser.

import { useState } from "react";

// Look I can highlight these lines using
// transformerNotationHighlight

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    ...
  );
}

For now, I need to check Shiki’s performance when loading this post since I am using Shiki a lot in this post. I applied some caching measures on loading the markdown and syntax highlighting. For Server Components, I used React’s cache API.

Future Developments

My website is still a work in progress and I couldn’t have made ambi.moe without people who are much smarter than me. I still have a lot to learn. I am just a lowly engineer resting on the shoulders of giants.

I will actually try to update this post more as I add more things to my website. I plan to embed information from different sources across the Internet like Youtube, Facebook, and Bluesky. As mentioned, I am adding more animations and effects to the site as well. The stack might even change in the future depending on my needs and what I learn.

As for what I will post on this blog, it will be about anything that interests me. Software development, cosplay, Japan and travel are just some of the things I have in mind. I hope to see you a lot more in the future! I appreciate you for reading this far!

ambidere_{(amˈbideɾe)}

Ambi has a software developer day job, who started to watch anime at around 10 years old. He has since ventured into many anime-adjacent hobbies over the years. He is also working on some projects, mostly for fun and boredom with a lot of distractions along the way.