feat: Enhance homepage with Tech Stack and Portfolio sections

.github/copilot-instructions.md

@@ -1,112 +1,84 @@
 ## Purpose
 
-This file gives concise, repository-specific guidance to an AI coding agent so it can be productive working on the Docusaurus documentation site in this repo.
+This file provides repository-specific guidance to AI coding agents for working effectively on the Docusaurus documentation site in this repository.
 
-## Big picture
+## Big Picture
 
-- This project is a Docusaurus site (see `docusaurus.config.js`) using the classic preset. Main content lives under `docs/` and `blog/`. React UI code is in `src/` and static assets in `static/`.
-- Primary responsibilities: serve the site locally, author docs/blog posts (Markdown/MDX), update UI components and styles, and build/deploy the static site.
+- This project is a Docusaurus v3 site (see `docusaurus.config.js`) using the classic preset. Content is organized into `docs/` (documentation) and `blog/` (posts). React UI components are in `src/`, and static assets are in `static/`.
+- Primary responsibilities include running the dev server, authoring docs/blog posts (Markdown/MDX), updating UI components/styles, managing sidebar/category metadata, and building/deploying the site.
 
-## Important files & folders (examples)
+## Key Files & Folders
 
-- `package.json` — contains npm/yarn scripts used to run, build, and deploy the site (see `start`, `build`, `deploy`).
-- `docusaurus.config.js` — global config: `baseUrl`, `organizationName`, `projectName`, i18n, theme, navbar/footer.
-- `sidebars.js` — docs sidebar configuration. When changing doc structure, update this file.
-- `docs/` — documentation pages. Subfolders use `_category_.json` for grouping (example: `tutorial-basics/_category_.json`).
-- `blog/` — blog posts (Markdown/MDX) and metadata files `authors.yml`, `tags.yml`.
-- `src/components/` — custom React components used by pages (example: `src/components/HomepageFeatures/index.js`).
-- `static/img/` and `docs/**/img/` — image assets referenced by docs/blog.
+- `package.json`: Contains scripts for development (`start`), production builds (`build`), serving builds (`serve`), and deployment (`deploy`). Node >= 20 is required.
+- `docusaurus.config.js`: Global site configuration (e.g., `baseUrl`, `organizationName`, `projectName`, `editUrl`, navbar/footer settings).
+- `sidebars.js`: Controls the docs sidebar. Update this file when adding/moving docs or categories.
+- `docs/`: Markdown/MDX documentation. Subfolders use `_category_.json` for grouping (e.g., `docs/tutorial-basics/_category_.json`).
+- `blog/`: Blog posts (Markdown/MDX) with metadata in `authors.yml` and `tags.yml`.
+- `src/components/`: Custom React components (e.g., `HomepageFeatures`, `TechStack`, `Portfolio`).
+- `src/css/custom.css`: Global styling. Page-specific styles are in `src/pages`.
+- `static/img/` and `docs/**/img/`: Image assets. Use `static/img/` for global assets and relative `./img/...` for doc-specific images.
 
