+ {/* Top section with icon and headline */}
+
+ )
+}
+
+export default ATS
diff --git a/Projects/AI-Resume-Analyser/app/components/Accordion.tsx b/Projects/AI-Resume-Analyser/app/components/Accordion.tsx
new file mode 100644
index 000000000..7cb896ce9
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/Accordion.tsx
@@ -0,0 +1,166 @@
+import type { ReactNode } from "react";
+import React, { createContext, useContext, useState } from "react";
+import { cn } from "~/lib/utils";
+
+interface AccordionContextType {
+ activeItems: string[];
+ toggleItem: (id: string) => void;
+ isItemActive: (id: string) => boolean;
+}
+
+const AccordionContext = createContext
+ 
+
+
+ {/* Description section */}
+
+
+ ATS Score - {score}/100
+
+
+
+ {/* Closing encouragement */}
+ {subtitle}
++ This score represents how well your resume is likely to perform in Applicant Tracking Systems used by employers. +
+ + {/* Suggestions list */} +
+ {suggestions.map((suggestion, index) => (
+
+
+ 
+
+ ))}
+ + {suggestion.tip} +
++ Keep refining your resume to improve your chances of getting past ATS filters and into the hands of recruiters. +
+{children}
+
+ {children}
+
+ );
+};
+
+interface AccordionHeaderProps {
+ itemId: string;
+ children: ReactNode;
+ className?: string;
+ icon?: ReactNode;
+ iconPosition?: "left" | "right";
+}
+
+export const AccordionHeader: React.FC
+
+ );
+};
diff --git a/Projects/AI-Resume-Analyser/app/components/Details.tsx b/Projects/AI-Resume-Analyser/app/components/Details.tsx
new file mode 100644
index 000000000..c13f1928e
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/Details.tsx
@@ -0,0 +1,162 @@
+import { cn } from "~/lib/utils";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionHeader,
+ AccordionItem,
+} from "./Accordion";
+
+const ScoreBadge = ({ score }: { score: number }) => {
+ return (
+ {children}
+ 69
+ ? "bg-badge-green"
+ : score > 39
+ ? "bg-badge-yellow"
+ : "bg-badge-red"
+ )}
+ >
+ 
69 ? "/icons/check.svg" : "/icons/warning.svg"}
+ alt="score"
+ className="size-4"
+ />
+
+ );
+};
+
+const CategoryHeader = ({
+ title,
+ categoryScore,
+ }: {
+ title: string;
+ categoryScore: number;
+}) => {
+ return (
+ 69 + ? "text-badge-green-text" + : score > 39 + ? "text-badge-yellow-text" + : "text-badge-red-text" + )} + > + {score}/100 +
+
+
+ );
+};
+
+const CategoryContent = ({
+ tips,
+ }: {
+ tips: { type: "good" | "improve"; tip: string; explanation: string }[];
+}) => {
+ return (
+ {title}
+
+
+ );
+};
+
+const Details = ({ feedback }: { feedback: Feedback }) => {
+ return (
+
+ {tips.map((tip, index) => (
+
+
+ 
+
+ ))}
+ {tip.tip}
+
+ {tips.map((tip, index) => (
+
+
+
+ ))}
+
+
+
+ {tip.tip}
+{tip.explanation}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Details;
diff --git a/Projects/AI-Resume-Analyser/app/components/FileUploader.tsx b/Projects/AI-Resume-Analyser/app/components/FileUploader.tsx
new file mode 100644
index 000000000..0d90da90b
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/FileUploader.tsx
@@ -0,0 +1,72 @@
+import {useState, useCallback} from 'react'
+import {useDropzone} from 'react-dropzone'
+import { formatSize } from '../lib/utils'
+
+interface FileUploaderProps {
+ onFileSelect?: (file: File | null) => void;
+}
+
+const FileUploader = ({ onFileSelect }: FileUploaderProps) => {
+ const onDrop = useCallback((acceptedFiles: File[]) => {
+ const file = acceptedFiles[0] || null;
+
+ onFileSelect?.(file);
+ }, [onFileSelect]);
+
+ const maxFileSize = 20 * 1024 * 1024; // 20MB in bytes
+
+ const {getRootProps, getInputProps, isDragActive, acceptedFiles} = useDropzone({
+ onDrop,
+ multiple: false,
+ accept: { 'application/pdf': ['.pdf']},
+ maxSize: maxFileSize,
+ })
+
+ const file = acceptedFiles[0] || null;
+
+
+
+ return (
+
+
+ )
+}
+export default FileUploader
diff --git a/Projects/AI-Resume-Analyser/app/components/Navbar.tsx b/Projects/AI-Resume-Analyser/app/components/Navbar.tsx
new file mode 100644
index 000000000..1449f2c76
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/Navbar.tsx
@@ -0,0 +1,15 @@
+import {Link} from "react-router";
+
+const Navbar = () => {
+ return (
+
+ )
+}
+export default Navbar
diff --git a/Projects/AI-Resume-Analyser/app/components/ResumeCard.tsx b/Projects/AI-Resume-Analyser/app/components/ResumeCard.tsx
new file mode 100644
index 000000000..19a2386f2
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/ResumeCard.tsx
@@ -0,0 +1,47 @@
+import {Link} from "react-router";
+import ScoreCircle from "~/components/ScoreCircle";
+import {useEffect, useState} from "react";
+import {usePuterStore} from "~/lib/puter";
+
+const ResumeCard = ({ resume: { id, companyName, jobTitle, feedback, imagePath } }: { resume: Resume }) => {
+ const { fs } = usePuterStore();
+ const [resumeUrl, setResumeUrl] = useState('');
+
+ useEffect(() => {
+ const loadResume = async () => {
+ const blob = await fs.read(imagePath);
+ if(!blob) return;
+ let url = URL.createObjectURL(blob);
+ setResumeUrl(url);
+ }
+
+ loadResume();
+ }, [imagePath]);
+
+ return (
+
+
+
+
+
+
+ {file ? (
+
+ e.stopPropagation()}>
+ 
+
+ ): (
+
+
+
+
+
+
+ + {file.name} +
++ {formatSize(file.size)} +
+
+
+ )}
+
+ 
+
+
+ + + Click to upload + or drag and drop +
+PDF (max {formatSize(maxFileSize)})
+
+
+ {resumeUrl && (
+
+ {companyName &&
+ {companyName}
} + {jobTitle &&{jobTitle}
} + {!companyName && !jobTitle &&Resume
} +
+
+
+
+ )}
+
+ )
+}
+export default ResumeCard
diff --git a/Projects/AI-Resume-Analyser/app/components/ScoreBadge.tsx b/Projects/AI-Resume-Analyser/app/components/ScoreBadge.tsx
new file mode 100644
index 000000000..1e38cf1eb
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/ScoreBadge.tsx
@@ -0,0 +1,27 @@
+interface ScoreBadgeProps {
+ score: number;
+}
+
+const ScoreBadge: React.FC
+ 
+
+
+
+ );
+};
+
+export default ScoreBadge;
diff --git a/Projects/AI-Resume-Analyser/app/components/ScoreCircle.tsx b/Projects/AI-Resume-Analyser/app/components/ScoreCircle.tsx
new file mode 100644
index 000000000..d044c4c40
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/ScoreCircle.tsx
@@ -0,0 +1,54 @@
+const ScoreCircle = ({ score = 75 }: { score: number }) => {
+ const radius = 40;
+ const stroke = 8;
+ const normalizedRadius = radius - stroke / 2;
+ const circumference = 2 * Math.PI * normalizedRadius;
+ const progress = score / 100;
+ const strokeDashoffset = circumference * (1 - progress);
+
+ return (
+ {badgeText}
+
+
+
+ {/* Score and issues */}
+
+ );
+};
+
+export default ScoreCircle;
diff --git a/Projects/AI-Resume-Analyser/app/components/ScoreGauge.tsx b/Projects/AI-Resume-Analyser/app/components/ScoreGauge.tsx
new file mode 100644
index 000000000..eb1eded1f
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/ScoreGauge.tsx
@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from "react";
+
+const ScoreGauge = ({ score = 75 }: { score: number }) => {
+ const [pathLength, setPathLength] = useState(0);
+ const pathRef = useRef
+ {`${score}/100`}
+
+
+
+ );
+};
+
+export default ScoreGauge;
diff --git a/Projects/AI-Resume-Analyser/app/components/Summary.tsx b/Projects/AI-Resume-Analyser/app/components/Summary.tsx
new file mode 100644
index 000000000..d76dac40a
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/components/Summary.tsx
@@ -0,0 +1,45 @@
+import ScoreGauge from "~/components/ScoreGauge";
+import ScoreBadge from "~/components/ScoreBadge";
+
+const Category = ({ title, score }: { title: string, score: number }) => {
+ const textColor = score > 70 ? 'text-green-600'
+ : score > 49
+ ? 'text-yellow-600' : 'text-red-600';
+
+ return (
+
+
+
+
+
+
+ {score}/100
+
+
+ )
+}
+
+const Summary = ({ feedback }: { feedback: Feedback }) => {
+ return (
+
+
+
+
+ {title}
++ {score}/100 +
+
+
+ )
+}
+export default Summary
diff --git a/Projects/AI-Resume-Analyser/app/lib/pdf2img.ts b/Projects/AI-Resume-Analyser/app/lib/pdf2img.ts
new file mode 100644
index 000000000..569d6a7c6
--- /dev/null
+++ b/Projects/AI-Resume-Analyser/app/lib/pdf2img.ts
@@ -0,0 +1,85 @@
+export interface PdfConversionResult {
+ imageUrl: string;
+ file: File | null;
+ error?: string;
+}
+
+let pdfjsLib: any = null;
+let isLoading = false;
+let loadPromise: Promise
+
+
+
+
+ Your Resume Score
++ This score is calculated based on the variables listed below. +
+