feat: updated css/demo data

This commit is contained in:
Mike 2024-06-23 20:20:40 -04:00
parent 1126391bcf
commit bd7bbf8bf7
5 changed files with 21 additions and 6 deletions

View file

@ -46,6 +46,7 @@ textarea {
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-style: normal;
min-height: 90vh;
}
.form {

View file

@ -16,9 +16,23 @@ function App() {
email: "mgaye@motown.com",
location: "Detriot, MI",
});
const [educationInfo, setEducationInfo] = useState([]);
const [educationInfo, setEducationInfo] = useState([
{
schoolName: "Bowie State University",
graduationDate: "2020",
fieldOfStudy: "Computer Technology: Network Security",
},
]);
const [editEducation, setEditEducation] = useState(null);
const [employmentHistory, setEmploymentHistory] = useState([]);
const [employmentHistory, setEmploymentHistory] = useState([
{
employer: "Google",
jobTitle: "Site Reliability Engineer",
jobDescription: "Keeping servers online and happy",
employmentStart: "09/2020",
employmentEnd: "present",
},
]);
const [showJobForm, setShowJobForm] = useState(false);
const [educationItemActive, setEducationItemActive] = useState(false);

View file

@ -1 +1 @@
.input{display:flex;flex-direction:column;font-size:1.3rem;line-height:1.3;font-family:Inter Tight,sans-serif;font-optical-sizing:auto;font-style:normal}.input label{padding:10px 0 5px;font-size:1rem}.input input{font-size:1.1rem;padding:.5rem;border-radius:.4rem;outline:1px solid hsl(var(--light-gray));border:none}.input input:focus{outline:2px solid hsl(var(--dark-gray))}:root{--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%;--dark-blue: 246, 87%, 30%;--blue: 219, 100%, 57%;--light-blue: 219, 100%, 69%;--green: 158, 95%, 34%;--green-hover: 158, 95%, 28%}.btn{border-radius:.4rem;padding:1rem;cursor:pointer;text-decoration:none;display:inline-block;border:none;font-size:1.2rem;flex:1}.normal-btn{background-color:hsl(var(--light-gray));transition:background-color .5s ease-in-out,color .5s ease-in-out}.normal-btn:hover{background-color:hsl(var(--dark-gray));color:hsl(var(--lighter-gray))}.submit-btn{background-color:hsl(var(--green));transition:background-color .6s}.submit-btn:hover{background-color:hsl(var(--green-hover))}.clear-btn{background-color:hsl(var(--lighter-gray));transition:background-color .6s}.clear-btn:hover{background-color:hsl(var(--light-gray))}:root{--font-size: 16px;--default-border-radius: .5rem;--default-shadow: 0 4px 6px hsla(0, 0%, 0%, .2);--small-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);--large-shadow: 0 15px 35px hsla(0, 0%, 0%, .2);--tight-shadow: 0 4px 6px rgba(0, 0, 0, .3);--wide-shadow: 0 5px 15px rgba(0, 0, 0, .15);--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))}textarea{resize:none}.container{display:flex;justify-content:center;padding:24px;gap:30px}.resume{display:flex;flex-direction:column;min-width:800px;max-width:850px;background:#fff;font-family:Playfair Display,serif;font-optical-sizing:auto;font-style:normal}.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))}.general-info-header{font-family:Inter Tight,sans-serif;font-optical-sizing:auto;font-weight:700;font-style:normal}.basic-info{display:flex;flex-direction:column;align-items:center}.basic-info p{padding:0;margin:0}.basic-info-details{display:flex;gap:1rem}.education-info-form,.job-info-form{padding:20px;margin-bottom:1rem;background:hsl(var(--white-color));border-radius:var(--default-border-radius)}.education-info{display:flex;flex-direction:column;justify-content:center}.education-info>h2,.job-info>h2{align-self:center;width:100%;display:inline-block;text-align:center;background-color:hsl(var(--lighter-gray))}.education-item{padding:10px 25px}.education-item h2,p{padding:0;margin:0}.btn-group{display:flex;justify-content:center;margin:30px 0 20px;gap:10px}.job{padding:1rem}.job-details{display:flex;align-items:baseline;justify-content:space-between}.job-details>h2{margin-bottom:0;padding-bottom:0}.job-dates{padding:0}.job-title{margin-top:0}
.input{display:flex;flex-direction:column;font-size:1.3rem;line-height:1.3;font-family:Inter Tight,sans-serif;font-optical-sizing:auto;font-style:normal}.input label{padding:10px 0 5px;font-size:1rem}.input input{font-size:1.1rem;padding:.5rem;border-radius:.4rem;outline:1px solid hsl(var(--light-gray));border:none}.input input:focus{outline:2px solid hsl(var(--dark-gray))}:root{--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%;--dark-blue: 246, 87%, 30%;--blue: 219, 100%, 57%;--light-blue: 219, 100%, 69%;--green: 158, 95%, 34%;--green-hover: 158, 95%, 28%}.btn{border-radius:.4rem;padding:1rem;cursor:pointer;text-decoration:none;display:inline-block;border:none;font-size:1.2rem;flex:1}.normal-btn{background-color:hsl(var(--light-gray));transition:background-color .5s ease-in-out,color .5s ease-in-out}.normal-btn:hover{background-color:hsl(var(--dark-gray));color:hsl(var(--lighter-gray))}.submit-btn{background-color:hsl(var(--green));transition:background-color .6s}.submit-btn:hover{background-color:hsl(var(--green-hover))}.clear-btn{background-color:hsl(var(--lighter-gray));transition:background-color .6s}.clear-btn:hover{background-color:hsl(var(--light-gray))}:root{--font-size: 16px;--default-border-radius: .5rem;--default-shadow: 0 4px 6px hsla(0, 0%, 0%, .2);--small-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);--large-shadow: 0 15px 35px hsla(0, 0%, 0%, .2);--tight-shadow: 0 4px 6px rgba(0, 0, 0, .3);--wide-shadow: 0 5px 15px rgba(0, 0, 0, .15);--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))}textarea{resize:none}.container{display:flex;justify-content:center;padding:24px;gap:30px}.resume{display:flex;flex-direction:column;min-width:800px;max-width:850px;background:#fff;font-family:Playfair Display,serif;font-optical-sizing:auto;font-style:normal;min-height:90vh}.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))}.general-info-header{font-family:Inter Tight,sans-serif;font-optical-sizing:auto;font-weight:700;font-style:normal}.basic-info{display:flex;flex-direction:column;align-items:center}.basic-info p{padding:0;margin:0}.basic-info-details{display:flex;gap:1rem}.education-info-form,.job-info-form{padding:20px;margin-bottom:1rem;background:hsl(var(--white-color));border-radius:var(--default-border-radius)}.education-info{display:flex;flex-direction:column;justify-content:center}.education-info>h2,.job-info>h2{align-self:center;width:100%;display:inline-block;text-align:center;background-color:hsl(var(--lighter-gray))}.education-item{padding:10px 25px}.education-item h2,p{padding:0;margin:0}.btn-group{display:flex;justify-content:center;margin:30px 0 20px;gap:10px}.job{padding:1rem}.job-details{display:flex;align-items:baseline;justify-content:space-between}.job-details>h2{margin-bottom:0;padding-bottom:0}.job-dates{padding:0}.job-title{margin-top:0}

File diff suppressed because one or more lines are too long

View file

@ -15,8 +15,8 @@
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CV-Creator</title>
<script type="module" crossorigin src="/odin-codeprojects/cv/assets/index-BM2FMEtQ.js"></script>
<link rel="stylesheet" crossorigin href="/odin-codeprojects/cv/assets/index-CvrChzGg.css">
<script type="module" crossorigin src="/odin-codeprojects/cv/assets/index-Xi3UETwU.js"></script>
<link rel="stylesheet" crossorigin href="/odin-codeprojects/cv/assets/index-Czg_N-13.css">
</head>
<body>
<div id="root"></div>