diff --git a/_ci/spell/dict.txt b/_ci/spell/dict.txt index 4c741fd0e..d8ac9c7a2 100644 --- a/_ci/spell/dict.txt +++ b/_ci/spell/dict.txt @@ -64,6 +64,7 @@ rdquo regexall replacestate reportsdomain +Résumé runneth shineth softlight diff --git a/back/package.json b/back/package.json index 91e81586c..0360f7ed2 100644 --- a/back/package.json +++ b/back/package.json @@ -37,5 +37,13 @@ "strapi": {}, "devDependencies": { "prop-types": "^15.8.1" + }, + "overrides": { + "vite": "^4.5.2" + }, + "pnpm": { + "overrides": { + "vite@<5.0.12": ">=5.0.12" + } } } diff --git a/back/pnpm-lock.yaml b/back/pnpm-lock.yaml index 19e6baed5..ff8c7b6cd 100644 --- a/back/pnpm-lock.yaml +++ b/back/pnpm-lock.yaml @@ -4,6 +4,9 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + vite@<5.0.12: '>=5.0.12' + dependencies: '@strapi/plugin-color-picker': specifier: 4.19.0 @@ -3132,7 +3135,7 @@ packages: '@strapi/types': 4.19.0(pg@8.11.3) '@strapi/typescript-utils': 4.19.0 '@strapi/utils': 4.19.0 - '@vitejs/plugin-react-swc': 3.5.0(vite@5.0.11) + '@vitejs/plugin-react-swc': 3.5.0(vite@5.0.12) axios: 1.6.0(debug@4.3.4) bcryptjs: 2.4.3 boxen: 5.1.2 @@ -3217,7 +3220,7 @@ packages: styled-components: 5.3.3(@babel/core@7.23.7)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) typescript: 5.2.2 use-context-selector: 1.4.1(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0) - vite: 5.0.11 + vite: 5.0.12 webpack: 5.89.0(esbuild@0.19.11) webpack-bundle-analyzer: 4.10.1 webpack-dev-middleware: 6.1.1(webpack@5.89.0) @@ -3600,7 +3603,7 @@ packages: engines: {node: '>=18.0.0 <=20.x.x', npm: '>=6.0.0'} hasBin: true dependencies: - '@vitejs/plugin-react-swc': 3.5.0(vite@5.0.11) + '@vitejs/plugin-react-swc': 3.5.0(vite@5.0.12) boxen: 5.1.2 browserslist-to-esbuild: 1.2.0 chalk: 4.1.2 @@ -3619,7 +3622,7 @@ packages: prompts: 2.4.2 rxjs: 7.8.1 typescript: 5.2.2 - vite: 5.0.11 + vite: 5.0.12 yup: 0.32.9 transitivePeerDependencies: - '@swc/helpers' @@ -4668,13 +4671,13 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: false - /@vitejs/plugin-react-swc@3.5.0(vite@5.0.11): + /@vitejs/plugin-react-swc@3.5.0(vite@5.0.12): resolution: {integrity: sha512-1PrOvAaDpqlCV+Up8RkAh9qaiUjoDUcjtttyhXDKw53XA6Ve16SOp6cCOpRs8Dj8DqUQs6eTW5YkLcLJjrXAig==} peerDependencies: - vite: ^4 || ^5 + vite: '>=5.0.12' dependencies: '@swc/core': 1.3.106 - vite: 5.0.11 + vite: 5.0.12 transitivePeerDependencies: - '@swc/helpers' dev: false @@ -12092,8 +12095,8 @@ packages: engines: {node: '>= 0.8'} dev: false - /vite@5.0.11: - resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==} + /vite@5.0.12: + resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: diff --git a/front/src/lib/components/cv/Award.svelte b/front/src/lib/components/cv/Award.svelte index 8ffdad88a..0954d2f18 100644 --- a/front/src/lib/components/cv/Award.svelte +++ b/front/src/lib/components/cv/Award.svelte @@ -8,21 +8,25 @@ } = content.award; -

Awards

+
+
+

Awards

+

{name}

+
-

{name}

