theoludwig/.profile
theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2024-12-08 00:44:30 +01:00
Code Issues Releases Activity

fix: calculate age client side so it updates "automatically" (not only on rebuild)

Browse Source
This commit is contained in:
Divlo 2022-03-24 18:57:27 +01:00
parent 6abc881e94
commit f67d331416
No known key found for this signature in database
GPG Key ID: 8F9478F220CE65E9
8 changed files with 35 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Head.tsx
View File

@ -3,7 +3,7 @@ import NextHead from 'next/head'
interface HeadProps { interface HeadProps {
title?: string title?: string
image?: string image?: string
description: string description?: string
url?: string url?: string
} }
@ -11,7 +11,7 @@ export const Head: React.FC<HeadProps> = (props) => {
const { const {
title = 'Divlo', title = 'Divlo',
image = 'https://divlo.fr/images/icons/icon-96x96.png', image = 'https://divlo.fr/images/icons/icon-96x96.png',
description, description = 'Divlo - Developer Full Stack Junior • Passionate about High-Tech',
url = 'https://divlo.fr/' url = 'https://divlo.fr/'
} = props } = props

22
components/Profile/ProfileList/index.tsx
View File

@ -1,29 +1,23 @@
import useTranslation from 'next-translate/useTranslation' import useTranslation from 'next-translate/useTranslation'
import { useMemo } from 'react'
import { import { DIVLO_BIRTHDAY, DIVLO_BIRTHDAY_DATE, getAge } from 'utils/getAge'
DIVLO_BIRTHDAY_DAY,
DIVLO_BIRTHDAY_MONTH,
DIVLO_BIRTHDAY_YEAR
} from 'utils/getAge'
import { ProfileItem } from './ProfileItem' import { ProfileItem } from './ProfileItem'
export interface ProfileListProps { export const ProfileList: React.FC = () => {
age: number
}
export const ProfileList: React.FC<ProfileListProps> = (props) => {
const { age } = props
const { t } = useTranslation('home') const { t } = useTranslation('home')
const age = useMemo(() => {
return getAge(DIVLO_BIRTHDAY)
}, [])
return ( return (
<ul className='m-0 list-none p-0'> <ul className='m-0 list-none p-0'>
<ProfileItem title={t('home:about.full-name')} value='Théo LUDWIG' /> <ProfileItem title={t('home:about.full-name')} value='Théo LUDWIG' />
<ProfileItem <ProfileItem
title={t('home:about.birth-date')} title={t('home:about.birth-date')}
value={`${DIVLO_BIRTHDAY_DAY}/${DIVLO_BIRTHDAY_MONTH}/${DIVLO_BIRTHDAY_YEAR} (${age} ${t( value={`${DIVLO_BIRTHDAY_DATE} (${age} ${t('home:about.years-old')})`}
'home:about.years-old'
)})`}
/> />
<ProfileItem title={t('home:about.nationality')} value='Alsace, France' /> <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
<ProfileItem <ProfileItem

10
components/Profile/index.tsx
View File

@ -3,19 +3,13 @@ import { ProfileInformation } from './ProfileInfo'
import { ProfileList } from './ProfileList' import { ProfileList } from './ProfileList'
import { ProfileLogo } from './ProfileLogo' import { ProfileLogo } from './ProfileLogo'
export interface ProfileProps { export const Profile: React.FC = () => {
age: number
}
export const Profile: React.FC<ProfileProps> = (props) => {
const { age } = props
return ( return (
<div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'> <div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
<ProfileLogo /> <ProfileLogo />
<div> <div>
<ProfileInformation /> <ProfileInformation />
<ProfileList age={age} /> <ProfileList />
<ProfileDescriptionBottom /> <ProfileDescriptionBottom />
</div> </div>
</div> </div>

16
pages/404.tsx
View File

@ -5,20 +5,16 @@ import { ErrorPage } from 'components/ErrorPage'
import { Head } from 'components/Head' import { Head } from 'components/Head'
import { Header } from 'components/Header' import { Header } from 'components/Header'
import { Footer, FooterProps } from 'components/Footer' import { Footer, FooterProps } from 'components/Footer'
import { getDefaultDescription } from 'utils/getDefaultDescription'
import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
interface Error404Props extends FooterProps { interface Error404Props extends FooterProps {}
description: string
}
const Error404: NextPage<Error404Props> = (props) => { const Error404: NextPage<Error404Props> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
const { version, description } = props const { version } = props
return ( return (
<> <>
<Head title='404 | Divlo' description={description} /> <Head title='404 | Divlo' />
<Header showLanguage /> <Header showLanguage />
<main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'> <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
@ -29,12 +25,10 @@ const Error404: NextPage<Error404Props> = (props) => {
) )
} }
export const getStaticProps: GetStaticProps<FooterProps> = async () => { export const getStaticProps: GetStaticProps<Error404Props> = async () => {
const { readPackage } = await import('read-pkg') const { readPackage } = await import('read-pkg')
const { version } = await readPackage() const { version } = await readPackage()
const age = getAge(DIVLO_BIRTHDAY) return { props: { version } }
const description = getDefaultDescription(age)
return { props: { version, description } }
} }
export default Error404 export default Error404

16
pages/500.tsx
View File

@ -5,20 +5,16 @@ import { ErrorPage } from 'components/ErrorPage'
import { Head } from 'components/Head' import { Head } from 'components/Head'
import { Header } from 'components/Header' import { Header } from 'components/Header'
import { Footer, FooterProps } from 'components/Footer' import { Footer, FooterProps } from 'components/Footer'
import { getDefaultDescription } from 'utils/getDefaultDescription'
import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
interface Error500Props extends FooterProps { interface Error500Props extends FooterProps {}
description: string
}
const Error500: NextPage<Error500Props> = (props) => { const Error500: NextPage<Error500Props> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
const { version, description } = props const { version } = props
return ( return (
<> <>
<Head title='500 | Divlo' description={description} /> <Head title='500 | Divlo' />
<Header showLanguage /> <Header showLanguage />
<main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'> <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
@ -29,12 +25,10 @@ const Error500: NextPage<Error500Props> = (props) => {
) )
} }
export const getStaticProps: GetStaticProps<FooterProps> = async () => { export const getStaticProps: GetStaticProps<Error500Props> = async () => {
const { readPackage } = await import('read-pkg') const { readPackage } = await import('read-pkg')
const { version } = await readPackage() const { version } = await readPackage()
const age = getAge(DIVLO_BIRTHDAY) return { props: { version } }
const description = getDefaultDescription(age)
return { props: { version, description } }
} }
export default Error500 export default Error500

17
pages/index.tsx
View File

@ -12,26 +12,21 @@ import { Skills } from 'components/Skills'
import { OpenSource } from 'components/OpenSource' import { OpenSource } from 'components/OpenSource'
import { Header } from 'components/Header' import { Header } from 'components/Header'
import { Footer, FooterProps } from 'components/Footer' import { Footer, FooterProps } from 'components/Footer'
import { getDefaultDescription } from 'utils/getDefaultDescription'
import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
interface HomeProps extends FooterProps { interface HomeProps extends FooterProps {}
description: string
age: number
}
const Home: NextPage<HomeProps> = (props) => { const Home: NextPage<HomeProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
const { version, description, age } = props const { version } = props
return ( return (
<> <>
<Head description={description} /> <Head />
<Header showLanguage /> <Header showLanguage />
<main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'> <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
<Section isMain id='about'> <Section isMain id='about'>
<Profile age={age} /> <Profile />
<SocialMediaList /> <SocialMediaList />
</Section> </Section>
@ -79,9 +74,7 @@ const Home: NextPage<HomeProps> = (props) => {
export const getStaticProps: GetStaticProps<HomeProps> = async () => { export const getStaticProps: GetStaticProps<HomeProps> = async () => {
const { readPackage } = await import('read-pkg') const { readPackage } = await import('read-pkg')
const { version } = await readPackage() const { version } = await readPackage()
const age = getAge(DIVLO_BIRTHDAY) return { props: { version } }
const description = getDefaultDescription(age)
return { props: { version, description, age } }
} }
export default Home export default Home

14
utils/getAge.ts
View File

@ -1,9 +1,11 @@
export const DIVLO_BIRTHDAY_DAY = '31' export const DIVLO_BIRTHDAY_DAY = '31' as const
export const DIVLO_BIRTHDAY_MONTH = '03' export const DIVLO_BIRTHDAY_MONTH = '03' as const
export const DIVLO_BIRTHDAY_YEAR = '2003' export const DIVLO_BIRTHDAY_YEAR = '2003' as const
export const DIVLO_BIRTHDAY = new Date( export const DIVLO_BIRTHDAY_DATE =
`${DIVLO_BIRTHDAY_YEAR}-${DIVLO_BIRTHDAY_MONTH}-${DIVLO_BIRTHDAY_DAY}` `${DIVLO_BIRTHDAY_DAY}/${DIVLO_BIRTHDAY_MONTH}/${DIVLO_BIRTHDAY_YEAR}` as const
) export const DIVLO_BIRTHDAY_DATE_ISO_8061 =
`${DIVLO_BIRTHDAY_YEAR}-${DIVLO_BIRTHDAY_MONTH}-${DIVLO_BIRTHDAY_DAY}` as const
export const DIVLO_BIRTHDAY = new Date(DIVLO_BIRTHDAY_DATE_ISO_8061)
/** /**
* Calculates the age of a person based on their birth date * Calculates the age of a person based on their birth date

3
utils/getDefaultDescription.ts
View File

@ -1,3 +0,0 @@
export const getDefaultDescription = (age: number): string => {
return `I'm Divlo, I'm ${age} years old, I'm from France - Developer Full Stack Junior • Passionate about High-Tech`
}