feat: new logo v1

app/blog/page.tsx

@@ -25,7 +25,9 @@ const BlogPage = async (): Promise<JSX.Element> => {
   return (
     <main className="flex flex-1 flex-col flex-wrap items-center">
       <div className="mt-10 flex flex-col items-center">
-        <h1 className="text-4xl font-semibold">Blog</h1>
+        <h1 className="text-4xl font-semibold text-yellow dark:text-yellow-dark">
+          Blog
+        </h1>
         <p className="mt-6 text-center" data-cy="blog-post-date">
           {description}
         </p>

app/globals.css

@@ -29,7 +29,7 @@
 
 .prose a,
 .prose strong {
-  @apply text-yellow dark:text-yellow-dark;
+  @apply text-yellow dark:text-yellow-dark font-semibold;
 }
 
 strong,

app/layout.tsx

@@ -13,7 +13,7 @@ import { getTheme } from "@/theme/theme.server"
 const title = "Théo LUDWIG"
 const description =
   "Théo LUDWIG - Developer Full Stack • Open-Source Enthusiast"
-const image = "/images/icon-96x96.png"
+const image = "/images/logo.png"
 const url = new URL("https://theoludwig.fr")
 const locale = "fr-FR, en-US"
 
@@ -36,9 +36,6 @@ export const metadata: Metadata = {
     locale,
     type: "website",
   },
-  icons: {
-    icon: "/images/icon-96x96.png",
-  },
   twitter: {
     card: "summary",
     title,

blog/BlogPost.tsx

@@ -21,7 +21,9 @@ export const BlogPost = async (props: BlogPostProps): Promise<JSX.Element> => {
   return (
     <main className="break-wrap-words flex flex-1 flex-col flex-wrap items-center justify-center">
       <div className="my-10 flex flex-col items-center text-center">
-        <h1 className="text-3xl font-semibold">{blogPost.frontmatter.title}</h1>
+        <h1 className="text-3xl font-semibold text-yellow dark:text-yellow-dark">
+          {blogPost.frontmatter.title}
+        </h1>
         <p className="mt-2" data-cy="blog-post-date">
           {date.format(
             new Date(blogPost.frontmatter.publishedOn),

blog/BlogPosts.tsx

@@ -23,7 +23,10 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
               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">
+                <h2
+                  data-cy="blog-post-title"
+                  className="text-xl font-semibold text-yellow dark:text-yellow-dark"
+                >
                   {post.frontmatter.title}
                 </h2>
                 <p data-cy="blog-post-date" className="mt-2">

components/Footer/FooterText.tsx

@@ -9,7 +9,7 @@ export const FooterText = (): JSX.Element => {
     <p>
       <Link
         href="/"
-        className="text-yellow hover:underline dark:text-yellow-dark"
+        className="text-yellow hover:underline dark:text-yellow-dark font-semibold"
       >
         Théo LUDWIG
       </Link>{" "}

components/Footer/FooterVersion.tsx

@@ -16,7 +16,7 @@ export const FooterVersion = (props: FooterVersionProps): JSX.Element => {
       Version{" "}
       <a
         data-cy="version-link"
-        className="text-yellow hover:underline dark:text-yellow-dark"
+        className="text-yellow hover:underline dark:text-yellow-dark font-semibold"
         href={versionLink}
         target="_blank"
         rel="noopener noreferrer"

components/Header/index.tsx

@@ -2,6 +2,7 @@ import { cookies } from "next/headers"
 import Link from "next/link"
 import Image from "next/image"
 
+import Logo from "@/public/images/logo.png"
 import { getI18n } from "@/i18n/i18n.server"
 
 import { Locales } from "./Locales"
@@ -17,13 +18,12 @@ export const Header = (): JSX.Element => {
         <div className="flex items-center justify-center">
           <Image
             quality={100}
-            width={60}
+            className="w-16 h-16"
-            height={60}
+            src={Logo}
-            src="/images/icon_small.png"
             alt="Théo LUDWIG"
             priority
           />
-          <strong className="ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block">
+          <strong className="ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block sm:text-xl">
             Théo LUDWIG
           </strong>
         </div>
@@ -33,7 +33,7 @@ export const Header = (): JSX.Element => {
           <Link
             href="/blog"
             data-cy="header-blog-link"
-            className="text-yellow hover:underline dark:text-yellow-dark"
+            className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
           >
             Blog
           </Link>

components/OpenSource/Repository.tsx

@@ -15,7 +15,9 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
       <a href={href} target="_blank" rel="noopener noreferrer">
         <div className="flex">
           <GitHubIcon className="mr-2 h-6" />
-          <span className="text-yellow dark:text-yellow-dark">{name}</span>
+          <span className="text-yellow dark:text-yellow-dark font-semibold">
+            {name}
+          </span>
         </div>
         <p className="my-4">{description}</p>
       </a>

components/Portfolio/PortfolioItem.tsx

@@ -32,10 +32,10 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
           />
         </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-xl font-semibold text-yellow dark:text-yellow-dark">
+          <h3 className="my-6 text-2xl font-semibold text-yellow dark:text-yellow-dark">
             {title}
           </h3>
-          <p className="my-6 mx-2">{description}</p>
+          <p className="my-6 mx-4 font-semibold">{description}</p>
         </div>
       </a>
     </ShadowContainer>

components/Profile/ProfileDescriptionBottom.tsx

@@ -12,7 +12,7 @@ export const ProfileDescriptionBottom = (): JSX.Element => {
       <br />
       <a
         href="/curriculum-vitae/index.html"
-        className="text-yellow hover:underline dark:text-yellow-dark"
+        className="text-yellow hover:underline dark:text-yellow-dark font-semibold"
       >
         Curriculum vitæ ({i18n.translate("common.fr-FR")})
       </a>

components/Skills/Skill.tsx

@@ -42,7 +42,7 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
           alt={skill}
           src={getImage()}
         />
-        <p className="mt-1">{skill}</p>
+        <p className="mt-1 font-semibold">{skill}</p>
       </div>
     </a>
   )

components/design/Section/SectionHeading.tsx

@@ -4,7 +4,10 @@ export const SectionHeading = (props: SectionHeadingProps): JSX.Element => {
   const { children, ...rest } = props
 
   return (
-    <h2 {...rest} className="mb-3 mt-1 text-center text-4xl font-semibold">
+    <h2
+      {...rest}
+      className="mb-3 mt-1 text-center text-4xl font-semibold text-yellow dark:text-yellow-dark"
+    >
       {children}
     </h2>
   )

curriculum-vitae/curriculum-vitae.jsonc

@@ -3,7 +3,7 @@
   "basics": {
     "name": "Théo LUDWIG",
     "label": "Développeur Full Stack • Étudiant",
-    "image": "https://theoludwig.fr/images/logo_orange.png",
+    "image": "https://theoludwig.fr/images/logo_background.png",
     "email": "contact@theoludwig.fr",
     "age": "31/03/2003",
     "location": {

i18n/translations/en-US/home.json

@@ -18,7 +18,7 @@
       },
       {
         "title": "Open-Source Enthusiast",
-        "description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br /> The source code of the website is available on <a class='text-yellow dark:text-yellow-dark hover:underline' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
+        "description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br /> The source code of the website is available on <a class='text-yellow dark:text-yellow-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
         "id": "open-source"
       }
     ]

i18n/translations/fr-FR/home.json

@@ -18,7 +18,7 @@
       },
       {
         "title": "Enthousiaste de l'Open-Source",
-        "description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br /> Le code source du site est accessible sur <a class='text-yellow dark:text-yellow-dark hover:underline' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
+        "description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br /> Le code source du site est accessible sur <a class='text-yellow dark:text-yellow-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
         "id": "open-source"
       }
     ]

tailwind.config.js

@@ -15,16 +15,16 @@ const tailwindConfig = {
         black: "#181818",
         gray: {
           DEFAULT: "#333333",
-          dark: "#b2bac2",
+          dark: "#b7c0c9",
         },
         yellow: {
-          DEFAULT: "#ff6000",
+          DEFAULT: "#006cff",
-          dark: "#ffd800",
+          dark: "#00aeff",
         },
       },
       boxShadow: {
-        dark: "0px 0px 4px 4px rgba(0, 0, 0, 0.25)",
+        dark: "0px 0px 2px 2px rgba(0, 0, 0, 0.25)",
-        light: "0px 0px 4px 4px rgba(0, 0, 0, 0.10)",
+        light: "0px 0px 2px 2px rgba(0, 0, 0, 0.10)",
         darkFlag: "0px 1px 10px hsla(0, 0%, 100%, 0.2)",
         lightFlag: "0px 1px 10px rgba(0, 0, 0, 0.25)",
       },