chore(release): 3.2.5 [skip ci]

fix: client-side age calculation, more glanular check for isMounted
Allows to render as much as possible on the server side. While keeping the calculation of the age on the client side to avoid hydratation mismatch.
2024-10-05 13:06:10 +02:00 · 2024-05-16 08:09:25 +00:00 · 2024-05-16 10:06:43 +02:00 · 2024-05-16 09:56:19 +02:00 · 2024-05-16 09:32:20 +02:00 · 2024-05-16 09:26:05 +02:00
16 changed files with 107 additions and 100 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -57,10 +57,13 @@ const RootLayout = (props: RootLayoutProps): JSX.Element => {
  return (
    <html
      lang={i18n.locale}
-      className={classNames({
-        dark: theme === "dark",
-        light: theme === "light",
-      })}
+      className={classNames(
+        {
+          dark: theme === "dark",
+          light: theme === "light",
+        },
+        "scroll-smooth",
+      )}
      style={{
        colorScheme: theme,
      }}
--- a/blog/BlogPosts.tsx
+++ b/blog/BlogPosts.tsx
@ -9,37 +9,34 @@ export const BlogPosts = async (): Promise<JSX.Element> => {

  return (
    <div className="flex w-full items-center justify-center p-8">
-      <div className="w-[1600px]" data-cy="blog-posts">
-        {posts.map((post, index) => {
+      <ul className="w-[1600px]" data-cy="blog-posts">
+        {posts.map((post) => {
          const postPublishedOn = date.format(
            new Date(post.frontmatter.publishedOn),
            "DD/MM/YYYY",
          )
          return (
-            <Link
-              href={`/blog/${post.slug}`}
-              key={index}
-              locale="en"
-              data-cy={post.slug}
-            >
-              <ShadowContainer className="cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2">
-                <h2
-                  data-cy="blog-post-title"
-                  className="text-xl font-semibold text-primary dark:text-primary-dark"
-                >
-                  {post.frontmatter.title}
-                </h2>
-                <p data-cy="blog-post-date" className="mt-2">
-                  {postPublishedOn}
-                </p>
-                <p data-cy="blog-post-description" className="mt-3">
-                  {post.frontmatter.description}
-                </p>
-              </ShadowContainer>
-            </Link>
+            <li key={post.slug}>
+              <Link href={`/blog/${post.slug}`} locale="en" data-cy={post.slug}>
+                <ShadowContainer className="cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.02]">
+                  <h2
+                    data-cy="blog-post-title"
+                    className="text-xl font-semibold text-primary dark:text-primary-dark"
+                  >
+                    {post.frontmatter.title}
+                  </h2>
+                  <p data-cy="blog-post-date" className="mt-2">
+                    {postPublishedOn}
+                  </p>
+                  <p data-cy="blog-post-description" className="mt-3">
+                    {post.frontmatter.description}
+                  </p>
+                </ShadowContainer>
+              </Link>
+            </li>
          )
        })}
-      </div>
+      </ul>
    </div>
  )
 }
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@ -14,8 +14,11 @@ export const Header = (): JSX.Element => {

  return (
    <header className="sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black">
-      <Link href="/">
-        <h1 className="flex items-center justify-center">
+      <h1>
+        <Link
+          href="/"
+          className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-[1.03]"
+        >
          <Image
            quality={100}
            className="size-16"
@ -26,8 +29,8 @@ export const Header = (): JSX.Element => {
          <strong className="ml-1 hidden font-headline font-semibold text-primary dark:text-primary-dark sm:block sm:text-xl">
            Théo LUDWIG
          </strong>
-        </h1>
-      </Link>
+        </Link>
+      </h1>
      <div className="flex justify-between">
        <div className="flex flex-col items-center justify-center px-6">
          <Link
--- a/components/Interests/InterestParagraph.tsx
+++ b/components/Interests/InterestParagraph.tsx
@ -20,14 +20,11 @@ export const InterestParagraph = (
  const { title, description } = props

  return (
-    <>
-      <p className="my-6 text-center text-gray dark:text-gray-dark">
-        <strong className="text-lg font-semibold text-primary dark:text-primary-dark">
-          {title}
-        </strong>
-        <br />
-        <span>{htmlParser(description)}</span>
-      </p>
-    </>
+    <div className="my-6 text-center text-gray dark:text-gray-dark">
+      <h3 className="text-lg font-semibold text-primary dark:text-primary-dark">
+        {title}
+      </h3>
+      <p className="my-2">{htmlParser(description)}</p>
+    </div>
  )
 }
--- a/components/Interests/index.tsx
+++ b/components/Interests/index.tsx
@ -16,8 +16,8 @@ export const Interests = (): JSX.Element => {

  return (
    <div className="max-w-full">
-      {paragraphs.map((paragraph, index) => {
-        return <InterestParagraph key={index} {...paragraph} />
+      {paragraphs.map((paragraph) => {
+        return <InterestParagraph key={paragraph.id} {...paragraph} />
      })}
      <InterestsList />
    </div>
--- a/components/OpenSource/Repository.tsx
+++ b/components/OpenSource/Repository.tsx
@ -11,16 +11,18 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
  const { name, description, href } = props

  return (
-    <ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-transform duration-200 ease-in-out hover:-translate-y-2">
+    <li>
      <a href={href} target="_blank" rel="noopener noreferrer">
-        <div className="flex">
-          <GitHubIcon className="mr-2 h-6" />
-          <span className="font-semibold text-primary dark:text-primary-dark">
-            {name}
-          </span>
-        </div>
-        <p className="my-4">{description}</p>
+        <ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.03]">
+          <h3 className="flex">
+            <GitHubIcon className="mr-2 h-6" />
+            <span className="font-semibold text-primary dark:text-primary-dark">
+              {name}
+            </span>
+          </h3>
+          <p className="my-4">{description}</p>
+        </ShadowContainer>
      </a>
-    </ShadowContainer>
+    </li>
  )
 }
--- a/components/OpenSource/index.tsx
+++ b/components/OpenSource/index.tsx
@ -10,7 +10,7 @@ export const OpenSource = (): JSX.Element => {
      <p className="text-center">
        {i18n.translate("home.open-source.description")}
      </p>
-      <div className="my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2">
+      <ul className="my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2">
        <Repository
          name="nodejs/node"
          description="Node.js JavaScript runtime ✨🐢🚀✨"
@ -31,7 +31,7 @@ export const OpenSource = (): JSX.Element => {
          description="The React Framework"
          href="https://github.com/vercel/next.js/commits?author=theoludwig"
        />
-      </div>
+      </ul>
    </div>
  )
 }
--- a/components/Portfolio/PortfolioItem.tsx
+++ b/components/Portfolio/PortfolioItem.tsx
@ -13,7 +13,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
  const { title, description, link, image } = props

  return (
-    <ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
+    <li>
      <a
        className="group inline-flex justify-center"
        target="_blank"
@ -21,23 +21,25 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
        href={link}
        aria-label={title}
      >
-        <div className="flex justify-center">
-          <Image
-            quality={100}
-            className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
-            width={300}
-            height={300}
-            src={image}
-            alt={title}
-          />
-        </div>
-        <div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
-          <h3 className="my-6 text-2xl font-semibold text-primary dark:text-primary-dark">
-            {title}
-          </h3>
-          <p className="mx-4 my-6 font-semibold">{description}</p>
-        </div>
+        <ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
+          <div className="flex justify-center">
+            <Image
+              quality={100}
+              className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
+              width={300}
+              height={300}
+              src={image}
+              alt={title}
+            />
+          </div>
+          <div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
+            <h3 className="my-6 text-2xl font-semibold text-primary dark:text-primary-dark">
+              {title}
+            </h3>
+            <p className="mx-4 my-6 font-semibold">{description}</p>
+          </div>
+        </ShadowContainer>
      </a>
-    </ShadowContainer>
+    </li>
  )
 }
--- a/components/Portfolio/index.tsx
+++ b/components/Portfolio/index.tsx
@ -12,10 +12,10 @@ export const Portfolio = (): JSX.Element => {
  }

  return (
-    <div className="flex w-full flex-wrap justify-center px-3">
-      {items.map((item, index) => {
-        return <PortfolioItem key={index} {...item} />
+    <ul className="flex w-full flex-wrap justify-center px-3">
+      {items.map((item) => {
+        return <PortfolioItem key={item.title} {...item} />
      })}
-    </div>
+    </ul>
  )
 }
--- a/components/Profile/ProfileList/index.tsx
+++ b/components/Profile/ProfileList/index.tsx
@ -30,14 +30,17 @@ export const ProfileList = (props: ProfileListProps): JSX.Element => {
        title={i18n.translate("home.about.pronouns")}
        value={i18n.translate("home.about.pronouns-value")}
      />
-      {isMounted ? (
-        <ProfileItem
-          title={i18n.translate("home.about.birth-date")}
-          value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
-            "home.about.years-old",
-          )})`}
-        />
-      ) : null}
+      <ProfileItem
+        title={i18n.translate("home.about.birth-date")}
+        value={
+          isMounted
+            ? `${BIRTH_DATE_STRING} (${age} ${i18n.translate(
+                "home.about.years-old",
+              )})`
+            : BIRTH_DATE_STRING
+        }
+      />
+
      <ProfileItem
        title={i18n.translate("home.about.nationality")}
        value="Alsace, France"
--- a/components/Profile/SocialMediaList/SocialMediaItem.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaItem.tsx
@ -13,7 +13,7 @@ export const SocialMediaItem = (props: SocialMediaItemProps): JSX.Element => {
        aria-label={ariaLabel}
        target="_blank"
        rel="noopener noreferrer"
-        className="relative inline-block bg-transparent"
+        className="relative inline-block bg-transparent transition-all duration-300 ease-in-out hover:scale-110"
      >
        {children}
      </a>
--- a/components/Skills/Skill.tsx
+++ b/components/Skills/Skill.tsx
@ -27,13 +27,13 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
  }

  return (
-    <a
-      href={skillProperties.link}
-      className="mx-2 max-w-xl text-primary hover:underline dark:text-primary-dark"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <div className="text-center">
+    <li>
+      <a
+        href={skillProperties.link}
+        className="mx-2 flex max-w-xl flex-col items-center justify-center text-center text-primary hover:underline dark:text-primary-dark"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
        <Image
          className="inline size-16"
          quality={100}
@ -43,7 +43,7 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
          src={getImage()}
        />
        <p className="mt-1 font-semibold">{skill}</p>
-      </div>
-    </a>
+      </a>
+    </li>
  )
 }
--- a/components/Skills/SkillsSection.tsx
+++ b/components/Skills/SkillsSection.tsx
@ -18,7 +18,7 @@ export const SkillsSection = (props: SkillsSectionProps): JSX.Element => {
                {title}
              </h3>
            </div>
-            <div className="flex flex-wrap justify-around">{children}</div>
+            <ul className="flex flex-wrap justify-around">{children}</ul>
          </div>
        </div>
      </div>
--- a/components/design/Section/index.tsx
+++ b/components/design/Section/index.tsx
@ -57,8 +57,8 @@ export const Section = (props: SectionProps): JSX.Element => {
        </p>
      ) : null}
      <div className="w-full px-3">
-        <ShadowContainer>
-          <div className="w-full px-16 py-4 leading-8">{children}</div>
+        <ShadowContainer className="w-full px-2 py-4 leading-8 sm:px-16">
+          {children}
        </ShadowContainer>
      </div>
    </section>
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "theoludwig",
-  "version": "3.2.4",
+  "version": "3.2.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "theoludwig",
-      "version": "3.2.4",
+      "version": "3.2.5",
      "hasInstallScript": true,
      "dependencies": {
        "@fontsource/montserrat": "5.0.17",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "theoludwig",
-  "version": "3.2.4",
+  "version": "3.2.5",
  "private": true,
  "repository": {
    "type": "git",
Author	SHA1	Message	Date
semantic-release-bot	5f3dfad988	chore(release): 3.2.5 [skip ci]	2024-05-16 08:09:25 +00:00
Théo LUDWIG	b231381cb3	fix: client-side age calculation, more glanular check for isMounted Allows to render as much as possible on the server side. While keeping the calculation of the age on the client side to avoid hydratation mismatch.	2024-05-16 10:06:43 +02:00
Théo LUDWIG	bbb2e56512	fix: usage of correct heading levels and html tags	2024-05-16 09:56:19 +02:00
Théo LUDWIG	66cf6d7438	fix: add scroll behavior: smooth	2024-05-16 09:32:20 +02:00
Théo LUDWIG	2a635bf3ba	fix: add hover effects	2024-05-16 09:26:05 +02:00