mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2024-12-25 22:10:43 -05:00
Cv project (#17)
* 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
This commit is contained in:
GitHub
parent
940deff071
commit
592ddc4c1f
29 changed files with 5621 additions and 0 deletions
22
cv-project/.eslintrc.cjs
Normal file
22
cv-project/.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:react/jsx-runtime",
|
||||
"plugin:react-hooks/recommended",
|
||||
],
|
||||
ignorePatterns: ["dist", ".eslintrc.cjs"],
|
||||
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
|
||||
settings: { react: { version: "18.2" } },
|
||||
plugins: ["react-refresh"],
|
||||
rules: {
|
||||
"react/prop-types": "off",
|
||||
"react/jsx-no-target-blank": "off",
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
24
cv-project/.gitignore
vendored
Normal file
24
cv-project/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
8
cv-project/README.md
Normal file
8
cv-project/README.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
23
cv-project/index.html
Normal file
23
cv-project/index.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CV-Creator</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4619
cv-project/package-lock.json
generated
Normal file
4619
cv-project/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
26
cv-project/package.json
Normal file
26
cv-project/package.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "cv-project",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
}
|
||||
20
cv-project/public/icon.svg
Normal file
20
cv-project/public/icon.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="6.82666in" height="6.82666in" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 6.82666 6.82666"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#00838F}
|
||||
.fil1 {fill:#FFFFFE}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<rect class="fil0" width="6.82666" height="6.82666" rx="0.853335" ry="0.853335"/>
|
||||
<path class="fil1" d="M1.57333 0.853331l2.50201 0 0 1.07132c0,0.117783 0.0955591,0.213335 0.213335,0.213335l1.07132 0 0 3.72868c0,0.0589094 -0.0477598,0.106669 -0.106669,0.106669l-3.68 0c-0.0589094,0 -0.106669,-0.0477598 -0.106669,-0.106669l0 -4.90667c0,-0.0589094 0.0477598,-0.106669 0.106669,-0.106669zm0.454803 3.27876l2.77039 0 0 0.16 -2.77039 0 0 -0.16zm0 -0.549039l2.77039 0 0 0.16 -2.77039 0 0 -0.16zm0 1.09808l2.77039 0 0 0.16 -2.77039 0 0 -0.16zm0.587961 -1.95123l-0.000125984 0 -0.000208661 -3.93701e-006c-0.0703898,-9.05512e-005 -0.154894,-0.0288425 -0.219433,-0.0911181 -0.0515433,-0.0497362 -0.0905236,-0.120382 -0.0996063,-0.214114 -0.000669291,-0.00694488 -0.00119685,-0.0189764 -0.00158661,-0.0319843 -0.000527559,-0.0173701 -0.000846457,-0.0384528 -0.00092126,-0.0485945 -0.000937008,-0.120929 0.0381024,-0.199823 0.0997756,-0.249929 0.0600276,-0.0487717 0.138654,-0.0666969 0.22098,-0.0683189l-3.93701e-006 -0.000212598c0.00254331,-4.72441e-005 0.00503937,6.69291e-005 0.00749606,0.000338583 0.0804252,0.00227559 0.156992,0.0204606 0.21574,0.0681929 0.0616693,0.0501063 0.100713,0.129 0.0997756,0.249929 -7.48031e-005,0.0101417 -0.000393701,0.0312244 -0.00092126,0.0485945 -0.000389764,0.0130079 -0.000917323,0.0250394 -0.00158661,0.0319843 -0.00933858,0.0964055 -0.0452638,0.167114 -0.0964961,0.216543 -0.0598307,0.0577323 -0.138949,0.0845591 -0.220134,0.0884646l3.93701e-006 0.000161417c-0.000917323,4.33071e-005 -0.00183465,6.29921e-005 -0.00274803,6.29921e-005l0 3.93701e-006zm-0.332898 -0.148165c-0.0673898,0.0380433 -0.125425,0.0945 -0.169031,0.163516 -0.0540433,0.0855197 -0.0860315,0.190409 -0.0860315,0.303114l0 0.00848425c0,0.0369843 0.0135039,0.0711378 0.0352559,0.0963661 0.0236535,0.027437 0.0569173,0.0444724 0.0940787,0.0444724l0.917248 0c0.0371654,0 0.0704291,-0.0170354 0.0940827,-0.0444724 0.021752,-0.0252283 0.0352559,-0.0593819 0.0352559,-0.0963661l0 -0.00848425c0,-0.111921 -0.0314685,-0.216047 -0.084689,-0.301106 -0.0433189,-0.0692283 -0.101094,-0.125965 -0.168256,-0.164362 -0.0178898,0.0364921 -0.0417008,0.0701181 -0.0722795,0.099622 -0.182717,0.176307 -0.481524,0.120043 -0.595634,-0.100783zm2.00548 -0.550413c-0.0589094,0 -0.106669,-0.0477598 -0.106669,-0.106669l0 -0.963776c0,-0.0594173 0.0470197,-0.107543 0.106669,-0.107543 0.0297913,0 0.0567205,0.0122165 0.0760748,0.0319094l0.963992 0.963992 7.87402e-006 -7.87402e-006c0.0416535,0.0416535 0.0416535,0.109197 0,0.15085 -0.0208268,0.0208268 -0.048126,0.0312441 -0.0754252,0.0312402l-0.96465 3.93701e-006zm-0.876791 1.04056l1.37377 0 0 0.16 -1.37377 0 0 -0.16zm0.495374 -0.379024l0.143441 0.0454213c-0.0220276,0.0800906 -0.0585748,0.139512 -0.109799,0.178445 -0.0510591,0.0387638 -0.116118,0.0582283 -0.194839,0.0582283 -0.0973346,0 -0.177421,-0.0332953 -0.240087,-0.0997205 -0.0626732,-0.0665945 -0.0940906,-0.157614 -0.0940906,-0.272878 0,-0.122091 0.0315906,-0.216866 0.0946024,-0.284484 0.0630079,-0.0674528 0.145827,-0.101264 0.248626,-0.101264 0.0896457,0 0.162563,0.0264685 0.218571,0.0795787 0.0334685,0.031248 0.0584016,0.0763268 0.0751378,0.135067l-0.146685 0.0350039c-0.00853543,-0.0380787 -0.0266378,-0.0681299 -0.0542992,-0.0901575 -0.0274961,-0.0220276 -0.0609646,-0.0329567 -0.10024,-0.0329567 -0.0542992,0 -0.0985276,0.0194685 -0.132339,0.0585709 -0.033811,0.0389331 -0.0507165,0.102114 -0.0507165,0.189543 0,0.0927244 0.0165669,0.158807 0.0500315,0.198083 0.0332992,0.0394488 0.0766772,0.0590827 0.129953,0.0590827 0.0394449,0 0.073252,-0.0124646 0.101598,-0.037563 0.0283504,-0.024937 0.0486693,-0.0643819 0.0611339,-0.118zm0.457642 0.26963l-0.262118 -0.733413 0.160685 0 0.185445 0.542846 0.179642 -0.542846 0.157098 0 -0.26263 0.733413 -0.158122 0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
1
cv-project/public/vite.svg
Normal file
1
cv-project/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
147
cv-project/src/App.css
Normal file
147
cv-project/src/App.css
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
: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));
|
||||
}
|
||||
|
||||
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 10px 25px;
|
||||
}
|
||||
|
||||
.education-item h2,
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30px 0 20px 0;
|
||||
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: 0px;
|
||||
}
|
||||
70
cv-project/src/App.jsx
Normal file
70
cv-project/src/App.jsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import GeneralInfoForm from "./components/generalInfoForm";
|
||||
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";
|
||||
import Button from "./components/button";
|
||||
|
||||
function App() {
|
||||
const [basicInfo, setBasicInfo] = useState({
|
||||
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([]);
|
||||
const [showJobForm, setShowJobForm] = useState(false);
|
||||
const [educationItemActive, setEducationItemActive] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="form">
|
||||
<GeneralInfoForm setBasicInfo={setBasicInfo} basicInfo={basicInfo} />
|
||||
<div className="btn-group">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setEducationItemActive(!educationItemActive);
|
||||
}}
|
||||
text="Add Education"
|
||||
className="normal-btn"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => setShowJobForm(!showJobForm)}
|
||||
text="Add Employment"
|
||||
className="normal-btn"
|
||||
/>
|
||||
</div>
|
||||
<EducationInfoForm
|
||||
educationInfo={educationInfo}
|
||||
setEducationInfo={setEducationInfo}
|
||||
setEditEducation={setEditEducation}
|
||||
editEducation={editEducation}
|
||||
educationItemActive={educationItemActive}
|
||||
/>
|
||||
<ExperienceForm
|
||||
employmentHistory={employmentHistory}
|
||||
setEmploymentHistory={setEmploymentHistory}
|
||||
showJobForm={showJobForm}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="resume">
|
||||
<GeneralInfoDisplay basicInfo={basicInfo} />
|
||||
<EducationInfoDisplay
|
||||
educationInfo={educationInfo}
|
||||
setEditEducation={setEditEducation}
|
||||
setEducationInfo={setEducationInfo}
|
||||
/>
|
||||
<ExperienceDisplay employmentHistory={employmentHistory} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
1
cv-project/src/assets/react.svg
Normal file
1
cv-project/src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
9
cv-project/src/components/button.jsx
Normal file
9
cv-project/src/components/button.jsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import "../styles/button.css";
|
||||
|
||||
export default function Button(props) {
|
||||
return (
|
||||
<button className={`${props.className} + btn`} onClick={props.onClick}>
|
||||
{props.text}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
49
cv-project/src/components/educationInfoDisplay.jsx
Normal file
49
cv-project/src/components/educationInfoDisplay.jsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
export default function EducationInfoDisplay(props) {
|
||||
return (
|
||||
<div className="education-info">
|
||||
<h2>Education</h2>
|
||||
<EducationDisplay
|
||||
educationInfo={props.educationInfo}
|
||||
setEducationInfo={props.setEducationInfo}
|
||||
setEditEducation={props.setEditEducation}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EducationDisplay(props) {
|
||||
return (
|
||||
<>
|
||||
{props.educationInfo.map((item) => {
|
||||
return (
|
||||
<div key={item.schoolName} className="education-item">
|
||||
<h2>{item.schoolName}</h2>
|
||||
<p>
|
||||
Graduation: {item.graduationDate + " "}
|
||||
{item.fieldOfStudy}
|
||||
</p>
|
||||
<button onClick={() => props.setEditEducation(item)}>edit</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
deleteEducationItem(
|
||||
props.educationInfo,
|
||||
item.schoolName,
|
||||
props.setEducationInfo,
|
||||
)
|
||||
}
|
||||
>
|
||||
remove
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function deleteEducationItem(educationInfo, item, setEducationInfo) {
|
||||
const filteredSchools = educationInfo.filter(
|
||||
(school) => school.schoolName !== item,
|
||||
);
|
||||
setEducationInfo(filteredSchools);
|
||||
}
|
||||
136
cv-project/src/components/educationInfoForm.jsx
Normal file
136
cv-project/src/components/educationInfoForm.jsx
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import Input from "./input";
|
||||
import Button from "./button";
|
||||
|
||||
export default function EducationInfoForm(props) {
|
||||
return (
|
||||
<>
|
||||
<EducationForm
|
||||
isActive={props.educationItemActive}
|
||||
educationInfo={props.educationInfo}
|
||||
setEducationInfo={props.setEducationInfo}
|
||||
editSchool={props.editEducation}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function EducationForm({
|
||||
isActive,
|
||||
educationInfo,
|
||||
setEducationInfo,
|
||||
editSchool,
|
||||
}) {
|
||||
const [graduationDate, setGraduationDate] = useState("");
|
||||
const [schoolName, setSchoolName] = useState("");
|
||||
const [fieldOfStudy, setFieldOfStudy] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (editSchool) {
|
||||
setGraduationDate(editSchool.graduationDate);
|
||||
setSchoolName(editSchool.schoolName);
|
||||
setFieldOfStudy(editSchool.fieldOfStudy);
|
||||
} else {
|
||||
setGraduationDate("");
|
||||
setSchoolName("");
|
||||
setFieldOfStudy("");
|
||||
}
|
||||
}, [editSchool]);
|
||||
|
||||
let schoolId = editSchool
|
||||
? educationInfo.findIndex((school) => school.id === editSchool.id)
|
||||
: null;
|
||||
|
||||
const contactFormStyle = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isActive ? (
|
||||
<div className="education-info-form">
|
||||
<h2 className="general-info-header">Education History</h2>
|
||||
<form
|
||||
action=""
|
||||
style={contactFormStyle}
|
||||
onSubmit={(e) => console.log(e.target)}
|
||||
>
|
||||
<Input
|
||||
label={true}
|
||||
labelName="School"
|
||||
name="School"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={schoolName}
|
||||
onChange={(e) => setSchoolName(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label={true}
|
||||
labelName="Graduation date"
|
||||
name="graduationDate"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={graduationDate}
|
||||
onChange={(e) => setGraduationDate(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label={true}
|
||||
labelName="Degree/Field of study"
|
||||
name="degree"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={fieldOfStudy}
|
||||
onChange={(e) => setFieldOfStudy(e.target.value)}
|
||||
/>
|
||||
<div className="btn-group">
|
||||
<Button
|
||||
autoFocus={true}
|
||||
type="submit"
|
||||
className="submit-btn"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
console.log(schoolName, graduationDate, fieldOfStudy);
|
||||
const updatedSchools = [...educationInfo];
|
||||
if (schoolId !== -1 && schoolId !== null) {
|
||||
updatedSchools[schoolId] = {
|
||||
schoolName: schoolName,
|
||||
graduationDate: graduationDate,
|
||||
fieldOfStudy: fieldOfStudy,
|
||||
};
|
||||
setEducationInfo(updatedSchools);
|
||||
} else {
|
||||
setEducationInfo([
|
||||
...educationInfo,
|
||||
{
|
||||
schoolName: schoolName,
|
||||
fieldOfStudy: fieldOfStudy,
|
||||
graduationDate: graduationDate,
|
||||
id: crypto.randomUUID(),
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
setGraduationDate("");
|
||||
setSchoolName("");
|
||||
setFieldOfStudy("");
|
||||
}}
|
||||
text="Submit"
|
||||
/>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setGraduationDate("");
|
||||
setSchoolName("");
|
||||
setFieldOfStudy("");
|
||||
schoolId = null;
|
||||
}}
|
||||
text="Clear"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
29
cv-project/src/components/experienceDisplay.jsx
Normal file
29
cv-project/src/components/experienceDisplay.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
export default function ExperienceDisplay(props) {
|
||||
return (
|
||||
<div className="job-info">
|
||||
<h2>Experience</h2>
|
||||
<JobList jobs={props.employmentHistory} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function JobList(props) {
|
||||
return (
|
||||
<>
|
||||
{props.jobs.map((item) => {
|
||||
return (
|
||||
<div className="job" key={item.id}>
|
||||
<div className="job-details">
|
||||
<h2 className="job-employer">{item.employer}</h2>
|
||||
<p className="job-dates">
|
||||
{item.employmentStart} - {item.employmentEnd}
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="job-title">{item.jobTitle}</h3>
|
||||
<p>{item.jobDescription}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
128
cv-project/src/components/experienceForm.jsx
Normal file
128
cv-project/src/components/experienceForm.jsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import { useState } from "react";
|
||||
import Input from "./input";
|
||||
import Button from "./button";
|
||||
|
||||
export default function ExperienceForm(props) {
|
||||
return (
|
||||
<>
|
||||
<JobForm
|
||||
setJobs={props.setEmploymentHistory}
|
||||
jobs={props.employmentHistory}
|
||||
isActive={props.showJobForm}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function JobForm({ isActive, jobs, setJobs }) {
|
||||
const [employer, setEmployer] = useState("");
|
||||
const [jobTitle, setJobTitle] = useState("");
|
||||
const [jobDescription, setJobDescription] = useState([]);
|
||||
const [employmentStart, setEmploymentStart] = useState("");
|
||||
const [employmentEnd, setEmploymentEnd] = useState("");
|
||||
|
||||
const formStyle = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
};
|
||||
|
||||
function clear() {
|
||||
setEmployer("");
|
||||
setJobTitle("");
|
||||
setJobDescription("");
|
||||
setEmploymentEnd("");
|
||||
setEmploymentStart("");
|
||||
}
|
||||
|
||||
function handleSubmit(event, stuff) {
|
||||
event.preventDefault();
|
||||
|
||||
const key = crypto.randomUUID();
|
||||
const newJob = { ...stuff, id: key };
|
||||
|
||||
setJobs([...jobs, newJob]);
|
||||
|
||||
clear();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isActive ? (
|
||||
<div className="job-info-form">
|
||||
<h2 className="general-info-header">Employment History</h2>
|
||||
<form action="" style={formStyle}>
|
||||
<Input
|
||||
name="employer"
|
||||
label={true}
|
||||
labelName="Employer"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={employer}
|
||||
onChange={(e) => setEmployer(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
name="jobTitle"
|
||||
label={true}
|
||||
labelName="Job title"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={jobTitle}
|
||||
onChange={(e) => setJobTitle(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
name="startDate"
|
||||
label={true}
|
||||
labelName="Start date"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={employmentStart}
|
||||
onChange={(e) => setEmploymentStart(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
name="endDate"
|
||||
label={true}
|
||||
labelName="End date"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={employmentEnd}
|
||||
onChange={(e) => setEmploymentEnd(e.target.value)}
|
||||
/>
|
||||
<div className="input">
|
||||
<label>Description</label>
|
||||
<textarea
|
||||
name="jobDescription"
|
||||
value={jobDescription}
|
||||
onChange={(e) => setJobDescription(e.target.value)}
|
||||
rows="5"
|
||||
maxLength="400"
|
||||
/>
|
||||
</div>
|
||||
<div className="btn-group">
|
||||
<Button
|
||||
onClick={(e) =>
|
||||
handleSubmit(e, {
|
||||
employer,
|
||||
jobTitle,
|
||||
jobDescription,
|
||||
employmentStart,
|
||||
employmentEnd,
|
||||
})
|
||||
}
|
||||
className="submit-btn"
|
||||
text="Submit"
|
||||
/>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
clear();
|
||||
}}
|
||||
className="clear-btn"
|
||||
text="Clear"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
17
cv-project/src/components/generalInfoDisplay.jsx
Normal file
17
cv-project/src/components/generalInfoDisplay.jsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export default function GeneralInfoDisplay(props) {
|
||||
const basicInfo = props.basicInfo;
|
||||
return (
|
||||
<>
|
||||
{basicInfo ? (
|
||||
<div className="basic-info">
|
||||
<h1>{basicInfo.fullName}</h1>
|
||||
<div className="basic-info-details">
|
||||
<p>{basicInfo.location}</p>
|
||||
<p>{basicInfo.email}</p>
|
||||
<p>{basicInfo.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
83
cv-project/src/components/generalInfoForm.jsx
Normal file
83
cv-project/src/components/generalInfoForm.jsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import { useState } from "react";
|
||||
import Input from "./input";
|
||||
|
||||
export default function GeneralInfoForm(props) {
|
||||
const [fullName, setFullName] = useState(props.basicInfo.fullName);
|
||||
const [location, setLocation] = useState(props.basicInfo.location);
|
||||
const [phone, setPhone] = useState(props.basicInfo.phone);
|
||||
const [email, setEmail] = useState(props.basicInfo.email);
|
||||
|
||||
const contactFormStyle = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="general-info-form">
|
||||
<form action="">
|
||||
<div style={contactFormStyle}>
|
||||
<h2 className="general-info-header">Personal Details</h2>
|
||||
<Input
|
||||
label={true}
|
||||
name="fullName"
|
||||
labelName="Full name"
|
||||
value={fullName}
|
||||
placeholder=""
|
||||
onChange={(e) => {
|
||||
setFullName(e.target.value);
|
||||
props.setBasicInfo({
|
||||
...props.basicInfo,
|
||||
fullName: e.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
label={true}
|
||||
name="location"
|
||||
labelName="Location"
|
||||
placeholder=""
|
||||
value={location}
|
||||
onChange={(e) => {
|
||||
setLocation(e.target.value);
|
||||
props.setBasicInfo({
|
||||
...props.basicInfo,
|
||||
location: e.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
label={true}
|
||||
type="email"
|
||||
name="email"
|
||||
labelName="Email"
|
||||
placeholder=""
|
||||
value={email}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value);
|
||||
props.setBasicInfo({
|
||||
...props.basicInfo,
|
||||
email: e.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
label={true}
|
||||
labelName="Phone"
|
||||
placeholder=""
|
||||
value={phone}
|
||||
onChange={(e) => {
|
||||
setPhone(e.target.value);
|
||||
props.setBasicInfo({
|
||||
...props.basicInfo,
|
||||
phone: e.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
19
cv-project/src/components/input.jsx
Normal file
19
cv-project/src/components/input.jsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import "../styles/input.css";
|
||||
|
||||
export default function Input(props) {
|
||||
return (
|
||||
<div className="input">
|
||||
{props.label ? (
|
||||
<label htmlFor={props.name}>{props.labelName}</label>
|
||||
) : null}
|
||||
<input
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
type={props.type}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
placeholder={props.placeholder}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
0
cv-project/src/index.css
Normal file
0
cv-project/src/index.css
Normal file
10
cv-project/src/main.jsx
Normal file
10
cv-project/src/main.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
59
cv-project/src/styles/button.css
Normal file
59
cv-project/src/styles/button.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
:root {
|
||||
/* 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%;
|
||||
|
||||
--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: 0.4rem;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
/* background-color: hsl(var(--dark-gray)); */
|
||||
}
|
||||
|
||||
.normal-btn {
|
||||
background-color: hsl(var(--light-gray));
|
||||
transition:
|
||||
background-color 500ms ease-in-out,
|
||||
color 500ms 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 600ms;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background-color: hsl(var(--green-hover));
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background-color: hsl(var(--lighter-gray));
|
||||
transition: background-color 600ms;
|
||||
}
|
||||
.clear-btn:hover {
|
||||
background-color: hsl(var(--light-gray));
|
||||
}
|
||||
27
cv-project/src/styles/input.css
Normal file
27
cv-project/src/styles/input.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.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-weight: <weight>; */
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.input label {
|
||||
padding: 10px 0 5px 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input input {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.4rem;
|
||||
outline: 1px solid hsl(var(--light-gray));
|
||||
border: none;
|
||||
}
|
||||
|
||||
.input input:focus {
|
||||
outline: 2px solid hsl(var(--dark-gray));
|
||||
}
|
||||
8
cv-project/vite.config.js
Normal file
8
cv-project/vite.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
base: "/odin-codeprojects/cv/",
|
||||
});
|
||||
40
cv/assets/index-BM2FMEtQ.js
Normal file
40
cv/assets/index-BM2FMEtQ.js
Normal file
File diff suppressed because one or more lines are too long
1
cv/assets/index-CvrChzGg.css
Normal file
1
cv/assets/index-CvrChzGg.css
Normal file
|
|
@ -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}.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}
|
||||
20
cv/icon.svg
Normal file
20
cv/icon.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="6.82666in" height="6.82666in" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 6.82666 6.82666"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#00838F}
|
||||
.fil1 {fill:#FFFFFE}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<rect class="fil0" width="6.82666" height="6.82666" rx="0.853335" ry="0.853335"/>
|
||||
<path class="fil1" d="M1.57333 0.853331l2.50201 0 0 1.07132c0,0.117783 0.0955591,0.213335 0.213335,0.213335l1.07132 0 0 3.72868c0,0.0589094 -0.0477598,0.106669 -0.106669,0.106669l-3.68 0c-0.0589094,0 -0.106669,-0.0477598 -0.106669,-0.106669l0 -4.90667c0,-0.0589094 0.0477598,-0.106669 0.106669,-0.106669zm0.454803 3.27876l2.77039 0 0 0.16 -2.77039 0 0 -0.16zm0 -0.549039l2.77039 0 0 0.16 -2.77039 0 0 -0.16zm0 1.09808l2.77039 0 0 0.16 -2.77039 0 0 -0.16zm0.587961 -1.95123l-0.000125984 0 -0.000208661 -3.93701e-006c-0.0703898,-9.05512e-005 -0.154894,-0.0288425 -0.219433,-0.0911181 -0.0515433,-0.0497362 -0.0905236,-0.120382 -0.0996063,-0.214114 -0.000669291,-0.00694488 -0.00119685,-0.0189764 -0.00158661,-0.0319843 -0.000527559,-0.0173701 -0.000846457,-0.0384528 -0.00092126,-0.0485945 -0.000937008,-0.120929 0.0381024,-0.199823 0.0997756,-0.249929 0.0600276,-0.0487717 0.138654,-0.0666969 0.22098,-0.0683189l-3.93701e-006 -0.000212598c0.00254331,-4.72441e-005 0.00503937,6.69291e-005 0.00749606,0.000338583 0.0804252,0.00227559 0.156992,0.0204606 0.21574,0.0681929 0.0616693,0.0501063 0.100713,0.129 0.0997756,0.249929 -7.48031e-005,0.0101417 -0.000393701,0.0312244 -0.00092126,0.0485945 -0.000389764,0.0130079 -0.000917323,0.0250394 -0.00158661,0.0319843 -0.00933858,0.0964055 -0.0452638,0.167114 -0.0964961,0.216543 -0.0598307,0.0577323 -0.138949,0.0845591 -0.220134,0.0884646l3.93701e-006 0.000161417c-0.000917323,4.33071e-005 -0.00183465,6.29921e-005 -0.00274803,6.29921e-005l0 3.93701e-006zm-0.332898 -0.148165c-0.0673898,0.0380433 -0.125425,0.0945 -0.169031,0.163516 -0.0540433,0.0855197 -0.0860315,0.190409 -0.0860315,0.303114l0 0.00848425c0,0.0369843 0.0135039,0.0711378 0.0352559,0.0963661 0.0236535,0.027437 0.0569173,0.0444724 0.0940787,0.0444724l0.917248 0c0.0371654,0 0.0704291,-0.0170354 0.0940827,-0.0444724 0.021752,-0.0252283 0.0352559,-0.0593819 0.0352559,-0.0963661l0 -0.00848425c0,-0.111921 -0.0314685,-0.216047 -0.084689,-0.301106 -0.0433189,-0.0692283 -0.101094,-0.125965 -0.168256,-0.164362 -0.0178898,0.0364921 -0.0417008,0.0701181 -0.0722795,0.099622 -0.182717,0.176307 -0.481524,0.120043 -0.595634,-0.100783zm2.00548 -0.550413c-0.0589094,0 -0.106669,-0.0477598 -0.106669,-0.106669l0 -0.963776c0,-0.0594173 0.0470197,-0.107543 0.106669,-0.107543 0.0297913,0 0.0567205,0.0122165 0.0760748,0.0319094l0.963992 0.963992 7.87402e-006 -7.87402e-006c0.0416535,0.0416535 0.0416535,0.109197 0,0.15085 -0.0208268,0.0208268 -0.048126,0.0312441 -0.0754252,0.0312402l-0.96465 3.93701e-006zm-0.876791 1.04056l1.37377 0 0 0.16 -1.37377 0 0 -0.16zm0.495374 -0.379024l0.143441 0.0454213c-0.0220276,0.0800906 -0.0585748,0.139512 -0.109799,0.178445 -0.0510591,0.0387638 -0.116118,0.0582283 -0.194839,0.0582283 -0.0973346,0 -0.177421,-0.0332953 -0.240087,-0.0997205 -0.0626732,-0.0665945 -0.0940906,-0.157614 -0.0940906,-0.272878 0,-0.122091 0.0315906,-0.216866 0.0946024,-0.284484 0.0630079,-0.0674528 0.145827,-0.101264 0.248626,-0.101264 0.0896457,0 0.162563,0.0264685 0.218571,0.0795787 0.0334685,0.031248 0.0584016,0.0763268 0.0751378,0.135067l-0.146685 0.0350039c-0.00853543,-0.0380787 -0.0266378,-0.0681299 -0.0542992,-0.0901575 -0.0274961,-0.0220276 -0.0609646,-0.0329567 -0.10024,-0.0329567 -0.0542992,0 -0.0985276,0.0194685 -0.132339,0.0585709 -0.033811,0.0389331 -0.0507165,0.102114 -0.0507165,0.189543 0,0.0927244 0.0165669,0.158807 0.0500315,0.198083 0.0332992,0.0394488 0.0766772,0.0590827 0.129953,0.0590827 0.0394449,0 0.073252,-0.0124646 0.101598,-0.037563 0.0283504,-0.024937 0.0486693,-0.0643819 0.0611339,-0.118zm0.457642 0.26963l-0.262118 -0.733413 0.160685 0 0.185445 0.542846 0.179642 -0.542846 0.157098 0 -0.26263 0.733413 -0.158122 0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
24
cv/index.html
Normal file
24
cv/index.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/odin-codeprojects/cv/icon.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
1
cv/vite.svg
Normal file
1
cv/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in a new issue