Skip to content

Fix/cv spacing consistency #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jcf-junior merged 7 commits into from
Mar 18, 2026
Merged

Fix/cv spacing consistency #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3c7e28c
Created a full screen preview page for easier development
jcf-junior Mar 16, 2026
a519fbb
Improved spacing consistency in CV layout and update CSS for improved…
jcf-junior Mar 16, 2026
c23c8f4
Fix formatting of date range separator in formatPeriod function to us…
jcf-junior Mar 16, 2026
cd8af6a
- Fixed spacing in overflowing socials
jcf-junior Mar 17, 2026
9f9a8a6
- Removed Preview component used for debugging.
jcf-junior Mar 18, 2026
fdc1f65
fix: fixed small isue in socials spacing
jcf-junior Mar 18, 2026
aaa3d4b
fix: adjust spacing for CV title to improve layout consistency
jcf-junior Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/data/initialCv.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,4 +117,4 @@
"databases": ["MongoDB", "PostgreSQL", "MySQL"],
"developerTools": ["Git", "Docker", "Jenkins", "AWS"]
}
}
}
89 changes: 48 additions & 41 deletions src/templates/JakesResume.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import './jakesResume.css';
import "./jakesResume.css";

import type {
Certification,
Expand All @@ -15,7 +15,6 @@ type CvProps = {
};

export default function JakesResume({ cvData }: CvProps) {

const hasSkills =
cvData.skills?.programmingLanguages?.length > 0 ||
cvData.skills?.frameworks?.length > 0 ||
Expand All @@ -24,15 +23,14 @@ export default function JakesResume({ cvData }: CvProps) {

return (
<div>
<div className="my-0 mx-auto lm leading-[1.2em] text-[10.91pt] w-[8.27in] h-[11.69in] p-[0.5in] bg-white text-black">
<div className="my-0 mx-auto lm leading-[1em] text-[10.91pt] w-[8.27in] h-[11.69in] p-[0.5in] bg-white text-black box-border">
<section className="mt-[5pt] mb-[5pt]">
<h1 className="text-center text-[24.79pt] font-bold">
<h1 className="text-center text-[24.79pt] font-bold mb-[9pt]">
{cvData.personalInfo.name}
</h1>

<div className="mt-[10pt] mx-auto divide-x divide-gray-600 flex justify-center items-center flex-wrap">
<div className="mx-auto divide-x divide-gray-600 flex justify-center items-center flex-wrap gap-y-[3pt]">
{cvData.personalInfo.socials.map((social: Social) => {

return social.value === "" ? null : (
<span
className="underline px-1.5 first:pl-0 last:pr-0 whitespace-nowrap"
Expand All @@ -46,23 +44,24 @@ export default function JakesResume({ cvData }: CvProps) {
</section>

{cvData.education?.length > 0 && (
<section className="mt-[5pt] mb-[5pt]">
<section className="mt-[8pt] mb-[7pt]">
<span className="section-title">Education</span>

{cvData.education.map((edu: Education) => {
return (
<div
className="ml-[0.15in] flex justify-between w-[97%] mb-[5pt]"
className="ml-[0.15in] w-[97%] mb-[7.35pt]"
key={`${edu.id}`}
>
<div>
<div className="flex justify-between">
<strong className="">{edu.institution}</strong>
<p className="lm-italic small">{edu.degree}</p>
</div>
<div className="text-right">
<p className="">
{formatPeriod(edu.startDate, edu.endDate)}
</p>
</div>

<div className="flex justify-between mt-[3.225pt]">
<p className="lm-italic small">{edu.degree}</p>
<p className="lm-italic small">{edu.location}</p>
</div>
</div>
Expand All @@ -72,7 +71,7 @@ export default function JakesResume({ cvData }: CvProps) {
)}

{cvData.workExperience?.length > 0 && (
<section className="mt-[5pt] mb-[5pt]">
<section className="mt-[9pt]">
<span className="section-title">Experience</span>

{cvData.workExperience.map((job: WorkExperience) => {
Expand All @@ -84,25 +83,28 @@ export default function JakesResume({ cvData }: CvProps) {
job.endDate.trim() == "";

return emptyExperience ? null : (
<div className="ml-[0.15in] mb-[5pt] w-[97%]" key={`${job.id}`}>
<div
className="ml-[0.15in] mb-[7.35pt] w-[97%]"
key={`${job.id}`}
>
<div className="flex justify-between">
<div>
<strong>{job.position}</strong>
<p className="lm-italic small">{job.company}</p>
</div>
<strong>{job.position}</strong>
<p>{formatPeriod(job.startDate, job.endDate)}</p>
</div>

<div className="text-right">
<p>{formatPeriod(job.startDate, job.endDate)}</p>
<p className="lm-italic small">{job.location}</p>
</div>
<div className="flex justify-between mt-[3.225pt]">
<p className="lm-italic small">{job.company}</p>
<p className="lm-italic small">{job.location}</p>
</div>

<ul className="list-disc no-underline ml-[25pt] small mt-1">
<ul className="list-disc no-underline ml-[25pt] small mt-[3.75pt]">
{job.highlights.map((highlight: string, index: number) => {
return highlight.trim() === "" ? (
""
) : (
<li key={`highlight-${index}`}>{highlight.trim()}</li>
<li key={`highlight-${index}`} className="mb-[3.75pt]">
{highlight.trim()}
</li>
);
})}
</ul>
Expand All @@ -113,12 +115,12 @@ export default function JakesResume({ cvData }: CvProps) {
)}

{cvData.projects?.length > 0 && (
<section className="mt-[5pt] mb-[5pt]">
<section className="mt-[9pt]">
<span className="section-title">Projects</span>
<div className="ml-[0.15in] w-[97%] mb-[5pt]">
<div className="ml-[0.15in] w-[97%] mb-[7.35pt]">
{cvData.projects.map((project: Project) => {
return (
<div className="mb-[5pt]" key={`${project.id}`}>
<div className="mb-[9pt]" key={`${project.id}`}>
<div className="flex justify-between align-center">
<div className="flex gap-1.5">
<strong className="pr-1.5 small border-r-1 border-black">
Expand All @@ -135,11 +137,16 @@ export default function JakesResume({ cvData }: CvProps) {
</div>
</div>

<ul className="list-disc ml-[25pt] small mt-1">
<ul className="list-disc ml-[25pt] small mt-[3.75pt]">
{project.highlights.map(
(highlight: string, index: number) => {
return (
<li key={`highlight-${index}`}>{highlight}</li>
<li
key={`highlight-${index}`}
className="mb-[3.75pt]"
>
{highlight}
</li>
);
},
)}
Expand All @@ -152,7 +159,7 @@ export default function JakesResume({ cvData }: CvProps) {
)}

{cvData.certifications?.length > 0 && (
<section className="mt-[5pt] mb-[5pt]">
<section className="mt-[8pt]">
<span className="section-title">Certifications</span>
{cvData.certifications.map((certification: Certification) => {
const emptyCert: boolean =
Expand All @@ -163,7 +170,7 @@ export default function JakesResume({ cvData }: CvProps) {

return emptyCert ? null : (
<div
className="flex w-[97%] ml-[0.15in] justify-between mb-[5pt] small"
className="flex w-[97%] ml-[0.15in] justify-between mb-[5.25pt] small"
key={`${certification.id}`}
>
<div className="flex gap-1.5">
Expand All @@ -179,33 +186,33 @@ export default function JakesResume({ cvData }: CvProps) {
)}

{hasSkills && (
<section className="mt-[5pt] mb-[5pt]">
<section className="mt-[8pt]">
<span className="section-title">Technical Skills</span>
<div className="w-[97%] ml-[0.15in] small">
<div className="w-[97%] ml-[0.15in] small flex flex-col gap-[5.25pt] leading-[1em]">
{cvData.skills.programmingLanguages.length > 0 && (
<div>
<strong>Programming Languages: </strong>
<div className="flex gap-1.5">
<strong>Programming Languages:</strong>
<span>{cvData.skills.programmingLanguages.join(", ")}</span>
</div>
)}

{cvData.skills.frameworks.length > 0 && (
<div>
<strong>Frameworks / Libraries: </strong>
<div className="flex gap-1.5">
<strong>Frameworks / Libraries:</strong>
<span>{cvData.skills.frameworks.join(", ")}</span>
Comment on lines +193 to 202
</div>
)}

{cvData.skills.databases.length > 0 && (
<div>
<strong>Databases: </strong>
<div className="flex gap-1.5">
<strong>Databases:</strong>
<span>{cvData.skills.databases.join(", ")}</span>
</div>
)}

{cvData.skills.developerTools.length > 0 && (
<div>
<strong>Developer Tools: </strong>
<div className="flex gap-1.5">
<strong>Developer Tools:</strong>
<span>{cvData.skills.developerTools.join(", ")}</span>
</div>
)}
Expand Down
13 changes: 10 additions & 3 deletions src/templates/jakesResume.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,15 @@
.section-title {
font-family: "Latin Modern Caps", serif;
font-variant: small-caps;
border-bottom: 1px solid black;
width: 100%;
display: block;
margin-bottom: 2pt;
margin-bottom: 3pt;
}

.section-title::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: black;
margin-top: 3pt;
}
2 changes: 1 addition & 1 deletion src/utils/formatDate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,5 @@ export const formatDate = (dateString: string | null): string => {
};

export const formatPeriod = (start = "2020-01-01", end: string | null): string => {
return `${formatDate(start)} - ${formatDate(end)}`;
return `${formatDate(start)} \u2013 ${formatDate(end)}`;
};
Loading