nicolas.marsal
/
cv
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: externalize css

main
nicolas.marsal 3 years ago
parent
e23880c680
commit
780563d6bd
No known key found for this signature in database
GPG Key ID: 268AB819B6453541
11 changed files with 249 additions and 206 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/App.vue
  2. 199
      src/assets/main.css
  3. 47
      src/components/common/LeftSection.vue
  4. 45
      src/components/common/RightSection.vue
  5. 36
      src/components/education/EducationItem.vue
  6. 68
      src/components/experiences/MyExperiences.vue
  7. 3
      src/components/informations/FirstNameAndLastName.vue
  8. 4
      src/components/informations/MyHobbies.vue
  9. 30
      src/components/informations/MyInformations.vue
  10. 6
      src/components/informations/MyLanguages.vue
  11. 2
      src/components/informations/MyPresentation.vue

15
src/App.vue
Unescape View File

@ -8,13 +8,13 @@ import MyExperiences from "@/components/experiences/MyExperiences.vue";
import WordCloud from "@/components/common/WordCloud.vue"; import WordCloud from "@/components/common/WordCloud.vue";
import LeftSection from "@/components/common/LeftSection.vue"; import LeftSection from "@/components/common/LeftSection.vue";
import MyPresentation from "@/components/informations/MyPresentation.vue"; import MyPresentation from "@/components/informations/MyPresentation.vue";
import FirstNameAndLastName from "@/components/informations/FirstNameAndLastName.vue";
</script> </script>
<template> <template>
<div class="main"> <div class="main">
<div class="left"> <div class="left">
<div class="first-name">{{ informations.firstName }}</div> <FirstNameAndLastName />
<div class="last-name">{{ informations.lastName }}</div>
<MyInformations /> <MyInformations />
<LeftSection :title="$t('section.skills')"> <LeftSection :title="$t('section.skills')">
<div <div
@ -62,17 +62,6 @@ export default defineComponent({
height: 100%; height: 100%;
} }
.first-name {
font-size: 36px;
text-align: left;
padding-left: 16px;
}
.last-name {
font-size: 40px;
text-align: right;
margin-right: 16px;
}
.title { .title {
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;

199
src/assets/main.css
Unescape View File

@ -3,3 +3,202 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.left-section-wrapper {
display: flex;
flex-direction: column;
/*margin-bottom: 14px;*/
}
.left-section-title {
font-size: 24px;
font-weight: bolder;
font-variant: small-caps;
text-transform: capitalize;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
text-align: center;
width: auto;
}
.left-section-title::before,
.left-section-title::after {
content: "";
border-top: 1px solid gray;
width: 100%;
}
.left-section-title::before {
margin-right: 12px;
}
.left-section-title::after {
margin-left: 12px;
}
.left-section-body {
flex: 1;
padding: 8px 16px;
}
.right-section-wrapper {
display: flex;
flex-direction: column;
}
.right-section-title {
font-size: 24px;
font-weight: bolder;
font-variant: small-caps;
text-transform: capitalize;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
text-align: center;
width: auto;
}
.right-section-title::before,
.right-section-title::after {
content: "";
border-top: 1px solid gray;
width: 100%;
}
.right-section-title::before {
margin-right: 12px;
}
.right-section-title::after {
margin-left: 12px;
}
.right-section-body {
flex: 1;
}
.education-item-wrapper {
margin-bottom: 16px;
}
.education-item-year,
.education-item-degree {
font-size: 16px;
}
.education-item-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.education-item-body {
display: flex;
flex-direction: column;
align-items: flex-end;
font-size: 14px;
}
.education-item-location {
font-style: italic;
}
.my-experiences-experience {
margin-left: 20px;
margin-right: 20px;
}
.my-experiences-experience:first-child {
padding-top: 10px;
}
.my-experiences-experience:nth-child(n + 2) {
padding-top: 20px;
}
.my-experiences-mission {
display: flex;
flex-direction: row;
align-items: center;
}
.my-experiences-missions {
margin-top: 8px;
margin-bottom: 8px;
font-size: 14px;
}
.my-experiences-mission:nth-child(n + 2) {
padding-top: 8px;
}
.my-experiences-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid lightgray;
}
.my-experiences-role {
flex-basis: 0;
flex-grow: 2;
text-align: center;
font-size: 18px;
}
.my-experiences-company {
font-size: 16px;
margin-right: auto;
flex-basis: 0;
flex-grow: 1;
}
.my-experiences-date {
font-style: italic;
font-size: 14px;
margin-left: auto;
flex-basis: 0;
flex-grow: 1;
text-align: right;
}
.my-experiences-mission-skills {
flex: 1 1;
font-size: 12px
}
.my-experiences-mission-description{
flex: 3 1;
}
.first-name {
font-size: 36px;
text-align: left;
padding-left: 16px;
}
.last-name {
font-size: 40px;
text-align: right;
margin-right: 16px;
}
.hobby {
font-size: 16px;
}
.my-informations-line {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
font-size: 15px;
margin-bottom: 6px;
}
.my-informations-address {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-direction: column;
}
.my-languages-line {
}
.my-presentation {
padding-left: 20px;
padding-top: 20px;
padding-bottom: 8px;
padding-right: 20px;
font-size: 14px;
}

47
src/components/common/LeftSection.vue
Unescape View File

@ -5,53 +5,14 @@ defineProps<{
</script> </script>
<template> <template>
<div class="wrapper"> <div class="left-section-wrapper">
<div class="title"> <div class="left-section-title">
{{ title }} {{ title }}
</div> </div>
<div class="body"> <div class="left-section-body">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped></style>
.wrapper {
display: flex;
flex-direction: column;
/*margin-bottom: 14px;*/
}
.title {
font-size: 24px;
font-weight: bolder;
font-variant: small-caps;
text-transform: capitalize;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
text-align: center;
width: auto;
}
.title::before,
.title::after {
content: "";
border-top: 1px solid gray;
width: 100%;
}
.title::before {
margin-right: 12px;
}
.title::after {
margin-left: 12px;
}
.body {
flex: 1;
padding: 8px 16px;
}
</style>

45
src/components/common/RightSection.vue
Unescape View File

@ -5,51 +5,14 @@ defineProps<{
</script> </script>
<template> <template>
<div class="wrapper"> <div class="right-section-wrapper">
<div class="title"> <div class="right-section-title">
{{ title }} {{ title }}
</div> </div>
<div class="body"> <div class="right-section-body">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped></style>
.wrapper {
display: flex;
flex-direction: column;
}
.title {
font-size: 24px;
font-weight: bolder;
font-variant: small-caps;
text-transform: capitalize;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
text-align: center;
width: auto;
}
.title::before,
.title::after {
content: "";
border-top: 1px solid gray;
width: 100%;
}
.title::before {
margin-right: 12px;
}
.title::after {
margin-left: 12px;
}
.body {
flex: 1;
}
</style>

36
src/components/education/EducationItem.vue
Unescape View File

@ -5,14 +5,16 @@ defineProps<{
}>(); }>();
</script> </script>
<template> <template>
<div class="wrapper"> <div class="education-item-wrapper">
<div class="header"> <div class="education-item-header">
<div class="year">{{ data.year }}</div> <div class="education-item-year">{{ data.year }}</div>
<div class="degree">{{ data.degree }}</div> <div class="education-item-degree">{{ data.degree }}</div>
</div>
<div class="education-item-body">
<div class="education-item-title">{{ data.title }}</div>
<div class="education-item-location">
{{ data.school }} - {{ data.location }}
</div> </div>
<div class="body">
<div class="title">{{ data.title }}</div>
<div class="location">{{ data.school }} - {{ data.location }}</div>
</div> </div>
</div> </div>
</template> </template>
@ -23,22 +25,4 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped></style>
.wrapper {
margin-bottom: 16px;
}
.year,
.degree {
font-size: 18px;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.body {
display: flex;
flex-direction: column;
align-items: flex-end;
}
</style>

68
src/components/experiences/MyExperiences.vue
Unescape View File

@ -4,32 +4,32 @@ import RightSection from "@/components/common/RightSection.vue";
<template> <template>
<RightSection :title="$t('section.experiences')"> <RightSection :title="$t('section.experiences')">
<div class="experiences"> <div class="my-experiences">
<div <div
class="experience" class="my-experiences-experience"
v-for="experience in experiences" v-for="experience in experiences"
:key="experience.company" :key="experience.company"
> >
<div class="header"> <div class="my-experiences-header">
<div class="company"> <div class="my-experiences-company">
{{ experience.company }} {{ experience.company }}
</div> </div>
<div class="role">{{ experience.role }}</div> <div class="my-experiences-role">{{ experience.role }}</div>
<div class="date"> <div class="my-experiences-date">
{{ experience.startAt }} - {{ experience.endAt }} {{ experience.startAt }} - {{ experience.endAt }}
</div> </div>
</div> </div>
<div class="missions"> <div class="my-experiences-missions">
<div <div
class="mission" class="my-experiences-mission"
v-for="mission in experience.missions" v-for="mission in experience.missions"
:key="mission.description" :key="mission.description"
style="display: flex; flex-direction: row; align-items: center" style=""
> >
<div style="flex: 1 1; font-size: 12px"> <div class="my-experiences-mission-skills">
{{ mission.skills.map((s) => s.name).join(", ") }} {{ mission.skills.map((s) => s.name).join(", ") }}
</div> </div>
<div style="flex: 3 1"> <div class="my-experiences-mission-description" style="">
{{ mission.description }} {{ mission.description }}
</div> </div>
</div> </div>
@ -53,48 +53,4 @@ export default defineComponent({
}); });
</script> </script>
<style scoped> <style scoped></style>
.experience {
margin-left: 20px;
}
.experience:first-child {
padding-top: 10px;
}
.experience:nth-child(n + 2) {
padding-top: 20px;
}
.missions {
margin: 8px;
}
.mission:nth-child(n + 2) {
padding-top: 8px;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid lightgray;
}
.role {
font-size: larger;
flex-basis: 0;
flex-grow: 2;
text-align: center;
font-size: 22px;
}
.company {
font-size: large;
margin-right: auto;
flex-basis: 0;
flex-grow: 1;
}
.date {
font-style: italic;
font-size: small;
margin-left: auto;
flex-basis: 0;
flex-grow: 1;
text-align: right;
}
</style>

3
src/components/informations/FirstNameAndLastName.vue
Unescape View File

@ -1,5 +1,6 @@
<template> <template>
<div>{{ infos.firstName }} {{ infos.lastName }} !</div> <div class="first-name">{{ infos.firstName }}</div>
<div class="last-name">{{ infos.lastName }}</div>
</template> </template>
<script> <script>

4
src/components/informations/MyHobbies.vue
Unescape View File

@ -4,7 +4,9 @@ import LeftSection from "@/components/common/LeftSection.vue";
<template> <template>
<LeftSection :title="$t('section.hobbies')"> <LeftSection :title="$t('section.hobbies')">
<div v-for="hobby in infos.hobbies" :key="hobby">{{ hobby }}</div> <div v-for="hobby in infos.hobbies" :key="hobby" class="hobby">
{{ hobby }}
</div>
</LeftSection> </LeftSection>
</template> </template>

30
src/components/informations/MyInformations.vue
Unescape View File

@ -4,25 +4,25 @@ import LeftSection from "@/components/common/LeftSection.vue";
<template> <template>
<LeftSection :title="$t('section.information')"> <LeftSection :title="$t('section.information')">
<div class="line"> <div class="my-informations-line">
<font-awesome-icon icon="fa-solid fa-at" /> <font-awesome-icon icon="fa-solid fa-at" />
<div>{{ infos.email }}</div> <div>{{ infos.email }}</div>
</div> </div>
<div class="line"> <div class="my-informations-line">
<font-awesome-icon icon="fa-solid fa-house-chimney" /> <font-awesome-icon icon="fa-solid fa-house-chimney" />
<div class="address"> <div class="my-informations-address">
<div v-for="line in infos.address" :key="line">{{ line }}</div> <div v-for="line in infos.address" :key="line">{{ line }}</div>
</div> </div>
</div> </div>
<div class="line"> <div class="my-informations-line">
<font-awesome-icon icon="fa-solid fa-phone" /> <font-awesome-icon icon="fa-solid fa-phone" />
<div>{{ infos.phoneNumber }}</div> <div>{{ infos.phoneNumber }}</div>
</div> </div>
<div class="line"> <div class="my-informations-line">
<div></div> <div></div>
<div>{{ $t("age", { age: age() }) }}</div> <div>{{ $t("age", { age: age() }) }}</div>
</div> </div>
<div class="line"></div> <div class="my-informations-line"></div>
</LeftSection> </LeftSection>
</template> </template>
@ -43,20 +43,4 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped></style>
.line {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
font-size: 18px;
margin-bottom: 6px;
}
.address {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-direction: column;
}
</style>

6
src/components/informations/MyLanguages.vue
Unescape View File

@ -3,7 +3,11 @@ import LeftSection from "@/components/common/LeftSection.vue";
</script> </script>
<template> <template>
<LeftSection :title="$t('section.languages')"> <LeftSection :title="$t('section.languages')">
<div v-for="language in infos.languages" :key="language.name"> <div
v-for="language in infos.languages"
:key="language.name"
class="my-languages-line"
>
{{ language.name }}: {{ language.level }} {{ language.name }}: {{ language.level }}
</div> </div>
</LeftSection> </LeftSection>

2
src/components/informations/MyPresentation.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div style="padding-left: 20px; padding-top: 20px; padding-bottom: 8px"> <div class="my-presentation">
{{ presentation }} {{ presentation }}
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save