From e45eead8a90382a0726db06d648215bd501e5dc1 Mon Sep 17 00:00:00 2001 From: yannbonaudo Date: Mon, 30 Sep 2024 13:21:40 +0200 Subject: [PATCH 1/2] yann schemas and colours --- Frontend/components/resumesTemplates/MRT1.tsx | 112 ++++++++++++++++ Frontend/components/resumesTemplates/MRT3.tsx | 117 +++++++++++++++++ Frontend/utils/TemplatesColors.ts | 122 ++++++++++++++++++ 3 files changed, 351 insertions(+) create mode 100644 Frontend/components/resumesTemplates/MRT1.tsx create mode 100644 Frontend/components/resumesTemplates/MRT3.tsx diff --git a/Frontend/components/resumesTemplates/MRT1.tsx b/Frontend/components/resumesTemplates/MRT1.tsx new file mode 100644 index 0000000..4bbc8d9 --- /dev/null +++ b/Frontend/components/resumesTemplates/MRT1.tsx @@ -0,0 +1,112 @@ +import React from "react"; +import Image from "next/image"; +import { Props } from "@/utils/templatesType"; +import { ColorScheme } from "@/utils/TemplatesColors"; + +export const ModernCV1 = ({ data, selectedColor }: Props) => { + const { personalInfo, education, experiences, skills, languages, interests } = data; + + return ( +
+
+
+ {personalInfo.photo && ( + Profile + )} +
+
+

{personalInfo.fullName}

+

{experiences[0]?.jobTitle}

+
+
+ +
+
+
+

Informations

+
    +
  • Téléphone: {personalInfo.phoneNumber}
    • +
  • Email: {personalInfo.email}
    • +
  • Adresse: {personalInfo.postalAddress}
    • +
  • Date de naissance: {personalInfo.dateOfBirth}
    • +
  • Permis: {personalInfo.drivingLicenseType}
    • +
  • LinkedIn: {personalInfo.linkedinUrl}
    • +
+
+ +
+

Compétences

+
    + {skills.map((item, index) => ( +
  • + {item.skill} +
    +
    +
    +
    • + ))} +
+
+ +
+

Langues

+
    + {languages.map((item, index) => ( +
  • {`${item.language} - ${item.proficiencyLevel}`}
    • + ))} +
+
+ +
+

Centres d'intérêt

+
    + {interests.map((item, index) => ( +
  • {item}
    • + ))} +
+
+
+ +
+
+

Expériences professionnelles

+ {experiences.map((experience, index) => ( +
+

{experience.jobTitle}

+

{experience.companyName}

+

{`${experience.startDate} - ${experience.endDate || 'Présent'}`}

+
    + {experience.technicalSkills.split('\n').map((item, i) => ( +
  • {item}
    • + ))} +
+
+ ))} +
+ +
+

Formation

+ {education.map((formation, index) => ( +
+

{formation.degree}

+

{formation.institution}

+

{formation.yearObtained}

+
+ ))} +
+
+
+
+ ); +}; + +export default ModernCV1; \ No newline at end of file diff --git a/Frontend/components/resumesTemplates/MRT3.tsx b/Frontend/components/resumesTemplates/MRT3.tsx new file mode 100644 index 0000000..e3cf20c --- /dev/null +++ b/Frontend/components/resumesTemplates/MRT3.tsx @@ -0,0 +1,117 @@ +import React from "react"; +import Image from "next/image"; +import { Props } from "@/utils/templatesType"; +import { ColorScheme } from "@/utils/TemplatesColors"; + +export const ModernCV3 = ({ data, selectedColor }: Props) => { + const { personalInfo, education, experiences, skills, languages, interests } = data; + + return ( +
+
+
+ {personalInfo.photo && ( + Profile + )} +
+

{personalInfo.fullName}

+

{experiences[0]?.jobTitle}

+
+
+
+

{personalInfo.phoneNumber}

+

{personalInfo.email}

+
+
+ +
+
+
+

Informations

+
    +
  • Adresse: {personalInfo.postalAddress}
    • +
  • Date de naissance: {personalInfo.dateOfBirth}
    • +
  • Permis: {personalInfo.drivingLicenseType}
    • +
  • LinkedIn: {personalInfo.linkedinUrl}
    • +
+
+ +
+

Compétences

+
    + {skills.map((item, index) => ( +
  • + {item.skill} +
    +
    +
    +
    • + ))} +
+
+ +
+

Langues

+
    + {languages.map((item, index) => ( +
  • + {item.language} + {item.proficiencyLevel} +
    • + ))} +
+
+ +
+

Centres d'intérêt

+
    + {interests.map((item, index) => ( +
  • {item}
    • + ))} +
+
+
+ +
+
+

Expériences professionnelles

+ {experiences.map((experience, index) => ( +
+

{experience.jobTitle}

+

{experience.companyName}

+

{`${experience.startDate} - ${experience.endDate || 'Présent'}`}

+
    + {experience.technicalSkills.split('\n').map((item, i) => ( +
  • {item}
    • + ))} +
+
+ ))} +
+ +
+

Formation

+ {education.map((formation, index) => ( +
+

{formation.degree}

+

{formation.institution}

+

{formation.yearObtained}

+
+ ))} +
+
+
+
+ ); +}; + +export default ModernCV3; \ No newline at end of file diff --git a/Frontend/utils/TemplatesColors.ts b/Frontend/utils/TemplatesColors.ts index 9d7644d..0854beb 100644 --- a/Frontend/utils/TemplatesColors.ts +++ b/Frontend/utils/TemplatesColors.ts @@ -39,4 +39,126 @@ export const ColorScheme = { tagBg: "bg-lime-100", tagText: "text-green-600", }, + // mordern1 + "grayScale": { + bgGradient: "from-gray-100 to-gray-200", + headerGradient: "from-gray-700 to-gray-800", + accentText: "text-gray-700", + accentBorder: "border-gray-300", + progressBg: "bg-gray-200", + progressFill: "from-gray-500 to-gray-600", + tagBg: "bg-gray-200", + tagText: "text-gray-700" + }, + "blueShades": { + bgGradient: "from-blue-50 to-blue-100", + headerGradient: "from-blue-700 to-blue-800", + accentText: "text-blue-700", + accentBorder: "border-blue-200", + progressBg: "bg-blue-200", + progressFill: "from-blue-500 to-blue-600", + tagBg: "bg-blue-100", + tagText: "text-blue-700" + }, + "earthTones": { + bgGradient: "from-amber-50 to-amber-100", + headerGradient: "from-amber-700 to-amber-800", + accentText: "text-amber-700", + accentBorder: "border-amber-200", + progressBg: "bg-amber-200", + progressFill: "from-amber-500 to-amber-600", + tagBg: "bg-amber-100", + tagText: "text-amber-700" + }, + "mintFresh": { + bgGradient: "from-emerald-50 to-emerald-100", + headerGradient: "from-emerald-600 to-emerald-700", + accentText: "text-emerald-700", + accentBorder: "border-emerald-200", + progressBg: "bg-emerald-200", + progressFill: "from-emerald-500 to-emerald-600", + tagBg: "bg-emerald-100", + tagText: "text-emerald-700" + }, + "purpleHaze": { + bgGradient: "from-purple-50 to-purple-100", + headerGradient: "from-purple-600 to-purple-700", + accentText: "text-purple-700", + accentBorder: "border-purple-200", + progressBg: "bg-purple-200", + progressFill: "from-purple-500 to-purple-600", + tagBg: "bg-purple-100", + tagText: "text-purple-700" + }, + "sunsetOrange": { + bgGradient: "from-orange-50 to-orange-100", + headerGradient: "from-orange-500 to-orange-600", + accentText: "text-orange-700", + accentBorder: "border-orange-200", + progressBg: "bg-orange-200", + progressFill: "from-orange-400 to-orange-500", + tagBg: "bg-orange-100", + tagText: "text-orange-700" + }, + "oceanBreeze": { + bgGradient: "from-cyan-50 to-cyan-100", + headerGradient: "from-cyan-600 to-cyan-700", + accentText: "text-cyan-700", + accentBorder: "border-cyan-200", + progressBg: "bg-cyan-200", + progressFill: "from-cyan-500 to-cyan-600", + tagBg: "bg-cyan-100", + tagText: "text-cyan-700" + }, + "roseGold": { + bgGradient: "from-rose-50 to-rose-100", + headerGradient: "from-rose-500 to-rose-600", + accentText: "text-rose-700", + accentBorder: "border-rose-200", + progressBg: "bg-rose-200", + progressFill: "from-rose-400 to-rose-500", + tagBg: "bg-rose-100", + tagText: "text-rose-700" + }, + //modern3 + "purpleRose": { + bgGradient: "from-purple-100 to-pink-100", + headerGradient: "from-purple-500 to-pink-500", + accentText: "text-purple-600", + accentBorder: "border-pink-200", + progressBg: "bg-pink-200", + progressFill: "from-purple-500 to-pink-500", + tagBg: "bg-pink-100", + tagText: "text-purple-600" + }, + "blueTeal": { + bgGradient: "from-blue-100 to-teal-100", + headerGradient: "from-blue-500 to-teal-500", + accentText: "text-blue-600", + accentBorder: "border-teal-200", + progressBg: "bg-teal-200", + progressFill: "from-blue-500 to-teal-500", + tagBg: "bg-teal-100", + tagText: "text-blue-600" + }, + "orangeYellow": { + bgGradient: "from-orange-100 to-yellow-100", + headerGradient: "from-orange-500 to-yellow-500", + accentText: "text-orange-600", + accentBorder: "border-yellow-200", + progressBg: "bg-yellow-200", + progressFill: "from-orange-500 to-yellow-500", + tagBg: "bg-yellow-100", + tagText: "text-orange-600" + }, + "greenLime": { + bgGradient: "from-green-100 to-lime-100", + headerGradient: "from-green-500 to-lime-500", + accentText: "text-green-600", + accentBorder: "border-lime-200", + progressBg: "bg-lime-200", + progressFill: "from-green-500 to-lime-500", + tagBg: "bg-lime-100", + tagText: "text-green-600" + } }; From 42dc0d7409c7e81213a7b5da74c0bdbdd95f04df Mon Sep 17 00:00:00 2001 From: yannbonaudo Date: Mon, 30 Sep 2024 15:50:00 +0200 Subject: [PATCH 2/2] up --- Frontend/components/cvTemplateSelection.tsx | 114 ++++++++++-- Frontend/components/personalInfoForm.tsx | 2 + Frontend/components/printableTemplate.tsx | 29 ++- Frontend/components/printbutton.tsx | 9 +- Frontend/components/resumesTemplates/MRT1.tsx | 38 ++-- Frontend/components/resumesTemplates/MRT2.tsx | 46 ++--- Frontend/components/resumesTemplates/MRT3.tsx | 42 ++--- Frontend/utils/TemplatesColors.ts | 174 ++++++++---------- Frontend/utils/templatesType.ts | 42 +++-- 9 files changed, 288 insertions(+), 208 deletions(-) diff --git a/Frontend/components/cvTemplateSelection.tsx b/Frontend/components/cvTemplateSelection.tsx index 155dad6..3d4e1a8 100644 --- a/Frontend/components/cvTemplateSelection.tsx +++ b/Frontend/components/cvTemplateSelection.tsx @@ -15,11 +15,28 @@ import { useStore } from "@nanostores/react"; export const CVTemplateShowcase = () => { const router = useRouter(); const selectedTemplate = useStore($selectedTemplate); - const templates = [ - { id: 1, selectedColor: "purple-rose", image: bender }, - { id: 2, selectedColor: "blue-teal", image: bender }, - { id: 3, selectedColor: "orange-yellow", image: bender }, - { id: 4, selectedColor: "green-lime", image: bender }, + const templatesModern1 = [ + { id: 1, selectedColor: "grayScale", image: bender }, + { id: 2, selectedColor: "blueShades", image: bender }, + { id: 3, selectedColor: "earthTones", image: bender }, + { id: 4, selectedColor: "mintFresh", image: bender }, + { id: 5, selectedColor: "purpleHaze", image: bender }, + { id: 6, selectedColor: "sunsetOrange", image: bender }, + { id: 7, selectedColor: "oceanBreeze", image: bender }, + { id: 8, selectedColor: "roseGold", image: bender }, + ] + const templatesModern2 = [ + { id: 9, selectedColor: "purple-rose", image: bender }, + { id: 10, selectedColor: "blue-teal", image: bender }, + { id: 11, selectedColor: "orange-yellow", image: bender }, + { id: 12, selectedColor: "green-lime", image: bender }, + ]; + + const templatesModern3 = [ + { id: 13, selectedColor: "greenGold", image: bender }, + { id: 14, selectedColor: "navyBlue", image: bender }, + { id: 15, selectedColor: "burgundy", image: bender }, + { id: 16, selectedColor: "charcoal", image: bender }, ]; const handleCardClick = (template: SelectedTemplate) => { @@ -38,21 +55,80 @@ export const CVTemplateShowcase = () => { return (

