From 148d0379421816d82cda3e51180f0fb242980157 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Sat, 22 Jun 2024 13:17:36 -0400 Subject: [PATCH] feat: new components, style, etc --- cv-project/index.html | 4 +- cv-project/src/App.css | 68 ++++++++++++++ cv-project/src/App.jsx | 17 ++-- .../src/components/educationInfoDisplay.jsx | 28 +++--- .../src/components/educationInfoForm.jsx | 15 ++-- .../src/components/experienceDisplay.jsx | 26 ++++++ cv-project/src/components/experienceForm.jsx | 52 +++-------- .../src/components/generalInfoDisplay.jsx | 23 +++-- cv-project/src/components/generalInfoForm.jsx | 89 +++++++++++-------- cv-project/src/components/input.jsx | 19 ++++ cv-project/src/styles/input.css | 15 ++++ 11 files changed, 235 insertions(+), 121 deletions(-) create mode 100644 cv-project/src/components/experienceDisplay.jsx create mode 100644 cv-project/src/components/input.jsx create mode 100644 cv-project/src/styles/input.css diff --git a/cv-project/index.html b/cv-project/index.html index 0c589ec..cabbba2 100644 --- a/cv-project/index.html +++ b/cv-project/index.html @@ -2,9 +2,9 @@ - + - Vite + React + CV-Creator
diff --git a/cv-project/src/App.css b/cv-project/src/App.css index e69de29..708ee62 100644 --- a/cv-project/src/App.css +++ b/cv-project/src/App.css @@ -0,0 +1,68 @@ +:root { + --font-size: 16px; + --default-border-radius: 0.5rem; + + /* Shadows */ + --default-shadow: 0 4px 6px hsla(0, 0%, 0%, 0.2); + --small-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.2); + --large-shadow: 0 15px 35px hsla(0, 0%, 0%, 0.2); + --tight-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + --wide-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); + + /* Grays */ + --lightest-gray: 208, 21%, 93%; + --lighter-gray: 210, 16%, 76%; + --light-gray: 208, 12%, 58%; + --dark-gray: 207, 12%, 43%; + --darker-gray: 209, 15%, 28%; + + --white-color: 360, 100%, 100%; +} +html, +body { + padding: 0; + margin: 0; + font-size: var(--font-size); + background: hsl(var(--lightest-gray)); +} + +.container { + display: flex; + justify-content: center; + padding: 24px; + gap: 30px; +} + +.resume { + min-width: 800px; + /* background: gray; */ +} + +.form { + max-width: 450px; + min-width: 400px; +} + +.general-info-form { + padding: 20px; + margin-bottom: 1rem; + border-radius: var(--default-border-radius); + box-shadow: var(--tight-shadow), var(--wide-shadow); + background: hsl(var(--white-color)); +} + +.basic-info { + display: flex; + flex-direction: column; + align-items: center; +} + +.basic-info p { + padding: 0; + margin: 0; +} + +.basic-info-details { + display: flex; + gap: 1rem; +} diff --git a/cv-project/src/App.jsx b/cv-project/src/App.jsx index 72484ca..afcc9ff 100644 --- a/cv-project/src/App.jsx +++ b/cv-project/src/App.jsx @@ -3,18 +3,21 @@ import GeneralInfoDisplay from "./components/generalInfoDisplay"; import EducationInfoDisplay from "./components/educationInfoDisplay"; import EducationInfoForm from "./components/educationInfoForm"; import ExperienceForm from "./components/experienceForm"; +import ExperienceDisplay from "./components/experienceDisplay"; + import "./App.css"; import { useState } from "react"; function App() { const [basicInfo, setBasicInfo] = useState({ - firstName: "", - lastName: "", - phone: "", - email: "", + fullName: "Marvin Gaye", + phone: "301-240-5555", + email: "mgaye@motown.com", + location: "Detriot, MI", }); const [educationInfo, setEducationInfo] = useState([]); const [editEducation, setEditEducation] = useState(null); + const [employmentHistory, setEmploymentHistory] = useState([]); return (
@@ -26,7 +29,10 @@ function App() { setEditEducation={setEditEducation} editEducation={editEducation} /> - +
@@ -35,6 +41,7 @@ function App() { setEditEducation={setEditEducation} setEducationInfo={setEducationInfo} /> +
); diff --git a/cv-project/src/components/educationInfoDisplay.jsx b/cv-project/src/components/educationInfoDisplay.jsx index f64abc9..581e7c2 100644 --- a/cv-project/src/components/educationInfoDisplay.jsx +++ b/cv-project/src/components/educationInfoDisplay.jsx @@ -1,31 +1,25 @@ export default function EducationInfoDisplay(props) { return ( -
- {props.educationInfo.length <= 0 ? ( - <> -

Add your Education info

- - ) : ( - - )} -
+ <> + + ); } function EducationDisplay(props) { return ( -
+ <> {props.educationInfo.map((item) => { return (

School: {item.schoolName}

- Graduation Date: {item.graduationDate + " "} - Field of Study: {item.fieldOfStudy} + Graduation: {item.graduationDate + " "} + Degree: {item.fieldOfStudy}

); })} -
+ ); } diff --git a/cv-project/src/components/educationInfoForm.jsx b/cv-project/src/components/educationInfoForm.jsx index c94fdfc..d989445 100644 --- a/cv-project/src/components/educationInfoForm.jsx +++ b/cv-project/src/components/educationInfoForm.jsx @@ -1,9 +1,7 @@ import { useState, useEffect } from "react"; export default function EducationInfoForm(props) { - // const [schools, setSchools] = useState([]); const [educationItemActive, setEducationItemActive] = useState(false); - // const [editSchool, setEditSchool] = useState(null); return (
@@ -50,15 +48,12 @@ function EducationForm({ }, [editSchool]); let schoolId = editSchool - ? educationInfo.findIndex( - (school) => school.schoolName === editSchool.schoolName, - ) + ? educationInfo.findIndex((school) => school.id === editSchool.id) : null; const contactFormStyle = { display: "flex", flexDirection: "column", - width: "30vw", }; return ( @@ -68,19 +63,19 @@ function EducationForm({
setSchoolName(e.target.value)} /> setGraduationDate(e.target.value)} /> setFieldOfStudy(e.target.value)} /> @@ -103,6 +98,7 @@ function EducationForm({ schoolName: schoolName, fieldOfStudy: fieldOfStudy, graduationDate: graduationDate, + id: crypto.randomUUID(), }, ]); } @@ -120,6 +116,7 @@ function EducationForm({ setGraduationDate(""); setSchoolName(""); setFieldOfStudy(""); + schoolId = null; }} > Clear diff --git a/cv-project/src/components/experienceDisplay.jsx b/cv-project/src/components/experienceDisplay.jsx new file mode 100644 index 0000000..7386459 --- /dev/null +++ b/cv-project/src/components/experienceDisplay.jsx @@ -0,0 +1,26 @@ +export default function ExperienceDisplay(props) { + return ( +
+ +
+ ); +} + +function JobList(props) { + return ( + <> + {props.jobs.map((item) => { + return ( +
+

{item.employer}

+

{item.jobTitle}

+

+ {item.employmentStart} - {item.employmentEnd} +

+

{item.jobDescription}

+
+ ); + })} + + ); +} diff --git a/cv-project/src/components/experienceForm.jsx b/cv-project/src/components/experienceForm.jsx index 854c292..6c2323d 100644 --- a/cv-project/src/components/experienceForm.jsx +++ b/cv-project/src/components/experienceForm.jsx @@ -1,49 +1,23 @@ import { useState } from "react"; -export default function ExperienceForm() { - const [jobs, setJobs] = useState([]); +export default function ExperienceForm(props) { + // const [jobs, setJobs] = useState([]); const [showJobForm, setShowJobForm] = useState(false); - const mainDivStyle = { - display: "flex", - justifyContent: "space-between", - flexDirection: "row-reverse", - }; - return ( -
-
- -
-
- - -
+
+ +
); } -function JobList(props) { - return ( - <> - {props.jobs.map((item) => { - return ( -
-

{item.employer}

-

{item.jobTitle}

-

- {item.employmentStart} - {item.employmentEnd} -

-

{item.jobDescription}

-
- ); - })} - - ); -} - function JobForm({ isActive, jobs, setJobs }) { const [employer, setEmployer] = useState(""); const [jobTitle, setJobTitle] = useState(""); @@ -54,7 +28,6 @@ function JobForm({ isActive, jobs, setJobs }) { const formStyle = { display: "flex", flexDirection: "column", - width: "30vw", }; function clear() { @@ -68,7 +41,8 @@ function JobForm({ isActive, jobs, setJobs }) { function handleSubmit(event, stuff) { event.preventDefault(); - const newJob = { ...stuff }; + const key = crypto.randomUUID(); + const newJob = { ...stuff, id: key }; setJobs([...jobs, newJob]); diff --git a/cv-project/src/components/generalInfoDisplay.jsx b/cv-project/src/components/generalInfoDisplay.jsx index 5b4621d..4d20b3f 100644 --- a/cv-project/src/components/generalInfoDisplay.jsx +++ b/cv-project/src/components/generalInfoDisplay.jsx @@ -2,17 +2,16 @@ export default function GeneralInfoDisplay(props) { const basicInfo = props.basicInfo; return ( <> - { - basicInfo ? - ( -
-

{basicInfo.firstName + " " + basicInfo.lastName}

-

{basicInfo.email}

-

{basicInfo.phone}

-
- ) : null - } + {basicInfo ? ( +
+

{basicInfo.fullName}

+
+

{basicInfo.location}

+

{basicInfo.email}

+

{basicInfo.phone}

+
+
+ ) : null} - - ) + ); } diff --git a/cv-project/src/components/generalInfoForm.jsx b/cv-project/src/components/generalInfoForm.jsx index cfafd7e..ae8a34d 100644 --- a/cv-project/src/components/generalInfoForm.jsx +++ b/cv-project/src/components/generalInfoForm.jsx @@ -1,68 +1,83 @@ import { useState } from "react"; +import Input from "./input"; export default function GeneralInfoForm(props) { - const [firstName, setFirstName] = useState(""); - const [lastName, setLastName] = useState(""); + const [fullName, setFullName] = useState(""); + const [location, setLocation] = useState(""); const [phone, setPhone] = useState(""); const [email, setEmail] = useState(""); const contactFormStyle = { display: "flex", flexDirection: "column", - width: "30vw", - }; - - const mainStyle = { - display: "flex", - justifyContent: "space-between", }; return ( -
-
+ <> +
- Personal Details + { - setFirstName(e.target.value) - props.setBasicInfo({ ...props.basicInfo, firstName: e.target.value }) - } - } + setFullName(e.target.value); + props.setBasicInfo({ + ...props.basicInfo, + fullName: e.target.value, + }); + }} /> - { - setLastName(e.target.value) - props.setBasicInfo({ ...props.basicInfo, lastName: e.target.value }) - }} /> - + { - setEmail(e.target.value) - props.setBasicInfo({ ...props.basicInfo, email: e.target.value }) - } - } + setEmail(e.target.value); + props.setBasicInfo({ + ...props.basicInfo, + email: e.target.value, + }); + }} /> - { - setPhone(e.target.value) - props.setBasicInfo({ ...props.basicInfo, phone: e.target.value }) + setPhone(e.target.value); + props.setBasicInfo({ + ...props.basicInfo, + phone: e.target.value, + }); }} />
- -
+ ); } diff --git a/cv-project/src/components/input.jsx b/cv-project/src/components/input.jsx new file mode 100644 index 0000000..599bcd2 --- /dev/null +++ b/cv-project/src/components/input.jsx @@ -0,0 +1,19 @@ +import "../styles/input.css"; + +export default function Input(props) { + return ( +
+ {props.label ? ( + + ) : null} + +
+ ); +} diff --git a/cv-project/src/styles/input.css b/cv-project/src/styles/input.css new file mode 100644 index 0000000..0a2f55a --- /dev/null +++ b/cv-project/src/styles/input.css @@ -0,0 +1,15 @@ +.input { + display: flex; + flex-direction: column; + font-size: 1.3rem; + line-height: 1.3; +} + +.input label { + padding: 10px 0 5px 0; + font-size: 1rem; +} + +.input input { + font-size: 1.3rem; +}