Cv project (#18)

* feat: updated component

* feat: added components

* feat: fixed

* refactor(feat): added button, renamed variables

* feat: updated education info component

* feat: experience component added

* refactor: modular

* feat: new components, style, etc

* refactor: remove unneccessary divs

* feat(styling): yep

* feat(style): new font added for resume

* feat(styling): colors, btns, etc

* feat: basically done

* feat: updated css/demo data

cv-project/src/App.css

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

cv-project/src/App.jsx

@@ -16,9 +16,25 @@ function App() {
     email: "mgaye@motown.com",
     location: "Detriot, MI",
   });
-  const [educationInfo, setEducationInfo] = useState([]);
+
+  const [educationInfo, setEducationInfo] = useState([
+    {
+      schoolName: "Bowie State University",
+      graduationDatehttps://github.com/smiggiddy/odin-codeprojects/pull/18/conflict?name=cv-project%252Fsrc%252FApp.jsx&base_oid=7801fda840d1fa1854f23ddac31c617c382a3d13&head_oid=d00749cafbac7d5524c928f28cbb5b81e06b608e: "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);
 

cv/assets/index-Czg_N-13.css

@@ -0,0 +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;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}

cv/index.html

@@ -15,8 +15,9 @@
     />
     <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>
+    <script type="module" crossorigin src="/odin-codeprojects/cv/assets/index-Xi3UETwU.js"></script>
-    <link rel="stylesheet" crossorigin href="/odin-codeprojects/cv/assets/index-CvrChzGg.css">
+    <link rel="stylesheet" crossorigin href="/odin-codeprojects/cv/assets/index-Czg_N-13.css">
+
   </head>
   <body>
     <div id="root"></div>