Merge pull request #44 from rxtsel/technologies

Technologies

astro.config.mjs

@@ -1,9 +1,10 @@
-import { defineConfig } from 'astro/config'
+import mdx from '@astrojs/mdx'
+import preact from '@astrojs/preact'
 import sitemap from '@astrojs/sitemap'
 import tailwind from '@astrojs/tailwind'
 import expressiveCode from 'astro-expressive-code'
-import mdx from '@astrojs/mdx'
 import robotsTxt from 'astro-robots-txt'
+import { defineConfig } from 'astro/config'
 
 // Mdx plugins
 import rehypeExternalLinks from 'rehype-external-links'
@@ -45,7 +46,8 @@ export default defineConfig({
     }),
     mdx({
       rehypePlugins: [[rehypeExternalLinks, externalLinksOptions]]
-    })
+    }),
+    preact()
   ],
   markdown: {
     rehypePlugins: [[rehypeExternalLinks, externalLinksOptions]]
@@ -57,3 +59,4 @@ export default defineConfig({
     }
   }
 })
+

package.json

@@ -14,13 +14,16 @@
   },
   "dependencies": {
     "@astrojs/mdx": "^2.1.0",
+    "@astrojs/preact": "^3.5.3",
     "@astrojs/rss": "^4.0.4",
     "@astrojs/tailwind": "^5.1.0",
     "@vercel/og": "^0.6.2",
     "astro": "4.2.0",
     "astro-expressive-code": "^0.32.2",
     "astro-robots-txt": "^1.0.0",
+    "caniuse-lite": "^1.0.30001669",
     "date-fns": "^3.2.0",
+    "preact": "^10.24.3",
     "rehype-external-links": "^3.0.0",
     "tailwindcss": "^3.4.0"
   },

src/components/AboutMe.astro

@@ -14,17 +14,20 @@ const t = useTranslations(lang)
     </h3>
     <p class='text-pretty'>
       {t('about.p2')}
+      {' '}
+      <strong class='font-normal text-white'>{t('about.countries')}</strong>
     </p>
     <p class='text-pretty my-3'>
       {t('about.p3')}
     </p>
     <p class='text-pretty'>
       {t('about.p4')}
       <a
-        href={SOCIALS.twitter}
+        href={SOCIALS.x}
+        target='_blank'
         aria-label='twitter profile'
-        class='text-cWhite hover:text-cBlue transition-colors duration-150 ease-in'
-        >twitter</a
+        class='text-cWhite hover:text-cBlue transition-colors duration-150 ease-in decoration-neutral-500 decoration-dotted underline-offset-[5px] underline'
+        >x.com</a
       >
       {t('about.p5')}
     </p>

src/components/Contact.astro

@@ -1,9 +1,7 @@
 ---
 import { SOCIALS } from '@/constants/routes'
 import Section from './Section.astro'
-import Linkedin from '@/icons/Linkedin.astro'
-import Mail from '@/icons/Mail.astro'
-import Twitter from '@/icons/Twitter.astro'
+import { Icon } from '@/icons'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 
 const lang = getLangFromUrl(Astro.url)
@@ -18,7 +16,7 @@ const t = useTranslations(lang)
       aria-label='Email'
     >
       <div class='size-14 text-[#e94134]'>
-        <Mail />
+        <Icon.mail />
       </div>
       <h2 class='text-cWhite'>Email</h2>
     </a>
@@ -30,21 +28,21 @@ const t = useTranslations(lang)
       target='_blank'
     >
       <div class='size-14 text-[#0077B5]'>
-        <Linkedin />
+        <Icon.linkedin />
       </div>
       <h2 class='text-cWhite'>Linkedin</h2>
     </a>
 
     <a
       class='flex max-w-xs flex-col items-center space-y-2 rounded-lg border border-neutral-800 p-4 transition-all duration-150 ease-in hover:bg-neutral-800/40'
-      href={SOCIALS.twitter}
+      href={SOCIALS.x}
       aria-label='Twitter'
       target='_blank'
     >
       <div class='size-14 text-cWhite'>
-        <Twitter />
+        <Icon.twitter />
       </div>
-      <h2 class='text-cWhite'>Twitter</h2>
+      <h2 class='text-cWhite'>X</h2>
     </a>
   </nav>
 </Section>

src/components/ExperienceItem.astro

@@ -2,7 +2,7 @@
 import { calculateDuration } from '@/utils'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 import type { TWorkEntry } from '@/types'
