robertoarce/roberto-arce-webpage

Purpose and Runtime

This is a static personal showcase/portfolio site built as a Vue single-page application and bundled with Vite. The authored application lives in src/; dist/ contains the deployable static build, including prebuilt route/component chunks. GitHub Actions deployment is defined in .github/workflows/deploy.yml, with site-hosting metadata in public/CNAME.

Application Bootstrap

src/main.js mounts the Vue application, imports global styling from src/style.css, and initializes routing. src/App.vue is the application shell; it delegates page rendering to the router and shared layout rather than defining independent server-rendered pages.

Key paths:

• src/main.js

• src/App.vue

• src/style.css

Navigation and Shared Shell

Routing is centralized in src/router/index.js, which maps portfolio sections/features to Vue components. src/components/Layout.vue provides the shared presentation frame, while src/components/Navbar.vue and src/components/drawer.vue implement primary navigation and compact/mobile navigation boundaries.

Key paths:

• src/router/index.js

• src/components/Layout.vue

• src/components/Navbar.vue

Portfolio and Professional Content

The professional showcase is organized as route-level or major content components under src/components/01_Profession/. It includes landing/profile content, project portfolio presentation, career timeline, diplomas, and interactive technical demonstrations. This component family is the primary content domain exposed through navigation.

Key paths:

• src/components/01_Profession/StartPage.vue

• src/components/01_Profession/Portfolio.vue

• src/components/01_Profession/TimeLine.vue

Interactive Visualization Features

Technical showcase modules include dynamic graphing, sigmoid visualization, and linear regression. The build output indicates Plotly and p5.js are material client-side visualization runtimes, likely loaded only by relevant feature chunks. An EM-for-GMM asset is supplied as standalone HTML within the component area.

Key paths:

• src/components/01_Profession/DynamicGraphs.vue

• src/components/01_Profession/LinearRegression.vue

• src/components/01_Profession/EM_for_GMM.html

Local Chatbot and Retrieval Boundary

The chatbot is a portfolio feature with separate local LLM and retrieval-augmented-generation utilities. ragSystem.js likely indexes/searches supplied personal corpus data, while localLLM.js isolates model invocation. The source corpus is local (src/data/roberto.txt), so the visible repository does not establish a required hosted AI service boundary.

Key paths:

• src/components/01_Profession/Chatbot.vue

• src/utils/ragSystem.js

• src/utils/localLLM.js

Art and Asset Presentation

A separate art component namespace supplies animated/interactive visual content, including network, galaxy, typing, cube, and collider experiences. Static professional assets—such as diplomas and screenshots—are held under src/assets/; repository/project metadata used by portfolio views is held in src/data/repositories.js.

Key paths:

• src/components/00_Art/Network.vue

• src/components/00_Art/galaxy.vue

• src/data/repositories.js

Build and Deployment Flow

Vite transforms the Vue source into static HTML, CSS, and hashed JavaScript assets under dist/. The generated bundle contains Vue and router vendor chunks plus feature-specific chunks such as chatbot, graphs, and regression, supporting browser-side execution and likely code splitting. Deployment publishes this static artifact; no backend, database, or API service is represented in the repository tree.

Key paths:

• vite.config.js

• dist/index.html

• .github/workflows/deploy.yml