-## Development commands (explicit)
-
-Run locally (recommended, project README uses yarn):
-## Purpose
-
-This file gives concise, repository-specific guidance to an AI coding agent so it can be productive working on this Docusaurus documentation site.
-
-## Big picture
-
-- This repo is a Docusaurus v3 site (see `docusaurus.config.js`) using the classic preset. Content is split into `docs/` (documentation) and `blog/` (posts). React UI code lives in `src/` and static assets in `static/`.
-- Primary agent responsibilities: run the dev server, add/edit docs & blog posts (MD/MDX), update UI components/styles, manage sidebar and category metadata, build and deploy the site.
-
-## Key files & folders
-
-- `package.json` — scripts: `start` (dev), `build` (prod), `serve` (serve build), `deploy` (GitHub Pages). Node >= 20 is required (check `engines`).
-- `docusaurus.config.js` — global site config (baseUrl, organizationName, projectName, editUrl, navbar/footer). Verify `organizationName` / `projectName` before changing deploy targets.
-- `sidebars.js` — controls docs sidebar. Adding/moving docs often requires updating this file or the sidebar path used by the config.
-- `docs/` — markdown/MDX docs. Subfolders use `_category_.json` for grouping (see `docs/tutorial-basics/_category_.json`).
-- `blog/` — posts (MD/MDX) and metadata: `authors.yml`, `tags.yml`. Example: `blog/2021-08-01-mdx-blog-post.mdx`.
-- `src/components/` — React UI components used by pages (example: `src/components/HomepageFeatures/index.js`).
-- `src/css/custom.css` — global styling. Page-specific modules exist under `src/pages`.
-- `static/img/` and `docs/**/img/` — image assets. Use `static/img/` for global assets and relative `./img/...` inside docs for doc-scoped images.
-
-## Quick start (Windows / PowerShell)
+## Development Commands
 
 1. Install dependencies:
 
-```powershell
-yarn
-```
+   ```powershell
+   yarn
+   ```
 
-2. Run dev server (hot reload; default port 3000):
+2. Run the development server (hot reload; default port 3000):
 
-```powershell
-yarn start
-```
+   ```powershell
+   yarn start
+   ```
 
 3. Build and preview production:
 
-```powershell
-yarn build
-yarn serve
-```
-
-4. Deploy to GitHub Pages (as provided in repo):
-
-```powershell
-USE_SSH=true; yarn deploy
-# or without SSH
-GIT_USER=<your-username>; yarn deploy
-```
+   ```powershell
+   yarn build
+   yarn serve
+   ```
 
-If you prefer npm, replace `yarn` with `npm run` for the named scripts.
+4. Deploy to GitHub Pages:
 
-## Project-specific conventions & patterns
+   ```powershell
+   USE_SSH=true; yarn deploy
+   # or without SSH
+   GIT_USER=<your-username>; yarn deploy
+   ```
 
-- Docs grouping: each docs subfolder may include `_category_.json` that the site relies on. Don't rename or remove them without updating `sidebars.js`.
-- Images: place global images in `static/img/` and per-doc images in a `img/` folder next to the doc file; reference via `./img/foo.png` in Markdown.
-- UI: small reusable components live in `src/components/`. Use existing styles in `src/css/custom.css` and `src/components/*/styles.module.css` patterns.
-- MDX usage: examples exist in `docs/` and `blog/` — prefer MDX when embedding React components inside docs.
+## Project-Specific Conventions & Patterns
 
-## Integration points & external dependencies
+- **Docs Grouping**: Each `docs/` subfolder may include `_category_.json` for grouping. Update `sidebars.js` if moving docs.
+- **Images**: Place global images in `static/img/` and per-doc images in `img/` next to the doc file. Reference them via `./img/foo.png` in Markdown.
+- **UI Components**: Reusable components are in `src/components/`. Follow existing patterns in `src/css/custom.css` and `src/components/*/styles.module.css`.
+- **MDX Usage**: Use MDX for embedding React components in docs/blogs. Examples are in `docs/` and `blog/`.
 
-- Docusaurus packages (check `package.json`): primary runtime. Avoid adding heavy runtime-only dependencies unless necessary for docs.
-- GitHub Pages is the default deploy target (deploy script present). Confirm `docusaurus.config.js` `organizationName` and `projectName` match the repo/org before changing `editUrl` or deploy settings.
-- No CI configuration was found in the repo root. If you add CI (GitHub Actions), ensure Node >= 20 and `yarn install && yarn build` steps.
+## Integration Points & External Dependencies
 
-## Concrete examples (what to change and where)
+- **Docusaurus Packages**: Check `package.json` for dependencies. Avoid adding heavy runtime-only dependencies unless necessary.
+- **Deployment**: GitHub Pages is the default deploy target. Ensure `organizationName` and `projectName` in `docusaurus.config.js` match the repo/org.
+- **CI/CD**: No CI configuration exists. If adding CI (e.g., GitHub Actions), ensure Node >= 20 and include `yarn install && yarn build` steps.
 
