feat: Add thumbnails to experience and education items (#196)

src/data/sections/education-section.data.ts

@@ -13,6 +13,7 @@ const educationSectionData = {
     {
       title: 'Information Technology',
       institution: 'Wrocław University of Science and Technology',
+      image: import('@/assets/logos/wroclaw-university-of-technology.jpg'),
       dates: [new Date('2014.10'), new Date('2016.07')],
       description: 'Master degree. Specialization in software development.',
       links: [website({ url: '#' })],
@@ -20,6 +21,7 @@ const educationSectionData = {
     {
       title: 'Information Technology',
       institution: 'Wrocław University of Science and Technology',
+      image: import('@/assets/logos/wroclaw-university-of-technology.jpg'),
       dates: [new Date('2011.10'), new Date('2014.07')],
       description: "Bachelor's degree. Specialization in application development.",
       links: [website({ url: '#' })],

src/data/sections/experience-section.data.ts

@@ -26,6 +26,7 @@ const experienceSectionData = {
     {
       role: 'Senior front-end developer',
       company: 'Google',
+      image: import('@/assets/logos/google-logo.jpg'),
       dates: [new Date('2020-02'), null],
       description: `
         - In tristique vulputate augue vel egestas.
@@ -44,6 +45,7 @@ const experienceSectionData = {
     {
       role: 'React.js developer',
       company: 'Facebook',
+      image: import('@/assets/logos/facebook-logo.png'),
       dates: [new Date('2019-04'), new Date('2020-02')],
       description: `
         - Aenean eget ultricies felis. Pellentesque dictum massa ut tellus eleifend, sed posuere massa mattis.
@@ -60,6 +62,7 @@ const experienceSectionData = {
     {
       role: 'Junior front-end developer',
       company: 'GitLab',
+      image: import('@/assets/logos/gitlab-logo.png'),
       dates: [new Date('2016-09'), new Date('2019-04')],
       description: `
         Nulla volutpat justo ante, rhoncus posuere massa egestas in:

src/types/sections/education-section.types.ts

@@ -1,4 +1,4 @@
-import type { DateRange, LinkButton, Section } from '../shared';
+import type { DateRange, LinkButton, Photo, Section } from '../shared';
 
 export interface Diploma {
   /**
@@ -11,6 +11,15 @@ export interface Diploma {
    */
   institution: string;
 
+  /**
+   * [WEB] Logo of the institution.
+   *
+   * **Ratio**: 1:1
+   *
+   * **Display size**: 56x56px
+   */
+  image?: Photo;
+
   /**
    * Date range when you were studying in the institution.
    */

src/types/sections/experience-section.types.ts

@@ -1,4 +1,4 @@
-import type { DateRange, LinkButton, Section, TagsList } from '../shared';
+import type { DateRange, LinkButton, Photo, Section, TagsList } from '../shared';
 
 export interface Job {
   /**
@@ -11,6 +11,15 @@ export interface Job {
    */
   company: string;
 
+  /**
+   * [WEB] Logo of the company.
+   *
+   * **Ratio**: 1:1
+   *
+   * **Display size**: 56x56px
+   */
+  image?: Photo;
+
   /**
    * Date range when you were working in the company.
    */

src/web/components/thumbnail.astro

@@ -0,0 +1,13 @@
+---
+import Photo from '@/components/photo.astro';
+import type { Photo as PhotoType } from '@/types/shared';
+
+interface Props {
+  src?: PhotoType;
+  alt: string;
+}
+
+const { src, alt } = Astro.props;
+---
+
+{src && <Photo src={src} alt={alt} class="hidden h-[52px] w-[52px] rounded-lg sm:block" width={104} height={104} />}

src/web/sections/education/diploma.astro

@@ -2,20 +2,24 @@
 import type { Diploma } from '@/types/sections/education-section.types';
 import Description from '@/web/components/description.astro';
 import LinkButton from '@/web/components/link-button.astro';
+import Thumbnail from '@/web/components/thumbnail.astro';
 import Timestamp from '@/web/components/timestamp.astro';
 import Typography from '@/web/components/typography.astro';
 
 export interface Props extends Diploma {}
 
-const { title, institution, dates, description, links } = Astro.props;
+const { title, institution, dates, description, links, image } = 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 dates={dates} />
+    <div class="flex gap-4">
+      <Thumbnail src={image} alt={`${institution} logo`} />
+      <div class="flex flex-col">
+        <Typography variant="item-title">{title}</Typography>
+        <Typography variant="main-subtitle">{institution}</Typography>
+        <Timestamp dates={dates} />
+      </div>
     </div>
     {
       links.length > 0 && (

src/web/sections/experience/job.astro

@@ -3,27 +3,31 @@ import type { Job } from '@/types/sections/experience-section.types';
 import Description from '@/web/components/description.astro';
 import LinkButton from '@/web/components/link-button.astro';
 import TagsList from '@/web/components/tags-list.astro';
+import Thumbnail from '@/web/components/thumbnail.astro';
 import Timestamp from '@/web/components/timestamp.astro';
 import Typography from '@/web/components/typography.astro';
 
 export interface Props extends Job {}
 
-const { role, company, dates, description, links, tagsList } = Astro.props;
+const { role, company, dates, description, links, tagsList, image } = Astro.props;
 ---
 
 <div class="flex flex-col gap-2 md:gap-0">
-  <div class="flex w-full flex-row justify-between">
-    <div>
-      <Typography variant="item-title">
-        {role}
-        <span class="font-medium"> &#8212;&nbsp;{company}</span>
-      </Typography>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      {links.map((link) => <LinkButton {...link} />)}
+  <div class="flex gap-4">
+    <Thumbnail src={image} alt={`${company} logo`} />
+    <div class="flex w-full flex-row justify-between">
+      <div>
+        <Typography variant="item-title">
+          {role}
+          <span class="font-medium"> &#8212;&nbsp;{company}</span>
+        </Typography>
+        <Timestamp dates={dates} />
+      </div>
+      <div class="flex flex-wrap gap-2">
+        {links.map((link) => <LinkButton {...link} />)}
+      </div>
     </div>
   </div>
-  <Timestamp dates={dates} />
   <Description content={description} class="pt-3 mb-6" />
   <TagsList {...tagsList} />
 </div>

src/web/sections/portfolio/project.astro

@@ -8,6 +8,7 @@ import Photo from '@/components/photo.astro';
 import TagsList from '@/web/components/tags-list.astro';
 import Timestamp from '@/web/components/timestamp.astro';
 import Typography from '@/web/components/typography.astro';
+import Thumbnail from '@/web/components/thumbnail.astro';
 
 export interface Props extends Project {
   screenshotsConfig?: PortfolioSection['config']['screenshots'];
@@ -28,17 +29,7 @@ const screenshotsTooltip = screenshotsConfig?.title || 'Screenshots';
     <div class="flex gap-6">
       <div class="flex w-full flex-col gap-4">
         <div class="flex gap-4">
-          {
-            image && (
-              <Photo
-                src={image}
-                alt={alt}
-                width={108}
-                height={108}
-                class="hidden h-14 w-14 flex-shrink-0 rounded-lg object-cover sm:block"
-              />
-            )
-          }
+          <Thumbnail src={image} alt={alt} />
           <div class="flex w-full justify-between">
             <div>
               <Typography variant="item-title">{name}</Typography>

src/web/sections/testimonials/testimonial.astro

@@ -1,9 +1,9 @@
 ---
 import type { Testimonial } from '@/types/sections/testimonials-section.types';
 import LinkButton from '@/web/components/link-button.astro';
-import Photo from '@/components/photo.astro';
 import Typography from '@/web/components/typography.astro';
 import Description from '@/web/components/description.astro';
+import Thumbnail from '@/web/components/thumbnail.astro';
 
 export interface Props extends Testimonial {}
 
@@ -13,7 +13,7 @@ const { author, content, image, links, relation } = Astro.props;
 <div class="flex w-full flex-col gap-4">
   <div class="flex justify-between">
     <div class="flex flex-col gap-4 sm:flex-row">
-      <Photo src={image} alt={author} class="w-14 h-14 rounded-lg" width={112} height={112} />
+      <Thumbnail src={image} alt={author} />
       <div>
         <Typography variant="item-title">{author}</Typography>
         <Typography variant="item-subtitle">{relation}</Typography>