AI Portfolio Architect

Transform your PDF resume into a stunning, deployed portfolio website in seconds. AI handles the code, design, and imagery instantly—no programming required. Just upload and launch!

Comment

Inspiration

We've all been there: the "Resume Black Hole." You spend hours tweaking margins on a PDF, only to realize that in the digital age, a static document just doesn't cut it. Recruiters want to see who you are, not just read a list of bullet points. But building a portfolio website from scratch? That takes time—time that developers should be spending on coding actual projects. We asked ourselves: What if we could turn a boring PDF into a deployed, visually stunning website in the time it takes to sip a coffee? That was the spark for AI Portfolio Architect. We wanted to bridge the gap between Static Data (PDFs) and Dynamic Experiences (Web) using the power of Generative AI.

What it does

  1. AI Portfolio Architect is a full-stack engine that transforms a PDF resume into a fully coded, themed, and downloadable portfolio website.
  2. Upload: Users drop their existing PDF resume into our "Nebula" interface.
  3. Analyze: The system reads the raw text and uses Google Gemini to restructure it into a semantic JSON architecture
  4. Visualize: It auto-generates visual prompts for every project and uses Stable Diffusion (via Pollinations) to create custom thumbnails on the fly.
  5. Deploy: The user selects an aesthetic (Cyberpunk, Minimalist, Luxury, etc.), and the system renders a complete HTML/CSS website ready for download.

How we built it

The architecture relies on a synergy between Python's backend logic and modern CSS frontend physics. The Backend (Python & Flask) We used Flask as the web server. The core logic handles the file stream using pypdf to extract raw text. This text is usually messy, so we implemented a robust prompt engineering pipeline with Google Gemini (gemini-2.5-flash). We implemented a Model Fallback System that iterates through a list of safe models (gemini-1.5, gemini-2.0-flash) to ensure high availability during the demo. The Visual Engine (CSS & JS) The landing page features a custom Deep Space Nebula Engine built entirely with CSS and JavaScript: Parallax Stars: A JS script generates 200+ DOM elements with randomized (x, y) coordinates and z-index velocities to create a "Warp Speed" effect. Glassmorphism: We utilized backdrop-filter: blur() combined with mix-blend-mode: screen on the call-to-action button to create a "window into space" effect—allowing the moving stars to be seen through the button text. The Image Pipeline To make the portfolios pop, the AI doesn't just copy text; it imagines it. If a user lists a "Medical App" project, Gemini generates a visual prompt like "Blue medical dashboard interface, futuristic," which is instantly rendered by the image generation API.

Challenges we ran into

  1. The "Hallucination" Problem: Early on, the AI would return invalid JSON or conversational text. We had to strictly enforce output schemas and use regex cleaning (clean_json_text) to strip markdown formatting before parsing.
  2. Star Physics: Getting the background stars to feel "infinite" without causing a memory leak was tricky. We initially had them animating off-screen and disappearing.
  3. Speed vs. Quality: Generating 5-6 images for a portfolio took too long sequentially. We implemented a client-side Parallel Turbo Loader in JavaScript that fetches all project images simultaneously, reducing load time

Accomplishments that we're proud of

  1. The UI/UX: The "Nebula" landing page is mesmerizing. The way the stars are revealed through the translucent "Initialize" button is a detail we spent hours perfecting together.
  2. Robustness: The system handles PDF parsing errors and API timeouts gracefully.
  3. Zero-Shot Generation: It genuinely works on the first try. You upload a file, and 10 seconds later, you have a website.

What we learned

  1. Advanced CSS Composition: We learned how to layer multiple gradients and animations to create organic-looking "gas clouds" in the background without using heavy image assets.
  2. Structured Output: We deepened our understanding of prompting LLMs for strict structured data extraction rather than just chat.
  3. Jinja2 Mastery: We mastered passing complex JSON objects into dynamic templates to change CSS variables (colors, fonts, spacing) based on a single "Theme Key."

What's next for Portfolio AI Architect

  1. Live Editing: Adding a React frontend to allow users to tweak the AI-generated text before downloading.
  2. Vercel Integration: One-click deployment to the web (currently it provides a .zip download).
  3. More Themes: Adding "Dystopian" and "Web3" design systems.

Built With

Share this project:

Updates