Add website to root folder

Author: ivikramsahu

README.md

@@ -0,0 +1,100 @@
+# ivikramsahu.github.io
+
+Personal blog built with **Astro** + **Tailwind CSS**, deployed to **GitHub Pages** via **GitHub Actions**.
+
+## Why this blog exists
+This site is designed to be fast, readable, and fun:
+
+- **Writing-first**
+  Posts are authored as content entries and rendered as static pages for great performance.
+- **A little delight**
+  The sidebar includes a **Quotes** widget and a small **Snakes & Ladders** game to keep the experience light and interactive while still staying out of the way of reading.
+
+## Features
+- **Astro static rendering** for speed and SEO.
+- **Tailwind CSS** for consistent styling.
+- **Sticky header** with a **theme toggle** (light/dark).
+- **Blog listing + pagination** (`/page/[page]/`).
+- **Post pages** (`/blog/[...slug]/`) with clean typography.
+- **Quotes widget**
+  Rotates quotes and refreshes periodically.
+- **Snakes & Ladders**
+  A small two-player (You vs Computer) mini-game with state persistence, move logs, and win/lose effects.
+
+## Why the Quotes widget?
+The quotes panel is meant to add a small “focus boost” while browsing posts:
+
+- A quick line of motivation or perspective
+- Refreshes automatically (and also changes on reload)
+- Lives in the sidebar so it doesn’t distract from reading
+
+Implementation lives in `src/components/QuotesWidget.astro`.
+
+## Why the Snakes & Ladders game?
+The game is intentionally simple and optional:
+
+- Adds a playful element to the homepage/listing pages
+- Encourages exploration (without affecting core reading UX)
+- Runs fully client-side and doesn’t require any backend
+
+Implementation lives in `src/components/SnakesAndLadders.astro`.
+
+## Tech stack
+- **Astro** (site framework)
+- **Tailwind CSS** (styling)
+- **GitHub Pages** + **GitHub Actions** (deployment)
+
+## Project structure (high level)
+- `src/layouts/BaseLayout.astro`
+  Shared layout, header/nav, theme toggle.
+- `src/pages/index.astro`
+  Homepage blog list + sidebar.
+- `src/pages/page/[page].astro`
+  Paginated blog list pages.
+- `src/pages/blog/[...slug].astro`
+  Individual blog post pages.
+- `src/pages/about.astro`
+  About page.
+- `src/components/QuotesWidget.astro`
+  Quotes sidebar widget.
+- `src/components/SnakesAndLadders.astro`
+  Snakes & Ladders game.
+- `src/styles/global.css`
+  Global styles + typography tweaks.
+- `.github/workflows/deploy.yml`
+  GitHub Actions workflow that builds and deploys the static output.
+
+## Running locally
+Prerequisites:
+- Node.js (LTS recommended)
+- npm
+
+Commands:
+
+```bash
+npm install
+npm run dev
+```
+
+Astro will print the local dev URL (typically `http://localhost:4321`).
+
+## Build
+```bash
+npm run build
+npm run preview
+```
+
+## Deployment (GitHub Pages)
+This repo is intended to be deployed as a **user site**:
+
+- Repo name: `ivikramsahu.github.io`
+- URL: `https://ivikramsahu.github.io/`
+
+Notes:
+- Deployment is done via **GitHub Actions** (see `.github/workflows/deploy.yml`).
+- In GitHub settings, ensure:
+  - **Settings → Pages → Source = GitHub Actions**
+  - Not “Deploy from a branch” (that can trigger Jekyll on source files).
+
+## Content notes
+If you imported content from another platform, helper scripts may live under `scripts/` (for example `scripts/import-hashnode.mjs`). These scripts are optional and not required to run the site.

astro.config.mjs