-{#each experiences as { attributes: { name, slug: experienceSlug } }} -

{name}

-{/each} + {#each experiences as { attributes: { name, slug: experienceSlug } }} +

{name}

+ {/each} -{#if body} - {body} -{/if} + {#if body} + {body} + {/if} -{#each projects as { attributes: { name, slug: projectSlug } }} -

{name}

-{/each} + {#each projects as { attributes: { name, slug: projectSlug } }} +

{name}

+ {/each} -{#each experiences as { attributes: { name, slug: experienceSlug } }} -

{name}

-{/each} + {#each experiences as { attributes: { name, slug: experienceSlug } }} +

{name}

+ {/each} +
diff --git a/front/src/lib/components/cv/Certification.svelte b/front/src/lib/components/cv/Certification.svelte index c7049e317..5c40823c0 100644 --- a/front/src/lib/components/cv/Certification.svelte +++ b/front/src/lib/components/cv/Certification.svelte @@ -7,13 +7,16 @@ } = content.certification; -

Certifications

+
+
+

Certifications

-

{name}

- -{#if body} - {body} -{/if} -{#each skills as { attributes: { name, slug: skillSlug } }} -

{name}

-{/each} +

{name}

+
+ {#if body} + {body} + {/if} + {#each skills as { attributes: { name, slug: skillSlug } }} +

{name}

+ {/each} +
diff --git a/front/src/lib/components/cv/Classification.svelte b/front/src/lib/components/cv/Classification.svelte index 54c99fb03..8d3224823 100644 --- a/front/src/lib/components/cv/Classification.svelte +++ b/front/src/lib/components/cv/Classification.svelte @@ -9,25 +9,29 @@ } = content.classification; -

Trades

+
+
+

Trades

-

{name}

-{#if summary} -

{summary}

-{/if} +

{name}

+ {#if summary} +

{summary}

+ {/if} +
-{#if body} - {body} -{/if} + {#if body} + {body} + {/if} - -{#if skills.length} -

skills

- -{/if} + + {#if skills.length} +

skills

+ + {/if} +
diff --git a/front/src/lib/components/cv/Experience.svelte b/front/src/lib/components/cv/Experience.svelte deleted file mode 100644 index 98c2ef2dd..000000000 --- a/front/src/lib/components/cv/Experience.svelte +++ /dev/null @@ -1,40 +0,0 @@ - - -

Roles

- -

{name}

- -{#if title}

{title}

{/if} - -{#if highlightedSkills.length} - - -{/if} - -{#if body} - {@html body} -{/if} - - - -{#each projects as { attributes: { name, slug: projectSlug } }} -

{name}

-{/each} diff --git a/front/src/lib/components/cv/Experience/Experience.svelte b/front/src/lib/components/cv/Experience/Experience.svelte new file mode 100644 index 000000000..0a5b9708f --- /dev/null +++ b/front/src/lib/components/cv/Experience/Experience.svelte @@ -0,0 +1,69 @@ + + +
+
+

Experience

+

+ {name} +

+ + {#if highlightedSkills.length} + + {/if} +
+ + + +
+ {#if body} + {@html body} + {/if} +
+
diff --git a/front/src/lib/components/cv/Experience/experience.css b/front/src/lib/components/cv/Experience/experience.css new file mode 100644 index 000000000..eaeecbc47 --- /dev/null +++ b/front/src/lib/components/cv/Experience/experience.css @@ -0,0 +1,35 @@ +.cv.experience { + position: relative; +} + +.experience { + &__header { + margin-bottom: 3rem; + text-align: center; + & h1, + h2 { + filter: brightness(1); + transition-duration: var(--transition-duration); + transition-property: filter, opacity; + transition-timing-function: var(--transition-timing-function); + } + @media screen and (min-width: 640px) { + &:has( + .skill-graph:hover, + .skill-graph:active, + .skill-graph:focus-visible, + .skill-graph:focus + ) { + & h1, + h2 { + opacity: 0.3; + filter: brightness(0.2) blur(0.5rem); + transition-duration: var(--transition-duration-fast); + } + } + } + } + &__title { + padding: 0.25rem 0 2rem 0; + } +} diff --git a/front/src/lib/components/cv/Industry.svelte b/front/src/lib/components/cv/Industry.svelte index 669a57e2e..b9487a543 100644 --- a/front/src/lib/components/cv/Industry.svelte +++ b/front/src/lib/components/cv/Industry.svelte @@ -10,29 +10,33 @@ } = content.industry; -

Industries

+
+
+

Industries

-

{name}

+

{name}

+
-{#if body} - {body} -{/if} + {#if body} + {body} + {/if} -{#if organizations} -

Organizations

- {#each organizations as { attributes: { name, slug: organizationSlug } }} -

{name}

- {/each} -{/if} + {#if organizations} +

Organizations

+ {#each organizations as { attributes: { name, slug: organizationSlug } }} +

{name}

+ {/each} + {/if} -{#each experiences as { attributes: { name, slug: experienceSlug } }} -

{name}

-{/each} + {#each experiences as { attributes: { name, slug: experienceSlug } }} +

{name}

+ {/each} -{#each projects as { attributes: { name, slug: projectSlug } }} -

{name}

-{/each} + {#each projects as { attributes: { name, slug: projectSlug } }} +

{name}

+ {/each} -{#each skills as { attributes: { name, slug: skillSlug } }} -

{name}

-{/each} + {#each skills as { attributes: { name, slug: skillSlug } }} +

{name}

+ {/each} +
diff --git a/front/src/lib/components/cv/Organization.svelte b/front/src/lib/components/cv/Organization.svelte index 557112752..9cf98a517 100644 --- a/front/src/lib/components/cv/Organization.svelte +++ b/front/src/lib/components/cv/Organization.svelte @@ -10,26 +10,29 @@ } = content.organization; -

Organizations

+
+
+

Organizations

-

{name}

+

{name}

+
+ {#if body} + {body} + {/if} -{#if body} - {body} -{/if} + {#each industries as { attributes: { name, slug: industrySlug } }} +

{name}

+ {/each} -{#each industries as { attributes: { name, slug: industrySlug } }} -

{name}

-{/each} + {#each skills as { attributes: { name, slug: skillSlug, svg } }} +

{name}{@html svg}

+ {/each} -{#each skills as { attributes: { name, slug: skillSlug, svg } }} -

{name}{@html svg}

-{/each} + {#each experiences as { attributes: { name, slug: experienceSlug } }} +

{name}

+ {/each} -{#each experiences as { attributes: { name, slug: experienceSlug } }} -

{name}

-{/each} - -{#each projects as { attributes: { name, slug: projectSlug } }} -

{name}

-{/each} + {#each projects as { attributes: { name, slug: projectSlug } }} +

{name}

+ {/each} +
diff --git a/front/src/lib/components/cv/Project.svelte b/front/src/lib/components/cv/Project.svelte index 6bafe776e..bce664ef9 100644 --- a/front/src/lib/components/cv/Project.svelte +++ b/front/src/lib/components/cv/Project.svelte @@ -1,25 +1,55 @@ -

Projects

-
-
+
+

Projects

{name}

+
+ + +
{#if body} {@html body} {/if} @@ -71,46 +101,3 @@ {/if}
- - diff --git a/front/src/lib/components/cv/SkillBreakdown.svelte b/front/src/lib/components/cv/SkillBreakdown.svelte deleted file mode 100644 index 844a6d933..000000000 --- a/front/src/lib/components/cv/SkillBreakdown.svelte +++ /dev/null @@ -1,164 +0,0 @@ - - -

Skill Breakdown

- -
- {#each skills as { name, slug, percentage, graphColor, iconColor, summary }} - {@const RGBColor = getRGBFromHex(graphColor)} -
-
-
- - {name} -
- {#if summary}
- {summary} -
{/if} - {#if percentage}
- {percentage}％ -
{/if} -
-
- {/each} -
- - diff --git a/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css new file mode 100644 index 000000000..e4e91b930 --- /dev/null +++ b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css @@ -0,0 +1,170 @@ +@keyframes graphOut { + from { + overflow: visible; + } + to { + overflow: hidden; + } +} + +@keyframes graphIn { + from { + overflow: hidden; + } + to { + overflow: visible; + } +} + +.skill-graph { + display: flex; + position: relative; + margin: 1.5rem auto 0 auto; + box-shadow: var(--shadow-elevation-low); + border-radius: 0.25rem; + background-color: var(--clr-neut-700); + width: 80%; + &__item { + position: relative; + transform: scale(1); + filter: brightness(1); + box-sizing: border-box; + width: calc(var(--width) * 100%); + height: 0.33rem; + @media screen and (min-width: 640px) { + animation: graphOut 0s; + animation-delay: 1s; + animation-fill-mode: forwards; + transition-duration: var(--transition-duration-fast); + transition-property: width, transform; + transition-timing-function: var(--transition-timing-function); + cursor: pointer; + padding: 1rem 0; + &:not(:hover), + &:not(:focus), + &:not(:focus-visible), + &:not(:active) { + &::before { + transition-delay: 50ms; + transition-duration: 500ms; + } + } + &:hover, + &:focus, + &:focus-visible, + &:active { + transform: scale(1.3); + opacity: 1; + z-index: 1; + animation: graphIn 0s; + animation-delay: 0s; + transition-delay: (333ms); + box-shadow: var(--shadow-elevation-low); + width: calc(var(--width) * 2 * 100%); + /* overflow: visible; */ + /* filter: brightness(1.1); */ + /* transform: scale(1.01); */ + &::before { + opacity: 0.5; + filter: contrast(10%) brightness(100%); + transition-delay: 0s; + transition-duration: var(--transition-duration-fast); + } + &:first-of-type { + border-left: none; + } + &:last-of-type { + border-right: none; + } + } + &:hover &__details { + opacity: 1; + &__icon { + max-height: 2rem; + } + } + } + &::before { + display: block; + position: absolute; + top: 0; + opacity: 1; + z-index: 0; + mix-blend-mode: var(--skill-graph-blend); + /* mix-blend-mode: multiply; */ + filter: contrast(10%) brightness(100%) blur(0); + transition-delay: 1s; + transition-duration: var(--transition-duration-fast); + transition-property: background-color, filter, opacity, transform; + will-change: opacity, background-color, filter, transform; + box-shadow: none; + background-image: inherit; + background-clip: border-box; + padding-right: 3px; + padding-left: 3px; + width: 100%; + height: 100%; + content: ''; + } + &__details { + position: absolute; + bottom: 0; + justify-content: center; + opacity: 0; + z-index: 2; + transition-duration: var(--transition-duration); + transition-property: opacity; + will-change: opacity; + box-sizing: border-box; + width: 100%; + text-align: center; + &__term, + &__def, + & dd, + & { + display: flex; + flex-direction: column; + align-items: center; + font-size: 1rem; + } + &__def { + position: relative; + z-index: 1; + mix-blend-mode: difference; + line-height: 2rem; + } + &__term, + &__icon { + padding-bottom: 0.25rem; + } + &__icon { + align-self: bottom; + filter: drop-shadow(-2px 1px 0.175rem rgba(0, 0, 0, 0.1)); + transition-duration: var(--transition-duration); + transition-property: max-height; + transition-timing-function: var(--transition-timing-function); + max-height: 0.5rem; + } + } + &:first-of-type { + &:before { + border-left: none; + } + &:before, + & { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + } + } + &:last-of-type { + &:before { + border-right: none; + } + &:before, + & { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + } + } + } +} diff --git a/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.svelte b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.svelte new file mode 100644 index 000000000..1799bcf61 --- /dev/null +++ b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.svelte @@ -0,0 +1,37 @@ + + +
+ {#each skills as { name, slug, percentage, graphColor, iconColor, summary }} + {@const RGBColor = getRGBFromHex(graphColor)} +
+
+
+ + {name} +
+ {#if summary}
+ {summary} +
{/if} + {#if percentage}
+ {percentage}％ +
{/if} +
+
+ {/each} +
diff --git a/front/src/lib/components/cv/Timeline.svelte b/front/src/lib/components/cv/Timeline.svelte index 13c80543b..245acdd69 100644 --- a/front/src/lib/components/cv/Timeline.svelte +++ b/front/src/lib/components/cv/Timeline.svelte @@ -25,12 +25,15 @@
{#if items.length}{/if} - {#each items as { name, slug, startDate, endDate, summary, story, organizations, skills }} + {#each items as { name, slug, startDate, endDate, summary, story, skillBreakdown, organizations, skills }}
-

{name}

- + {#if skillBreakdown.length} +

{name}

+ {:else} +

{name}

+ {/if} {#if endDate}{/if}