- Professionnel et élégant + Modernes et minimalistes +

+
+
+ {templatesModern1.map((template) => ( +
handleCardClick(template)} + > + {`Template +
+ ))} +
+
+

+ Colorés et créatifs +

+
+
+ {templatesModern2.map((template) => ( +
handleCardClick(template)} + > + {`Template +
+ ))} +
+
+

+ Professionels et élégants

- {templates.map((template) => ( + {templatesModern3.map((template) => (
handleCardClick(template)} > @@ -67,16 +143,16 @@ export const CVTemplateShowcase = () => {
))}
-
+
); }; diff --git a/Frontend/components/personalInfoForm.tsx b/Frontend/components/personalInfoForm.tsx index c0e6503..7d8f739 100644 --- a/Frontend/components/personalInfoForm.tsx +++ b/Frontend/components/personalInfoForm.tsx @@ -20,6 +20,7 @@ export const PersonalInfoForm: React.FC = () => { const formData = useStore($formData); const selectedTemplate = useStore($selectedTemplate); + console.log(selectedTemplate); const handlePersonalInfoChange = ( e: React.ChangeEvent ) => { @@ -129,6 +130,7 @@ export const PersonalInfoForm: React.FC = () => { values={{ data: formData, selectedColor: selectedTemplate && selectedTemplate.selectedColor, + templateId: selectedTemplate?.id ?? 1 }} /> diff --git a/Frontend/components/printableTemplate.tsx b/Frontend/components/printableTemplate.tsx index 6e0a9ca..41fb93c 100644 --- a/Frontend/components/printableTemplate.tsx +++ b/Frontend/components/printableTemplate.tsx @@ -1,24 +1,37 @@ "use client"; import { forwardRef } from "react"; +import { ColorSchemeName1, ColorSchemeName2, ColorSchemeName3, ModernCV1Props } from "@/utils/templatesType"; +import ModernCV1 from "./resumesTemplates/MRT1"; import ModernCV2 from "./resumesTemplates/MRT2"; -import { mockData } from "@/utils/mock"; -import { ColorSchemeName, Props } from "@/utils/templatesType"; +import ModernCV3 from "./resumesTemplates/MRT3"; -export type DataType = Props["data"]; +export type DataType = ModernCV1Props["data"]; type PrintableTemplateProps = { data: DataType; - selectedColor: ColorSchemeName; + selectedColor: ColorSchemeName1 | ColorSchemeName2 | ColorSchemeName3; + templateId: number; }; const PrintableTemplate = forwardRef( - ({ data, selectedColor }, ref) => { - // TODO: Rendre ce btn dynamique + ({ data, selectedColor, templateId }, ref) => { +const renderTemplate = () => { + if (templateId >= 1 && templateId <= 8) { + return ; + } else if (templateId >= 9 && templateId <= 12) { + return ; + } else if (templateId >= 13 && templateId <= 16) { + return ; + } else { + return
Template non trouvé
; + } +}; + return (
- + {renderTemplate()}
); @@ -26,4 +39,4 @@ const PrintableTemplate = forwardRef( ); PrintableTemplate.displayName = "PrintableTemplate"; -export { PrintableTemplate }; +export { PrintableTemplate }; \ No newline at end of file diff --git a/Frontend/components/printbutton.tsx b/Frontend/components/printbutton.tsx index 0cbd904..4392d73 100644 --- a/Frontend/components/printbutton.tsx +++ b/Frontend/components/printbutton.tsx @@ -1,14 +1,14 @@ "use client"; -import { FileTextIcon } from "lucide-react"; import { useRef } from "react"; import { useReactToPrint } from "react-to-print"; import { DataType, PrintableTemplate } from "./printableTemplate"; import { Button } from "./ui/button"; -import { ColorSchemeName } from "@/utils/templatesType"; +import { ColorSchemeName1, ColorSchemeName2, ColorSchemeName3 } from "@/utils/templatesType"; type FormData = { selectedColor: string | null; data: DataType; + templateId: number; // Ajout de cette ligne }; interface RequestEvaluationDocumentButtonProps { @@ -33,12 +33,13 @@ const PrintButton = ({ values }: RequestEvaluationDocumentButtonProps) => { > Générer le Cv ); }; -export { PrintButton }; +export { PrintButton }; \ No newline at end of file diff --git a/Frontend/components/resumesTemplates/MRT1.tsx b/Frontend/components/resumesTemplates/MRT1.tsx index 4bbc8d9..59ea06b 100644 --- a/Frontend/components/resumesTemplates/MRT1.tsx +++ b/Frontend/components/resumesTemplates/MRT1.tsx @@ -1,14 +1,14 @@ import React from "react"; import Image from "next/image"; -import { Props } from "@/utils/templatesType"; -import { ColorScheme } from "@/utils/TemplatesColors"; +import { ModernCV1Props } from "@/utils/templatesType"; +import { ColorScheme1 } from "@/utils/TemplatesColors"; -export const ModernCV1 = ({ data, selectedColor }: Props) => { +export const ModernCV1 = ({ data, selectedColor }: ModernCV1Props) => { const { personalInfo, education, experiences, skills, languages, interests } = data; return (
-
+
{personalInfo.photo && ( {
-
-

Informations

+
+

Informations

  • Téléphone: {personalInfo.phoneNumber}
  • Email: {personalInfo.email}
  • Adresse: {personalInfo.postalAddress}
  • Date de naissance: {personalInfo.dateOfBirth}
  • Permis: {personalInfo.drivingLicenseType}
    • -
  • LinkedIn: {personalInfo.linkedinUrl}
    • +
  • LinkedIn: {personalInfo.linkedinUrl}
-
-

Compétences

+
+

Compétences

    {skills.map((item, index) => (
  • {item.skill} -
    +
    @@ -57,8 +57,8 @@ export const ModernCV1 = ({ data, selectedColor }: Props) => {
-
-

Langues

+
+

Langues

    {languages.map((item, index) => (
  • {`${item.language} - ${item.proficiencyLevel}`}
    • @@ -66,8 +66,8 @@ export const ModernCV1 = ({ data, selectedColor }: Props) => {
-
-

Centres d'intérêt

+
+

Centres d'intérêt

    {interests.map((item, index) => (
  • {item}
    • @@ -78,11 +78,11 @@ export const ModernCV1 = ({ data, selectedColor }: Props) => {
    -

    Expériences professionnelles

    +

    Expériences professionnelles

    {experiences.map((experience, index) => (

    {experience.jobTitle}

    -

    {experience.companyName}

    +

    {experience.companyName}

    {`${experience.startDate} - ${experience.endDate || 'Présent'}`}

      {experience.technicalSkills.split('\n').map((item, i) => ( @@ -94,11 +94,11 @@ export const ModernCV1 = ({ data, selectedColor }: Props) => {
    -

    Formation

    +

    Formation

    {education.map((formation, index) => (

    {formation.degree}

    -

    {formation.institution}

    +

    {formation.institution}

    {formation.yearObtained}

    ))} diff --git a/Frontend/components/resumesTemplates/MRT2.tsx b/Frontend/components/resumesTemplates/MRT2.tsx index 74dbbf3..300b06d 100644 --- a/Frontend/components/resumesTemplates/MRT2.tsx +++ b/Frontend/components/resumesTemplates/MRT2.tsx @@ -1,18 +1,20 @@ /* eslint-disable react/no-unescaped-entities */ import React from "react"; import Image from "next/image"; -import { Props } from "@/utils/templatesType"; -import { ColorScheme } from "@/utils/TemplatesColors"; +import { ModernCV2Props } from "@/utils/templatesType"; +import { ColorScheme2 } from "@/utils/TemplatesColors"; -export const ModernCV2 = ({ data, selectedColor }: Props) => { +export const ModernCV2 = ({ data, selectedColor }: ModernCV2Props) => { const { personalInfo, education, experiences, skills, languages, interests } = data; + + console.log(selectedColor); return (
    {personalInfo.photo && ( @@ -41,14 +43,14 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

    Informations

    • Adresse: @@ -56,7 +58,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {
    • Date de naissance: @@ -64,7 +66,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {
    • Permis: @@ -72,13 +74,13 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {
    • LinkedIn: {personalInfo.linkedinUrl} @@ -88,7 +90,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

      Compétences

      @@ -97,10 +99,10 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {
    • {item.skill}
      @@ -111,7 +113,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

      Langues

      @@ -119,7 +121,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => { {languages.map((item, index) => (
    • {item.language} - + {item.proficiencyLevel}
      • @@ -129,7 +131,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

      Centres d'intérêt

      @@ -137,7 +139,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => { {interests.map((item, index) => (
    • {item}
      • @@ -150,7 +152,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

      Expériences professionnelles

      @@ -159,7 +161,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

      {experience.jobTitle}

      -

      +

      {experience.companyName}

      {`${ @@ -176,7 +178,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

      Formation

      @@ -185,7 +187,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

      {formation.degree}

      -

      +

      {formation.institution}

      diff --git a/Frontend/components/resumesTemplates/MRT3.tsx b/Frontend/components/resumesTemplates/MRT3.tsx index e3cf20c..77ae113 100644 --- a/Frontend/components/resumesTemplates/MRT3.tsx +++ b/Frontend/components/resumesTemplates/MRT3.tsx @@ -1,14 +1,14 @@ import React from "react"; import Image from "next/image"; -import { Props } from "@/utils/templatesType"; -import { ColorScheme } from "@/utils/TemplatesColors"; +import { ModernCV3Props } from "@/utils/templatesType"; +import { ColorScheme3 } from "@/utils/TemplatesColors"; -export const ModernCV3 = ({ data, selectedColor }: Props) => { +export const ModernCV3 = ({ data, selectedColor }: ModernCV3Props) => { const { personalInfo, education, experiences, skills, languages, interests } = data; return ( -

      -
      +
      +
      {personalInfo.photo && ( { )}

      {personalInfo.fullName}

      -

      {experiences[0]?.jobTitle}

      +

      {experiences[0]?.jobTitle}

      @@ -31,26 +31,26 @@ export const ModernCV3 = ({ data, selectedColor }: Props) => {
      -
      +
      -

      Informations

      +

      Informations

      -

      Compétences

      +

      Compétences

        {skills.map((item, index) => (
      • {item.skill} -
        +
        @@ -60,22 +60,22 @@ export const ModernCV3 = ({ data, selectedColor }: Props) => {
      -

      Langues

      +

      Langues

        {languages.map((item, index) => (
      • {item.language} - {item.proficiencyLevel} + {item.proficiencyLevel}
        • ))}
      -

      Centres d'intérêt

      -
        +

        Centres d'intérêt

        +
          {interests.map((item, index) => ( -
        • {item}
          • +
        • {item}
          • ))}
      @@ -83,11 +83,11 @@ export const ModernCV3 = ({ data, selectedColor }: Props) => {
      -

      Expériences professionnelles

      +

      Expériences professionnelles

      {experiences.map((experience, index) => (

      {experience.jobTitle}

      -

      {experience.companyName}

      +

      {experience.companyName}

      {`${experience.startDate} - ${experience.endDate || 'Présent'}`}

        {experience.technicalSkills.split('\n').map((item, i) => ( @@ -99,11 +99,11 @@ export const ModernCV3 = ({ data, selectedColor }: Props) => {
      -

      Formation

      +

      Formation

      {education.map((formation, index) => (

      {formation.degree}

      -

      {formation.institution}

      +

      {formation.institution}

      {formation.yearObtained}

      ))} diff --git a/Frontend/utils/TemplatesColors.ts b/Frontend/utils/TemplatesColors.ts index 0854beb..516b5bd 100644 --- a/Frontend/utils/TemplatesColors.ts +++ b/Frontend/utils/TemplatesColors.ts @@ -1,127 +1,72 @@ -export const ColorScheme = { - "purple-rose": { - bgGradient: "from-purple-100 to-pink-100", - headerGradient: "from-purple-500 to-pink-500", - accentText: "text-purple-600", - accentBorder: "border-pink-200", - progressBg: "bg-pink-200", - progressFill: "from-purple-500 to-pink-500", - tagBg: "bg-pink-100", - tagText: "text-purple-600", - }, - "blue-teal": { - bgGradient: "from-blue-100 to-teal-100", - headerGradient: "from-blue-500 to-teal-500", - accentText: "text-blue-600", - accentBorder: "border-teal-200", - progressBg: "bg-teal-200", - progressFill: "from-blue-500 to-teal-500", - tagBg: "bg-teal-100", - tagText: "text-blue-600", - }, - "orange-yellow": { - bgGradient: "from-orange-100 to-yellow-100", - headerGradient: "from-orange-500 to-yellow-500", - accentText: "text-orange-600", - accentBorder: "border-yellow-200", - progressBg: "bg-yellow-200", - progressFill: "from-orange-500 to-yellow-500", - tagBg: "bg-yellow-100", - tagText: "text-orange-600", - }, - "green-lime": { - bgGradient: "from-green-100 to-lime-100", - headerGradient: "from-green-500 to-lime-500", - accentText: "text-green-600", - accentBorder: "border-lime-200", - progressBg: "bg-lime-200", - progressFill: "from-green-500 to-lime-500", - tagBg: "bg-lime-100", - tagText: "text-green-600", - }, - // mordern1 +export const ColorScheme1 = { "grayScale": { - bgGradient: "from-gray-100 to-gray-200", - headerGradient: "from-gray-700 to-gray-800", + headerBg: "bg-gray-800", + headerText: "text-gray-100", accentText: "text-gray-700", + accentBg: "bg-gray-200", accentBorder: "border-gray-300", - progressBg: "bg-gray-200", - progressFill: "from-gray-500 to-gray-600", - tagBg: "bg-gray-200", - tagText: "text-gray-700" + progressFill: "bg-gray-600" }, "blueShades": { - bgGradient: "from-blue-50 to-blue-100", - headerGradient: "from-blue-700 to-blue-800", + headerBg: "bg-blue-800", + headerText: "text-blue-100", accentText: "text-blue-700", + accentBg: "bg-blue-100", accentBorder: "border-blue-200", - progressBg: "bg-blue-200", - progressFill: "from-blue-500 to-blue-600", - tagBg: "bg-blue-100", - tagText: "text-blue-700" + progressFill: "bg-blue-600" }, "earthTones": { - bgGradient: "from-amber-50 to-amber-100", - headerGradient: "from-amber-700 to-amber-800", + headerBg: "bg-amber-800", + headerText: "text-amber-100", accentText: "text-amber-700", + accentBg: "bg-amber-50", accentBorder: "border-amber-200", - progressBg: "bg-amber-200", - progressFill: "from-amber-500 to-amber-600", - tagBg: "bg-amber-100", - tagText: "text-amber-700" + progressFill: "bg-amber-600" }, "mintFresh": { - bgGradient: "from-emerald-50 to-emerald-100", - headerGradient: "from-emerald-600 to-emerald-700", + headerBg: "bg-emerald-700", + headerText: "text-emerald-100", accentText: "text-emerald-700", + accentBg: "bg-emerald-50", accentBorder: "border-emerald-200", - progressBg: "bg-emerald-200", - progressFill: "from-emerald-500 to-emerald-600", - tagBg: "bg-emerald-100", - tagText: "text-emerald-700" + progressFill: "bg-emerald-600" }, "purpleHaze": { - bgGradient: "from-purple-50 to-purple-100", - headerGradient: "from-purple-600 to-purple-700", + headerBg: "bg-purple-700", + headerText: "text-purple-100", accentText: "text-purple-700", + accentBg: "bg-purple-50", accentBorder: "border-purple-200", - progressBg: "bg-purple-200", - progressFill: "from-purple-500 to-purple-600", - tagBg: "bg-purple-100", - tagText: "text-purple-700" + progressFill: "bg-purple-600" }, "sunsetOrange": { - bgGradient: "from-orange-50 to-orange-100", - headerGradient: "from-orange-500 to-orange-600", + headerBg: "bg-orange-600", + headerText: "text-orange-100", accentText: "text-orange-700", + accentBg: "bg-orange-50", accentBorder: "border-orange-200", - progressBg: "bg-orange-200", - progressFill: "from-orange-400 to-orange-500", - tagBg: "bg-orange-100", - tagText: "text-orange-700" + progressFill: "bg-orange-500" }, "oceanBreeze": { - bgGradient: "from-cyan-50 to-cyan-100", - headerGradient: "from-cyan-600 to-cyan-700", + headerBg: "bg-cyan-700", + headerText: "text-cyan-100", accentText: "text-cyan-700", + accentBg: "bg-cyan-50", accentBorder: "border-cyan-200", - progressBg: "bg-cyan-200", - progressFill: "from-cyan-500 to-cyan-600", - tagBg: "bg-cyan-100", - tagText: "text-cyan-700" + progressFill: "bg-cyan-600" }, "roseGold": { - bgGradient: "from-rose-50 to-rose-100", - headerGradient: "from-rose-500 to-rose-600", + headerBg: "bg-rose-600", + headerText: "text-rose-100", accentText: "text-rose-700", + accentBg: "bg-rose-50", accentBorder: "border-rose-200", - progressBg: "bg-rose-200", - progressFill: "from-rose-400 to-rose-500", - tagBg: "bg-rose-100", - tagText: "text-rose-700" + progressFill: "bg-rose-500" }, - //modern3 - "purpleRose": { +}; + +export const ColorScheme2 = { + "purple-rose": { bgGradient: "from-purple-100 to-pink-100", headerGradient: "from-purple-500 to-pink-500", accentText: "text-purple-600", @@ -129,9 +74,9 @@ export const ColorScheme = { progressBg: "bg-pink-200", progressFill: "from-purple-500 to-pink-500", tagBg: "bg-pink-100", - tagText: "text-purple-600" + tagText: "text-purple-600", }, - "blueTeal": { + "blue-teal": { bgGradient: "from-blue-100 to-teal-100", headerGradient: "from-blue-500 to-teal-500", accentText: "text-blue-600", @@ -139,9 +84,9 @@ export const ColorScheme = { progressBg: "bg-teal-200", progressFill: "from-blue-500 to-teal-500", tagBg: "bg-teal-100", - tagText: "text-blue-600" + tagText: "text-blue-600", }, - "orangeYellow": { + "orange-yellow": { bgGradient: "from-orange-100 to-yellow-100", headerGradient: "from-orange-500 to-yellow-500", accentText: "text-orange-600", @@ -149,9 +94,9 @@ export const ColorScheme = { progressBg: "bg-yellow-200", progressFill: "from-orange-500 to-yellow-500", tagBg: "bg-yellow-100", - tagText: "text-orange-600" + tagText: "text-orange-600", }, - "greenLime": { + "green-lime": { bgGradient: "from-green-100 to-lime-100", headerGradient: "from-green-500 to-lime-500", accentText: "text-green-600", @@ -159,6 +104,37 @@ export const ColorScheme = { progressBg: "bg-lime-200", progressFill: "from-green-500 to-lime-500", tagBg: "bg-lime-100", - tagText: "text-green-600" + tagText: "text-green-600", + }, +}; + +export const ColorScheme3 = { + "greenGold": { + headerBg: "from-green-700 to-green-900", + accentBorder: "border-green-700", + accentText: "text-green-800", + accentBg: "bg-green-100", + progressFill: "bg-green-600" + }, + "navyBlue": { + headerBg: "from-blue-800 to-blue-950", + accentBorder: "border-blue-800", + accentText: "text-blue-900", + accentBg: "bg-blue-100", + progressFill: "bg-blue-700" + }, + "burgundy": { + headerBg: "from-red-800 to-red-950", + accentBorder: "border-red-800", + accentText: "text-red-900", + accentBg: "bg-red-100", + progressFill: "bg-red-700" + }, + "charcoal": { + headerBg: "from-gray-700 to-gray-900", + accentBorder: "border-gray-700", + accentText: "text-gray-800", + accentBg: "bg-gray-100", + progressFill: "bg-gray-600" } }; diff --git a/Frontend/utils/templatesType.ts b/Frontend/utils/templatesType.ts index f6a5920..134ffdd 100644 --- a/Frontend/utils/templatesType.ts +++ b/Frontend/utils/templatesType.ts @@ -1,5 +1,5 @@ import { StaticImageData } from "next/image"; -import { ColorScheme } from "./TemplatesColors"; +import { ColorScheme1, ColorScheme2, ColorScheme3, } from "./TemplatesColors"; export type PersonalInfo = { fullName: string; @@ -35,9 +35,11 @@ export type Language = { language: string; proficiencyLevel: string; }; -export type ColorSchemeName = keyof typeof ColorScheme; +export type ColorSchemeName1 = keyof typeof ColorScheme1; +export type ColorSchemeName2 = keyof typeof ColorScheme2; +export type ColorSchemeName3 = keyof typeof ColorScheme3; -export type Props = { +export type ModernCV1Props = { data: { personalInfo: PersonalInfo; education: Education[]; @@ -47,20 +49,28 @@ export type Props = { interests: string[]; }; - selectedColor: ColorSchemeName; + selectedColor: ColorSchemeName1 ; }; -type ColorScheme = { - bgGradient: string; - headerGradient: string; - accentText: string; - accentBorder: string; - progressBg: string; - progressFill: string; - tagBg: string; - tagText: string; +export type ModernCV2Props = { + data: { + personalInfo: PersonalInfo; + education: Education[]; + experiences: Experience[]; + skills: Skill[]; + languages: Language[]; + interests: string[]; + }; + selectedColor: ColorSchemeName2; }; - -export type ColorSchemes = { - [K in ColorSchemeName]: ColorScheme; +export type ModernCV3Props = { + data: { + personalInfo: PersonalInfo; + education: Education[]; + experiences: Experience[]; + skills: Skill[]; + languages: Language[]; + interests: string[]; + }; + selectedColor: ColorSchemeName3; };