feat: unify card headings, add title to tags lists (#197)

src/web/components/tags-list.astro

@@ -2,11 +2,28 @@
 import type { TagsList } from '@/types/shared';
 import Tag from './tag.astro';
 
-export interface Props extends Omit<TagsList, 'title'> {}
+export interface Props extends Omit<TagsList, 'title'> {
+  title?: TagsList['title'];
+}
 
-const { tags } = Astro.props;
+const { tags, title } = Astro.props;
 ---
 
-<div class="flex flex-wrap gap-3">
+{
-  {tags.map((tag) => <Tag {...tag} />)}
+  title ? (
-</div>
+    <div class="flex flex-col gap-1.5">
+      <div class="font-medium text-gray-700 dark:text-gray-300">{title}:</div>
+      <div class="flex flex-wrap gap-3">
+        {tags.map((tag) => (
+          <Tag {...tag} />
+        ))}
+      </div>
+    </div>
+  ) : (
+    <div class="flex flex-wrap gap-3">
+      {tags.map((tag) => (
+        <Tag {...tag} />
+      ))}
+    </div>
+  )
+}

src/web/components/thumbnail.astro

@@ -5,9 +5,25 @@ import type { Photo as PhotoType } from '@/types/shared';
 interface Props {
   src?: PhotoType;
   alt: string;
+  size: 'large' | 'small';
 }
 
-const { src, alt } = Astro.props;
+const { src, alt, size } = Astro.props;
+
+const sizeToClass = /* tw */ {
+  large: 'h-18 w-18',
+  small: 'h-12 w-12',
+};
 ---
 
-{src && <Photo src={src} alt={alt} class="hidden h-[52px] w-[52px] rounded-lg sm:block" width={104} height={104} />}
+{
+  src && (
+    <Photo
+      src={src}
+      alt={alt}
+      class:list={['hidden rounded-md sm:block', sizeToClass[size]]}
+      width={104}
+      height={104}
+    />
+  )
+}

src/web/components/typography.astro

@@ -26,12 +26,12 @@ const variantToElement = {
 
 const variantToClassName /* tw */ = {
   'main-title': 'text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100',
-  'main-subtitle': 'text-md sm:text-lg font-medium text-gray-700 dark:text-gray-100',
+  'main-subtitle': 'text-base sm:text-lg font-medium text-gray-700 dark:text-gray-100',
   'section-title': 'text-3xl font-extrabold text-gray-900 dark:text-gray-100',
   'section-subtitle': 'text-lg font-extrabold text-gray-900 dark:text-gray-100',
   'item-title': 'text-xl font-extrabold text-gray-900 dark:text-gray-100',
   'item-title-suffix': 'text-xl font-medium text-gray-700 dark:text-gray-100',
-  'item-subtitle': 'text-md font-medium text-gray-700 dark:text-gray-100',
+  'item-subtitle': 'text-sm font-medium text-gray-700 dark:text-gray-100',
   'tile-title': 'text-sm font-medium text-gray-700 dark:text-gray-200',
   'tile-subtitle': 'text-sm font-normal text-gray-500 dark:text-gray-300',
   paragraph: 'text-sm leading-relaxed font-normal text-gray-500 sm:text-base sm:leading-relaxed dark:text-gray-300',

src/web/sections/education/diploma.astro

@@ -14,10 +14,10 @@ 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 gap-4">
-      <Thumbnail src={image} alt={`${institution} logo`} />
+      <Thumbnail src={image} alt={`${institution} logo`} size="large" />
       <div class="flex flex-col">
         <Typography variant="item-title">{title}</Typography>
-        <Typography variant="main-subtitle">{institution}</Typography>
+        <div class="mb-0.5 text-base font-semibold leading-snug text-gray-900 dark:text-gray-100">{institution}</div>
         <Timestamp dates={dates} />
       </div>
     </div>

src/web/sections/experience/job.astro

@@ -12,22 +12,26 @@ export interface Props extends Job {}
 const { role, company, dates, description, links, tagsList, image } = Astro.props;
 ---
 
-<div class="flex flex-col gap-2 md:gap-0">
+<div class="flex flex-col gap-3">
-  <div class="flex gap-4">
+  <div class="flex w-full justify-between gap-2">
-    <Thumbnail src={image} alt={`${company} logo`} />
+    <div class="flex gap-4">
-    <div class="flex w-full flex-row justify-between">
+      <Thumbnail src={image} alt={`${company} logo`} size="large" />
-      <div>
+      <div class="flex flex-col">
-        <Typography variant="item-title">
+        <Typography variant="item-title">{role}</Typography>
-          {role}
+        <div class="mb-0.5 text-base font-semibold leading-snug text-gray-900 dark:text-gray-100">{company}</div>
-          <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>
+    {
+      links.length > 0 && (
+        <div class="flex flex-wrap gap-3 sm:flex-nowrap">
+          {links.map((link) => (
+            <LinkButton {...link} />
+          ))}
+        </div>
+      )
+    }
   </div>
-  <Description content={description} class="pt-3 mb-6" />
+  <Description content={description} class="mb-3" />
   <TagsList {...tagsList} />
 </div>

src/web/sections/portfolio/project.astro

@@ -29,7 +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">
-          <Thumbnail src={image} alt={alt} />
+          <Thumbnail src={image} alt={alt} size="small" />
           <div class="flex w-full justify-between">
             <div>
               <Typography variant="item-title">{name}</Typography>

src/web/sections/testimonials/testimonial.astro

@@ -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">
-      <Thumbnail src={image} alt={author} />
+      <Thumbnail src={image} alt={author} size="small" />
       <div>
         <Typography variant="item-title">{author}</Typography>
         <Typography variant="item-subtitle">{relation}</Typography>

tailwind.config.cjs

@@ -14,6 +14,9 @@ module.exports = {
       gray: colors.gray,
     },
     extend: {
+      spacing: {
+        18: '4.5rem',
+      },
       keyframes: {
         show: {
           from: { opacity: '0' },