From 0a23b7deae3efbe9cd801be3817c4ecceba3b39c Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Tue, 10 Jun 2025 15:17:36 -0700 Subject: [PATCH] How It Works --- frontend/src/pages/HowItWorks.tsx | 430 ++++++++++++++++++++++++++---- 1 file changed, 378 insertions(+), 52 deletions(-) diff --git a/frontend/src/pages/HowItWorks.tsx b/frontend/src/pages/HowItWorks.tsx index 3a63f36..d48bf4c 100644 --- a/frontend/src/pages/HowItWorks.tsx +++ b/frontend/src/pages/HowItWorks.tsx @@ -1,63 +1,389 @@ import React from 'react'; -import { Box, Paper, Typography } from '@mui/material'; -import { BackstoryLogo } from 'components/ui/BackstoryLogo'; -import { StyledMarkdown } from 'components/StyledMarkdown'; +import { useNavigate } from 'react-router-dom'; +import { + Box, + Button, + Container, + Paper, + Typography, + Grid, + Card, + CardContent, + Chip, + Step, + StepLabel, + Stepper, +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import PlayArrowIcon from '@mui/icons-material/PlayArrow'; +import AssessmentIcon from '@mui/icons-material/Assessment'; +import PersonIcon from '@mui/icons-material/Person'; +import WorkIcon from '@mui/icons-material/Work'; +import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; +import DescriptionIcon from '@mui/icons-material/Description'; -const HowItWorks = () => { - const content = `\ -Welcome to the Backstory Beta! +// Styled components matching HomePage patterns +const HeroSection = styled(Box)(({ theme }) => ({ + padding: theme.spacing(6, 0), + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + [theme.breakpoints.down('md')]: { + padding: theme.spacing(4, 0), + }, +})); -Here are your steps from zero-to-hero to see Backstory in action. +const StepSection = styled(Box)(({ theme }) => ({ + padding: theme.spacing(6, 0), + '&:nth-of-type(even)': { + backgroundColor: theme.palette.background.default, + }, +})); -![select-job-analysis](/select-job-analysis.png) +const StepNumber = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.action.active, + color: theme.palette.background.paper, + borderRadius: '50%', + width: 60, + height: 60, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + fontSize: '1.5rem', + fontWeight: 'bold', + margin: '0 auto 1rem auto', + [theme.breakpoints.up('md')]: { + margin: 0, + }, +})); -Select 'Job Analysis' from the menu. This takes you to the interactive Job Analysis page, -where you will get to evaluate a candidate for a selected job. +const ImageContainer = styled(Box)(({ theme }) => ({ + textAlign: 'center', + '& img': { + maxWidth: '100%', + height: 'auto', + borderRadius: theme.spacing(1), + boxShadow: theme.shadows[3], + border: `2px solid ${theme.palette.action.active}`, + }, +})); -Once on the Job Analysis Page, explore a little bit and then select one of the jobs. The -requirements and information provided on Backstory are extracted from job postings that users have pasted as a -job description or uploaded from a PDF. You can create your own job postings once you create an account. Until then, -you need to select one that already exists. +const StepCard = styled(Card)(({ theme }) => ({ + height: '100%', + display: 'flex', + flexDirection: 'column', + border: `1px solid ${theme.palette.action.active}`, + '&:hover': { + boxShadow: theme.shadows[4], + }, +})); -![select-a-job](/select-a-job.png) +const steps = [ + 'Select Job Analysis', + 'Choose a Job', + 'Select a Candidate', + 'Start Assessment', + 'Review Results', + 'Generate Resume' +]; -Now that you have a Job selected, you need to select a candidate. In addition to myself (James), there are several -candidates which AI has generated. Each has a unique skillset and can be used to test out the system. If you create an account, -you can opt-in to have your account show up for others to view as well, or keep it private for just your own resume -generation and job research. - -![select-a-candidate](/select-a-candidate.png) - -After selecting a candidate, you are ready to have Backstory perform the Job Analysis. During this phase, Backstory will -take each of requirements that were extracted from the Job and match it against any information available about the selected candidate. -This could be as little as a simple resume, or as complete as a full work history. Backstory performs similarity searches to -identify key elements from the candidate that pertain to a given skill and provides a graded response. - -![select-start-analysis](/select-start-analysis.png) - -To see that in action, click the "Start Skill Assessment". Once you begin that action, the Start Skill Assessment button will grey out and -the page will begin updating as it discovers information about the candidate. As it does its thing, you can monitor the progress and explore the different -identified skills to see how or why a candidate does or does not have that skill. - -![Wait](/wait.png) - -Once it is done, you can see the final Overall Match. This is a weighted score based on amount of evidence a skill had, whether the skill was required or preferred, and other metrics. - -The final step is creating the custom resume for the Candidate tailored to the particular Job. On the bottom right you can click "Next" to have Backstory -generate the custom resume. - -![final-resume](/final-resume.png) - -Note that the resume focuses on identifying key areas from the Candidate's work history that align with skills which were extracted from the original job posting. - -You can then click the Copy button to copy the resume into your editor, adjust, and apply for your dream job! -`; - - return ( - - - - ); +interface StepContentProps { + stepNumber: number; + title: string; + subtitle: string; + icon: React.ReactNode; + description: string[]; + imageSrc: string; + imageAlt: string; + note?: string; + success?: string; + reversed?: boolean; } +const StepContent: React.FC = ({ + stepNumber, + title, + subtitle, + icon, + description, + imageSrc, + imageAlt, + note, + success, + reversed = false +}) => { + const textContent = ( + + + {stepNumber} + + + {title} + + + {icon} + + {subtitle} + + + + + {description.map((paragraph, index) => ( + + {paragraph} + + ))} + {note && ( + + + Note: {note} + + + )} + {success && ( + + + 🎉 {success} + + + )} + + ); + + const imageContent = ( + + + {imageAlt} + + + ); + + return ( + + {reversed ? ( + <> + {imageContent} + {textContent} + + ) : ( + <> + {textContent} + {imageContent} + + )} + + ); +}; + +const HowItWorks: React.FC = () => { + const navigate = useNavigate(); + + const handleGetStarted = () => { + navigate('/job-analysis'); + }; + + return ( + + {/* Hero Section */} + + + + + Welcome to the Backstory Beta! + + + Here are your steps from zero-to-hero to see Backstory in action + + + + + + + {/* Progress Overview */} + + + + {steps.map((label) => ( + + {label} + + ))} + + + + + {/* Step 1: Select Job Analysis */} + + + } + description={[ + "Select 'Job Analysis' from the menu. This takes you to the interactive Job Analysis page, where you will get to evaluate a candidate for a selected job." + ]} + imageSrc="/select-job-analysis.png" + imageAlt="Select Job Analysis from menu" + /> + + + + {/* Step 2: Select a Job */} + + + } + description={[ + "Once on the Job Analysis Page, explore a little bit and then select one of the jobs. The requirements and information provided on Backstory are extracted from job postings that users have pasted as a job description or uploaded from a PDF." + ]} + imageSrc="/select-a-job.png" + imageAlt="Select a job from the available options" + note="You can create your own job postings once you create an account. Until then, you need to select one that already exists." + reversed={true} + /> + + + + {/* Step 3: Select a Candidate */} + + + } + description={[ + "Now that you have a Job selected, you need to select a candidate. In addition to myself (James), there are several candidates which AI has generated. Each has a unique skillset and can be used to test out the system." + ]} + imageSrc="/select-a-candidate.png" + imageAlt="Select a candidate from the available profiles" + note="If you create an account, you can opt-in to have your account show up for others to view as well, or keep it private for just your own resume generation and job research." + /> + + + + {/* Step 4: Start Assessment */} + + + } + description={[ + "After selecting a candidate, you are ready to have Backstory perform the Job Analysis. During this phase, Backstory will take each of requirements that were extracted from the Job and match it against any information available about the selected candidate.", + "This could be as little as a simple resume, or as complete as a full work history. Backstory performs similarity searches to identify key elements from the candidate that pertain to a given skill and provides a graded response.", + "To see that in action, click the \"Start Skill Assessment\" button." + ]} + imageSrc="/select-start-analysis.png" + imageAlt="Start the skill assessment process" + reversed={true} + /> + + + + {/* Step 5: Wait and Review */} + + + } + description={[ + "Once you begin that action, the Start Skill Assessment button will grey out and the page will begin updating as it discovers information about the candidate. As it does its thing, you can monitor the progress and explore the different identified skills to see how or why a candidate does or does not have that skill.", + "Once it is done, you can see the final Overall Match. This is a weighted score based on amount of evidence a skill had, whether the skill was required or preferred, and other metrics." + ]} + imageSrc="/wait.png" + imageAlt="Wait for the analysis to complete and review results" + /> + + + + {/* Step 6: Generate Resume */} + + + } + description={[ + "The final step is creating the custom resume for the Candidate tailored to the particular Job. On the bottom right you can click \"Next\" to have Backstory generate the custom resume.", + "Note that the resume focuses on identifying key areas from the Candidate's work history that align with skills which were extracted from the original job posting." + ]} + imageSrc="/final-resume.png" + imageAlt="Generated custom resume tailored to the job" + success="Success! You can then click the Copy button to copy the resume into your editor, adjust, and apply for your dream job!" + reversed={true} + /> + + + + {/* CTA Section */} + + + + + Ready to try Backstory? + + + Experience the future of job matching and resume generation today. + + + + + + + ); +}; + export { HowItWorks }; \ No newline at end of file