@@ -2,8 +2,7 @@ import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 
 export default defineConfig({
-  site: 'https://ivikramsahu.github.io/vikramsahu-blog',
-  base: '/vikramsahu-blog',
+  site: 'https://ivikramsahu.github.io',
   trailingSlash: 'always',
   integrations: [
     tailwind({

src/layouts/BaseLayout.astro

@@ -8,7 +8,6 @@ type Props = {
 };
 
 const { title, description, containerClass = 'max-w-6xl' } = Astro.props;
-const base = import.meta.env.BASE_URL;
 const siteName = "Vikram's Focushours";
 const metaTitle = title ? `${title} | ${siteName}` : siteName;
 const metaDescription = description ?? 'Writing and notes.';
@@ -110,9 +109,9 @@ const metaDescription = description ?? 'Writing and notes.';
       })();
     </script>
 
-    <link rel="icon" href={`${base}favicon.svg`} type="image/svg+xml" sizes="any" />
-    <link rel="shortcut icon" href={`${base}favicon.svg`} />
-    <link rel="apple-touch-icon" href={`${base}favicon.svg`} />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" />
+    <link rel="shortcut icon" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/favicon.svg" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -122,29 +121,28 @@ const metaDescription = description ?? 'Writing and notes.';
     />
 
     <title>{metaTitle}</title>
-    <style is:inline>{`:root{--base-url:${base};}`}</style>
   </head>
   <body class="min-h-screen font-sans flex flex-col bg-zinc-50 text-zinc-900 transition-colors duration-300 dark:bg-zinc-950 dark:text-zinc-50">
     <header class="sticky top-0 z-50 border-b border-zinc-200 bg-white/70 backdrop-blur transition-colors duration-300 dark:border-zinc-800 dark:bg-zinc-950/70">
       <div class={`mx-auto flex ${containerClass} flex-wrap items-center justify-between gap-4 px-4 py-4`}>
-        <a href={base} class="flex min-w-0 items-center gap-3 no-underline">
+        <a href="/" class="flex min-w-0 items-center gap-3 no-underline">
           <picture>
-            <source srcset={`${base}mascot.png`} type="image/png" />
-            <img src={`${base}mascot.svg`} alt="Vikram mascot" class="h-[75px] w-[75px]" />
+            <source srcset="/mascot.png" type="image/png" />
+            <img src="/mascot.svg" alt="Vikram mascot" class="h-[75px] w-[75px]" />
           </picture>
           <span class="truncate text-[32px] leading-none font-semibold tracking-tight text-black dark:text-zinc-50">
             {siteName}
           </span>
         </a>
         <nav class="flex shrink-0 items-center gap-4 text-sm">
           <a
-            href={base}
+            href="/"
             class="no-underline text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
           >
             Blog
           </a>
           <a
-            href={`${base}about/`}
+            href="/about/"
             class="no-underline text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
           >
             About

src/pages/about.astro

@@ -1,6 +1,5 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
-const base = import.meta.env.BASE_URL;
 ---
 
 <BaseLayout title="About" description="About this site." containerClass="max-w-6xl">
@@ -9,7 +8,7 @@ const base = import.meta.env.BASE_URL;
 
     <div class="not-prose my-6">
       <img
-        src={`${base}about.png`}
+        src="/about.png"
         alt="Vikram Sahu"
         class="w-full rounded-2xl border border-zinc-200 shadow-sm dark:border-zinc-800"
         loading="lazy"

src/pages/blog/[...slug].astro

@@ -1,7 +1,6 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getCollection } from 'astro:content';
-const base = import.meta.env.BASE_URL;
 
 export async function getStaticPaths() {
   const posts = (await getCollection('blog')).filter((p) => !p.data.draft);
@@ -80,7 +79,7 @@ function renderInlineCode(input: string) {
     <article class="prose prose-zinc prose-lg dark:prose-invert max-w-none">
       <div class="not-prose mb-8 space-y-3">
         <a
-          href={base}
+          href="/"
           class="text-sm text-zinc-600 no-underline hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
         >
           ← Back

src/pages/index.astro

@@ -3,7 +3,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import { getCollection } from 'astro:content';
 import SnakesAndLadders from '../components/SnakesAndLadders.astro';
 import QuotesWidget from '../components/QuotesWidget.astro';
-const base = import.meta.env.BASE_URL;
 
 const posts = (await getCollection('blog'))
   .filter((p) => !p.data.draft)
@@ -80,7 +79,7 @@ function renderInlineCode(input: string) {
 
         return (
           <a
-            href={`${base}blog/${post.slug}/`}
+            href={`/blog/${post.slug}/`}
             class="block p-[30px] no-underline hover:bg-zinc-50 dark:hover:bg-zinc-800"
           >
             <div class="space-y-4">
@@ -162,7 +161,7 @@ function renderInlineCode(input: string) {
                 Prev
               </span>
               <a
-                href={`${base}page/2/`}
+                href="/page/2/"
                 class="rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-700 no-underline hover:bg-zinc-50 dark:border-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-900"
               >
                 Next

src/pages/page/[page].astro

@@ -4,8 +4,6 @@ import { getCollection } from 'astro:content';
 import SnakesAndLadders from '../../components/SnakesAndLadders.astro';
 import QuotesWidget from '../../components/QuotesWidget.astro';
 
-const base = import.meta.env.BASE_URL;
-
 const pageSize = 10;
 
 export async function getStaticPaths() {
@@ -37,12 +35,8 @@ const start = (currentPage - 1) * pageSize;
 const pagePosts = posts.slice(start, start + pageSize);
 
 const prevHref =
-  currentPage <= 1
-    ? null
-    : currentPage === 2
-      ? base
-      : `${base}page/${currentPage - 1}/`;
-const nextHref = currentPage >= totalPages ? null : `${base}page/${currentPage + 1}/`;
+  currentPage <= 1 ? null : currentPage === 2 ? '/' : `/page/${currentPage - 1}/`;
+const nextHref = currentPage >= totalPages ? null : `/page/${currentPage + 1}/`;
 
 function estimateReadTimeMinutes(text: string) {
   const words = text.split(/\s+/).filter(Boolean).length;
@@ -110,7 +104,7 @@ function renderInlineCode(input: string) {
 
         return (
           <a
-            href={`${base}blog/${post.slug}/`}
+            href={`/blog/${post.slug}/`}
             class="block p-[30px] no-underline hover:bg-zinc-50 dark:hover:bg-zinc-800"
           >
             <div class="space-y-4">

src/styles/global.css

@@ -4,7 +4,7 @@
 
 @font-face {
   font-family: 'Agave';
-  src: url('/vikramsahu-blog/font/Agave-Regular.ttf') format('truetype');
+  src: url('/font/Agave-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;