-- Add a doc: create `docs/<section>/new-doc.md` (or `.mdx`) and add/update `sidebars.js` or rely on the configured automatic sidebar path.
-- Add blog post: `blog/YYYY-MM-DD-title.md` with YAML frontmatter (title, tags, authors). Update `blog/authors.yml` for new authors.
-- Edit homepage features: modify `src/components/HomepageFeatures/index.js` and `src/components/HomepageFeatures/styles.module.css`, then `yarn start` to hot-reload.
+## Examples of Common Changes
 
-## Notes & watch-outs
+- **Add a Doc**: Create `docs/<section>/new-doc.md` (or `.mdx`) and update `sidebars.js` or rely on automatic sidebar paths.
+- **Add a Blog Post**: Create `blog/YYYY-MM-DD-title.md` with YAML frontmatter (e.g., `title`, `tags`, `authors`). Update `blog/authors.yml` for new authors.
+- **Edit Homepage Features**: Modify `src/components/HomepageFeatures/index.js` and `src/components/HomepageFeatures/styles.module.css`. Use `yarn start` to hot-reload.
 
-- Docusaurus config runs in Node (no browser globals). Keep dynamic code safe for Node execution.
-- The repo uses Docusaurus v3 with `future.v4: true` — upgrading to v4 may require breaking changes; test locally.
-- Verify `organizationName` / `projectName` in `docusaurus.config.js` before deploying.
-- There are no automated tests found in the repo — treat code edits accordingly and do a local build verification (`yarn build && yarn serve`).
+## Notes & Watch-Outs
 
-## When editing/PR guidance for an AI agent
+- **Node Environment**: Docusaurus config runs in Node.js. Avoid browser-specific code (e.g., `window`, `document`).
+- **Version Compatibility**: The repo uses Docusaurus v3 with `future.v4: true`. Test thoroughly before upgrading to v4.
+- **Testing**: No automated tests exist. Validate changes locally with `yarn build && yarn serve`.
 
-- Make one small, testable change per PR (e.g., add a doc, update a component). Run `yarn start` or `yarn build` locally to validate.
-- Update `sidebars.js` or the relevant `_category_.json` if moving docs between folders.
-- For visual changes, include screenshots in the PR description and the `build/` output when applicable.
+## Contribution Guidelines
 
-## Contact / Maintainer questions
+- Make small, testable changes per PR (e.g., add a doc, update a component).
+- Include screenshots for visual changes and verify the `build/` output.
+- Update `sidebars.js` or `_category_.json` if moving docs between folders.
 
-- Confirm values for `organizationName` and `projectName` in `docusaurus.config.js` if you plan to change deploy settings.
-- If you want CI configuration or GitHub Actions templates, specify Node version and preferred publish flow.
+## Contact / Maintainer Questions
 
----
-If you'd like, I can: (a) add a small GitHub Actions workflow that runs `yarn build` on PRs, or (b) generate a short CONTRIBUTING.md with doc/post guidelines—tell me which and I'll implement it.
+- Confirm `organizationName` and `projectName` in `docusaurus.config.js` before changing deploy settings.
+- For CI configuration or GitHub Actions templates, specify the Node version and preferred publish flow.

.github/workflows/ci.yml

@@ -21,13 +21,16 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'yarn'
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Build site
-        run: yarn build
+        run: npm run build
+
+      - name: Run tests
+        run: npm test
 
       - name: Upload build artifact
         uses: actions/upload-artifact@v4

docs/architecture/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Architecture",
+  "position": 7,
+  "link": {
+    "type": "generated-index",
+    "description": "Technical architecture documentation covering monorepo structure, backend systems, and CI/CD pipelines."
+  }
+}