diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..dbeeea6 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..227d831 --- /dev/null +++ b/.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 diff --git a/LICENSE b/LICENSE deleted file mode 100644 index e2c4f8f..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2025 echoHello - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md index cc3a8fa..a961b91 100644 --- a/README.md +++ b/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. + diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..04c4ef4 --- /dev/null +++ b/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; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..7d01234 --- /dev/null +++ b/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 ( + + + + {children} + + + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..331c65d --- /dev/null +++ b/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 ( + <> +
+
+ {/* Hero Section with Terminal */} +
+ + +
+ + view projects → + + + [GITHUB] + +
+
+ + {/* Featured Projects Section */} +
+
+

+ > + featured_projects +

+
+ {featuredProjects.map((project, index) => ( + + ))} +
+
+
+
+