feat: complete editorial UI redesign and robust auth overhaul

.gitignore

@@ -0,0 +1,5 @@
+venv/
+.env
+__pycache__/
+*.pyc
+.ipynb_checkpoints/

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.10-slim
+
+# Install system dependencies for WeasyPrint
+RUN apt-get update && apt-get install -y \
+    libpango-1.0-0 \
+    libharfbuzz0b \
+    libpangoft2-1.0-0 \
+    libpangocairo-1.0-0 \
+    libcairo2 \
+    libffi-dev \
+    shared-mime-info \
+    && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /code
+
+COPY ./app/requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY ./app /code/app
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,19 @@
+---
+title: AI Portfolio API
+emoji: 💼
+colorFrom: green
+colorTo: blue
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# AI Portfolio & CV Generator API
+
+This is the backend for the AI Portfolio & CV Generator.
+
+Tech Stack:
+- FastAPI
+- Groq AI (Llama 3.3 70B)
+- WeasyPrint
+- Supabase

app/main.py

@@ -1,10 +1,17 @@
+from dotenv import load_dotenv
+load_dotenv()
+
+import os
+print("--- BACKEND STARTUP DIAGNOSTICS ---")
+print(f"GROQ_API_KEY present: {bool(os.getenv('GROQ_API_KEY'))}")
+print(f"SUPABASE_URL present: {bool(os.getenv('SUPABASE_URL'))}")
+print(f"SUPABASE_KEY present: {bool(os.getenv('SUPABASE_KEY'))}")
+print("-----------------------------------")
+
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
-from dotenv import load_dotenv
 from app.routes import github, generate, portfolio
 
