Hey there 👋, welcome to my brand new website 🎉. It had been a while since I wanted to refurbish my personal portfolio website. But it took me a while, mostly because I was too busy working on my own personal project xenmusic and also working a job Karobar at the same time. But no matter how busy I was, I had to find time to update my website as I was really willing to post blog contents where I could share my work experience and other life experience. My previous website was a total sham and was just something I had, to keep my domain alive.

As I have very little experience in web development, it was a bit challenging for me to find the right tech stack to build my website. Previously I used Node/Express with some HTML/CSS to build my website and contentful CMS for writing blogs. But I wasn’t really satisfied with the following ascepts of my website:

1. Performance

The website load time was horrendous given how simple the website was.

2. Project Structure

Let’s not even talk about the project strcture as I can barely remember where all my files were. It was a burden and something that could possibly never be maintained later in the future. Had to go through bunch of files to get exact location whenever I wanted to make a minor CSS change.

3. Content Management

Content Management was ok as I was using Contentful. It was good and neat for managing my blog contents but it was not free. Additionally, It did not give me the power of having content as I liked especially when changing how content rendered in my website.

---

Ok too much with the old stuffs, it was a reflection of my bad tech choice, lack of planning and also I gave very little effort to make it a proper website. So I wanted to build something from the scratch, so first thing I completely 🗑️ deleted my old portfolio from my laptop and from VC.

So first few weeks I did some research to find what would be an ideal tech stack for my website. After doing some indepth research, I felt like react would be nice choice given that I wanted to learn a new web framework and what better way to do so by working on an actual project. Well react is a good web framework but it would be slightly overkill to use it given how small my website it.

As I was looking for other option, I got my eyes on this new framework called “ASTRO”. So I did some research and went through the Astro documentation and I was really impressed by how it worked.

1. Optimized for Speed

🚀 Astro compiles pages to static HTML at build time, which leads to fast load times and excellent performance. It supports partial hydration, meaning JavaScript is only loaded when necessary, further improving speed and is very ideal for a personal website as contents in my website changes once in a blue moon, except for the blogs, which I’m optimistic to continue for a long time 😅.

2. Component-Based Architecture

🧩 Astro allowed me to use components from different frameworks (React, Vue, Svelte, etc.) in the same project. This flexibility lets me leverage the best tools for specific tasks, like I can easily use react component in my website. Also managing components and keeping it uniform across the website was really important.

3. Zero JavaScript by Default

0️⃣ By default, Astro sites don’t include JavaScript unless I explicitly add it. This results in minimal client-side JavaScript and can significantly improve performance.

4. Markdown and MDX Support

🎨 Astro supports Markdown and MDX out of the box, making it easy to manage content and integrate React components directly into Markdown files.

5. Built-In Image Optimization (My Favourite 💖)

⚡Astro provides automatic image optimization, including resizing, formats, and lazy loading, helping to ensure images are delivered efficiently.

6. TypeScript Integration

Astro has built-in support for TypeScript, allowing for type-safe development and better developer experience with autocompletion and type checking.

---

So here is the actual breakdown and stacks used in my website:

1. Astro

My astro config file;

import { defineConfig, passthroughImageService } from "astro/config";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind";
import vercel from "@astrojs/vercel/serverless";

export default defineConfig({
  site: "https://www.kiranpaudel2000.com.np",
  integrations: [mdx(), sitemap(), tailwind()],
  output: "hybrid",
  image: {
    service: passthroughImageService(),
  },
  adapter: vercel({
    webAnalytics: {
      enabled: true,
    },
  }),
});

2. Tailwind CSS

My tailwind config file;

export const content = [
  "./src/**/*.astro",
  "./src/styles/**/*.css",
  "./src/**/*.mdx",
  "./src/**/*.md",
];
export const plugins = [
  require("flowbite/plugin"),
  require("@tailwindcss/typography"),
];
export const theme = {
  colors: {
    primary: "#1e1e1f",
    secondary: "#ffffff",
    alternate: "#9ca3af",
    tertiary: "#282828",
    background: "#121212",
  },
  fontFamily: {
    primary: ["Lato"],
    secondary: ["sans-serif"],
    alternate: ["Bangers"],
  },
  extend: {
    boxShadow: {
      neumorphic:
        "1px 5px 2px rgba(0, 0, 0, 0.2), 1px -1px 2px rgba(255, 255, 255, 0.1)",
      "neumorphic-hover":
        "1px 5px 20px rgba(0, 0, 0, 0.2), 1px -5px 20px rgba(255, 255, 255, 0.3)",
    },
  },
};

3. Animate on scroll

I used AOS to make my website bit interactive when scrolling.

4. Vercel

I used vercel to deploy my website as it is fairly simple also free for personal use.

---

Well I guess this is it, thank you and see you again in next blog👋. Leave a comment down below!