1
1
mirror of https://github.com/theoludwig/theoludwig.git synced 2024-12-08 00:44:30 +01:00

feat: display age nearby the birth date

This commit is contained in:
Divlo 2022-03-24 11:45:19 +01:00
parent 1152039663
commit a67d6665ea
No known key found for this signature in database
GPG Key ID: 8F9478F220CE65E9
13 changed files with 3273 additions and 4867 deletions

View File

@ -1,14 +1,30 @@
import useTranslation from 'next-translate/useTranslation' import useTranslation from 'next-translate/useTranslation'
import {
DIVLO_BIRTHDAY_DAY,
DIVLO_BIRTHDAY_MONTH,
DIVLO_BIRTHDAY_YEAR
} from 'utils/getAge'
import { ProfileItem } from './ProfileItem' import { ProfileItem } from './ProfileItem'
export const ProfileList: React.FC = () => { export interface ProfileListProps {
age: number
}
export const ProfileList: React.FC<ProfileListProps> = (props) => {
const { age } = props
const { t } = useTranslation('home') const { t } = useTranslation('home')
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 title={t('home:about.birth-date')} value='31/03/2003' /> <ProfileItem
title={t('home:about.birth-date')}
value={`${DIVLO_BIRTHDAY_DAY}/${DIVLO_BIRTHDAY_MONTH}/${DIVLO_BIRTHDAY_YEAR} (${age} ${t(
'home:about.years-old'
)})`}
/>
<ProfileItem title={t('home:about.nationality')} value='Alsace, France' /> <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
<ProfileItem <ProfileItem
title='Email' title='Email'

View File

@ -3,13 +3,19 @@ import { ProfileInformation } from './ProfileInfo'
import { ProfileList } from './ProfileList' import { ProfileList } from './ProfileList'
import { ProfileLogo } from './ProfileLogo' import { ProfileLogo } from './ProfileLogo'
export const Profile: React.FC = () => { export interface ProfileProps {
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 /> <ProfileList age={age} />
<ProfileDescriptionBottom /> <ProfileDescriptionBottom />
</div> </div>
</div> </div>

File diff suppressed because it is too large Load Diff

View File

@ -10,10 +10,10 @@
"modern-normalize": "1.1.0" "modern-normalize": "1.1.0"
}, },
"devDependencies": { "devDependencies": {
"@parcel/config-default": "2.3.2", "@parcel/config-default": "2.4.0",
"@parcel/core": "2.3.2", "@parcel/core": "2.4.0",
"@parcel/optimizer-data-url": "^2.3.2", "@parcel/optimizer-data-url": "2.4.0",
"@parcel/transformer-inline-string": "^2.3.2", "@parcel/transformer-inline-string": "2.4.0",
"parcel": "2.3.2" "parcel": "2.4.0"
} }
} }

View File

@ -4,6 +4,7 @@
"description": "Developer Full Stack Junior • Passionate about High-Tech", "description": "Developer Full Stack Junior • Passionate about High-Tech",
"full-name": "Full name", "full-name": "Full name",
"birth-date": "Birth date", "birth-date": "Birth date",
"years-old": "years old",
"nationality": "Nationality", "nationality": "Nationality",
"description-bottom": "I am self-taught in Computer Science by following online trainings and I am also a student at the university following the French training \"BUT Informatique\" (first year)." "description-bottom": "I am self-taught in Computer Science by following online trainings and I am also a student at the university following the French training \"BUT Informatique\" (first year)."
}, },

View File

@ -4,6 +4,7 @@
"description": "Développeur Full Stack Junior • Passionné de High-Tech", "description": "Développeur Full Stack Junior • Passionné de High-Tech",
"full-name": "Prénom NOM", "full-name": "Prénom NOM",
"birth-date": "Date de naissance", "birth-date": "Date de naissance",
"years-old": "ans",
"nationality": "Nationalité", "nationality": "Nationalité",
"description-bottom": "Je me forme en autodidacte dans l'informatique en suivant des formations en ligne et je suis aussi un étudiant à l'université suivant la formation \"BUT Informatique\" (première année)." "description-bottom": "Je me forme en autodidacte dans l'informatique en suivant des formations en ligne et je suis aussi un étudiant à l'université suivant la formation \"BUT Informatique\" (première année)."
}, },

