Backend: Added title for skills, updated program. Frontend: Updated CSS and Svelte Page.

backend/db/4_skills.sql

@@ -8,5 +8,6 @@ CREATE TABLE public.skills (
 	softskills text NULL,
 	interests text NULL,
 	lang_id serial4 NOT NULL,
+	title test NULL,
 	CONSTRAINT skills_languages_fk FOREIGN KEY (lang_id) REFERENCES public.languages(id)
 );

backend/src/db.rs

@@ -13,6 +13,7 @@ pub struct Info {
     pub email: Option<String>,
     pub birth_year: Option<NaiveDate>,
     pub profile_pic: Option<String>,
+    pub title: Option<String>,
     pub softskills: Option<String>,
     pub interests: Option<String>
 }

backend/src/main.rs

@@ -80,6 +80,7 @@ async fn info(Path(lang_id): Path<i32>, State(pool): State<PgPool>) -> Json<Vec<
         (SELECT email FROM public.info LIMIT 1) AS email,
         (SELECT birth_year FROM public.info LIMIT 1) AS birth_year,
         (SELECT profile_pic FROM public.info LIMIT 1) AS profile_pic,
+        (SELECT title FROM public.skills WHERE lang_id = $1 LIMIT 1) AS title,
         (SELECT softskills FROM public.skills WHERE lang_id = $1 LIMIT 1) AS softskills,
         (SELECT interests FROM public.skills WHERE lang_id = $1 LIMIT 1) AS interests;",
         lang_id

frontend/src/lib/css/cv.css

@@ -60,6 +60,18 @@
         margin: 0.5rem;
     }
 
+    .footer-btn>p {
+        font-weight: 600;
+        font-size: 1rem;
+        font-family: 'Urbanist', sans-serif;
+        margin-right: 0.5rem;
+    }
+
+    .footer-github>img {
+        filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(116%) contrast(113%);
+        margin-right: 1rem;
+    }
+
     .end {
         padding-bottom: 5rem;
     }
@@ -141,9 +153,8 @@
         color: var(--color-background);
         background-color: var(--color-special);
         margin-top: 0;
-        padding-top: 1.5rem;
+        padding: 1.5rem;
         margin-bottom: 0;
-        padding-bottom: 1.5rem;
         box-shadow: rgba(0, 14, 83, 0.12) 0px 30px 25px, rgba(0, 14, 83, 0.05) 0px 5px 10px;
     }
 
@@ -172,8 +183,8 @@
         justify-content: center;
         align-items: center;
         flex-direction: column;
-        margin-left: 2rem;
+        margin-left: 1.5rem;
-        margin-right: 2rem;
+        margin-right: 1.5rem;
     }
 
     .footer-text p {
@@ -184,6 +195,21 @@
         margin: 0.5rem;
     }
 
+    .footer-btn>p {
+        font-weight: 600;
+        font-size: 0.8rem;
+        font-family: 'Urbanist', sans-serif;
+    }
+
+    .footer-github>img {
+        filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(116%) contrast(113%);
+        margin-right: 0.5rem;
+    }
+
+    .footer-btn>span {
+        margin-left: 0.5rem;
+    }
+
     .subsection {
         margin-left: 5vw;
         display: flex;
@@ -224,13 +250,6 @@ h2 {
     flex-direction: column;
 }
 
-.footer-btn>p {
-    font-weight: 600;
-    font-size: 1rem;
-    font-family: 'Urbanist', sans-serif;
-    margin-right: 0.5rem;
-}
-
 .footer-btn {
     display: flex;
     border-radius: 0.4rem;
@@ -248,11 +267,6 @@ h2 {
     text-decoration: none;
 }
 
-.footer-github>img {
-    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(116%) contrast(113%);
-    margin-right: 1rem;
-}
-
 .footer-text svg {
     margin: 0;
 }

frontend/src/routes/lang=[lang]/+page.svelte

@@ -118,7 +118,7 @@
       {#if innerWidth >= 1000}
         <h1 class="name">{cv.info.full_name}</h1>
       {/if}
-      <h2 class="name">Apprentice Engineer Automatic/Electronic</h2>
+      <h2 class="name">{cv.info.title}</h2>
       <Section icon={mdiSchool} title={text.education} />
       <SlideShow
         data={cv.education}