{pageTitle}

import FeedIcon from '@assets/images/icon-feed.svg'; import { ButtonLink } from '@components/Buttons'; import { ContactIcon } from '@components/Icons'; import Layout from '@components/Layouts/Layout'; import HomePageContent from '@content/pages/homepage.mdx'; import styles from '@styles/pages/Home.module.scss'; import { NextPageWithLayout } from '@ts/types/app'; import { settings } from '@utils/config'; import { loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import type { ReactElement } from 'react'; import { useIntl } from 'react-intl'; import { Graph, WebPage } from 'schema-dts'; const Home: NextPageWithLayout = () => { const intl = useIntl(); const CodingLinks = () => { return (

{intl.formatMessage({ defaultMessage: 'Web development', description: 'HomePage: link to web development thematic', })}
{intl.formatMessage({ defaultMessage: 'Projects', description: 'HomePage: link to projects', })}

); }; const ColdarkRepos = () => { return (

Github
Gitlab

); }; const LibreLinks = () => { return (

{intl.formatMessage({ defaultMessage: 'Free', description: 'HomePage: link to free thematic', })}
{intl.formatMessage({ defaultMessage: 'Linux', description: 'HomePage: link to Linux thematic', })}

); }; const MoreLinks = () => { return (

{intl.formatMessage({ defaultMessage: 'Contact me', description: 'HomePage: contact button text', })}
{intl.formatMessage({ defaultMessage: 'Subscribe', description: 'HomePage: RSS feed subscription text', })}

); }; const components = { CodingLinks: CodingLinks, ColdarkRepos: ColdarkRepos, LibreLinks: LibreLinks, MoreLinks: MoreLinks, }; const pageTitle = intl.formatMessage( { defaultMessage: '{websiteName} | Front-end developer: WordPress/React', description: 'HomePage: SEO - Page title', }, { websiteName: settings.name } ); const pageDescription = intl.formatMessage( { defaultMessage: '{websiteName} is a front-end developer located in France. He codes and he writes mostly about web development and open-source.', description: 'HomePage: SEO - Meta description', }, { websiteName: settings.name } ); const webpageSchema: WebPage = { '@id': `${settings.url}/#home`, '@type': 'WebPage', breadcrumb: { '@id': `${settings.url}/#breadcrumb` }, name: pageTitle, description: pageDescription, author: { '@id': `${settings.url}/#branding` }, creator: { '@id': `${settings.url}/#branding` }, editor: { '@id': `${settings.url}/#branding` }, inLanguage: settings.locales.defaultLocale, license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr', reviewedBy: { '@id': `${settings.url}/#branding` }, url: `${settings.url}`, }; const schemaJsonLd: Graph = { '@context': 'https://schema.org', '@graph': [webpageSchema], }; return ( <> {pageTitle}

); }; Home.getLayout = function getLay

@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";

.section {
  @include mix.media("screen") {
    @include mix.dimensions("md") {
      display: grid;
      grid-template-columns: fun.convert-px(150) minmax(0, 1fr);
      align-items: first baseline;
      margin-left: fun.convert-px(-150);
    }
  }
}

.list {
  @extend %reset-ordered-list;

  .item {
    margin-bottom: var(--spacing-md);
    border-bottom: fun.convert-px(1) solid var(--color-border);
  }
}

.year {
  @include mix.media("screen") {
    @include mix.dimensions("md") {
      grid-column: 1;
      justify-self: end;
      padding-right: var(--spacing-lg);
      position: sticky;
      top: var(--spacing-xs);
    }

    @include mix.dimensions("lg") {
      padding-right: var(--spacing-xl);
    }
  }
}