From 3ceadf7a3ca50e7d5cf5f17c4fdc77ec5b58696a Mon Sep 17 00:00:00 2001 From: Kiro Date: Fri, 26 Jun 2026 20:05:46 +0000 Subject: [PATCH 1/2] docs: add screenshots section with rendered placeholders - docs/screenshots/: placeholder SVGs (landing, upload, report light/dark) that render on GitHub, + README with capture instructions - README screenshots section wired to these images (replace .svg with real .png) --- README.md | 12 ++++++++---- docs/screenshots/README.md | 17 +++++++++++++++++ docs/screenshots/landing.svg | 11 +++++++++++ docs/screenshots/report-dark.svg | 23 +++++++++++++++++++++++ docs/screenshots/report.svg | 23 +++++++++++++++++++++++ docs/screenshots/upload.svg | 15 +++++++++++++++ 6 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 docs/screenshots/README.md create mode 100644 docs/screenshots/landing.svg create mode 100644 docs/screenshots/report-dark.svg create mode 100644 docs/screenshots/report.svg create mode 100644 docs/screenshots/upload.svg diff --git a/README.md b/README.md index 8181c86..dc905f1 100644 --- a/README.md +++ b/README.md @@ -88,11 +88,15 @@ Full detail: [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) · actual file tree: [ ## Screenshots -> _Placeholder — add images/GIFs here._ +> These are **placeholder graphics**. Replace the files in [`docs/screenshots/`](docs/screenshots/) with real captures of the [live app](https://interview-iq-areeb-syed.vercel.app) (see that folder's README for how). -| Landing | Upload | Report | -|---|---|---| -| _TODO_ | _TODO_ | _TODO_ | +| Landing (`/`) | Upload (`/analyze`) | +|:---:|:---:| +| ![Landing page](docs/screenshots/landing.svg) | ![Upload screen](docs/screenshots/upload.svg) | + +| Report — light | Report — dark | +|:---:|:---:| +| ![Report light mode](docs/screenshots/report.svg) | ![Report dark mode](docs/screenshots/report-dark.svg) | --- diff --git a/docs/screenshots/README.md b/docs/screenshots/README.md new file mode 100644 index 0000000..b4a195b --- /dev/null +++ b/docs/screenshots/README.md @@ -0,0 +1,17 @@ +# Screenshots + +These are **placeholder SVGs** rendered in the root README. Replace them with real captures of the +deployed app (https://interview-iq-areeb-syed.vercel.app). + +## How to add real screenshots + +1. Capture these views (1280×800 recommended; PNG or WebP): + - `landing` — the landing page (`/`) + - `upload` — the upload screen (`/analyze`) + - `report` — a completed report (`/analysis/:taskId`), light mode + - `report-dark` — the same report in dark mode (toggle in the top bar) +2. Save them in this folder, e.g. `landing.png`, `upload.png`, `report.png`, `report-dark.png`. +3. In the root [`README.md`](../../README.md) Screenshots section, point the image links at the + `.png` files (replace the `.svg` placeholders), then commit. + +Tip: macOS `⌘⇧4`, Windows `Win+Shift+S`, or your browser devtools "capture full-size screenshot". diff --git a/docs/screenshots/landing.svg b/docs/screenshots/landing.svg new file mode 100644 index 0000000..098cf3f --- /dev/null +++ b/docs/screenshots/landing.svg @@ -0,0 +1,11 @@ + + + + + InterviewIQ + Landing + Headline · subline · CTA + how-it-works + + Analyze my resume + Placeholder — replace with docs/screenshots/landing.png + diff --git a/docs/screenshots/report-dark.svg b/docs/screenshots/report-dark.svg new file mode 100644 index 0000000..9fd208a --- /dev/null +++ b/docs/screenshots/report-dark.svg @@ -0,0 +1,23 @@ + + + + Verdict: Shortlist · Level: Junior · Best fit: Backend Developer 72 + Your report + + + ATS Readiness + 68 + ✓ evidence found + ⚑ evidence missing + + Interview Probability + 55 + confidence: medium + + Employability + 71 + + + Recruiter Simulation ▾ · ATS Analysis ▸ · Market Positioning ▸ + Placeholder — replace with docs/screenshots/report-dark.png + diff --git a/docs/screenshots/report.svg b/docs/screenshots/report.svg new file mode 100644 index 0000000..673333c --- /dev/null +++ b/docs/screenshots/report.svg @@ -0,0 +1,23 @@ + + + + Verdict: Shortlist · Level: Junior · Best fit: Backend Developer 72 + Your report + + + ATS Readiness + 68 + ✓ evidence found + ⚑ evidence missing + + Interview Probability + 55 + confidence: medium + + Employability + 71 + + + Recruiter Simulation ▾ · ATS Analysis ▸ · Market Positioning ▸ + Placeholder — replace with docs/screenshots/report.png + diff --git a/docs/screenshots/upload.svg b/docs/screenshots/upload.svg new file mode 100644 index 0000000..0703e5c --- /dev/null +++ b/docs/screenshots/upload.svg @@ -0,0 +1,15 @@ + + + + + InterviewIQ + Analyze your resume + + Drag & drop your PDF resume + or click to browse · PDF up to 5 MB + + Target job · optional + + Analyze resume + Placeholder — replace with docs/screenshots/upload.png + From 632954463987f2514f7cf6fb3f117b753057b236 Mon Sep 17 00:00:00 2001 From: Kiro Date: Fri, 26 Jun 2026 20:24:51 +0000 Subject: [PATCH 2/2] feat(ui): add About section to the landing page - AboutSection: two cards matching the design system (Card, dark/light, fade-in, accessible, responsive lg:grid-cols-2) - Card 1 'About InterviewIQ': description, current-version info grid, feature chips, future-roadmap checklist (unchecked), open-source repo link (new tab) - Card 2 'Developer': name, subtitle, concise bio, Connect links (GitHub, LinkedIn external new-tab; primary/secondary email mailto) with official icons + hover animations + focus rings - icons: add Mail, Circle, ExternalLink (stroke) and Github, Linkedin (brand fill) to the existing icon set (no new dependency) - LandingPage: render AboutSection above a new minimal footer --- client/src/components/ui/icons.tsx | 30 +++ client/src/features/home/LandingPage.tsx | 15 ++ .../features/home/components/AboutSection.tsx | 207 ++++++++++++++++++ 3 files changed, 252 insertions(+) create mode 100644 client/src/features/home/components/AboutSection.tsx diff --git a/client/src/components/ui/icons.tsx b/client/src/components/ui/icons.tsx index dbeb6fd..a8d51ec 100644 --- a/client/src/components/ui/icons.tsx +++ b/client/src/components/ui/icons.tsx @@ -94,3 +94,33 @@ export const FileText = (p: IconProps) => ( ); + + +export const Mail = (p: IconProps) => ( + + + + +); +export const Circle = (p: IconProps) => ( + + + +); +export const ExternalLink = (p: IconProps) => ( + + + +); + +// Brand marks use fill (not stroke). +export const Github = (p: IconProps) => ( + +); +export const Linkedin = (p: IconProps) => ( + +); diff --git a/client/src/features/home/LandingPage.tsx b/client/src/features/home/LandingPage.tsx index a1bbc66..bbd0c9e 100644 --- a/client/src/features/home/LandingPage.tsx +++ b/client/src/features/home/LandingPage.tsx @@ -1,6 +1,7 @@ import { Link } from "react-router-dom"; import { ArrowRight, FileText, Flag, Upload } from "../../components/ui/icons"; +import { AboutSection } from "./components/AboutSection"; const STEPS = [ { Icon: Upload, title: "Upload your resume", body: "Drop in a PDF. No job description required." }, @@ -50,6 +51,20 @@ export function LandingPage() { ))} + + + +
+ © 2026 InterviewIQ · MIT License ·{" "} + + GitHub + +
); } diff --git a/client/src/features/home/components/AboutSection.tsx b/client/src/features/home/components/AboutSection.tsx new file mode 100644 index 0000000..a403437 --- /dev/null +++ b/client/src/features/home/components/AboutSection.tsx @@ -0,0 +1,207 @@ +import { Card, CardBody } from "../../../components/ui/card"; +import { Circle, ExternalLink, Github, Linkedin, Mail } from "../../../components/ui/icons"; + +const VERSION_INFO = [ + { label: "Version", value: "v1.0.0" }, + { label: "Status", value: "Active Development" }, + { label: "Deployment", value: "Production" }, + { label: "License", value: "MIT" }, +]; + +const FEATURES = [ + "Resume Upload", + "Career Intelligence", + "ATS Analysis", + "Recruiter Evaluation", + "Job Matching", + "Skill Gap Analysis", + "Interview Questions", + "AI-Powered Reports", +]; + +const ROADMAP = [ + "Advanced prompt engineering", + "Better reasoning quality", + "Personalized interview preparation", + "Resume version comparison", + "Company-specific insights", + "Mock interview workflow", + "Improved report visualizations", + "Continuous UI/UX improvements", +]; + +const CONNECT = [ + { Icon: Github, label: "GitHub", value: "@4reeb-5yed", href: "https://github.com/4reeb-5yed", external: true }, + { + Icon: Linkedin, + label: "LinkedIn", + value: "areeb-syed", + href: "https://www.linkedin.com/in/areeb-syed-b19491245/", + external: true, + }, + { Icon: Mail, label: "Primary email", value: "areeb.syed1@outlook.com", href: "mailto:areeb.syed1@outlook.com", external: false }, + { Icon: Mail, label: "Secondary email", value: "4reeb.5yed@gmail.com", href: "mailto:4reeb.5yed@gmail.com", external: false }, +]; + +const SectionTitle = ({ children }: { children: string }) => ( +

{children}

+); + +function Chip({ children }: { children: string }) { + return ( + + {children} + + ); +} + +export function AboutSection() { + return ( +
+

+ About InterviewIQ +

+ +
+ {/* Card 1 — About InterviewIQ */} + + +
+

+ About InterviewIQ +

+
+

+ InterviewIQ is an AI-powered career intelligence platform designed to help + candidates better understand their résumés through structured, evidence-based + analysis. +

+

+ The current version combines résumé parsing, recruiter-style evaluation, ATS + insights, optional job matching, skill gap analysis, and interview question + generation into a unified workflow. +

+

+ The primary goal of this project is to explore how modern AI can assist candidates + by providing transparent reasoning and actionable insights rather than simple + keyword matching. +

+

+ InterviewIQ is actively being improved, with ongoing work focused on better AI + reasoning, richer analyses, and a more polished user experience. +

+
+
+ +
+ Current version +
+ {VERSION_INFO.map((item) => ( +
+
{item.label}
+
+ {item.value} +
+
+ ))} +
+
+ +
+ Current features +
+ {FEATURES.map((f) => ( + {f} + ))} +
+
+ +
+ Future roadmap +
    + {ROADMAP.map((item) => ( +
  • + + {item} +
    • + ))} +
+
+ +
+ Open source + + + Repository + + +
+ + + + {/* Card 2 — Developer */} + + +
+

Developer

+

+ Areeb Syed +

+

+ Applied AI • Cybersecurity • Full-Stack Development +

+

+ I'm passionate about building practical AI applications that combine modern + language models, backend engineering, and intuitive user experiences. InterviewIQ is + one of my ongoing projects where I explore how AI can assist candidates with résumé + analysis, career guidance, and interview preparation. +

+
+ +
+ Connect + +
+ + +
+
+ ); +}