Migrate Repository to TypeScript and Add Build and Lint Workflows

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,9 @@
+## Issue Reference
+
+- Fixes #<!-- replace this comment with the issue number, e.g., 'Fixes #1234' -->
+
+<!-- Add more Fixes # for multiple issues -->
+
+<!-- This will be automatically replaced by a summary generated by CodeRabbitAI -->
+
+@coderabbitai summary

.github/workflows/build.yml

@@ -0,0 +1,29 @@
+name: Build
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Build
+        run: bun run build

.github/workflows/lint.yml

@@ -0,0 +1,32 @@
+name: Lint & Format
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  lint-format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Format Check
+        run: bun run format
+
+      - name: Lint Check
+        run: bun run lint

.prettierignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.next/
+.netlify/
+bun.lock
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

README.md

@@ -1,36 +1,102 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+<div align="center">
 
-## Getting Started
+<img width="90" height="115" alt="transparent-makeshift-logo" src="public/logo.svg" />
 
-First, run the development server:
+# Makeshift Blog
+
+**The public website for Makeshift Engineering.**
+
+[![Build](https://github.com/makeshift-engineering/makeshift/actions/workflows/build.yml/badge.svg)](https://github.com/makeshift-engineering/makeshift/actions/workflows/build.yml)
+[![Lint & Format](https://github.com/makeshift-engineering/makeshift/actions/workflows/lint.yml/badge.svg)](https://github.com/makeshift-engineering/makeshift/actions/workflows/lint.yml)
+
+</div>
+
+## Technology
+
+- [Next.js](https://nextjs.org/) App Router
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- CSS Modules and global CSS design tokens
+- [Bun](https://bun.sh/) for dependency management and scripts
+
+The site uses `next/font` for its typography, static metadata for search and social sharing, and `public/logo.svg` as the site favicon and brand mark.
+
+## Project structure
+
+```text
+makeshift/
+├── .github/
+│   └── workflows/
+│       └── lint.yml              # CI format and lint checks
+├── app/
+│   ├── components/               # Shared page components
+│   │   ├── Footer/
+│   │   ├── HeroTerminal/
+│   │   ├── Navbar/
+│   │   └── ScrollReveal.tsx
+│   ├── globals.css               # Global styles and design tokens
+│   ├── layout.tsx                # Root layout and site metadata
+│   ├── page.tsx                  # Homepage
+│   └── page.module.css           # Homepage styles
+├── public/
+│   └── logo.svg                  # Brand mark and favicon source
+├── eslint.config.mjs             # ESLint flat configuration
+├── next.config.mjs               # Next.js configuration
+├── package.json                  # Scripts and dependencies
+├── tsconfig.json                 # TypeScript configuration
+└── bun.lock                     # Locked Bun dependency versions
+```
+
+## Development
+
+### Prerequisites
+
+Install [Bun](https://bun.sh/docs/installation). The project uses the Bun lockfile, so Bun should be used for installation and scripts.
+
+### Installation
+
+```bash
+git clone https://github.com/makeshift-engineering/makeshift.git
+cd makeshift
+bun install --frozen-lockfile
+```
+
+### Run locally
+
+Start the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+bun run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) in your browser. Changes to files under `app/` are reflected automatically.
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+## Production
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+Create an optimised production build:
 
-## Learn More
+```bash
+bun run build
+```
+
+Serve the generated build locally:
+
+```bash
+bun run start
+```
 
-To learn more about Next.js, take a look at the following resources:
+The application is a standard Next.js deployment and can be deployed to a platform with Next.js support, such as [Vercel](https://vercel.com/). Configure the deployment from the repository’s hosting provider and use `bun run build` as the build command.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Contributing
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+This repository contains the Makeshift Engineering website. If you find a problem or have an idea for improvement, open an issue or pull request in [makeshift-engineering/makeshift](https://github.com/makeshift-engineering/makeshift).
 
-## Deploy on Vercel
+Please keep changes focused, preserve the existing visual language, and run all quality checks before submitting a pull request.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Related links
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- [Makeshift Engineering](https://makeshift.pro)
+- [GitHub organisation](https://github.com/makeshift-engineering)
+- [Engineering blog](https://blog.makeshift.pro)
+- [Makeshift Blog repository](https://github.com/makeshift-engineering/makeshift-blog)
+- [PenguinDB](https://penguindb.makeshift.pro)

app/components/Footer/Footer.module.css

@@ -60,7 +60,9 @@
   height: 34px;
   border-radius: 8px;
   color: var(--fg-2);
-  transition: color var(--transition-fast), background var(--transition-fast);
+  transition:
+    color var(--transition-fast),
+    background var(--transition-fast);
 }
 
 .socialLink:hover {

app/components/Footer/Footer.js → app/components/Footer/Footer.tsx

@@ -21,7 +21,8 @@ export default function Footer() {
               </span>
             </Link>
             <p className={styles.tagline}>
-              A small team of friends building things that matter. Open source, always.
+              A small team of friends building things that matter. Open source,
+              always.
             </p>
             <div className={styles.socials}>
               <a
@@ -31,7 +32,12 @@ export default function Footer() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
                   <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
                 </svg>
               </a>
@@ -54,7 +60,11 @@ export default function Footer() {
                 <Link href="https://blog.makeshift.pro">Blog</Link>
               </li>
               <li>
-                <a href="https://github.com/makeshift-engineering" target="_blank" rel="noopener noreferrer">
+                <a
+                  href="https://github.com/makeshift-engineering"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
                   GitHub
                 </a>
               </li>
@@ -72,7 +82,9 @@ export default function Footer() {
         </div>
 
         <div className={styles.bottom}>
-          <p className={styles.copyright}>© 2026 Makeshift Engineering. All rights reserved.</p>
+          <p className={styles.copyright}>
+            © 2026 Makeshift Engineering. All rights reserved.
+          </p>
           <p className={styles.built}>Built with obsession · Go · Next.js</p>
         </div>
       </div>

app/components/HeroTerminal/HeroTerminal.module.css

@@ -28,9 +28,15 @@
   border-radius: 50%;
 }
 
-.dotRed { background: #ef4444cc; }
-.dotYellow { background: #f59e0bcc; }
-.dotGreen { background: #22c55ecc; }
+.dotRed {
+  background: #ef4444cc;
+}
+.dotYellow {
+  background: #f59e0bcc;
+}
+.dotGreen {
+  background: #22c55ecc;
+}
 
 .barTitle {
   font-family: var(--font-mono), monospace;
@@ -69,8 +75,13 @@
 }
 
 @keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
 }
 
 .output {

app/components/HeroTerminal/HeroTerminal.js → app/components/HeroTerminal/HeroTerminal.tsx

@@ -3,7 +3,21 @@
 import { useEffect, useRef, useState } from "react";
 import styles from "./HeroTerminal.module.css";
 
-const commands = [
+type OutputType =
+  "blank" | "heading" | "muted" | "info" | "project" | "success";
+
+interface OutputLine {
+  text: string;
+  type: OutputType;
+  highlight?: string;
+}
+
+interface Command {
+  cmd: string;
+  output: OutputLine[];
+}
+
+const commands: Command[] = [
   {
     cmd: "cat org-status.txt",
     output: [
@@ -30,14 +44,14 @@ const commands = [
   },
 ];
 
-function sleep(ms) {
+function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 export default function HeroTerminal() {
   const [typedCmd, setTypedCmd] = useState("");
   const [showCursor, setShowCursor] = useState(true);
-  const [outputLines, setOutputLines] = useState([]);
+  const [outputLines, setOutputLines] = useState<OutputLine[]>([]);
   const [showEndCursor, setShowEndCursor] = useState(false);
   const isRunning = useRef(false);
 
@@ -81,14 +95,16 @@ export default function HeroTerminal() {
     return () => clearTimeout(timer);
   }, []);
 
-  function renderLine(lineData, index) {
+  function renderLine(lineData: OutputLine, index: number) {
     if (lineData.type === "blank") {
-      return <div key={index} className={styles.outputLine}><br /></div>;
+      return (
+        <div key={index} className={styles.outputLine}>
+          <br />
+        </div>
+      );
     }
 
-    let className = styles.outputLine;
-    let content;
-
+    const className = styles.outputLine;
     switch (lineData.type) {
       case "heading":
         return (
@@ -103,11 +119,12 @@ export default function HeroTerminal() {
           </div>
         );
       case "info":
-        const parts = lineData.text.split(lineData.highlight);
+        const highlight = lineData.highlight ?? "";
+        const parts = lineData.text.split(highlight);
         return (
           <div key={index} className={`${className} ${styles.info}`}>
             {parts[0]}
-            <span className={styles.accentText}>{lineData.highlight}</span>
+            <span className={styles.accentText}>{highlight}</span>
             {parts[1] || ""}
           </div>
         );