4977
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -32,15 +32,15 @@
"postinstall": "husky install" "postinstall": "husky install"
}, },
"dependencies": { "dependencies": {
"@fontsource/montserrat": "4.5.5", "@fontsource/montserrat": "4.5.7",
"@fortawesome/fontawesome-svg-core": "1.3.0", "@fortawesome/fontawesome-svg-core": "6.1.1",
"@fortawesome/free-brands-svg-icons": "6.0.0", "@fortawesome/free-brands-svg-icons": "6.1.1",
"@fortawesome/free-solid-svg-icons": "6.0.0", "@fortawesome/free-solid-svg-icons": "6.1.1",
"@fortawesome/react-fontawesome": "0.1.17", "@fortawesome/react-fontawesome": "0.1.18",
"classnames": "2.3.1", "classnames": "2.3.1",
"date-and-time": "2.3.0", "date-and-time": "2.3.0",
"gray-matter": "4.0.3", "gray-matter": "4.0.3",
"html-react-parser": "1.4.8", "html-react-parser": "1.4.9",
"next": "12.1.0", "next": "12.1.0",
"next-mdx-remote": "4.0.0", "next-mdx-remote": "4.0.0",
"next-pwa": "5.4.6", "next-pwa": "5.4.6",
@ -52,14 +52,14 @@
"rehype-raw": "6.1.1", "rehype-raw": "6.1.1",
"rehype-slug": "5.0.1", "rehype-slug": "5.0.1",
"remark-gfm": "3.0.1", "remark-gfm": "3.0.1",
"sharp": "0.30.2", "sharp": "0.30.3",
"shiki": "0.10.1", "shiki": "0.10.1",
"unified": "10.1.2", "unified": "10.1.2",
"unist-util-visit": "4.1.0", "unist-util-visit": "4.1.0",
"universal-cookie": "4.0.4" "universal-cookie": "4.0.4"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "16.2.1", "@commitlint/cli": "16.2.3",
"@commitlint/config-conventional": "16.2.1", "@commitlint/config-conventional": "16.2.1",
"@lhci/cli": "0.9.0", "@lhci/cli": "0.9.0",
"@saithodev/semantic-release-backmerge": "2.1.2", "@saithodev/semantic-release-backmerge": "2.1.2",
@ -68,35 +68,35 @@
"@testing-library/jest-dom": "5.16.2", "@testing-library/jest-dom": "5.16.2",
"@testing-library/react": "12.1.4", "@testing-library/react": "12.1.4",
"@types/jest": "27.4.1", "@types/jest": "27.4.1",
"@types/node": "17.0.21", "@types/node": "17.0.23",
"@types/react": "17.0.40", "@types/react": "17.0.42",
"@types/unist": "2.0.6", "@types/unist": "2.0.6",
"@typescript-eslint/eslint-plugin": "5.14.0", "@typescript-eslint/eslint-plugin": "5.16.0",
"autoprefixer": "10.4.2", "autoprefixer": "10.4.4",
"cypress": "9.5.1", "cypress": "9.5.2",
"editorconfig-checker": "4.0.2", "editorconfig-checker": "4.0.2",
"eslint": "8.11.0", "eslint": "8.11.0",
"eslint-config-conventions": "1.1.0", "eslint-config-conventions": "1.1.2",
"eslint-config-next": "12.1.0", "eslint-config-next": "12.1.0",
"eslint-config-prettier": "8.5.0", "eslint-config-prettier": "8.5.0",
"eslint-plugin-import": "2.25.4", "eslint-plugin-import": "2.25.4",
"eslint-plugin-prettier": "4.0.0", "eslint-plugin-prettier": "4.0.0",
"eslint-plugin-promise": "6.0.0", "eslint-plugin-promise": "6.0.0",
"eslint-plugin-unicorn": "41.0.0", "eslint-plugin-unicorn": "41.0.1",
"html-w3c-validator": "1.1.0", "html-w3c-validator": "1.1.0",
"husky": "7.0.4", "husky": "7.0.4",
"jest": "27.5.1", "jest": "27.5.1",
"jsonresume-theme-custom": "file:./jsonresume-theme-custom", "jsonresume-theme-custom": "file:./jsonresume-theme-custom",
"lint-staged": "12.3.5", "lint-staged": "12.3.7",
"markdownlint-cli": "0.31.1", "markdownlint-cli": "0.31.1",
"next-secure-headers": "2.2.0", "next-secure-headers": "2.2.0",
"postcss": "8.4.8", "postcss": "8.4.12",
"prettier": "2.5.1", "prettier": "2.6.0",
"prettier-plugin-tailwindcss": "0.1.8", "prettier-plugin-tailwindcss": "0.1.8",
"semantic-release": "19.0.2", "semantic-release": "19.0.2",
"start-server-and-test": "1.14.0", "start-server-and-test": "1.14.0",
"tailwindcss": "3.0.23", "tailwindcss": "3.0.23",
"typescript": "4.6.2", "typescript": "4.6.2",
"vercel": "24.0.0" "vercel": "24.0.1"
} }
} }

