+
+
$ echo Hello
-
-
- About
-
-
- Services
-
-
- OSS
-
-
- Projects
+
diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
new file mode 100644
index 0000000..4220c4f
--- /dev/null
+++ b/components/ProjectCard.tsx
@@ -0,0 +1,62 @@
+import type { Project } from "@/lib/data";
+
+interface ProjectCardProps {
+ project: Project;
+ index?: number;
+}
+
+export default function ProjectCard({ project, index = 0 }: ProjectCardProps) {
+ const delay = index * 100;
+
+ return (
+
+
+ ›
+ {project.title}
+
+
+
+ {project.description}
+
+
+ {project.tags && project.tags.length > 0 && (
+
+ {project.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+
+
+ );
+}
diff --git a/components/TerminalWindow.tsx b/components/TerminalWindow.tsx
new file mode 100644
index 0000000..1c02883
--- /dev/null
+++ b/components/TerminalWindow.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function TerminalWindow() {
+ const [showCursor, setShowCursor] = useState(false);
+
+ useEffect(() => {
+ const timer = setTimeout(() => setShowCursor(true), 1500);
+ return () => clearTimeout(timer);
+ }, []);
+
+ return (
+
+
+ {/* Terminal header */}
+
+
+
echohello@terminal:~
+
+
+
+ {/* Terminal body */}
+
+
+
$ echo "Hello, I'm a full-stack developer"
+
Hello, I'm a full-stack developer
+
+
+
+
$ echo "Building AI tooling, DX, cloud, OSS"
+
Building AI tooling, DX, cloud, OSS
+
+
+
+
$ ls projects/
+
+ component-library /
+ cli-toolkit /
+ ai-assistant /
+ cloud-dashboard /
+ design-system /
+ deploy-engine /
+
+
+
+
+ $
+ {showCursor && (
+
+ )}
+
+
+
+
+ );
+}
diff --git a/components/ThemeProvider.tsx b/components/ThemeProvider.tsx
new file mode 100644
index 0000000..21c2681
--- /dev/null
+++ b/components/ThemeProvider.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return
{children};
+}
+
+export { useTheme } from "next-themes";
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..d6480b3
--- /dev/null
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useTheme } from "@/components/ThemeProvider";
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+ const { theme, setTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) {
+ return (
+
+ ...
+
+ );
+ }
+
+ const themes = [
+ { value: "dark", label: "dark" },
+ { value: "light", label: "light" },
+ { value: "system", label: "auto" },
+ ];
+
+ return (
+
+ {themes.map((t) => (
+
+ ))}
+
+ );
+}
diff --git a/lib/data.ts b/lib/data.ts
new file mode 100644
index 0000000..c71c9ec
--- /dev/null
+++ b/lib/data.ts
@@ -0,0 +1,49 @@
+export interface Project {
+ title: string;
+ description: string;
+ websiteUrl?: string;
+ githubUrl?: string;
+ tags?: string[];
+}
+
+export const projects: Project[] = [
+ {
+ title: "COMPONENT LIBRARY",
+ description: "A modern React component library with TypeScript support and Tailwind CSS styling. Built for speed and developer experience.",
+ websiteUrl: "https://components.echohello.dev",
+ githubUrl: "https://github.com/echohello-dev/components",
+ tags: ["React", "TypeScript", "Tailwind"],
+ },
+ {
+ title: "CLI TOOLKIT",
+ description: "Command-line tools for streamlining development workflows. Includes scaffolding, testing utilities, and deployment helpers.",
+ githubUrl: "https://github.com/echohello-dev/cli-tools",
+ tags: ["Node.js", "CLI", "DevTools"],
+ },
+ {
+ title: "AI CODE ASSISTANT",
+ description: "An intelligent coding assistant that helps with code reviews, refactoring suggestions, and documentation generation.",
+ websiteUrl: "https://ai.echohello.dev",
+ githubUrl: "https://github.com/echohello-dev/ai-assistant",
+ tags: ["AI", "Python", "OpenAI"],
+ },
+ {
+ title: "CLOUD DASHBOARD",
+ description: "Real-time monitoring and management dashboard for cloud infrastructure. Track metrics, logs, and deployments in one place.",
+ websiteUrl: "https://cloud.echohello.dev",
+ tags: ["Next.js", "AWS", "Monitoring"],
+ },
+ {
+ title: "DESIGN SYSTEM",
+ description: "Comprehensive design system with tokens, components, and documentation. Enables consistent UI across multiple products.",
+ websiteUrl: "https://design.echohello.dev",
+ githubUrl: "https://github.com/echohello-dev/design-system",
+ tags: ["Design", "Figma", "React"],
+ },
+ {
+ title: "DEPLOYMENT ENGINE",
+ description: "Automated deployment pipeline with zero-downtime releases, rollback capabilities, and environment management.",
+ githubUrl: "https://github.com/echohello-dev/deploy-engine",
+ tags: ["DevOps", "Docker", "K8s"],
+ },
+];
diff --git a/next.config.ts b/next.config.ts
index 3da3a7a..a7eca4a 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,7 +3,7 @@ import { withContentlayer } from "next-contentlayer2";
const nextConfig: NextConfig = {
output: "export",
- basePath: process.env.NODE_ENV === "production" ? "/website" : "",
+ basePath: "",
images: {
unoptimized: true,
},
diff --git a/package-lock.json b/package-lock.json
index 8a6483c..730b71a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"date-fns": "^4.1.0",
"next": "16.1.1",
"next-contentlayer2": "^0.5.8",
+ "next-themes": "^0.4.6",
"react": "19.2.3",
"react-dom": "19.2.3"
},
@@ -7992,6 +7993,16 @@
"react-dom": "^18 || ^19 || ^19.0.0-rc"
}
},
+ "node_modules/next-themes": {
+ "version": "0.4.6",
+ "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+ "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+ }
+ },
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 6a1c244..c123218 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"date-fns": "^4.1.0",
"next": "16.1.1",
"next-contentlayer2": "^0.5.8",
+ "next-themes": "^0.4.6",
"react": "19.2.3",
"react-dom": "19.2.3"
},
From 15ccc5a7dd8d1db6fe2bbe1b03b9916ab412c046 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 27 Dec 2025 13:54:19 +0000
Subject: [PATCH 5/5] Update README to reflect terminal/CLI theme
Co-authored-by: johnnyhuy <27847622+johnnyhuy@users.noreply.github.com>
---
README.md | 74 ++++++++++++++++++++++++++++++++++++++-----------------
1 file changed, 52 insertions(+), 22 deletions(-)
diff --git a/README.md b/README.md
index cf67d8e..a961b91 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,38 @@
# echoHello.dev
-The official website for echoHello - built with Next.js, TypeScript, and Contentlayer2.
+The official website for echoHello - a terminal/CLI-inspired portfolio built with Next.js, TypeScript, and modern web technologies.
## 🚀 Features
-- **Next.js 16** with App Router and TypeScript
-- **Contentlayer2** for MDX content management
-- **Tailwind CSS 4** for styling
-- **Static Export** for GitHub Pages deployment
-- **Base Path Aware** for proper routing on GitHub Pages
-- **Custom Theme**: Warm orange (#FEA116), charcoal ink, rounded design
-
-## 🎨 Design
-
-The site features a bold, modern design with:
-- Warm orange (#FEA116) as the primary accent color
-- Charcoal (#2C2C2C) for text and backgrounds
-- Thick rounded borders and big border radii
-- Monoline style with subtle wave arcs
-- Responsive layout optimized for all devices
+- **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
@@ -46,12 +60,19 @@ npm run build
This will generate a static export in the `out` directory.
-## 📝 Content Management
+## 🌐 Pages
+
+- **Home (/)**: Terminal hero window with echo commands + featured projects
+- **Projects (/projects)**: Full list of all projects with filtering
-Content is managed through Contentlayer2 with MDX files in the `content` directory:
+## 📝 Project Data
-- `content/pages/` - Static pages (about, services, oss, projects)
-- `content/projects/` - Project entries with metadata
+Project data is hardcoded in `lib/data.ts`. Each project includes:
+- Title
+- Description
+- Website URL (optional)
+- GitHub URL (optional)
+- Tech tags (optional)
## 🚀 Deployment
@@ -59,10 +80,19 @@ The site automatically deploys to GitHub Pages via GitHub Actions when changes a
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
-- **Discord**: [Join our community](https://discord.gg/echohello)
-- **GitHub**: [View our projects](https://github.com/echohello-dev)
+- **Website**: [echohello.dev](https://echohello.dev)
+- **GitHub**: [github.com/echohello-dev](https://github.com/echohello-dev)
## 📄 License