mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-10-05 13:06:10 +02:00
Compare commits
4 Commits
3502f51735
...
0eb780485c
Author | SHA1 | Date | |
---|---|---|---|
0eb780485c | |||
cd5e92b64a | |||
982b148329 | |||
0febee5b51 |
@ -25,7 +25,7 @@ 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 text-yellow dark:text-yellow-dark">
|
||||
<h1 className="text-4xl font-semibold text-primary dark:text-primary-dark">
|
||||
Blog
|
||||
</h1>
|
||||
<p className="mt-6 text-center" data-cy="blog-post-date">
|
||||
|
@ -18,7 +18,7 @@ const ErrorHandling = (props: ErrorHandlingProps): JSX.Element => {
|
||||
<h1 className="my-6 text-4xl font-semibold">
|
||||
Error{" "}
|
||||
<span
|
||||
className="text-yellow dark:text-yellow-dark"
|
||||
className="text-primary dark:text-primary-dark"
|
||||
data-cy="status-code"
|
||||
>
|
||||
500
|
||||
|
@ -29,7 +29,7 @@
|
||||
|
||||
.prose a,
|
||||
.prose strong {
|
||||
@apply !font-semibold text-yellow dark:text-yellow-dark;
|
||||
@apply !font-semibold text-primary dark:text-primary-dark;
|
||||
}
|
||||
|
||||
strong,
|
||||
|
@ -10,7 +10,7 @@ const NotFound = (): JSX.Element => {
|
||||
<h1 className="my-6 text-4xl font-semibold">
|
||||
{i18n.translate("errors.error")}{" "}
|
||||
<span
|
||||
className="text-yellow dark:text-yellow-dark"
|
||||
className="text-primary dark:text-primary-dark"
|
||||
data-cy="status-code"
|
||||
>
|
||||
404
|
||||
@ -20,7 +20,7 @@ const NotFound = (): JSX.Element => {
|
||||
{i18n.translate("errors.not-found")}{" "}
|
||||
<Link
|
||||
href="/"
|
||||
className="text-yellow hover:underline dark:text-yellow-dark"
|
||||
className="text-primary hover:underline dark:text-primary-dark"
|
||||
>
|
||||
{i18n.translate("errors.return-to-home-page")}
|
||||
</Link>
|
||||
|
@ -21,7 +21,7 @@ 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 text-yellow dark:text-yellow-dark">
|
||||
<h1 className="text-3xl font-semibold text-primary dark:text-primary-dark">
|
||||
{blogPost.frontmatter.title}
|
||||
</h1>
|
||||
<p className="mt-2" data-cy="blog-post-date">
|
||||
|
@ -25,7 +25,7 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
|
||||
<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-yellow dark:text-yellow-dark"
|
||||
className="text-xl font-semibold text-primary dark:text-primary-dark"
|
||||
>
|
||||
{post.frontmatter.title}
|
||||
</h2>
|
||||
|
@ -9,7 +9,7 @@ export const FooterText = (): JSX.Element => {
|
||||
<p>
|
||||
<Link
|
||||
href="/"
|
||||
className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
|
||||
className="font-semibold text-primary hover:underline dark:text-primary-dark"
|
||||
>
|
||||
Théo LUDWIG
|
||||
</Link>{" "}
|
||||
|
@ -16,7 +16,7 @@ export const FooterVersion = (props: FooterVersionProps): JSX.Element => {
|
||||
Version{" "}
|
||||
<a
|
||||
data-cy="version-link"
|
||||
className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
|
||||
className="font-semibold text-primary hover:underline dark:text-primary-dark"
|
||||
href={versionLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
@ -1,9 +1,10 @@
|
||||
import { getVersion } from "@/utils/getVersion"
|
||||
|
||||
import { FooterText } from "./FooterText"
|
||||
import { FooterVersion } from "./FooterVersion"
|
||||
|
||||
export const Footer = async (): Promise<JSX.Element> => {
|
||||
const { readPackage } = await import("read-pkg")
|
||||
const { version } = await readPackage()
|
||||
const version = await getVersion()
|
||||
|
||||
return (
|
||||
<footer className="flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black">
|
||||
|
@ -23,7 +23,7 @@ export const Header = (): JSX.Element => {
|
||||
alt="Théo LUDWIG"
|
||||
priority
|
||||
/>
|
||||
<strong className="ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark sm:block sm:text-xl">
|
||||
<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>
|
||||
@ -33,7 +33,7 @@ export const Header = (): JSX.Element => {
|
||||
<Link
|
||||
href="/blog"
|
||||
data-cy="header-blog-link"
|
||||
className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
|
||||
className="font-semibold text-primary hover:underline dark:text-primary-dark"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
|
@ -22,7 +22,7 @@ export const InterestParagraph = (
|
||||
return (
|
||||
<>
|
||||
<p className="my-6 text-center text-gray dark:text-gray-dark">
|
||||
<strong className="text-lg font-semibold text-yellow dark:text-yellow-dark">
|
||||
<strong className="text-lg font-semibold text-primary dark:text-primary-dark">
|
||||
{title}
|
||||
</strong>
|
||||
<br />
|
||||
|
@ -12,7 +12,7 @@ export const InterestItem = (props: InterestItemProps): JSX.Element => {
|
||||
return (
|
||||
<li className="m-2 size-8" title={title}>
|
||||
<FontAwesomeIcon
|
||||
className="block size-full text-yellow dark:text-yellow-dark"
|
||||
className="block size-full text-primary dark:text-primary-dark"
|
||||
icon={fontAwesomeIcon}
|
||||
/>
|
||||
</li>
|
||||
|
@ -15,7 +15,7 @@ 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="font-semibold text-yellow dark:text-yellow-dark">
|
||||
<span className="font-semibold text-primary dark:text-primary-dark">
|
||||
{name}
|
||||
</span>
|
||||
</div>
|
||||
|
@ -32,7 +32,7 @@ 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-2xl font-semibold text-yellow dark:text-yellow-dark">
|
||||
<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>
|
||||
|
@ -12,7 +12,7 @@ export const ProfileDescriptionBottom = (): JSX.Element => {
|
||||
<br />
|
||||
<a
|
||||
href="/curriculum-vitae/index.html"
|
||||
className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
|
||||
className="font-semibold text-primary hover:underline dark:text-primary-dark"
|
||||
>
|
||||
Curriculum vitæ ({i18n.translate("common.fr-FR")})
|
||||
</a>
|
||||
|
@ -5,7 +5,7 @@ export const ProfileInformation = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
<div className="mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400">
|
||||
<h1 className="mb-2 text-4xl font-semibold text-yellow dark:text-yellow-dark">
|
||||
<h1 className="mb-2 text-4xl font-semibold text-primary dark:text-primary-dark">
|
||||
Théo LUDWIG
|
||||
</h1>
|
||||
<h2 className="mb-3 text-base">
|
||||
|
@ -5,6 +5,7 @@ import { useMemo } from "react"
|
||||
import { useI18n } from "@/i18n/i18n.client"
|
||||
import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from "@/utils/getAge"
|
||||
import type { CookiesStore } from "@/utils/constants"
|
||||
import { useIsMounted } from "@/hooks/useIsMounted"
|
||||
|
||||
import { ProfileItem } from "./ProfileItem"
|
||||
|
||||
@ -21,18 +22,22 @@ export const ProfileList = (props: ProfileListProps): JSX.Element => {
|
||||
return getAge(BIRTH_DATE)
|
||||
}, [])
|
||||
|
||||
const { isMounted } = useIsMounted()
|
||||
|
||||
return (
|
||||
<ul className="m-0 list-none p-0">
|
||||
<ProfileItem
|
||||
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.nationality")}
|
||||
value="Alsace, France"
|
||||
|
@ -29,7 +29,7 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
|
||||
return (
|
||||
<a
|
||||
href={skillProperties.link}
|
||||
className="mx-2 max-w-xl text-yellow hover:underline dark:text-yellow-dark"
|
||||
className="mx-2 max-w-xl text-primary hover:underline dark:text-primary-dark"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
|
@ -14,7 +14,7 @@ export const SkillsSection = (props: SkillsSectionProps): JSX.Element => {
|
||||
<div className="flex flex-wrap px-4 py-6">
|
||||
<div className="flex-1">
|
||||
<div className="mb-8 border-b border-gray-600 dark:border-white/10">
|
||||
<h3 className="my-3 text-xl font-semibold text-yellow dark:text-yellow-dark">
|
||||
<h3 className="my-3 text-xl font-semibold text-primary dark:text-primary-dark">
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
|
@ -16,7 +16,7 @@ export const Loader = (props: LoaderProps): JSX.Element => {
|
||||
height,
|
||||
}}
|
||||
className={classNames(
|
||||
"inline-block animate-spin rounded-full border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark",
|
||||
"inline-block animate-spin rounded-full border-[3px] border-current border-t-transparent text-primary dark:text-primary-dark",
|
||||
className,
|
||||
)}
|
||||
role="status"
|
||||
|
@ -6,7 +6,7 @@ export const SectionHeading = (props: SectionHeadingProps): JSX.Element => {
|
||||
return (
|
||||
<h2
|
||||
{...rest}
|
||||
className="mb-3 mt-1 text-center text-4xl font-semibold text-yellow dark:text-yellow-dark"
|
||||
className="mb-3 mt-1 text-center text-4xl font-semibold text-primary dark:text-primary-dark"
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
|
15
hooks/useIsMounted.ts
Normal file
15
hooks/useIsMounted.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
export interface UseIsMountedResult {
|
||||
isMounted: boolean
|
||||
}
|
||||
|
||||
export const useIsMounted = (): UseIsMountedResult => {
|
||||
const [isMounted, setIsMounted] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true)
|
||||
}, [])
|
||||
|
||||
return { isMounted }
|
||||
}
|
@ -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 font-semibold' 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-primary dark:text-primary-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
|
||||
"id": "open-source"
|
||||
}
|
||||
]
|
||||
@ -34,7 +34,7 @@
|
||||
{
|
||||
"title": "Carolo",
|
||||
"description": "Strategy board game similar to chess which allows grandiose moves (only available in French).",
|
||||
"link": "https://carolo.org/",
|
||||
"link": "https://carolo.theoludwig.fr/",
|
||||
"image": "/images/portfolio/Carolo.png"
|
||||
},
|
||||
{
|
||||
|
@ -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 font-semibold' 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-primary dark:text-primary-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
|
||||
"id": "open-source"
|
||||
}
|
||||
]
|
||||
@ -34,7 +34,7 @@
|
||||
{
|
||||
"title": "Carolo",
|
||||
"description": "Jeu de plateau stratégique similaire aux échecs qui permet des coups grandioses, reposant sur des enchaînements remarquables.",
|
||||
"link": "https://carolo.org/",
|
||||
"link": "https://carolo.theoludwig.fr/",
|
||||
"image": "/images/portfolio/Carolo.png"
|
||||
},
|
||||
{
|
||||
|
@ -14,7 +14,7 @@ const tailwindConfig = {
|
||||
DEFAULT: "#333333",
|
||||
dark: "#b7c0c9",
|
||||
},
|
||||
yellow: {
|
||||
primary: {
|
||||
DEFAULT: "#006cff",
|
||||
dark: "#00aeff",
|
||||
},
|
||||
|
8
utils/getVersion.ts
Normal file
8
utils/getVersion.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export const getVersion = async (): Promise<string> => {
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
return "0.0.0-development"
|
||||
}
|
||||
const { readPackage } = await import("read-pkg")
|
||||
const { version } = await readPackage()
|
||||
return version
|
||||
}
|
Loading…
Reference in New Issue
Block a user