Add links

README.md

@@ -12,3 +12,6 @@
    ```bash
    npm start
    ```
+
+https://simpleicons.org/
+https://techicons.dev/

package.json

@@ -17,12 +17,12 @@
     "front-matter": "4.0.2",
     "marked": "12.0.2",
     "next": "14.2.3",
-    "next-intl": "3.11.3",
+    "next-intl": "3.12.2",
     "prismjs": "1.29.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "reflect-metadata": "0.2.2",
-    "sass": "1.75.0",
+    "sass": "1.76.0",
     "tsyringe": "4.8.0"
   },
   "devDependencies": {
@@ -33,7 +33,7 @@
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.1.0",
+    "eslint-config-next": "14.2.3",
     "jest": "29.7.0",
     "prettier": "3.2.5",
     "ts-mockito": "2.6.1",

src/core/components/footer/footer.tsx

@@ -15,7 +15,6 @@ export const Footer: FC = () => {
   const { locale, locales, route, push } = useRouter()
 
   const currentYear = Datetime.fromNow().year
-  const coverage = 90.95
 
   return (
     <footer className={cx('footer')}>
@@ -31,16 +30,6 @@ export const Footer: FC = () => {
         <section className={cx('info')}>
           <small className={cx('copy')}>
             {t('footer.madeWith', { currentYear })}
-            <Link to="https://www.typescriptlang.org/">TypeScript</Link>,
-            <Link to="https://wikipedia.org/wiki/SOLID">SOLID</Link> {t('footer.and')}
-            <Link to="https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html">
-              Clean Architecture
-            </Link>
-            .
-          </small>
-          <small className={cx('coverage')}>
-            {t('footer.coverage')}
-            <span className={cx('coverage-percentage')}></span> {coverage}%
           </small>
         </section>
       </div>

src/core/i18n/en.json

@@ -44,6 +44,16 @@
     "title": "About me",
     "description": "I’m a self-learning, creative, enthusiast and passionate person. I have a mixed profile, divided between my love for programming, software architecture and design. I truly care about sharing knowledge with my peers, that being as a speaker in different technological events, as a teacher or throughout my social networks.\n\nI believe that Software should be robust yet flexible, and the way to achieve it is to –regardless of the framework– create the right abstractions and apply architectural patterns. Testing is very important to me, the Software we build should be reliable in order to provide the maximum value."
   },
+  "links": {
+    "title": "Links",
+    "github": "Github",
+    "instagram": "Instagram",
+    "twitter": "Twitter",
+    "linkedin": "LinkedIn",
+    "email": "Email",
+    "rss": "RSS",
+    "coliversClub": "Colivers Club"
+  },
   "talks": {
     "title": "Talks",
     "talkTitle": "Title",
@@ -62,8 +72,6 @@
     "talkDemo": "Demo"
   },
   "footer": {
-    "coverage": "Coverage of ",
-    "madeWith": "© {currentYear} – Made with ",
-    "and": "and "
+    "madeWith": "© {currentYear} – Made with love"
   }
 }

src/core/i18n/es.json

@@ -44,6 +44,15 @@
     "title": "Sobre mí",
     "description": "Soy una persona autodidacta, creativa, entusiasta y apasionada. Tengo un perfil mixto, dividido entre mi amor por la programación, la arquitectura de software y el diseño. Me preocupo realmente por compartir conocimientos con mis compañeros, ya sea como ponente en diferentes eventos tecnológicos, como profesor o a través de mis redes sociales.\n\nCreo que el software debe ser robusto pero flexible, y la forma de lograrlo es crear las abstracciones adecuadas y aplicar patrones arquitectónicos, independientemente del marco de trabajo utilizado. Las pruebas son muy importantes para mí, el software que construimos debe ser confiable para proporcionar el máximo valor."
   },
+  "links": {
+    "title": "Links",
+    "github": "Github",
+    "twitter": "Twitter",
+    "linkedin": "LinkedIn",
+    "email": "Email",
+    "rss": "RSS",
+    "coliversClub": "Colivers Club"
+  },
   "talks": {
     "title": "Charlas",
     "talkTitle": "Título",
@@ -62,8 +71,6 @@
     "talkDemo": "Demo"
   },
   "footer": {
-    "coverage": "Cobertura del ",
-    "madeWith": "© {currentYear} – Hecho con ",
-    "and": "y "
+    "madeWith": "© {currentYear} – Hecho con amor"
   }
 }

src/features/links/delivery/links.module.scss

@@ -0,0 +1,5 @@
+.link {
+  display: flex;
+  gap: var(--s);
+  align-items: center;
+}

src/features/links/delivery/links.page.tsx

@@ -0,0 +1,60 @@
+import type { FC } from 'react'
+import { useTranslations } from 'next-intl'
+import { Page } from '../../../core/components/page/page'
+import { Link } from '../../../core/components/link/link'
+import Image from 'next/image'
+import instagram from '../../../../public/assets/icons/instagram.svg'
+import x from '../../../../public/assets/icons/x.svg'
+import youtube from '../../../../public/assets/icons/youtube.svg'
+import github from '../../../../public/assets/icons/github.svg'
+import tiktok from '../../../../public/assets/icons/tiktok.svg'
+import linkedin from '../../../../public/assets/icons/linkedin.svg'
+import email from '../../../../public/assets/icons/email.svg'
+import styles from './links.module.scss'
+import { bind } from '../../../core/utils/bind'
+
+const cx = bind(styles)
+
+const links = [{
+  title: 'Instagram',
+  url: 'https://instagram.com/cesalberca',
+  icon: instagram
+},{
+  title: 'X',
+  url: 'https://x.com/cesalberca',
+  icon: x
+},{
+  title: 'TikTok',
+  url: 'https://www.tiktok.com/@cesalberca',
+  icon: tiktok
+},{
+  title: 'Youtube',
+  url: 'https://www.youtube.com/@cesalberca',
+  icon: youtube
+},{
+  title: 'LinkedIn',
+  url: 'https://www.linkedin.com/in/cesalberca',
+  icon: linkedin
+},{
+  title: 'Github',
+  url: 'https://github.com/cesalberca',
+  icon: github
+},
+]
+
+export const LinksPage: FC = () => {
+  const t = useTranslations()
+  return (
+    <Page>
+      <h1>{t('links.title')}</h1>
+      <section className={cx('links')}>{links.map(x => (
+        <div className={cx('link')}><Image src={x.icon} alt={x.title} height={20} />
+          <Link type={'navigation'} to={x.url}>{x.title}</Link></div>
+      ))}
+        <div className={cx('link')}><Image src={email} alt={'Email'} height={20} />
+          <Link type={'navigation'} to={'mailto:cesar@cesalberca.com'}>Email</Link></div>
+      </section>
+
+    </Page>
+  )
+}

src/pages/_app.tsx

@@ -48,6 +48,7 @@ const App = ({ Component, pageProps }: AppProps<{ messages: AbstractIntlMessages
       <ThemeProvider theme={preferences.theme} setTheme={theme => setNewTheme(theme)}>
         <IntlProvider
           locale={router.locale!}
+          timeZone={'Europe/Madrid'}
           defaultTranslationValues={{
             strong: children => <strong>{children}</strong>,
           }}

src/pages/links.tsx

@@ -0,0 +1,16 @@
+import type { GetStaticProps, NextPage } from 'next'
+import { LinksPage } from '../features/links/delivery/links.page'
+
+const Index: NextPage = () => {
+  return <LinksPage />
+}
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  return {
+    props: {
+      messages: (await import(`../core/i18n/${locale}.json`)).default,
+    },
+  }
+}
+
+export default Index