refactor: add picture of the uses page

thedaviddias · Jun 11, 2023 · 3939bce · 3939bce · vercel · Jun 11, 2023
1 parent ded1369
commit 3939bce
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 11 deletions.
diff --git a/locales/fr/common.json b/locales/fr/common.json
@@ -91,7 +91,7 @@
     },
     "h1": "Mes Notes",
     "sections": {
-      "empty": "Pas de publications disponibles pour le moment.",
+      "empty": "Pas de notes disponibles pour le moment.",
       "latest-notes": "Dernières Notes",
       "search": "Recherchez par mot clé",
       "search_placeholder": "Tapez un mot pour faire une recherche"
@@ -257,7 +257,7 @@
     "currently": "En train de lire",
     "next": "À lire prochainement",
     "sections": {
-      "viewAll": "→ Voir mon profil"
+      "viewAll": "→ Voir mon profil sur Goodreads"
     }
   },
   "youtube": {

diff --git a/public/images/uses/desk-david-dias.jpg b/public/images/uses/desk-david-dias.jpg
diff --git a/public/rss/feed.xml b/public/rss/feed.xml
@@ -4,7 +4,7 @@
         <title>The David Dias | Front-End Developer, podcaster &amp; content creator</title>
         <link>https://thedaviddias.dev</link>
         <description>Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life.</description>
-        <lastBuildDate>Sun, 11 Jun 2023 15:34:22 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 11 Jun 2023 16:18:18 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

diff --git a/public/rss/fr/feed.xml b/public/rss/fr/feed.xml
@@ -4,7 +4,7 @@
         <title>The David Dias | Développeur Front-End, podcasteur &amp; créateur de contenu</title>
         <link>https://thedaviddias.dev</link>
         <description>Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web.</description>
-        <lastBuildDate>Sun, 11 Jun 2023 15:34:22 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 11 Jun 2023 16:18:18 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>fr</language>

diff --git a/src/components/BlogPost/BlogPost.tsx b/src/components/BlogPost/BlogPost.tsx
@@ -26,7 +26,7 @@ export const BlogPost: React.FC<BlogPostProps> = ({ post, isCategoryPage }) => {
                   href={`${t('category.path')}/${slugify(post.frontMatter.categories[0], {
                     lower: true,
                   })}`}
-                  className="block pb-2 !font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 uppercase text-x"
+                  className="inline-block pb-2 !font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 uppercase text-x"
                 >
                   <span className="sr-only">Category: </span>
                   {post.frontMatter.categories[0]}
@@ -36,7 +36,7 @@ export const BlogPost: React.FC<BlogPostProps> = ({ post, isCategoryPage }) => {
           )}
           <H2 as="h3">
             <CustomLink
-              className="dark:!text-gray-100 block tracking-tight"
+              className="dark:!text-gray-100 inline-block tracking-tight"
               href={`/articles/${post.slug}`}
             >
               {post.frontMatter.title}

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -12,7 +12,7 @@ const FooterMenuLinks = () => {
   return (
     <div>
       <h3 className="small-title">{t('layout.footer.general')}</h3>
-      <ul className="mt-3 space-y-3">
+      <ul className="mt-3 space-y-1">
         {FOOTER_MENU_LINKS(t).map(({ path, label }) => (
           <li key={label}>
             <CustomLink href={path} className="dark:!text-white">
@@ -31,7 +31,7 @@ const FooterExtraLinks = () => {
   return (
     <div>
       <h3 className="small-title">{t('layout.footer.extra')}</h3>
-      <ul className="mt-3 space-y-3">
+      <ul className="mt-3 space-y-1">
         {EXTRA_LINKS(t).map(({ path, label, locale }) => (
           <li key={label}>
             <CustomLink href={path} className="dark:!text-white" locale={locale}>
@@ -50,7 +50,7 @@ const FooterSocialLinks = () => {
   return (
     <div>
       <h3 className="small-title">{t('layout.footer.social')}</h3>
-      <ul className="mt-3 space-y-3">
+      <ul className="mt-3 space-y-1">
         {SOCIAL_LINKS.map(({ label, link }) => (
           <li key={label}>
             <CustomLink href={link} className="dark:!text-white">
@@ -79,6 +79,7 @@ export const Footer = () => {
           alt=""
           aria-hidden="true"
           fill
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
         />
       </div>
       <footer

diff --git a/src/pages/articles/[slug].tsx b/src/pages/articles/[slug].tsx
@@ -224,7 +224,7 @@ const BlogPostPage: NextPage<BlogPostPageProps> = ({
                   <CustomLink
                     key={category}
                     href={`${t('category.path')}/${slugify(category, { lower: true })}`}
-                    className="mb-1 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 uppercase text-x !font-semibold transition-colors duration-200"
+                    className="mb-1 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 uppercase text-x md:text-lg !font-semibold transition-colors duration-200"
                   >
                     {category}
                   </CustomLink>
@@ -236,7 +236,7 @@ const BlogPostPage: NextPage<BlogPostPageProps> = ({
                 {title}
               </span>
               <span className="sr-only"> — </span>
-              <div className="font-body text-base sm:text-xl text-gray-600 dark:text-gray-300 mt-3 mb-6 tracking-wide font-light">
+              <div className="font-body text-base sm:text-lg text-gray-600 dark:text-gray-300 mt-3 mb-6 tracking-wide font-light">
                 {description}
               </div>
             </H1>

diff --git a/src/pages/uses.tsx b/src/pages/uses.tsx
@@ -14,6 +14,7 @@ import { getPostBySlug } from '@/utils/get-articles-posts'
 import { readData } from '@/utils/read-data'
 
 import { UsesType } from '@/types'
+import Image from 'next/image'
 
 type UsesProps = {
   categories: string[]
@@ -51,6 +52,19 @@ const Uses: NextPage<UsesProps> = ({ categories, tools, frontMatter, source }) =
     >
       <PageHeader title={titlePage} description={descriptionPage} />
 
+      <Image
+        className="inline-block h-auto max-w-xl"
+        src="/images/uses/desk-david-dias.jpg"
+        width={960}
+        height={540}
+        alt="Photo of my desk setup with pink and warm yellow Philips Hue lights. My white desk is composed with 2 screens with a colorful screen background. Two white speakers in each side of the desk. A gray keyboard and a black mouse on a black pad. A microphone on a black arm attached to the right side of the desk."
+        priority={true}
+        style={{
+          maxWidth: '100%',
+          height: 'auto',
+        }}
+      />
+
       <MDXRemote {...source} components={MDXComponents} lazy />
 
       {categories?.map((category) => (