Pinto Portfolio - Building at the Speed of Thought: Where Logic Meets Generative Art.

#devchallenge #googleaichallenge #portfolio #gemini

New Year, New You Portfolio Challenge Submission

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I am a Hackathon addict and Full-Stack Architect driven by the philosophy of Sovereign Identity and Privacy by Default. My work bridges the gap between complex blockchain protocols and usable user interfaces, spanning from mobile applications to hardware-enforced security layers.

Portfolio

your_cloud_run_url

Pinto is a modern, drag-and-drop profile builder for developers and creatives.

Pinto allows users to design modular "Pinto ปิ่นโต (Bento-style)" landing pages with a rich set of interactive widgets (Bio, Skills, Projects, Socials).
Built entirely in React, it features a dual-mode interface: Studio for live editing and Static for lightweight deployment via JSON export.

🚀 Powered by Antigravity Integration

We utilize Google’s AI-first IDE not just for code completion, but as an end-to-end engineering partner that unifies frontend design, backend logic, and DevOps automation.

Responsive UI Generation: Use the AI-first IDE to auto-generate the responsive Tailwind CSS grid. It ensures the "Pinto" boxes reflow perfectly from desktop to mobile.
Full-Stack Architecture: Crafting the Backend API to securely handle user Authentication and manage the state/storage of the dynamic Bento layout.
Automated Deployment Pipelines: Develop Dockerfile configurations and Bash scripts to build/publish the Docker image and seamlessly deploy the portfolio on Google Cloud Run.

Changelog & Feature Summary

Layout & Design

Dual Layout Engine:

Grid (Pinto): The classic, responsive grid layout.
Stack (Listing): A vertical, mobile-optimized list view.

Template Presets: One-click reordering for specific personas:

Classic
Portfolio (Work-focused)
Social (Networking-focused)

Drag & Drop: Native HTML5 drag-and-drop support for manual reordering in Grid mode.

Theming: Full Dark Mode support with persistent state.

Core Enhancements

Authentication Flow: Sign-in to unlock Studio features.

Widget Library: Support for 7 distinct widget types:

Bio: Profile image, name, title, and description.
Featured Project: Large hero image with overlay text.
Skills: Tag-based list of technical expertise.
Milestones: List of achievements.
Vibe: Personality indicators (Current Focus, Hobby, Music).
Socials: Links to external platforms (Twitter, GitHub, Instagram, LinkedIn).
Location: Simple location display.

Technical

React Architecture: Component-based architecture using Tailwind CSS for styling.
Lucide Icons: Extensive use of lucide-react for consistent iconography.
Responsive: Fully adaptive design for Mobile, Tablet, and Desktop viewports.