-load_dotenv()
-
 app = FastAPI(title="AI Portfolio Generator API")
 
 app.add_middleware(

app/requirements.txt

@@ -6,4 +6,5 @@ PyMuPDF
 weasyprint
 supabase
 python-multipart
-httpx
+httpx
+jinja2

app/routes/generate.py

@@ -0,0 +1,76 @@
+from fastapi import APIRouter, UploadFile, File, Form
+from app.services.github_service import fetch_github_data
+from app.services.pdf_extract import extract_text_from_pdf, extract_linkedin_sections
+from app.services.groq_service import generate_portfolio_content
+from app.services.cv_generator import generate_cv_pdf
+from app.models.schemas import GenerateRequest
+from fastapi.responses import Response
+import json
+
+router = APIRouter()
+
+@router.post("/portfolio")
+async def generate_portfolio(
+    github_url: str = Form(...),
+    role: str = Form(...),
+    job_target: str = Form(...),
+    skills_to_emphasize: str = Form(...),
+    one_liner: str = Form(...),
+    highlighted_projects: str = Form(...),
+    template: str = Form(...),
+    user_id: str = Form(...),
+    username: str = Form(...),
+    full_name: str = Form(""),
+    linkedin_pdf: UploadFile = File(...)
+):
+    pdf_bytes = await linkedin_pdf.read()
+    linkedin_text = extract_text_from_pdf(pdf_bytes)
+    linkedin_sections = extract_linkedin_sections(linkedin_text)
+
+    github_data = await fetch_github_data(github_url)
+    if "error" in github_data:
+        return {"error": github_data["error"]}
+
+    onboarding = {
+        "github_url": github_url,
+        "role": role,
+        "job_target": job_target,
+        "skills_to_emphasize": skills_to_emphasize,
+        "one_liner": one_liner,
+        "highlighted_projects": json.loads(highlighted_projects),
+        "template": template,
+        "full_name": full_name
+    }
+
+    portfolio_content = generate_portfolio_content(
+        github_data=github_data,
+        linkedin_sections=linkedin_sections,
+        onboarding=onboarding
+    )
+
+    portfolio_content["user_id"] = user_id
+    portfolio_content["username"] = username
+    portfolio_content["name"] = full_name or portfolio_content.get("name", username)
+    portfolio_content["role"] = role
+    portfolio_content["one_liner"] = one_liner
+    portfolio_content["template"] = template
+    portfolio_content["contact"] = {
+        "github": github_data.get("github_url", ""),
+        "avatar": github_data.get("avatar", "")
+    }
+
+    return portfolio_content
+
+
+@router.post("/cv")
+async def generate_cv(
+    portfolio: str = Form(...),
+    cv_template: str = Form("modern")
+):
+    portfolio_data = json.loads(portfolio)
+    pdf_bytes = generate_cv_pdf(portfolio_data, cv_template)
+    return Response(
+        content=pdf_bytes,
+        media_type="application/pdf",
+        headers={"Content-Disposition": "attachment; filename=cv.pdf"}
+    )

app/routes/portfolio.py

@@ -0,0 +1,65 @@
+from fastapi import APIRouter, HTTPException
+from supabase import create_client
+import os
+
+router = APIRouter()
+
+_supabase = None
+
+def get_supabase():
+    global _supabase
+    if _supabase is None:
+        url = (os.getenv("SUPABASE_URL") or "").strip()
+        key = (os.getenv("SUPABASE_KEY") or "").strip()
+        print(f"--- DEBUG: Initializing Supabase Client ---")
+        print(f"URL provided: '{url}'")
+        print(f"Key present: {bool(key)}")
+        if not url or not key:
+            raise ValueError(f"REQUIRED: SUPABASE_URL and SUPABASE_KEY. Current URL: '{url}'")
+        try:
+            _supabase = create_client(url, key)
+            print("--- DEBUG: Supabase Client Initialized Successfully ---")
+        except Exception as e:
+            print(f"--- DEBUG: create_client FAILED with: {str(e)} ---")
+            raise e
+    return _supabase
+
+@router.post("/save")
+async def save_portfolio(portfolio: dict):
+    try:
+        supabase = get_supabase()
+        result = supabase.table("portfolios").upsert({
+            "user_id": portfolio.get("user_id"),
+            "username": portfolio.get("username"),
+            "style": portfolio.get("style"),
+            "content": portfolio.get("content"),
+            "github_data": portfolio.get("github_data"),
+            "focus_role": portfolio.get("focus_role"),
+            "target_job": portfolio.get("target_job")
+        }).execute()
+        return {"message": "Portfolio saved successfully", "data": result.data}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.get("/{username}")
+async def get_portfolio(username: str):
+    try:
+        supabase = get_supabase()
+        result = supabase.table("portfolios").select("*").eq(
+            "username", username
+        ).single().execute()
+        if not result.data:
+            raise HTTPException(status_code=404, detail="Portfolio not found")
+        return result.data
+    except Exception as e:
+        raise HTTPException(status_code=404, detail="Portfolio not found")
+
+@router.get("/")
+async def get_all_portfolios():
+    try:
+        supabase = get_supabase()
+        # Corrected columns to match actual schema
+        result = supabase.table("portfolios").select("username, style, content->name, content->role").execute()
+        return result.data
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

app/services/github_service.py

@@ -3,6 +3,8 @@ import os
 from typing import List
 
 GITHUB_TOKEN = os.getenv("GITHUB_TOKEN")
+if not GITHUB_TOKEN:
+    print("INFO: GITHUB_TOKEN not found in Environment Variables (optional)")
 
 headers = {
     "Authorization": f"token {GITHUB_TOKEN}",
@@ -10,41 +12,63 @@ headers = {
 }
 
 async def fetch_github_data(github_url: str) -> dict:
-    username = github_url.rstrip("/").split("/")[-1]
+    # Improved parsing to handle queries and trailing slashes
+    clean_url = github_url.split('?')[0].split('#')[0].rstrip('/')
+    username = clean_url.split("/")[-1]
     
-    async with httpx.AsyncClient() as client:
-        user_res = await client.get(
-            f"https://api.github.com/users/{username}",
-            headers=headers
-        )
-        user_data = user_res.json()
-        
-        repos_res = await client.get(
-            f"https://api.github.com/users/{username}/repos?sort=updated&per_page=30",
-            headers=headers
-        )
-        repos_data = repos_res.json()
-    
-    repos = []
-    for repo in repos_data:
-        if not repo.get("fork"):
-            repos.append({
-                "name": repo.get("name"),
-                "description": repo.get("description") or "",
-                "languages": repo.get("language") or "Not specified",
-                "stars": repo.get("stargazers_count"),
-                "github_url": repo.get("html_url"),
-                "topics": repo.get("topics", []),
-            })
+    # Prepare headers safely
+    request_headers = {"Accept": "application/vnd.github.v3+json"}
+    if GITHUB_TOKEN and GITHUB_TOKEN != "None":
+        request_headers["Authorization"] = f"token {GITHUB_TOKEN}"
     
-    return {
-        "username": username,
-        "name": user_data.get("name") or username,
-        "bio": user_data.get("bio") or "",
-        "avatar": user_data.get("avatar_url"),
-        "location": user_data.get("location") or "",
-        "repos": repos
-    }
+    try:
+        async with httpx.AsyncClient() as client:
+            user_res = await client.get(
+                f"https://api.github.com/users/{username}",
+                headers=request_headers,
+                timeout=10.0
+            )
+            if user_res.status_code != 200:
+                return {"error": f"GitHub user not found or API error: {user_res.status_code}"}
+            
+            user_data = user_res.json()
+            
+            repos_res = await client.get(
+                f"https://api.github.com/users/{username}/repos?sort=updated&per_page=30",
+                headers=request_headers,
+                timeout=10.0
+            )
+            if repos_res.status_code != 200:
+                return {"error": f"Error fetching repos: {repos_res.status_code}"}
+            
+            repos_data = repos_res.json()
+        
+        if not isinstance(repos_data, list):
+            return {"error": "Unexpected response format from GitHub API"}
+            
+        repos = []
+        for repo in repos_data:
+            if not repo.get("fork"):
+                repos.append({
+                    "name": repo.get("name"),
+                    "description": repo.get("description") or "",
+                    "languages": repo.get("language") or "Not specified",
+                    "stars": repo.get("stargazers_count"),
+                    "github_url": repo.get("html_url"),
+                    "topics": repo.get("topics", []),
+                })
+        
+        return {
+            "username": username,
+            "name": user_data.get("name") or username,
+            "bio": user_data.get("bio") or "",
+            "avatar": user_data.get("avatar_url"),
+            "location": user_data.get("location") or "",
+            "repos": repos
+        }
+    except Exception as e:
+        print(f"Error in fetch_github_data: {e}")
+        return {"error": str(e)}
 
 async def fetch_repo_languages(username: str, repo_name: str) -> List[str]:
     async with httpx.AsyncClient() as client:

app/services/groq_service.py

@@ -2,13 +2,23 @@ import os
 from groq import Groq
 import json
 
-client = Groq(api_key=os.getenv("GROQ_API_KEY"))
+_groq_client = None
+
+def get_groq_client():
+    global _groq_client
+    if _groq_client is None:
+        key = os.getenv("GROQ_API_KEY")
+        if not key:
+            raise ValueError("GROQ_API_KEY must be set")
+        _groq_client = Groq(api_key=key)
+    return _groq_client
 
 def generate_portfolio_content(
     github_data: dict,
     linkedin_sections: dict,
     onboarding: dict
 ) -> dict:
+    client = get_groq_client()
     highlighted = onboarding.get("highlighted_projects", [])
     all_repos = github_data.get("repos", [])
 
@@ -19,7 +29,7 @@ def generate_portfolio_content(
 You are a professional portfolio writer. Generate portfolio content for a developer.
 
 DEVELOPER INFO:
-- Name: {github_data.get('name')}
+- Name: {onboarding.get('full_name') or github_data.get('name') or github_data.get('username')}
 - Role: {onboarding.get('role')}
 - One Liner: {onboarding.get('one_liner')}
 - Job Target: {onboarding.get('job_target')}

app/templates/cv_bold.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Inter', Arial, sans-serif; color: #111; background: #fff; padding: 0; }
+  .sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: #1a1a1a; color: #fff; padding: 40px 30px; }
+  .main { margin-left: 30%; width: 70%; padding: 40px 40px; }
+  .name { font-size: 32px; font-weight: 800; line-height: 1.1; margin-bottom: 10px; text-transform: uppercase; }
+  .role { font-size: 16px; color: #ff3e3e; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
+  .contact-item { margin-bottom: 15px; font-size: 12px; color: #ccc; }
+  .contact-label { font-weight: bold; color: #fff; display: block; margin-bottom: 2px; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }
+  .sidebar-section { margin-top: 40px; }
+  .sidebar-title { font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; border-bottom: 2px solid #ff3e3e; padding-bottom: 5px; margin-bottom: 15px; }
+  .skill-tag { display: inline-block; background: #333; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 11px; margin-right: 5px; margin-bottom: 8px; }
+  .section-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; color: #1a1a1a; display: flex; align-items: center; }
+  .section-title::after { content: ''; flex: 1; height: 2px; background: #eee; margin-left: 15px; }
+  .bio { font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 30px; }
+  .project { margin-bottom: 25px; }
+  .project-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
+  .project-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
+  .project-featured { font-size: 10px; background: #ff3e3e; color: #fff; padding: 2px 8px; border-radius: 20px; font-weight: bold; }
+  .project-desc { font-size: 13px; line-height: 1.5; color: #555; }
+  .project-tech { font-size: 11px; color: #888; margin-top: 5px; font-weight: 600; }
+  .exp-item { margin-bottom: 20px; }
+  .exp-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
+  .exp-company-dates { font-size: 12px; color: #ff3e3e; font-weight: 600; margin-bottom: 5px; }
+  .exp-desc { font-size: 13px; line-height: 1.5; color: #555; }
+  .edu-item { margin-bottom: 15px; }
+  .edu-degree { font-size: 15px; font-weight: 700; color: #1a1a1a; }
+  .edu-school-year { font-size: 12px; color: #555; }
+</style>
+</head>
+<body>
+
+<div class="sidebar">
+  <div class="name">{{ name }}</div>
+  <div class="role">{{ role }}</div>
+  
+  <div class="sidebar-section">
+    <div class="contact-item">
+      <span class="contact-label">GitHub</span>
+      {{ contact.github or 'Not Provided' }}
+    </div>
+    {% if suggested_rate %}
+    <div class="contact-item">
+      <span class="contact-label">Expected Rate</span>
+      {{ suggested_rate }}
+    </div>
+    {% endif %}
+    {% if one_liner %}
+    <div class="contact-item">
+      <span class="contact-label">Focus</span>
+      {{ one_liner }}
+    </div>
+    {% endif %}
+  </div>
+
+  <div class="sidebar-section">
+    <div class="sidebar-title">Skills</div>
+    <div class="skills-list">
+      {% for skill in skills %}
+      <span class="skill-tag">{{ skill }}</span>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<div class="main">
+  <div class="section">
+    <div class="section-title">About Me</div>
+    <div class="bio">{{ bio }}</div>
+  </div>
+
+  {% if featured_projects %}
+  <div class="section">
+    <div class="section-title">Featured Work</div>
+    {% for project in featured_projects %}
+    <div class="project">
+      <div class="project-header">
+        <span class="project-name">{{ project.name }}</span>
+        <span class="project-featured">FEATURED</span>
+      </div>
+      <div class="project-desc">{{ project.description }}</div>
+      <div class="project-tech">{{ project.technologies | join(' // ') }}</div>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {% if experience %}
+  <div class="section">
+    <div class="section-title">Experience</div>
+    {% for exp in experience %}
+    <div class="exp-item">
+      <div class="exp-title">{{ exp.title }}</div>
+      <div class="exp-company-dates">{{ exp.company }} // {{ exp.duration }}</div>
+      <div class="exp-desc">{{ exp.description }}</div>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {% if education %}
+  <div class="section">
+    <div class="section-title">Education</div>
+    {% for edu in education %}
+    <div class="edu-item">
+      <div class="edu-degree">{{ edu.degree }}</div>
+      <div class="edu-school-year">{{ edu.institution }} // {{ edu.year }}</div>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+
+</body>
+</html>

app/templates/cv_classic.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Times New Roman', Times, serif; color: #333; background: #fff; padding: 40px 50px; line-height: 1.5; }
+  .header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 10px; }
+  .name { font-size: 32px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
+  .role { font-size: 18px; color: #555; margin-top: 5px; }
+  .contact { margin-top: 10px; font-size: 12px; }
+  .contact span { margin: 0 10px; }
+  .section { margin-bottom: 25px; }
+  .section-title { font-size: 16px; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid #ccc; margin-bottom: 10px; color: #000; }
+  .bio { font-size: 13px; text-align: justify; }
+  .skills-list { font-size: 13px; margin-left: 20px; }
+  .skill-item { display: inline-block; margin-right: 15px; margin-bottom: 5px; }
+  .project { margin-bottom: 15px; }
+  .project-header { display: flex; justify-content: space-between; align-items: baseline; }
+  .project-name { font-size: 14px; font-weight: bold; }
+  .project-featured { font-size: 10px; font-style: italic; color: #666; margin-left: 5px; }
+  .project-desc { font-size: 13px; margin-top: 3px; }
+  .project-tech { font-size: 12px; color: #666; font-style: italic; margin-top: 2px; }
+  .exp-item { margin-bottom: 15px; }
+  .exp-header { display: flex; justify-content: space-between; align-items: baseline; }
+  .exp-title { font-size: 14px; font-weight: bold; }
+  .exp-company-dates { font-size: 14px; color: #555; }
+  .exp-desc { font-size: 13px; margin-top: 3px; }
+  .edu-item { margin-bottom: 10px; }
+  .edu-header { display: flex; justify-content: space-between; align-items: baseline; }
+  .edu-degree { font-size: 14px; font-weight: bold; }
+  .edu-school-year { font-size: 14px; color: #555; }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="name">{{ name }}</div>
+  <div class="role">{{ role }}</div>
+  <div class="contact">
+    {% if contact.github %}<span>GitHub: {{ contact.github }}</span>{% endif %}
+    {% if one_liner %}<span>{{ one_liner }}</span>{% endif %}
+    {% if suggested_rate %}<span>Rate: {{ suggested_rate }}</span>{% endif %}
+  </div>
+</div>
+
+<div class="section">
+  <div class="section-title">Professional Summary</div>
+  <div class="bio">{{ bio }}</div>
+</div>
+
+<div class="section">
+  <div class="section-title">Technical Skills</div>
+  <div class="skills-list">
+    {% for skill in skills %}
+    <span class="skill-item">{{ skill }}{% if not loop.last %}, {% endif %}</span>
+    {% endfor %}
+  </div>
+</div>
+
+{% if featured_projects %}
+<div class="section">
+  <div class="section-title">Featured Projects</div>
+  {% for project in featured_projects %}
+  <div class="project">
+    <div class="project-header">
+      <span class="project-name">{{ project.name }}<span class="project-featured">(Featured)</span></span>
+    </div>
+    <div class="project-desc">{{ project.description }}</div>
+    <div class="project-tech">Technologies: {{ project.technologies | join(', ') }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if other_projects %}
+<div class="section">
+  <div class="section-title">Other Projects</div>
+  {% for project in other_projects %}
+  <div class="project">
+    <div class="project-header">
+      <span class="project-name">{{ project.name }}</span>
+    </div>
+    <div class="project-desc">{{ project.description }}</div>
+    <div class="project-tech">Technologies: {{ project.technologies | join(', ') }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if experience %}
+<div class="section">
+  <div class="section-title">Work Experience</div>
+  {% for exp in experience %}
+  <div class="exp-item">
+    <div class="exp-header">
+      <span class="exp-title">{{ exp.title }}</span>
+      <span class="exp-company-dates">{{ exp.company }} | {{ exp.duration }}</span>
+    </div>
+    <div class="exp-desc">{{ exp.description }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if education %}
+<div class="section">
+  <div class="section-title">Education</div>
+  {% for edu in education %}
+  <div class="edu-item">
+    <div class="edu-header">
+      <span class="edu-degree">{{ edu.degree }}</span>
+      <span class="edu-school-year">{{ edu.institution }} | {{ edu.year }}</span>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+</body>
+</html>

app/templates/cv_minimal.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #2d2d2d; background: #fff; padding: 50px 60px; }
+  .header { margin-bottom: 36px; }
+  .name { font-size: 28px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; }
+  .role { font-size: 12px; color: #999; margin-top: 6px; letter-spacing: 3px; text-transform: uppercase; }
+  .one-liner { font-size: 13px; color: #555; margin-top: 10px; }
+  .contact { margin-top: 10px; font-size: 11px; color: #aaa; }
+  .divider { height: 1px; background: #eee; margin: 20px 0; }
+  .section { margin-bottom: 28px; }
+  .section-title { font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: #aaa; margin-bottom: 14px; }
+  .bio { font-size: 12px; line-height: 1.8; color: #555; }
+  .skills-list { display: flex; flex-wrap: wrap; gap: 6px; }
+  .skill-tag { border: 1px solid #ddd; padding: 3px 10px; font-size: 11px; color: #666; }
+  .project { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #f5f5f5; }
+  .project:last-child { border-bottom: none; }
+  .project-name { font-size: 13px; font-weight: 600; color: #2d2d2d; }
+  .project-featured { font-size: 9px; color: #aaa; letter-spacing: 2px; text-transform: uppercase; margin-left: 8px; }
+  .project-desc { font-size: 11px; color: #777; margin-top: 4px; line-height: 1.7; }
+  .project-tech { font-size: 10px; color: #bbb; margin-top: 4px; }
+  .exp-item { margin-bottom: 14px; }
+  .exp-title { font-size: 13px; font-weight: 600; }
+  .exp-company { font-size: 11px; color: #aaa; margin-top: 2px; }
+  .exp-desc { font-size: 11px; color: #777; margin-top: 4px; line-height: 1.7; }
+  .edu-item { margin-bottom: 10px; }
+  .edu-degree { font-size: 13px; font-weight: 600; }
+  .edu-school { font-size: 11px; color: #aaa; margin-top: 2px; }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="name">{{ name }}</div>
+  <div class="role">{{ role }}</div>
+  <div class="one-liner">{{ one_liner }}</div>
+  <div class="contact">
+    {% if contact.github %}{{ contact.github }}{% endif %}
+    {% if suggested_rate %} · {{ suggested_rate }}{% endif %}
+  </div>
+</div>
+
+<div class="divider"></div>
+
+<div class="section">
+  <div class="section-title">Profile</div>
+  <div class="bio">{{ bio }}</div>
+</div>
+
+<div class="section">
+  <div class="section-title">Skills</div>
+  <div class="skills-list">
+    {% for skill in skills %}
+    <span class="skill-tag">{{ skill }}</span>
+    {% endfor %}
+  </div>
+</div>
+
+{% if featured_projects %}
+<div class="section">
+  <div class="section-title">Featured Projects</div>
+  {% for project in featured_projects %}
+  <div class="project">
+    <div class="project-name">{{ project.name }}<span class="project-featured">featured</span></div>
+    <div class="project-desc">{{ project.description }}</div>
+    <div class="project-tech">{{ project.technologies | join(' · ') }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if other_projects %}
+<div class="section">
+  <div class="section-title">Other Projects</div>
+  {% for project in other_projects %}
+  <div class="project">
+    <div class="project-name">{{ project.name }}</div>
+    <div class="project-desc">{{ project.description }}</div>
+    <div class="project-tech">{{ project.technologies | join(' · ') }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if experience %}
+<div class="section">
+  <div class="section-title">Experience</div>
+  {% for exp in experience %}
+  <div class="exp-item">
+    <div class="exp-title">{{ exp.title }}</div>
+    <div class="exp-company">{{ exp.company }} · {{ exp.duration }}</div>
+    <div class="exp-desc">{{ exp.description }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if education %}
+<div class="section">
+  <div class="section-title">Education</div>
+  {% for edu in education %}
+  <div class="edu-item">
+    <div class="edu-degree">{{ edu.degree }}</div>
+    <div class="edu-school">{{ edu.institution }} · {{ edu.year }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+</body>
+</html>

app/templates/cv_modern.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Georgia', serif; color: #1a1a1a; background: #fff; padding: 40px; }
+  .header { border-bottom: 3px solid #000; padding-bottom: 20px; margin-bottom: 24px; }
+  .name { font-size: 36px; font-weight: 700; letter-spacing: -1px; }
+  .role { font-size: 16px; color: #555; margin-top: 4px; }
+  .one-liner { font-size: 14px; color: #333; margin-top: 8px; font-style: italic; }
+  .contact { display: flex; gap: 20px; margin-top: 12px; font-size: 12px; color: #555; }
+  .section { margin-bottom: 24px; }
+  .section-title { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border-bottom: 1px solid #ddd; padding-bottom: 6px; margin-bottom: 14px; color: #000; }
+  .bio { font-size: 13px; line-height: 1.7; color: #333; }
+  .skills-list { display: flex; flex-wrap: wrap; gap: 8px; }
+  .skill-tag { background: #f0f0f0; padding: 4px 10px; border-radius: 3px; font-size: 12px; }
+  .project { margin-bottom: 16px; }
+  .project-name { font-size: 14px; font-weight: 700; }
+  .project-featured { font-size: 10px; background: #000; color: #fff; padding: 2px 6px; border-radius: 2px; margin-left: 8px; vertical-align: middle; }
+  .project-desc { font-size: 12px; color: #444; margin-top: 4px; line-height: 1.6; }
+  .project-tech { font-size: 11px; color: #777; margin-top: 4px; }
+  .exp-item { margin-bottom: 14px; }
+  .exp-title { font-size: 14px; font-weight: 700; }
+  .exp-company { font-size: 12px; color: #555; }
+  .exp-desc { font-size: 12px; color: #444; margin-top: 4px; line-height: 1.6; }
+  .edu-item { margin-bottom: 10px; }
+  .edu-degree { font-size: 14px; font-weight: 700; }
+  .edu-school { font-size: 12px; color: #555; }
+  .rate { font-size: 13px; color: #333; font-weight: 600; }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="name">{{ name }}</div>
+  <div class="role">{{ role }}</div>
+  <div class="one-liner">{{ one_liner }}</div>
+  <div class="contact">
+    {% if contact.github %}<span>GitHub: {{ contact.github }}</span>{% endif %}
+    {% if suggested_rate %}<span>Rate: {{ suggested_rate }}</span>{% endif %}
+  </div>
+</div>
+
+<div class="section">
+  <div class="section-title">About</div>
+  <div class="bio">{{ bio }}</div>
+</div>
+
+<div class="section">
+  <div class="section-title">Skills</div>
+  <div class="skills-list">
+    {% for skill in skills %}
+    <span class="skill-tag">{{ skill }}</span>
+    {% endfor %}
+  </div>
+</div>
+
+{% if featured_projects %}
+<div class="section">
+  <div class="section-title">Featured Projects</div>
+  {% for project in featured_projects %}
+  <div class="project">
+    <div class="project-name">{{ project.name }}<span class="project-featured">FEATURED</span></div>
+    <div class="project-desc">{{ project.description }}</div>
+    <div class="project-tech">{{ project.technologies | join(', ') }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if other_projects %}
+<div class="section">
+  <div class="section-title">Other Projects</div>
+  {% for project in other_projects %}
+  <div class="project">
+    <div class="project-name">{{ project.name }}</div>
+    <div class="project-desc">{{ project.description }}</div>
+    <div class="project-tech">{{ project.technologies | join(', ') }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if experience %}
+<div class="section">
+  <div class="section-title">Experience</div>
+  {% for exp in experience %}
+  <div class="exp-item">
+    <div class="exp-title">{{ exp.title }}</div>
+    <div class="exp-company">{{ exp.company }} · {{ exp.duration }}</div>
+    <div class="exp-desc">{{ exp.description }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if education %}
+<div class="section">
+  <div class="section-title">Education</div>
+  {% for edu in education %}
+  <div class="edu-item">
+    <div class="edu-degree">{{ edu.degree }}</div>
+    <div class="edu-school">{{ edu.institution }} · {{ edu.year }}</div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+</body>
+</html>