A high-performance, AI-integrated developer portfolio showcasing the intersection of Automation Engineering and Generative AI Workflows. This project demonstrates a production-grade deployment using serverless containers, leveraging a custom "Cyberpunk x Cottagecore" aesthetic built on a lightweight, framework-agnostic stack.
Integrated Google Gemini 1.5 Flash model (via @google/generative-ai) providing a conversational interface ("Aura") that can answer questions about professional experience, technical skills, and architecture.
A responsive, glassmorphic dashboard featuring:
- Real-time Metrics: Dynamic charts powered by Chart.js visualizing skill proficiency and learning progress.
- System Stats: Simulated server metrics (Memory, Ping, Status) for immersive effect.
- Map Interface: "Operations Map" showing global activity zones.
- Cyberpunk x Cottagecore Aesthetic: A unique blend of neon pinks/mints (
#FF2E88,#4AF2A1) against deep void greens (#050505). - Persistent Theme: Light/Dark mode toggles saved to local storage, ensuring user preference flows across sessions.
- Responsive Design: Mobile-first architecture using Tailwind CSS, ensuring perfect layout on all devices.
This project deliberately eschews heavy frontend frameworks (React/Vue) in favor of a "closer to the metal" approach for maximum performance and control.
- HTML5 & Vanilla JS: Core structure and logic.
- Alpine.js: Lightweight reactive state management (used for tabs, toggles, and data binding).
- Tailwind CSS (v4 CLI): Utility-first styling with a custom build step for arbitrary value support and optimization.
- Chart.js: Hardware-accelerated data visualization.
- Font Awesome: Iconography.
- Node.js (v18+): Server-side runtime.
- Express: Lightweight web server handling API routes and static file serving.
- Nodemailer: SMTP transport for the contact form.
- Google Gemini API: Generative AI model integration.
- Google Cloud Run: Serverless container hosting (auto-scaling).
- Google Cloud Build: CI/CD pipeline.
- Artifact Registry: Container image storage.
/
├── public/ # Static assets (served by Express)
│ ├── index.html # Main SPA entry point
│ ├── code_architecture.html # Documentation page
│ ├── script.js # Frontend logic (Alpine.js integration)
│ ├── style.css # Compiled CSS output (do not edit directly)
│ └── styles/ # Source CSS
│ └── input.css # Tailwind source file
├── server.js # Node.js/Express backend & API routes
├── cloudbuild.yaml # Google Cloud Build configuration
├── Dockerfile # Container definition
├── package.json # Dependencies & Scripts
└── .env # Environment variables (local only)
- Node.js (v18 or higher)
- npm
- Google Cloud SDK (optional, for deployment)
-
Clone the repository
git clone https://github.com/charlenecordero/ai-portfolio.git cd ai-portfolio -
Install dependencies
npm install
-
Configure Environment Create a
.envfile in the root directory:PORT=8080 GEMINI_API_KEY=your_google_gemini_key EMAIL_USER=your_email@gmail.com EMAIL_PASS=your_app_password
-
Build CSS Regenerate the Tailwind styles:
npm run build
-
Start the Server
npm start
Visit
http://localhost:8080in your browser.
The project is designed for Google Cloud Run.
Pushing to the main branch triggers the Cloud Build pipeline defined in cloudbuild.yaml, which:
- Builds the Docker container.
- Pushes it to the Google Artifact Registry (
asia-southeast1). - Deploys the new revision to Cloud Run.
You can trigger a build manually using the Google Cloud CLI:
gcloud builds submit --config cloudbuild.yaml .Charlene Anne S. Cordero
- Website: charlenecordero.com
- GitHub: @charlenecordero
SYSTEM_STATUS: ONLINE // AI_INTEGRATION: ACTIVE // MODE: PRODUCTION