How It Works
This commit is contained in:
parent
bb4017b835
commit
0a23b7deae
@ -1,63 +1,389 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Box, Paper, Typography } from '@mui/material';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { BackstoryLogo } from 'components/ui/BackstoryLogo';
|
import {
|
||||||
import { StyledMarkdown } from 'components/StyledMarkdown';
|
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 = () => {
|
// Styled components matching HomePage patterns
|
||||||
const content = `\
|
const HeroSection = styled(Box)(({ theme }) => ({
|
||||||
Welcome to the Backstory Beta!
|
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,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
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,
|
const ImageContainer = styled(Box)(({ theme }) => ({
|
||||||
where you will get to evaluate a candidate for a selected job.
|
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
|
const StepCard = styled(Card)(({ theme }) => ({
|
||||||
requirements and information provided on Backstory are extracted from job postings that users have pasted as a
|
height: '100%',
|
||||||
job description or uploaded from a PDF. You can create your own job postings once you create an account. Until then,
|
display: 'flex',
|
||||||
you need to select one that already exists.
|
flexDirection: 'column',
|
||||||
|
border: `1px solid ${theme.palette.action.active}`,
|
||||||
|
'&:hover': {
|
||||||
|
boxShadow: theme.shadows[4],
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
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
|
interface StepContentProps {
|
||||||
candidates which AI has generated. Each has a unique skillset and can be used to test out the system. If you create an account,
|
stepNumber: number;
|
||||||
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
|
title: string;
|
||||||
generation and job research.
|
subtitle: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
description: string[];
|
||||||
|
imageSrc: string;
|
||||||
After selecting a candidate, you are ready to have Backstory perform the Job Analysis. During this phase, Backstory will
|
imageAlt: string;
|
||||||
take each of requirements that were extracted from the Job and match it against any information available about the selected candidate.
|
note?: string;
|
||||||
This could be as little as a simple resume, or as complete as a full work history. Backstory performs similarity searches to
|
success?: string;
|
||||||
identify key elements from the candidate that pertain to a given skill and provides a graded response.
|
reversed?: boolean;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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 (<Paper sx={{ m: 1, p: 1 }}>
|
|
||||||
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
|
||||||
<StyledMarkdown content={content} />
|
|
||||||
</Box>
|
|
||||||
</Paper>);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const StepContent: React.FC<StepContentProps> = ({
|
||||||
|
stepNumber,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
icon,
|
||||||
|
description,
|
||||||
|
imageSrc,
|
||||||
|
imageAlt,
|
||||||
|
note,
|
||||||
|
success,
|
||||||
|
reversed = false
|
||||||
|
}) => {
|
||||||
|
const textContent = (
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||||
|
<StepNumber>{stepNumber}</StepNumber>
|
||||||
|
<Box sx={{ ml: { xs: 0, md: 3 }, textAlign: { xs: 'center', md: 'left' } }}>
|
||||||
|
<Typography variant="h3" component="h2" sx={{ color: 'primary.main', mb: 1 }}>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, justifyContent: { xs: 'center', md: 'flex-start' } }}>
|
||||||
|
{icon}
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
{subtitle}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
{description.map((paragraph, index) => (
|
||||||
|
<Typography key={index} variant="body1" paragraph>
|
||||||
|
{paragraph}
|
||||||
|
</Typography>
|
||||||
|
))}
|
||||||
|
{note && (
|
||||||
|
<Paper sx={{ p: 2, backgroundColor: 'action.hover', border: '1px solid', borderColor: 'action.active', mt: 2 }}>
|
||||||
|
<Typography variant="body2" sx={{ fontStyle: 'italic' }}>
|
||||||
|
<strong>Note:</strong> {note}
|
||||||
|
</Typography>
|
||||||
|
</Paper>
|
||||||
|
)}
|
||||||
|
{success && (
|
||||||
|
<Paper sx={{ p: 2, backgroundColor: 'secondary.main', color: 'secondary.contrastText', mt: 2 }}>
|
||||||
|
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||||
|
🎉 {success}
|
||||||
|
</Typography>
|
||||||
|
</Paper>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
|
||||||
|
const imageContent = (
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<ImageContainer>
|
||||||
|
<img src={imageSrc} alt={imageAlt} />
|
||||||
|
</ImageContainer>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container spacing={4} alignItems="center">
|
||||||
|
{reversed ? (
|
||||||
|
<>
|
||||||
|
{imageContent}
|
||||||
|
{textContent}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{textContent}
|
||||||
|
{imageContent}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const HowItWorks: React.FC = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleGetStarted = () => {
|
||||||
|
navigate('/job-analysis');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<HeroSection>
|
||||||
|
<Container>
|
||||||
|
<Box sx={{ textAlign: 'center', maxWidth: 800, mx: 'auto' }}>
|
||||||
|
<Typography
|
||||||
|
variant="h2"
|
||||||
|
component="h1"
|
||||||
|
sx={{
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: { xs: '2rem', md: '2.5rem' },
|
||||||
|
mb: 2,
|
||||||
|
color: "white"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Welcome to the Backstory Beta!
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="h5" sx={{ mb: 3, fontWeight: 400 }}>
|
||||||
|
Here are your steps from zero-to-hero to see Backstory in action
|
||||||
|
</Typography>
|
||||||
|
<Chip
|
||||||
|
label="Beta Version"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'action.active',
|
||||||
|
color: 'background.paper',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</HeroSection>
|
||||||
|
|
||||||
|
{/* Progress Overview */}
|
||||||
|
<Container sx={{ py: 4 }}>
|
||||||
|
<Box sx={{ display: { xs: 'none', md: 'block' } }}>
|
||||||
|
<Stepper alternativeLabel sx={{ mb: 4 }}>
|
||||||
|
{steps.map((label) => (
|
||||||
|
<Step key={label}>
|
||||||
|
<StepLabel>{label}</StepLabel>
|
||||||
|
</Step>
|
||||||
|
))}
|
||||||
|
</Stepper>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
{/* Step 1: Select Job Analysis */}
|
||||||
|
<StepSection>
|
||||||
|
<Container>
|
||||||
|
<StepContent
|
||||||
|
stepNumber={1}
|
||||||
|
title="Select Job Analysis"
|
||||||
|
subtitle="Navigate to the main feature"
|
||||||
|
icon={<AssessmentIcon sx={{ color: 'action.active' }} />}
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
</StepSection>
|
||||||
|
|
||||||
|
{/* Step 2: Select a Job */}
|
||||||
|
<StepSection>
|
||||||
|
<Container>
|
||||||
|
<StepContent
|
||||||
|
stepNumber={2}
|
||||||
|
title="Choose a Job"
|
||||||
|
subtitle="Pick from existing job postings"
|
||||||
|
icon={<WorkIcon sx={{ color: 'action.active' }} />}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
</StepSection>
|
||||||
|
|
||||||
|
{/* Step 3: Select a Candidate */}
|
||||||
|
<StepSection>
|
||||||
|
<Container>
|
||||||
|
<StepContent
|
||||||
|
stepNumber={3}
|
||||||
|
title="Select a Candidate"
|
||||||
|
subtitle="Choose from available profiles"
|
||||||
|
icon={<PersonIcon sx={{ color: 'action.active' }} />}
|
||||||
|
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."
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
</StepSection>
|
||||||
|
|
||||||
|
{/* Step 4: Start Assessment */}
|
||||||
|
<StepSection>
|
||||||
|
<Container>
|
||||||
|
<StepContent
|
||||||
|
stepNumber={4}
|
||||||
|
title="Start Assessment"
|
||||||
|
subtitle="Begin the AI analysis"
|
||||||
|
icon={<PlayArrowIcon sx={{ color: 'action.active' }} />}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
</StepSection>
|
||||||
|
|
||||||
|
{/* Step 5: Wait and Review */}
|
||||||
|
<StepSection>
|
||||||
|
<Container>
|
||||||
|
<StepContent
|
||||||
|
stepNumber={5}
|
||||||
|
title="Review Results"
|
||||||
|
subtitle="Watch the magic happen"
|
||||||
|
icon={<AutoAwesomeIcon sx={{ color: 'action.active' }} />}
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
</StepSection>
|
||||||
|
|
||||||
|
{/* Step 6: Generate Resume */}
|
||||||
|
<StepSection>
|
||||||
|
<Container>
|
||||||
|
<StepContent
|
||||||
|
stepNumber={6}
|
||||||
|
title="Generate Resume"
|
||||||
|
subtitle="Create your tailored resume"
|
||||||
|
icon={<DescriptionIcon sx={{ color: 'action.active' }} />}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
</StepSection>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<Box sx={{
|
||||||
|
backgroundColor: 'primary.main',
|
||||||
|
color: 'primary.contrastText',
|
||||||
|
py: 6
|
||||||
|
}}>
|
||||||
|
<Container>
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
textAlign: 'center',
|
||||||
|
maxWidth: 600,
|
||||||
|
mx: 'auto'
|
||||||
|
}}>
|
||||||
|
<Typography variant="h3" component="h2" gutterBottom sx={{ color: "white" }}>
|
||||||
|
Ready to try Backstory?
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="h6" sx={{ mb: 4 }}>
|
||||||
|
Experience the future of job matching and resume generation today.
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
size="large"
|
||||||
|
startIcon={<PlayArrowIcon />}
|
||||||
|
onClick={handleGetStarted}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'action.active',
|
||||||
|
color: 'background.paper',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
px: 4,
|
||||||
|
py: 1.5,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'action.active',
|
||||||
|
opacity: 0.9,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Get Started Now
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export { HowItWorks };
|
export { HowItWorks };
|
||||||
Loading…
x
Reference in New Issue
Block a user