Transform echoHello to terminal/CLI theme with dark mode

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# contentlayer
+.contentlayer

README.md

@@ -1,2 +1,100 @@
-# website
-The website for echoHello
+# echoHello.dev
+
+The official website for echoHello - a terminal/CLI-inspired portfolio built with Next.js, TypeScript, and modern web technologies.
+
+## 🚀 Features
+
+- **Terminal/CLI Aesthetic**: Clean, monospace-first design inspired by modern terminal interfaces
+- **Dark Mode by Default**: Three-state theme toggle (Dark/Light/Auto) with localStorage persistence
+- **Echo Command Theme**: Plays on the "echoHello" name with terminal commands throughout
+- **Smooth Animations**: Subtle entrance animations on page load
+- **Interactive Terminal**: Hero section with blinking cursor animation
+- **Project Showcase**: Featured projects with tech tags and bracket-style links
+- **Responsive Design**: Mobile-first layout that works on all screen sizes
+
+## 🎨 Design System
+
+**Colors:**
+- Background (Dark): `#1a1612` - Deep warm charcoal
+- Background (Light): `#faf8f5` - Soft off-white
+- Surface: Slightly lighter/darker than background for layering
+- Text: Warm off-white in dark mode, charcoal in light mode
+- Accent: `#FEA116` - Warm orange (echoHello brand color)
+- Border: Subtle warm tones
+
+**Typography:**
+- Font: Geist Mono and monospace fallbacks
+- All UI elements use monospace for that terminal feel
+- Brackets for buttons: `[GITHUB]`, `[VISIT]`, `[CODE]`
+- Prompt symbols: `$` and `>` for terminal-style headers
+
+**Components:**
+- Slightly rounded corners (8-14px)
+- Thin borders (1-2px)
+- Soft shadows for depth
+- Hover effects: slight lift + border accent
+
+## 📦 Getting Started
+
+First, install dependencies:
+
+```bash
+npm install
+```
+
+Then, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## 🔨 Building
+
+To build the site for production:
+
+```bash
+npm run build
+```
+
+This will generate a static export in the `out` directory.
+
+## 🌐 Pages
+
+- **Home (/)**: Terminal hero window with echo commands + featured projects
+- **Projects (/projects)**: Full list of all projects with filtering
+
+## 📝 Project Data
+
+Project data is hardcoded in `lib/data.ts`. Each project includes:
+- Title
+- Description
+- Website URL (optional)
+- GitHub URL (optional)
+- Tech tags (optional)
+
+## 🚀 Deployment
+
+The site automatically deploys to GitHub Pages via GitHub Actions when changes are pushed to the main branch.
+
+The workflow file is located at `.github/workflows/deploy.yml`.
+
+## 🎯 Tech Stack
+
+- **Framework**: Next.js 16 with App Router
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS 4
+- **Content**: Contentlayer2 for MDX
+- **Theme**: next-themes for dark mode
+- **Deployment**: GitHub Pages (static export)
+
+## 🔗 Links
+
+- **Website**: [echohello.dev](https://echohello.dev)
+- **GitHub**: [github.com/echohello-dev](https://github.com/echohello-dev)
+
+## 📄 License
+
+See LICENSE file for details.
+

app/globals.css

@@ -0,0 +1,84 @@
+@import "tailwindcss";
+
+:root {
+  /* Light mode */
+  --bg: #faf8f5;
+  --surface: #ffffff;
+  --border: #e5d5c0;
+  --text: #271911;
+  --muted: #8b7355;
+  --accent: #fea116;
+}
+
+.dark {
+  /* Dark mode (default) */
+  --bg: #1a1612;
+  --surface: #241f1a;
+  --border: #3a342d;
+  --text: #f5f0e8;
+  --muted: #9a8977;
+  --accent: #fea116;
+}
+
+@theme inline {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-border: var(--border);
+  --color-text: var(--text);
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Entrance animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out forwards;
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.8s ease-out forwards;
+}
+
+.animate-fade-in-delay {
+  opacity: 0;
+  animation: fadeIn 0.6s ease-out 0.3s forwards;
+}
+
+.cursor-blink {
+  animation: blink 1s infinite;
+}

app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { ThemeProvider } from "@/components/ThemeProvider";
+
+export const metadata: Metadata = {
+  title: "echoHello - Terminal",
+  description: "Full-stack developer building AI tooling, DX, cloud, and OSS",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="antialiased">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+          disableTransitionOnChange={false}
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import TerminalWindow from "@/components/TerminalWindow";
+import ProjectCard from "@/components/ProjectCard";
+import { projects } from "@/lib/data";
+
+export default function Home() {
+  const featuredProjects = projects.slice(0, 6);
+
+  return (
+    <>
+      <Header />
+      <main className="min-h-screen pt-20">
+        {/* Hero Section with Terminal */}
+        <section className="py-16 px-4 sm:px-6 lg:px-8">
+          <TerminalWindow />
+
+          <div className="max-w-3xl mx-auto mt-8 flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-delay">
+            <Link
+              href="/projects/"
+              className="px-6 py-3 bg-accent text-bg text-sm font-semibold rounded-lg hover:bg-accent/90 transition-colors shadow-lg"
+            >
+              view projects →
+            </Link>
+            <a
+              href="https://github.com/echohello-dev"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-6 py-3 text-sm border border-border rounded-lg text-text hover:border-accent hover:text-accent transition-colors"
+            >
+              [GITHUB]
+            </a>
+          </div>
+        </section>
+
+        {/* Featured Projects Section */}
+        <section className="py-16 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-7xl mx-auto">
+            <h2 className="text-sm font-semibold text-text mb-8 flex items-center gap-2">
+              <span className="text-accent">&gt;</span>
+              featured_projects
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {featuredProjects.map((project, index) => (
+                <ProjectCard key={project.title} project={project} index={index} />
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}