diff --git a/README.md b/README.md index 66cf48f..7f7059f 100644 --- a/README.md +++ b/README.md @@ -1,60 +1,162 @@ -# xav's site +# nipsys.dev -``` -$ whoami -> another dev trying to exit the matrix -``` +A personal portfolio website featuring a terminal emulator interface, deployed +on IPFS. -## what is this? +![License](https://img.shields.io/badge/license-GPL--3.0--or--later-blue) +![Node](https://img.shields.io/badge/node-%3E%3D22.0.0-green) +![pnpm](https://img.shields.io/badge/pnpm-%3E%3D9-orange) -A terminal looking site because... well, figured if i'm gonna build a personal site, might as well make it feel like home. +## Overview -Licensed under GPL-3.0. +This is my personal website. The site features a novel terminal-style interface +where visitors can navigate using CLI commands rather than traditional UI +elements. -## status +**Live Access:** -Still a work in progress, but it already lives on the InterPlanetary FileSystem: +- [nipsys.eth.limo](https://nipsys.eth.limo) +- [IPNS Gateway](https://k2k4r8ng8uzrtqb5ham8kao889m8qezu96z4w3lpinyqghum43veb6n3.ipns.dweb.link/) + (note: no proper caching, expect timeouts) -- IPNS Name: `k2k4r8ng8uzrtqb5ham8kao889m8qezu96z4w3lpinyqghum43veb6n3` -- [Access through eth.limo](https://nipsys.eth.limo) -- [Access through dweb.link](https://k2k4r8ng8uzrtqb5ham8kao889m8qezu96z4w3lpinyqghum43veb6n3.ipns.dweb.link/) +## Features -## current state +- **Terminal Interface** - Navigate the site using CLI commands (`help`, + `whoami`, `contact`, `status`, etc.) +- **Decentralized Status** - Real-time service health monitoring via Logos + Delivery (previously named Waku, a P2P communication network) +- **IPFS Deployment** - Hosted on IPFS with IPNS for mutable content +- **Internationalization** - Available in English and French +- **Dark/Light Theme** - System preference detection with manual toggle +- **Keyboard Navigation** - Full keyboard support with history, autocomplete, + and shortcuts -- [x] terminal interface works -- [x] commands and navigation -- [x] responsive design -- [x] internationalization -- [x] automatic deployment on IPFS -- [ ] UI still needs to be improved -- [ ] content is still being written -- [ ] pages are still being added & refined +## Tech Stack -## commands +| Category | Technology | +| ------------- | ---------------------------------------------------------------------------------------------------- | +| Framework | [Next.js 15](https://nextjs.org/) (App Router, Static Export) | +| UI | [React 19](https://react.dev/), [Tailwind CSS 4](https://tailwindcss.com/) | +| Components | [@nipsys/lsd](https://github.com/nipsysdev/lsd), [@phosphor-icons/react](https://phosphoricons.com/) | +| State | [Nanostores](https://github.com/nanostores/nanostores) | +| i18n | [next-intl](https://next-intl-docs.vercel.app/) | +| Decentralized | [@waku/sdk](https://waku.org/), [@helia/verified-fetch](https://helia.io/) | +| Testing | [Vitest](https://vitest.dev/), [Testing Library](https://testing-library.com/) | +| Linting | [Biome](https://biomejs.dev/) | +| Git Hooks | [Lefthook](https://github.com/evilmartians/lefthook) | -``` -help - Shows available commands -whoami - About me -contact - How to reach me -clear - Cleans the terminal -``` +## Getting Started -## running locally +### Prerequisites + +- Node.js >= 22.0.0 +- pnpm >= 9 + +### Installation ```bash +# Clone the repository git clone https://github.com/nipsysdev/site.git cd site + +# Install dependencies pnpm install + +# Start development server pnpm dev ``` -Then navigate to `localhost:3000` and start typing (or clicking). +Open [localhost:3000](http://localhost:3000) to view the site. + +### Available Scripts + +| Script | Description | +| -------------------- | -------------------------------- | +| `pnpm dev` | Start dev server with Turbopack | +| `pnpm build` | Production build (static export) | +| `pnpm serve` | Serve the static output locally | +| `pnpm test:unit` | Run unit tests | +| `pnpm test:coverage` | Run tests with coverage report | +| `pnpm lint` | Lint codebase | +| `pnpm lint:fix` | Lint and auto-fix issues | +| `pnpm format` | Format code | +| `pnpm typecheck` | TypeScript type check | +| `pnpm analyze` | Build with bundle analyzer | + +## Terminal Commands + +The site uses a terminal emulator interface. Available commands: + +| Command | Description | +| ------------ | --------------------------------------- | +| `welcome` | Display welcome message | +| `whoami` | About me - bio, badges, GPG fingerprint | +| `contact` | Contact information and social links | +| `status` | Self-hosted services health status | +| `help` | List available commands | +| `clear` | Clear terminal screen | +| `build-info` | Build timestamp and deployment info | + +### Keyboard Shortcuts + +| Key | Action | +| --------- | ------------------------ | +| `Enter` | Execute command | +| `Tab` | Autocomplete | +| `↑` / `↓` | Navigate command history | +| `Ctrl+C` | Cancel current input | + +## Project Structure + +``` +site/ +├── src/ +│ ├── app/ # Next.js App Router pages +│ │ └── [locale]/ # Internationalized routes (en, fr) +│ ├── components/ # React components +│ │ ├── terminal/ # Terminal emulator +│ │ ├── cmd-outputs/ # Command output components +│ │ └── layout/ # Layout components +│ ├── lib/ +│ │ └── dpulse/ # Waku P2P status monitoring +│ ├── stores/ # Nanostores state +│ ├── hooks/ # Custom React hooks +│ ├── i18n/ # Internationalization config +│ ├── constants/ # App constants +│ └── utils/ # Utility functions +├── out/ # Static export output +└── .github/workflows/ # CI/CD pipelines +``` + +## Architecture + +### Static Export + +The site is built as a fully static export using Next.js's `output: 'export'` +configuration. This enables: + +- IPFS/IPNS deployment +- No server-side dependencies +- Fast, cacheable content delivery + +### dpulse - Decentralized Status Monitoring + +The `status` command connects to the +[dpulse](https://github.com/nipsysdev/dpulse) system via the Waku P2P network: + +- Real-time service health updates via filter protocol +- Historical messages via store protocol +- Ed25519 signature verification for authenticity +- IPFS-hosted service icons via Helia + +## Deployment + +The site is automatically deployed to IPFS via GitHub Actions: + +1. On push to main: CI pipeline runs lint, tests, and build +2. Static export is published to IPNS +3. Pinned to 4EVERLand for availability -## dependencies +## License -- **[lsd-react](https://github.com/acid-info/lsd)** -- **next.js 15** -- **next-intl** -- **react 19** -- **react-icons** -- **tailwindcss 4** +[GPL-3.0-or-later](LICENSE) diff --git a/src/assets/Pro-Hacked.png b/src/assets/Pro-Hacked.png deleted file mode 100644 index f1411d5..0000000 Binary files a/src/assets/Pro-Hacked.png and /dev/null differ diff --git a/src/assets/Pro-Hacked.webp b/src/assets/Pro-Hacked.webp new file mode 100644 index 0000000..da0f175 Binary files /dev/null and b/src/assets/Pro-Hacked.webp differ diff --git a/src/assets/nipsys.png b/src/assets/nipsys.png deleted file mode 100644 index e705aa3..0000000 Binary files a/src/assets/nipsys.png and /dev/null differ diff --git a/src/assets/nipsys.webp b/src/assets/nipsys.webp new file mode 100644 index 0000000..a93f80d Binary files /dev/null and b/src/assets/nipsys.webp differ diff --git a/src/components/about-me/AboutMe.tsx b/src/components/about-me/AboutMe.tsx index 260db2a..a8c512c 100644 --- a/src/components/about-me/AboutMe.tsx +++ b/src/components/about-me/AboutMe.tsx @@ -17,7 +17,7 @@ import { } from '@phosphor-icons/react'; import { useTranslations } from 'next-intl'; import gpgFingerprint from '@/assets/gpg-fingerprint.json'; -import profileImage from '@/assets/Pro-Hacked.png'; +import profileImage from '@/assets/Pro-Hacked.webp'; import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'; const GPG_FINGERPRINT = gpgFingerprint.fingerprint; diff --git a/src/components/cmd-outputs/WelcomeOutput.tsx b/src/components/cmd-outputs/WelcomeOutput.tsx index 903462e..360ca08 100644 --- a/src/components/cmd-outputs/WelcomeOutput.tsx +++ b/src/components/cmd-outputs/WelcomeOutput.tsx @@ -8,7 +8,7 @@ import { TooltipTrigger, } from '@nipsys/lsd'; import Image from 'next/image'; -import avatar from '@/assets/nipsys.png'; +import avatar from '@/assets/nipsys.webp'; import { $scrollY } from '@/stores/terminal-store'; import { Command, type CommandOutputProps } from '@/types/terminal'; import CmdLink from '../terminal/CmdLink';