Portfolio — Victor Hugo Vargas Servin

🌐 Personal portfolio site + chat widget to answer questions about projects.

Victor Hugo Vargas Servin's portfolio. The site is built with Astro + React + Tailwind, and integrates a chat widget that answers questions about documented projects.

🧱 Stack

• Astro 7 — main framework (islands architecture) with @astrojs/node standalone
• React 19 — interactive components (chat widget, interactive hero)
• Tailwind CSS 4 — utility-first styling via @tailwindcss/vite
• Partytown — registered integration for third-party script offload

🚀 Quickstart

pnpm install
pnpm dev          # http://localhost:4321

📦 Commands

Command	Action
pnpm dev	Dev server at localhost:4321
pnpm build	Production build to ./dist/
pnpm preview	Preview the local build before deploying
pnpm astro	CLI commands (astro add, astro check, etc.)
pnpm astro check	TypeScript + Astro diagnostics

📁 Layout

portfolio/
├── docs/
│   ├── architecture.md       # Technical architecture (routing, data flow, API)
│   ├── DESIGN.md             # Visual system (palette, typography, components)
│   └── projects-schema.md    # MDX project schema + JSON contract for the chat-bot
├── public/                   # Static assets (images, favicon)
├── src/
│   ├── content/projects/     # ← Projects as .mdx (single source of truth)
│   │   ├── dashboard/        # info.mdx, local demo, and its tests
│   │   └── resume-generator/ # info.mdx, demo/, tests/ — Resume on Demand
│   ├── content/expertise/    # Structured Resume data + knowledge items (resume-generator input)
│   ├── components/           # Astro and React components
│   ├── demos/                # Explicit registry for local interactive demos
│   ├── layouts/              # Base layouts
│   ├── pages/
│   │   ├── index.astro
│   │   ├── resume.astro      # Aggregated Resume from the expertise collection
│   │   ├── cv.astro          # 301 redirect to /resume (back-compat)
│   │   ├── proyectos/        # /proyectos + /proyectos/[slug]
│   │   ├── demos/[id].astro  # /demos/<id>
│   │   └── api/
│   │       ├── chat.ts       # Proxy → ../rony-chat-bot
│   │       └── expertise.json.ts  # Structured JSON for the resume-generator demo
│   └── styles/
├── astro.config.mjs
└── archive/html-static/      # Old static HTML (reference only, not imported)

🧩 Chat integration

The chat widget is a React island hydrated with client:load. For safety, it does not call the chat service directly: the request goes through an Astro proxy at /api/chat, which forwards the request to the Go service in ../rony-chat-bot/.

[Browser]  →  [Astro /api/chat]  →  [rony-chat-bot :7331]
                 (proxy + streaming passthrough)

Configure the backend URL in .env:

CHAT_BOT_URL=http://localhost:7331

See the detailed implementation in docs/architecture.md.

📚 Project content

Portfolio projects live as .mdx files in src/content/projects/. They are the single source of truth: Astro renders the site from them and exposes their indexed representation at /projects.json.

The Resume lives as a structured expertise content collection at src/content/expertise/. /resume aggregates it for the visitor; /api/expertise.json exposes the structured JSON to the resume-generator demo at /demos/resume-generator; /docs.json re-emits the same items to the chat-bot as its doc source.

Project frontmatter and Markdown bodies are authored in English. Rony can still answer visitors in Spanish or another language from that single canonical corpus.

A project with an interactive local demo is colocated at src/content/projects/<slug>/: info.mdx remains the source of truth, while demo/ holds the React implementation and tests/ holds its browser tests. Declare its demoId in frontmatter and register that id in src/demos/registry.ts; the demo is then available at /demos/<demoId>.

New project pages should use the enriched documentation structure used by the recent project entries: an overview, focused product or operator sections, implementation notes, and a local image or screenshot when available. Use projectUrl for a production website (shown as Visit) and reserve demoUrl for an external demo.

rony-chat-bot fetches both endpoints on every reindex. Do not copy project files into the bot repository. After deploying a content change, reindex the bot (POST /api/reindex or chat-bot reindex) so its derived search index contains the new content.

Bot reindex note

If the bot's doc source was previously named cv, rename it to expertise in ../rony-chat-bot/ config. The endpoint path /docs.json is unchanged.

• Full schema: docs/projects-schema.md

🚢 Deploy

• Astro frontend → Coolify (Docker container with @astrojs/node standalone)
• Chat-bot Go (../rony-chat-bot/) → Coolify (same setup)
• Domain: sersofts.org (https://sersofts.org)

🔗 Related projects

This portfolio is part of a larger workspace:

• ../rony-llm-agent/ — Chat core (LLM agent)
• ../rony-chat-bot/ — HTTP service that serves chat answers
• ../rony-harness/ — Another flagship project by Victor Hugo Vargas Servin

📄 License

MIT — see LICENSE.

🔧 Notes for AI agents

See AGENTS.md for dev server conventions, env vars, stack quirks, and doc index.

🌐 Other languages

• Versión en español