View File

@ -6,6 +6,7 @@ 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 { getDefaultDescription } from 'utils/getDefaultDescription'
import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
interface Error404Props extends FooterProps { interface Error404Props extends FooterProps {
description: string description: string
@ -31,7 +32,8 @@ const Error404: NextPage<Error404Props> = (props) => {
export const getStaticProps: GetStaticProps<FooterProps> = async () => { export const getStaticProps: GetStaticProps<FooterProps> = async () => {
const { readPackage } = await import('read-pkg') const { readPackage } = await import('read-pkg')
const { version } = await readPackage() const { version } = await readPackage()
const description = getDefaultDescription() const age = getAge(DIVLO_BIRTHDAY)
const description = getDefaultDescription(age)
return { props: { version, description } } return { props: { version, description } }
} }

View File

@ -6,6 +6,7 @@ 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 { getDefaultDescription } from 'utils/getDefaultDescription'
import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
interface Error500Props extends FooterProps { interface Error500Props extends FooterProps {
description: string description: string
@ -31,7 +32,8 @@ const Error500: NextPage<Error500Props> = (props) => {
export const getStaticProps: GetStaticProps<FooterProps> = async () => { export const getStaticProps: GetStaticProps<FooterProps> = async () => {
const { readPackage } = await import('read-pkg') const { readPackage } = await import('read-pkg')
const { version } = await readPackage() const { version } = await readPackage()
const description = getDefaultDescription() const age = getAge(DIVLO_BIRTHDAY)
const description = getDefaultDescription(age)
return { props: { version, description } } return { props: { version, description } }
} }

View File

@ -13,14 +13,16 @@ 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 { getDefaultDescription } from 'utils/getDefaultDescription'
import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
interface HomeProps extends FooterProps { interface HomeProps extends FooterProps {
description: string description: string
age: number
} }
const Home: NextPage<HomeProps> = (props) => { const Home: NextPage<HomeProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
const { version, description } = props const { version, description, age } = props
return ( return (
<> <>
@ -29,7 +31,7 @@ const Home: NextPage<HomeProps> = (props) => {
<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 /> <Profile age={age} />
<SocialMediaList /> <SocialMediaList />
</Section> </Section>
@ -74,11 +76,12 @@ const Home: NextPage<HomeProps> = (props) => {
) )
} }
export const getStaticProps: GetStaticProps<FooterProps> = 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 description = getDefaultDescription() const age = getAge(DIVLO_BIRTHDAY)
return { props: { version, description } } const description = getDefaultDescription(age)
return { props: { version, description, age } }
} }
export default Home export default Home

View File

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

View File

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