Published on: 2025-02-17
In this article, I will walk you through the process of building my portfolio using Astro.js, Svelte, and TailwindCSS or the current website you viewing right now. This combination of technologies allows for a highly performant and visually appealing website.
Astro.js is a modern static site generator that offers a unique approach to building websites. It allows you to use your favorite front-end frameworks, such as Svelte, while optimizing for performance by shipping less JavaScript.
Astrojs also provide good integration with Markdown file format either (.md or .mdx). This integration shown the strength of static site generator to the fullest with its integration with content collector of Astro to show Markdown content.
// pages/posts/[post].astro
---
import { getEntry, render } from "astro:content";
const contents = await getEntry("contents", post);
const { Content } = await render(contents);
---
<Content />The code above depicts rendering features of content collector.
// pages/posts/[post].astro
---
export const prerender = false;
const { post } = Astro.params;
---
<p>{post}</p>The code above is a dynamics routing in SSR mode
// pages/posts/[post].astro
---
export const prerender = false;
import PostLayout from "$lib/layouts/PostLayout.astro";
import { getEntry, render } from "astro:content";
const { post } = Astro.params;
const contents = await getEntry("contents", post);
const { Content } = await render(contents);
---
<PostLayout>
<Content />
</PostLayout>Combine the two code above we will get posts dynamic routing in Astro.
We can use Tailwind’s Typography plugin to style rendered Markdown.
We must install the plugin first using the command below.
pnpm add -D @tailwindcss/typographyThen we create Prose props
// components/Prose.astro
---
---
<div
class="prose text-black dark:prose-invert
prose-h1:font-bold prose-h1:text-3xl prose-h1:text-black prose-h2:font-bold prose-h2:text-xl prose-h2:text-black
prose-h3:font-bold prose-h3:text-lg prose-h3:text-black prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl
prose-headings:underline prose-strong:text-bold prose-strong:text-black"
>
<slot />
</div>Combine Prose Component with original [post].astro
---
export const prerender = false;
import Prose from "$lib/components/Prose.astro";
import PostLayout from "$lib/layouts/PostLayout.astro";
import { getEntry, render } from "astro:content";
const { post } = Astro.params;
const contents = await getEntry("contents", post);
const { Content } = await render(contents);
---
<PostLayout>
<GlassCard client:load class="px-12">
<Prose>
<Content />
</Prose>
</GlassCard>
</PostLayout>Resulting in beautiful Markdown content like this article!
Svelte is a powerful front-end framework that compiles your components into highly efficient vanilla JavaScript. This results in faster load times and a smoother user experience. I chose Svelte for its simplicity and performance benefits. Especially with new Svelte Rune.
<!--components/GlassCard.svelte-->
<script lang="ts">
let {class: className, children} = $props();
import { twMerge } from "tailwind-merge";
</script>
<div class={twMerge('text-white backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-6 shadow-lg transition-all hover:bg-white/20', className)}>
{@render children?.()}
</div>The code above is the glassmorphism card used in most of this website
Building this portfolio with Astro.js, Svelte, and TailwindCSS has proven to be an excellent technical choice that delivers on multiple fronts. Astro’s content collection system makes managing markdown content a breeze, while its hybrid rendering capabilities ensure optimal performance. Svelte’s new Runes feature adds elegant reactivity to interactive components, as demonstrated in the GlassCard implementation. The combination of these technologies not only results in a blazing-fast website but also creates a maintainable codebase that’s easy to extend.
Most importantly, this stack provides a perfect balance between developer experience and end-user performance. The ability to write content in markdown, build interactive components with Svelte, and style efficiently with TailwindCSS has made the development process both enjoyable and productive. For anyone looking to build a modern, content-focused website with interactive elements, this technology combination offers a robust and future-proof solution.