From 6a452a457f9741dddeb85cfc4baccebe0fc6d68a Mon Sep 17 00:00:00 2001
From: Szymon Kin <68154191+hoolek77@users.noreply.github.com>
Date: Tue, 17 Jan 2023 19:39:21 +0100
Subject: [PATCH] Create education section (#150)

---
 src/data/index.ts                             |  4 ++
 src/data/sections/education.ts                | 30 +++++++++++++
 src/pages/index.astro                         |  2 +
 src/sections/education/education-item.astro   | 42 +++++++++++++++++++
 .../education/education-section.astro         | 30 +++++++++++++
 src/sections/main/main-section.astro          |  2 +-
 src/types/data.ts                             |  2 +
 src/types/education-section.ts                | 15 +++++++
 src/utils/is-section-key.ts                   |  1 +
 9 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 src/data/sections/education.ts
 create mode 100644 src/sections/education/education-item.astro
 create mode 100644 src/sections/education/education-section.astro
 create mode 100644 src/types/education-section.ts

diff --git a/src/data/index.ts b/src/data/index.ts
index 705112e..88aec02 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -1,3 +1,4 @@
+import type { EducationSection } from '@/types/education-section';
 import type { ExperienceSection } from '@/types/experience-section';
 import type { FavoritesSection } from '@/types/favorites-section';
 import type { I18n } from '@/types/i18n';
@@ -7,6 +8,7 @@ import type { Seo } from '@/types/seo';
 import type { SkillsSection } from '@/types/skills-section';
 import type { TestimonialsSection } from '@/types/testimonials-section';
 
+import educationData from './sections/education';
 import experienceData from './sections/experience';
 import favoritesData from './sections/favorites';
 import mainData from './sections/main';
@@ -21,6 +23,7 @@ export interface Data {
   skills?: SkillsSection;
   experience?: ExperienceSection;
   portfolio?: PortfolioSection;
+  education?: EducationSection;
   testimonials?: TestimonialsSection;
   favorites?: FavoritesSection;
 }
@@ -41,6 +44,7 @@ const data: Data = {
   skills: skillsData,
   experience: experienceData,
   portfolio: portfolioData,
+  education: educationData,
   testimonials: testimonialsData,
   favorites: favoritesData,
 };
diff --git a/src/data/sections/education.ts b/src/data/sections/education.ts
new file mode 100644
index 0000000..33bceec
--- /dev/null
+++ b/src/data/sections/education.ts
@@ -0,0 +1,30 @@
+import type { EducationSection } from '@/types/education-section';
+
+import { website } from '../socials';
+
+const educationData: EducationSection = {
+  config: {
+    title: 'Education',
+    icon: 'fa6-solid:graduation-cap',
+  },
+  educationItems: [
+    {
+      title: 'Information Technology',
+      institution: 'Wrocław University of Science and Technology',
+      startDate: new Date('2014.10'),
+      endDate: new Date('2016.07'),
+      description: 'Master degree. Specialization in software development.',
+      socials: [website('#')],
+    },
+    {
+      title: 'Information Technology',
+      institution: 'Wrocław University of Science and Technology',
+      startDate: new Date('2011.10'),
+      endDate: new Date('2014.07'),
+      description: "Bachelor's degree. Specialization in application development.",
+      socials: [website('#')],
+    },
+  ],
+};
+
+export default educationData;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a0b6462..9f4a53e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Sidebar from '@/components/sidebar.astro';
 import ThemeToggle from '@/components/theme-toggle.astro';
+import EducationSection from '@/sections/education/education-section.astro';
 import ExperienceSection from '@/sections/experience/experience-section.astro';
 import FavoritesSection from '@/sections/favorites/favorites-section.astro';
 import MainSection from '@/sections/main/main-section.astro';
@@ -50,6 +51,7 @@ const seoImage = seo.image ? seo.image : '/favicon.svg';
       {data.skills && <SkillsSection {...data.skills} />}
       {data.experience && <ExperienceSection i18n={i18n} {...data.experience} />}
       {data.portfolio && <PortfolioSection i18n={i18n} {...data.portfolio} />}
+      {data.education && <EducationSection i18n={i18n} {...data.education} />}
       {data.testimonials && <TestimonialsSection {...data.testimonials} />}
       {data.favorites && <FavoritesSection {...data.favorites} />}
     </main>
diff --git a/src/sections/education/education-item.astro b/src/sections/education/education-item.astro
new file mode 100644
index 0000000..f7ea6e5
--- /dev/null
+++ b/src/sections/education/education-item.astro
@@ -0,0 +1,42 @@
+---
+import IconButton from '@/components/icon-button.astro';
+import Timestamp from '@/components/timestamp.astro';
+import Typography from '@/components/typography.astro';
+import type { EducationItem } from '@/types/education-section';
+import type { I18n } from '@/types/i18n';
+
+export interface Props {
+  educationItem: EducationItem;
+  i18n: I18n;
+}
+
+const {
+  educationItem: { title, institution, startDate, endDate, description, socials },
+  i18n,
+} = Astro.props;
+---
+
+<div class="flex flex-col gap-3">
+  <div class="flex w-full justify-between gap-2">
+    <div class="flex flex-col">
+      <Typography variant="item-title">{title}</Typography>
+      <Typography variant="main-subtitle">{institution}</Typography>
+      <Timestamp
+        startDate={startDate}
+        endDate={endDate}
+        locale={i18n.locale}
+        translationForNow={i18n.translations.now}
+      />
+    </div>
+    {
+      socials.length > 0 && (
+        <div class="flex flex-wrap gap-3 sm:flex-nowrap">
+          {socials.map(({ icon, url: iconUrl, name }) => (
+            <IconButton href={iconUrl} icon={icon} size="small" target="_blank" aria-label={name} />
+          ))}
+        </div>
+      )
+    }
+  </div>
+  <Typography variant="paragraph">{description}</Typography>
+</div>
diff --git a/src/sections/education/education-section.astro b/src/sections/education/education-section.astro
new file mode 100644
index 0000000..f0eefbd
--- /dev/null
+++ b/src/sections/education/education-section.astro
@@ -0,0 +1,30 @@
+---
+import Divider from '@/components/divider.astro';
+import SectionCard from '@/components/section-card.astro';
+import type { EducationSection } from '@/types/education-section';
+import type { I18n } from '@/types/i18n';
+import removeLast from '@/utils/remove-last';
+
+import EducationItem from './education-item.astro';
+
+export interface Props extends EducationSection {
+  i18n: I18n;
+}
+
+const {
+  config: { title },
+  educationItems,
+  i18n,
+} = Astro.props;
+---
+
+<SectionCard section="education" title={title}>
+  {
+    removeLast(
+      educationItems.flatMap((educationItem) => [
+        <EducationItem i18n={i18n} educationItem={educationItem} />,
+        <Divider />,
+      ])
+    )
+  }
+</SectionCard>
diff --git a/src/sections/main/main-section.astro b/src/sections/main/main-section.astro
index 60e9e84..4484552 100644
--- a/src/sections/main/main-section.astro
+++ b/src/sections/main/main-section.astro
@@ -39,7 +39,7 @@ const section: SectionKey = 'main';
         {
           socials.length > 0 && (
             <div class="flex flex-wrap gap-3 sm:flex-nowrap">
-              {socials.map(({ icon, url: iconUrl, name }) => (
+              {socials.map(({ name, icon, url: iconUrl }) => (
                 <IconButton href={iconUrl} icon={icon} size="small" target="_blank" aria-label={name} />
               ))}
             </div>
diff --git a/src/types/data.ts b/src/types/data.ts
index b17badd..383c5e2 100644
--- a/src/types/data.ts
+++ b/src/types/data.ts
@@ -1,3 +1,4 @@
+import type { EducationSection } from './education-section';
 import type { ExperienceSection } from './experience-section';
 import type { FavoritesSection } from './favorites-section';
 import type { I18n } from './i18n';
@@ -14,6 +15,7 @@ export interface Data {
   skills?: SkillsSection;
   experience?: ExperienceSection;
   portfolio?: PortfolioSection;
+  education?: EducationSection;
   testimonials?: TestimonialsSection;
   favorites?: FavoritesSection;
 }
diff --git a/src/types/education-section.ts b/src/types/education-section.ts
new file mode 100644
index 0000000..5959a43
--- /dev/null
+++ b/src/types/education-section.ts
@@ -0,0 +1,15 @@
+import type { SectionConfig, Social } from './common';
+
+export interface EducationItem {
+  title: string;
+  institution: string;
+  startDate: Date;
+  endDate: Date | null;
+  description: string;
+  socials: Social[];
+}
+
+export interface EducationSection {
+  educationItems: EducationItem[];
+  config: SectionConfig;
+}
diff --git a/src/utils/is-section-key.ts b/src/utils/is-section-key.ts
index f3587cf..ab4c8b7 100644
--- a/src/utils/is-section-key.ts
+++ b/src/utils/is-section-key.ts
@@ -7,6 +7,7 @@ const sectionsMap: Record<SectionKey, SectionKey> = {
   portfolio: 'portfolio',
   testimonials: 'testimonials',
   favorites: 'favorites',
+  education: 'education',
 };
 
 const isSectionKey = (key: string): key is SectionKey => Object.keys(sectionsMap).includes(key as SectionKey);