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({
+      className={classNames(
        {
          dark: theme === "dark",
          light: theme === "light",
-      })}
+        },
        "scroll-smooth",
      )}
      style={{
        colorScheme: theme,
      }}
--- a/blog/BlogPosts.tsx
+++ b/blog/BlogPosts.tsx
@ -9,20 +9,16 @@ 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">
+      <ul className="w-[1600px]" data-cy="blog-posts">
-        {posts.map((post, index) => {
+        {posts.map((post) => {
          const postPublishedOn = date.format(
            new Date(post.frontmatter.publishedOn),
            "DD/MM/YYYY",
          )
          return (
-            <Link
+            <li key={post.slug}>
-              href={`/blog/${post.slug}`}
+              <Link href={`/blog/${post.slug}`} locale="en" data-cy={post.slug}>
-              key={index}
+                <ShadowContainer className="cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.02]">
              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"
@ -37,9 +33,10 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
                  </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>
-        <h1 className="flex items-center justify-center">
+        <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>
      </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 (
-    <>
+    <div className="my-6 text-center text-gray dark:text-gray-dark">
-      <p className="my-6 text-center text-gray dark:text-gray-dark">
+      <h3 className="text-lg font-semibold text-primary dark:text-primary-dark">
        <strong className="text-lg font-semibold text-primary dark:text-primary-dark">
        {title}
-        </strong>
+      </h3>
-        <br />
+      <p className="my-2">{htmlParser(description)}</p>
-        <span>{htmlParser(description)}</span>
+    </div>
      </p>
    </>
  )
 }
--- 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) => {
+      {paragraphs.map((paragraph) => {
-        return <InterestParagraph key={index} {...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">
+        <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>
-        </div>
+          </h3>
          <p className="my-4">{description}</p>
      </a>
        </ShadowContainer>
      </a>
    </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,6 +21,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
        href={link}
        aria-label={title}
      >
        <ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
          <div className="flex justify-center">
            <Image
              quality={100}
@ -37,7 +38,8 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
            </h3>
            <p className="mx-4 my-6 font-semibold">{description}</p>
          </div>
      </a>
        </ShadowContainer>
      </a>
    </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">
+    <ul className="flex w-full flex-wrap justify-center px-3">
-      {items.map((item, index) => {
+      {items.map((item) => {
-        return <PortfolioItem key={index} {...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(
+        value={
          isMounted
            ? `${BIRTH_DATE_STRING} (${age} ${i18n.translate(
                "home.about.years-old",
-          )})`}
+              )})`
            : BIRTH_DATE_STRING
        }
      />
-      ) : null}
+
      <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 (
    <li>
      <a
        href={skillProperties.link}
-      className="mx-2 max-w-xl text-primary hover:underline dark:text-primary-dark"
+        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"
      >
      <div className="text-center">
        <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>
    </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>
+        <ShadowContainer className="w-full px-2 py-4 leading-8 sm:px-16">
-          <div className="w-full px-16 py-4 leading-8">{children}</div>
+          {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