-import ArrowTr from '@/icons/ArrowTr.astro'
+import { Icon } from '@/icons'
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
@@ -70,7 +70,7 @@ const duration = calculateDuration({
       >
         {company}
         <span class='size-3 inline-block text-cAccent transition-all duration-150 ease-in group-hover:-translate-y-[1px] group-hover:translate-x-[1px] group-hover:text-cBlue'>
-          <ArrowTr />
+          <Icon.arrowtr />
         </span>
       </a>
     ) : (

src/components/Footer.astro

@@ -10,7 +10,7 @@ const t = useTranslations(lang)
     © 2022 - {new Date().getFullYear()}. {t('footer.p1')} ♥
     {t('single.by')}
     <a
-      class='hover:text-cBlue transition-colors duration-150 ease-in'
+      class='hover:text-cBlue transition-colors duration-150 ease-in decoration-neutral-500 decoration-dotted underline-offset-[5px] underline'
       href='https://twitter.com/rxtsel'
       target='_blank'
     >

src/components/Header.astro

@@ -26,6 +26,8 @@ const ROUTES = {
     name: 'Blog'
   }
 }
+
+export type RouteNames = keyof typeof ROUTES
 ---
 
 <header

src/components/NavDesktop.astro

@@ -1,16 +1,17 @@
 ---
 import { LANGUAGES } from '@/i18n/utils'
 import { SOCIALS } from '@/constants/routes'
-import Logo from '@/icons/Logo.astro'
-import TranslateIcon from '@/icons/Translate.astro'
-import LinkedinIcon from '@/icons/Linkedin.astro'
-import TwitterIcon from '@/icons/Twitter.astro'
-import GithubIcon from '@/icons/Github.astro'
+import { Icon } from '@/icons/index'
 import {
   getLangFromUrl,
   useTranslations,
   getLocalizedPathname
 } from '@/i18n/utils'
+import type { RouteNames } from './Header.astro'
+
+export interface Props {
+  routes: Record<RouteNames, { path: string; name: string }>
+}
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
@@ -26,7 +27,7 @@ const { routes } = Astro.props
     class='h-16 w-16 flex-grow max-w-36'
     aria-label='logo of the website rxtel.dev'
   >
-    <Logo />
+    <Icon.logo class='h-full' />
   </a>
 
   <ul class='text-cWhite flex space-x-4 uppercase'>
@@ -51,7 +52,7 @@ const { routes } = Astro.props
         class='lang-desktop hover:text-cBlue order-1 text-cWhite transition-colors duration-150 ease-in size-6 cursor-pointer'
       >
         <input type='checkbox' class='check-lang-desktop' />
-        <TranslateIcon />
+        <Icon.translate />
       </label>
 
       <ul
@@ -81,19 +82,19 @@ const { routes } = Astro.props
 
     <li class='w-6 h-6'>
       <a
-        href={SOCIALS.twitter}
+        href={SOCIALS.x}
         target='_blank'
         aria-label='Twitter'
         class='text-cWhite hover:text-cBlue transition-colors duration-150 ease-in'
-        ><TwitterIcon /></a
+        ><Icon.twitter /></a
       >
     </li>
     <li class='w-6 h-6'>
       <a
         href={SOCIALS.linkedin}
         target='_blank'
         class='text-cWhite hover:text-cBlue transition-colors duration-150 ease-in'
-        aria-label='Linkedin'><LinkedinIcon /></a
+        aria-label='Linkedin'><Icon.linkedin /></a
       >
     </li>
     <li class='w-6 h-6'>
@@ -102,7 +103,7 @@ const { routes } = Astro.props
         target='_blank'
         aria-label='Github'
         class='text-cWhite hover:text-cBlue transition-colors duration-150 ease-in'
-        ><GithubIcon /></a
+        ><Icon.github /></a
       >
     </li>
   </ul>
@@ -143,12 +144,13 @@ const { routes } = Astro.props
   ) as HTMLInputElement
 
   const handleClickOutside = (e: MouseEvent) => {
-    if (
-      !e.target.closest('.lang-btn-desktop') &&
-      !e.target.closest('.lang-desktop')
-    ) {
+    const target = e.target as HTMLElement
+    // If the click is not inside the popovers, close the popover
+    if (target && !$langBtn.contains(target)) {
       $langCheckbox.checked = false
-      document.body.removeEventListener('click', handleClickOutside)
+      document.body.removeEventListener('click', (event) =>
+        handleClickOutside(event)
+      )
     }
   }
 

src/components/NavIcon.astro

@@ -1,21 +1,18 @@
 ---
-import type { TIconRoutes } from '@/constants/routes'
-import HomeIcon from '@/icons/Home.astro'
-import UserIcon from '@/icons/User.astro'
-import PortfolioIcon from '@/icons/Portfolio.astro'
-import BlogIcon from '@/icons/Blog.astro'
+import { Icon } from '@/icons'
+import type { RouteNames } from './Header.astro'
 
 interface Props {
-  name: TIconRoutes
+  name: RouteNames | string
 }
 
 const { name } = Astro.props
 ---
 
-{name === 'home' && <HomeIcon />}
+{name === 'home' && <Icon.home />}
 
-{name === 'aboutMe' && <UserIcon />}
+{name === 'aboutMe' && <Icon.user />}
 
-{name === 'portfolio' && <PortfolioIcon />}
+{name === 'portfolio' && <Icon.portfolio />}
 
-{name === 'blog' && <BlogIcon />}
+{name === 'blog' && <Icon.blog />}

src/components/NavMobile.astro

@@ -1,8 +1,12 @@
 ---
 import { LANGUAGES, getLocalizedPathname, getLangFromUrl } from '@/i18n/utils'
 import NavIcon from '@/components/NavIcon.astro'
-import Logo from '@/icons/Logo.astro'
-import TranslateIcon from '@/icons/Translate.astro'
+import { Icon } from '@/icons'
+import type { RouteNames } from './Header.astro'
+
+export interface Props {
+  routes: Record<RouteNames, { path: string; name: string }>
+}
 
 const { pathname } = Astro.url
 const lang = getLangFromUrl(Astro.url)
@@ -16,7 +20,7 @@ const { routes } = Astro.props
     class='h-10 w-10 flex-grow max-w-16 order-2'
     aria-label='logo of the website rxtel.dev'
   >
-    <Logo />
+    <Icon.logo class='h-full mx-auto' />
   </a>
 
   <ul
@@ -89,7 +93,7 @@ const { routes } = Astro.props
     class='lang order-1 text-cWhite transition-colors duration-150 ease-in size-6 cursor-pointer'
   >
     <input type='checkbox' class='check-lang' />
-    <TranslateIcon />
+    <Icon.translate />
   </label>
 </nav>
 

src/components/Popover.astro

@@ -1,6 +1,5 @@
 ---
-import Users from '@/icons/Users.astro'
-import ArrowTr from '@/icons/ArrowTr.astro'
+import { Icon } from '@/icons'
 import Tooltip from '@/components/Tooltip.astro'
 import type { TTeam } from '@/types'
 
@@ -21,7 +20,7 @@ const titleLabel =
     aria-label='Team members'
   >
     <input type='checkbox' class='check-popover-team' />
-    <Users />
+    <Icon.users />
     <Tooltip content={titleLabel} />
   </label>
 
@@ -41,7 +40,7 @@ const titleLabel =
           >
             @{username}
             <div class='size-3 inline-block text-cAccent transition-all duration-150 ease-in group-hover:-translate-y-[1px] group-hover:translate-x-[1px] group-hover:text-cBlue'>
-              <ArrowTr />
+              <Icon.arrowtr width='100%' height='100%' />
             </div>
             <Tooltip content={role} />
           </a>

src/components/ProjectCard.astro

@@ -1,8 +1,6 @@
 ---
 import type { iProject } from '@/types'
-import ArrowTr from '@/icons/ArrowTr.astro'
-import Github from '@/icons/Github.astro'
-import Lock from '@/icons/Lock.astro'
+import { Icon } from '@/icons'
 import Popover from '@/components/Popover.astro'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 import Tooltip from '@/components/Tooltip.astro'
@@ -40,10 +38,10 @@ const descriptionT = lang === 'en' ? descriptionEn : description
           rel='nofollow'
           class='group text-xl font-medium flex items-center gap-[6px] transition-colors duration-150 ease-in hover:text-cBlue'
         >
-          {title}
+          {titleT || title}
 
           <span class='size-3 inline-block text-cAccent transition-all duration-150 ease-in group-hover:-translate-y-[1px] group-hover:translate-x-[1px] group-hover:text-cBlue'>
-            <ArrowTr />
+            <Icon.arrowtr />
           </span>
         </a>
       ) : (
@@ -66,13 +64,13 @@ const descriptionT = lang === 'en' ? descriptionEn : description
             class='order-2'
           >
             <div class='text-cWhite group relative transition-colors duration-150 ease-in hover:text-cBlue size-6'>
-              <Github />
+              <Icon.github />
               <Tooltip content={t('single.repository')} />
             </div>
           </a>
         ) : (
           <div class='order-2 relative group text-neutral-600 size-6'>
-            <Lock />
+            <Icon.lock />
             <Tooltip content={t('messages.ghPrivate')} />
           </div>
         )