jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Updated resume layout

Browse Source
This commit is contained in:
James Ketr 2025-07-15 10:44:53 -07:00
parent a0207f4d28
commit ddd024cc4a
3 changed files with 105 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/DiffViewer.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { createPatch } from 'diff'; import { createPatch } from 'diff';
import { Box, SxProps } from '@mui/material'; import { Box, SxProps } from '@mui/material';
import * as Diff2Html from 'diff2html';
import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui'; import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui';
import 'diff2html/bundles/css/diff2html.min.css'; import 'diff2html/bundles/css/diff2html.min.css';
import './DiffViewer.css'; import './DiffViewer.css';

2
frontend/src/components/ui/ResumeInfo.css
View File

@ -141,7 +141,7 @@
.BackstoryResumeHeader { .BackstoryResumeHeader {
gap: 1rem; gap: 1rem;
display: flex; display: flex;
flex-direction: column; /* flex-direction: column; */
/* border: 3px solid orange; */ /* border: 3px solid orange; */
} }

194
frontend/src/components/ui/ResumeInfo.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
import { import {
Box, Box,
Typography, Typography,
@ -410,103 +410,113 @@ const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }
return ( return (
<Box className="BackstoryResumeHeader" sx={style.headerStyle}> <Box className="BackstoryResumeHeader" sx={style.headerStyle}>
<Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}> <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
<Typography <Box sx={{ display: 'flex' }}>
variant="h4"
sx={{
fontWeight: 'bold',
mb: 1,
color: style.name === 'creative' ? '#ffffff' : style.color.primary,
fontFamily: 'inherit',
}}
>
{candidate.fullName}
</Typography>
{candidate.description && (
<Typography <Typography
variant="h6" variant="h4"
sx={{ sx={{
mb: 2, fontWeight: 'bold',
fontWeight: 300, mb: 1,
color: style.name === 'creative' ? '#ffffff' : style.color.secondary, color: style.name === 'creative' ? '#ffffff' : style.color.primary,
fontFamily: 'inherit', fontFamily: 'inherit',
fontSize: '0.8rem !important',
}} }}
> >
{candidate.description} {candidate.fullName}
</Typography> </Typography>
)} </Box>
</Box> <Box
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-start',
gap: 1,
}}
>
{candidate.description && (
<Box sx={{ display: 'flex' }}>
<Typography
variant="h6"
sx={{
mb: 2,
fontWeight: 300,
color: style.name === 'creative' ? '#ffffff' : style.color.secondary,
fontFamily: 'inherit',
fontSize: '0.8rem !important',
}}
>
{candidate.description}
</Typography>
</Box>
)}
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
flexWrap: 'wrap', flexWrap: 'wrap',
alignContent: 'center', alignContent: 'center',
flexGrow: 1, flexGrow: 1,
minWidth: 'fit-content', minWidth: 'fit-content',
gap: 1, gap: 1,
}} }}
> >
{candidate.email && ( {candidate.email && (
<Box sx={{ display: 'flex', alignItems: 'center', m: 0, p: 0 }}> <Box sx={{ display: 'flex', alignItems: 'center', m: 0, p: 0 }}>
<EmailIcon <EmailIcon
fontSize="small" fontSize="small"
sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }} sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
/> />
<Typography <Typography
variant="body2" variant="body2"
sx={{ sx={{
color: style.name === 'creative' ? '#ffffff' : style.color.text, color: style.name === 'creative' ? '#ffffff' : style.color.text,
fontFamily: 'inherit', fontFamily: 'inherit',
}} }}
> >
{candidate.email} {candidate.email}
</Typography> </Typography>
</Box>
)}
{phone?.isValid() && (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<PhoneIcon
fontSize="small"
sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
/>
<Typography
variant="body2"
sx={{
color: style.name === 'creative' ? '#ffffff' : style.color.text,
fontFamily: 'inherit',
}}
>
{phone.formatInternational()}
</Typography>
</Box>
)}
{candidate.location && (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<LocationIcon
fontSize="small"
sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
/>
<Typography
variant="body2"
sx={{
color: style.name === 'creative' ? '#ffffff' : style.color.text,
fontFamily: 'inherit',
}}
>
{candidate.location.city
? `${candidate.location.city}, ${candidate.location.state}`
: candidate.location.text}
</Typography>
</Box>
)}
</Box> </Box>
)}
{phone?.isValid() && ( {/* {(candidate.website || candidate.linkedin) && (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<PhoneIcon
fontSize="small"
sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
/>
<Typography
variant="body2"
sx={{
color: style.name === 'creative' ? '#ffffff' : style.color.text,
fontFamily: 'inherit',
}}
>
{phone.formatInternational()}
</Typography>
</Box>
)}
{candidate.location && (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<LocationIcon
fontSize="small"
sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
/>
<Typography
variant="body2"
sx={{
color: style.name === 'creative' ? '#ffffff' : style.color.text,
fontFamily: 'inherit',
}}
>
{candidate.location.city
? `${candidate.location.city}, ${candidate.location.state}`
: candidate.location.text}
</Typography>
</Box>
)}
</Box>
{/* {(candidate.website || candidate.linkedin) && (
<Grid size={{ xs: 12, sm: 6, md: 3 }}> <Grid size={{ xs: 12, sm: 6, md: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<WebsiteIcon <WebsiteIcon
@ -525,6 +535,8 @@ const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }
</Box> </Box>
</Grid> </Grid>
)} */} )} */}
</Box>
</Box>
</Box> </Box>
); );
}; };
@ -563,7 +575,9 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
} }
}, [resume, activeResume]); }, [resume, activeResume]);
const currentStyle = resumeStyles[selectedStyle]; const currentStyle = useMemo(() => {
return resumeStyles[selectedStyle];
}, [selectedStyle]);
// Rest of the component remains the same... // Rest of the component remains the same...
const deleteResume = async (id: string | undefined): Promise<void> => { const deleteResume = async (id: string | undefined): Promise<void> => {