🈂️ no: update font and sync

README.md

@@ -94,16 +94,22 @@ Welcome to the project's folder structure! Below is an organized representation
 ├── 📁 app
 │   ├── 📁 about
 │   ├── 📁 api
+│   ├── 📁 dashboard
 │   ├── 📁 contact
 │   ├── 📁 guestbook
 │   └── 📁 projects
 ├── 📁 components
 │   ├── 📁 about-me
 │   │   └── 📁 qa
 │   ├── 📁 common
-│   ├── 📁 contact
+│   ├── 📁 dashboard
+│   │   └── 📁 ...
+│   ├── 📁 about-me
+│   │   └── 📁 ...
 │   ├── 📁 footer
+│   │   └── 📁 ...
 │   ├── 📁 guestbook
+│   │   └── 📁 ...
 │   ├── 📁 home
 │   │   └── 📁 lanyard
 │   ├── 📁 navbar
@@ -113,6 +119,7 @@ Welcome to the project's folder structure! Below is an organized representation
 │       │   └── 📁 one
 │       └── 📁 (timeline)
 ├── 📁 ui
+│   └── 📁 ...
 ├── 📁 hooks
 │   └── 📁 lanyard
 └── 📁 lib
@@ -128,6 +135,8 @@ Welcome to the project's folder structure! Below is an organized representation
 │   ├── 📄 hi.css
 │   ├── 📄 timeline.css
 │   └── 📄 activity.css
+│   └── 📄 solar.css
+│   └── 📄 equalizer.css
 ```
 
 # Tech Stack

src/app/about/page.tsx

@@ -59,7 +59,7 @@ export default function About() {
           customAnswer={
             <>
               {`I'm also fascinated with `}
-              <span className="font-semibold text-[#2AAAF3]">{`mathematics`}</span>
+              <span className="font-semibold text-blue-700 dark:text-[#3AAAF2]">{`mathematics`}</span>
               {` and wish to make a career out of it someday. Things I love include: j̶a̶p̶a̶n̶, coffee, dark mode, and cats.`}
             </>
           }

src/components/about-me/(pa)/paragraph.tsx

@@ -22,7 +22,7 @@ const Paragraph: React.FC<PAProps> = (props: PAProps) => {
     <div className="flex h-full w-full flex-col items-center justify-center ">
       <div className="flex w-full max-w-3xl flex-col border-b border-slate-700 pb-2 pt-1 dark:border-slate-400">
         {/* Tag */}
-        <p className={`pb-2 font-dosis text-lg font-medium text-black dark:text-white ${tagAlignment} font-medium`}>
+        <p className={`pb-2 font-dosis text-lg text-black dark:text-white ${tagAlignment}`}>
           {props.tag === 'rpg maker games' && (
             <>
               <PiGameControllerThin
@@ -44,7 +44,7 @@ const Paragraph: React.FC<PAProps> = (props: PAProps) => {
 
         {props.customAnswer ? (
           <p
-            className={`pb-2 font-dosis text-[15px] font-normal tracking-wide text-black dark:font-medium  dark:text-slate-50 ${tagAlignment}`}
+            className={`pb-2 font-dosis text-[15px] font-medium tracking-wide text-black dark:font-light  dark:text-slate-50 ${tagAlignment}`}
           >
             {props.customAnswer}
           </p>

src/components/dashboard/discord-status.tsx

@@ -15,9 +15,9 @@ function DiscordStatus() {
   const [isBlurred, setIsBlurred] = useState(true)
 
   const statusTextColor = {
-    online: 'text-green-500 font-pixeloidMono',
-    idle: 'text-orange-400 font-pixeloidMono',
-    dnd: 'text-red-500 font-pixeloidMono',
+    online : 'text-green-500 font-pixeloidMono',
+    idle   : 'text-orange-400 font-pixeloidMono',
+    dnd    : 'text-red-500 font-pixeloidMono',
     offline: 'text-[#5865F2] font-pixeloidMono',
   }[status]
 
@@ -47,7 +47,7 @@ function DiscordStatus() {
         {/* user name */}
         <div className="flex w-full gap-1 text-sm md:text-base lg:text-base">
           {/* <p className="link-underline3 link-underline2 m-0 text-sm text-lightSecondaryColor dark:text-gold">{`@blank_dreams`}</p> */}
-          <p>{`@blank_dreams`}</p>
+          <p className='font-medium'>{`@blank_dreams`}</p>
           <a href={`${metadata.discord}`} target="_blank" rel="noreferrer">
             <HiOutlineExternalLink className="text-xl opacity-50 transition duration-500 hover:opacity-100" />
           </a>

src/components/dashboard/github-calendar.tsx

@@ -28,7 +28,7 @@ const GithubCal = () => {
 
   return (
     <>
-      <div className="col-span-2 mt-4 translate-y-[-1rem] animate-fade-in font-dosis opacity-0 [--animation-delay:1000ms]">
+      <div className="col-span-2 mt-4 translate-y-[-1rem] animate-fade-in font-dosis font-medium opacity-0 [--animation-delay:1000ms]">
         <GitHubCalendar
           username="thienguen"
           colorScheme={theme === 'dark' ? 'dark' : 'light'}

src/components/dashboard/rpg-maker.tsx

@@ -42,7 +42,7 @@ const RPGMaker: React.FC = () => {
       >
         <div className="w-fit">
           <div className="text-left">
-            <h1 className="mx-auto w-auto font-dosis text-lg">Personal favorites </h1>
+            <h1 className="mx-auto w-auto font-dosis text-lg font-medium dark:font-normal">Personal favorites </h1>
           </div>
           <div className="mt-2 flex w-fit gap-4">
             {randomizedItems.map((game: Game, index) => (
@@ -52,8 +52,8 @@ const RPGMaker: React.FC = () => {
                   className="carousal-item absolute z-10 flex cursor-cell flex-col rounded-lg bg-transparent duration-200 group-hover:bg-white/70 dark:group-hover:bg-black/60"
                 >
                   <div className="absolute bottom-3 px-2 text-transparent transition-all duration-200 group-hover:text-black dark:group-hover:text-white">
-                    <h5 className="font-pixeloidMono text-sm leading-5">{game.title}</h5>
-                    <p className="w-[7.5rem] font-pixeloidMono text-xs">{game.genres}</p>
+                    <h5 className="font-dosis text-base font-medium leading-5">{game.title}</h5>
+                    <p className="w-[7.5rem] font-dosis text-sm font-normal">{game.genres}</p>
                   </div>
                 </div>
                 <div className="h-[130px] w-[130px] rounded-lg border-gray-300 shadow-sm shadow-slate-800 transition-transform dark:border-zinc-900 dark:shadow-gray-400 sm:h-[130px] sm:w-[130px]">

src/components/dashboard/stat-age-card.tsx

@@ -25,13 +25,13 @@ const StatAgeCard: React.FC = () => {
 
   return (
     <div className="bg-overlay col-span-2 mt-4 flex  flex-col justify-between gap-2 rounded-sm p-4 opacity-90 shadow-sm shadow-slate-700 dark:shadow-gray-400 md:col-span-1 lg:col-span-1">
-      <div className="group m-0 flex gap-1 text-black dark:text-white">
+      <div className="group m-0 flex gap-1 font-medium text-black dark:text-white">
         {`Experiencing back pain at`}
         <a href={'/about'} target="_blank" rel="noreferrer">
           <HiOutlineExternalLink className="text-xl opacity-50 transition duration-500 group-hover:opacity-100" />
         </a>
       </div>
-      <h3 className="m-0 text-slate-900 dark:text-slate-300">{exactTime}</h3>
+      <h3 className="m-0 font-medium tracking-wide text-slate-900 dark:font-light dark:text-slate-300">{exactTime}</h3>
     </div>
   )
 }

src/components/dashboard/stat-card.tsx

@@ -4,19 +4,19 @@ import { HiOutlineExternalLink } from 'react-icons/hi'
 interface StatCardProps {
   title: string
   value: string | number
-  href : string
+  href: string
 }
 
 const StatCard: React.FC<StatCardProps> = ({ title, value, href }) => {
   return (
     <div className="bg-overlay col-span-2 mt-4 flex  flex-col justify-between gap-2 rounded-sm p-4 opacity-90 shadow-sm shadow-slate-700 dark:shadow-gray-400 md:col-span-1 lg:col-span-1">
-      <div className="group m-0 flex gap-1 text-black dark:text-white">
+      <div className="group m-0 flex gap-1 font-medium text-black dark:text-white">
         {title}
         <a href={href} target="_blank" rel="noreferrer">
           <HiOutlineExternalLink className="text-xl opacity-50 transition duration-500 group-hover:opacity-100" />
         </a>
       </div>
-      <h3 className="m-0 text-slate-900 dark:text-slate-300">{value}</h3>
+      <h3 className="m-0 font-medium text-slate-900 dark:font-light dark:text-slate-300">{value}</h3>
     </div>
   )
 }

src/components/dashboard/techno.tsx

@@ -44,7 +44,7 @@ const techno_icons = [
 const TechnologyIcon = ({ icon }: { icon: (typeof techno_icons)[0] }) => (
   <div className="flex flex-col items-center gap-2">
     {icon.component}
-    <span className="text-center text-sm">{icon.description}</span>
+    <span className="text-center text-sm font-medium">{icon.description}</span>
   </div>
 )
 

src/components/footer/FooterIcons.tsx

@@ -3,25 +3,22 @@
 /* Trash */
 import { useState } from 'react'
 import Link from 'next/link'
-
-/* Hooks */
-import useSound from 'use-sound'
 import { useKBar } from 'kbar'
-
 /* Icons */
 import { Github, Twitter } from 'lucide-react'
-import { BsCommand } from 'react-icons/bs'
 import { /*  AiOutlineHeart, */ AiOutlineInstagram, AiOutlineLinkedin, AiOutlineMail } from 'react-icons/ai'
-
+import { BsCommand } from 'react-icons/bs'
+/* Hooks */
+import useSound from 'use-sound'
 /* UI, sup */
 import { cn } from '@/lib/util/util'
 import { buttonVariants } from '@/components/ui/custom-button'
 import { Tooltip } from '@/components/common/Tooltip'
 import { metadata } from '@/app/api/metadata'
 
 /**
- * All the right hand side of the footer functionality, 
- * @recommended fold code 
+ * All the right hand side of the footer functionality,
+ * @recommended fold code
  * To see the full view
  * Include:
  *   - FooterLove
@@ -39,10 +36,8 @@ import { metadata } from '@/app/api/metadata'
 export function FooterLove() {
   const [ThemeSound] = useSound('/sounds/switch-on.mp3', { volume: 1 })
   return (
-    <span className="sm:balanced mx-2 text-base text-slate-700 dark:text-slate-300">
-      <span className='opacity-95 dark:opacity-70'>
-        {`© 2023 `}
-      </span>
+    <span className="sm:balanced mx-2 text-sm text-slate-700 dark:text-slate-300">
+      <span className="opacity-95 dark:opacity-70">{`© 2023 `}</span>
 
       <Link
         onClick={() => {
@@ -52,14 +47,12 @@ export function FooterLove() {
         target="_blank"
       >
         <Tooltip text="find me here">
-          <span className="text-slate-950 opacity-100 transition-colors duration-200 ease-in-out hover:text-pink-500 dark:text-white dark:hover:text-pink-500">
+          <span className="font-medium text-slate-950 opacity-100 transition-colors duration-200 ease-in-out hover:text-pink-500 dark:text-white dark:hover:text-pink-500">
             Thien Nguyen
           </span>
         </Tooltip>
       </Link>
-      <span className='opacity-95 dark:opacity-70'>
-        {` • from a boy who was never enough.`}
-      </span>
+      <span className="opacity-95 dark:opacity-70">{` • from a boy who was never enough.`}</span>
     </span>
   )
 }

src/components/purojekuto/(timeline)/LeftTimeline.tsx

@@ -13,19 +13,19 @@ const LeftTimeline: React.FC<SubTimelineProps> = ({
   secondaryColor,
 }) => {
   return (
-    <div className="flex flex-none sm:flex-row-reverse md:contents ">
+    <div className="flex flex-none sm:flex-row-reverse md:contents">
       {/* Container box */}
       <div className="col-start-1 col-end-5 my-4 ml-0 min-w-[20.5rem] max-w-[20.5rem] rounded-xl border border-[#c8c0b7] p-4 font-dosis shadow-2xl transition-transform hover:translate-y-[3px] dark:border-slate-900 sm:ml-14">
         <a className="cursor-pointer" href={url} rel="noreferrer" target="_blank">
-          <div className="mb-1 flex justify-between font-dosis text-lg text-black dark:font-light dark:text-white">
+          <div className="mb-1 flex justify-between font-dosis text-lg text-black dark:text-white">
             {' '}
             <span
               style={{
-                backgroundImage   : `linear-gradient(135deg, ${primaryColor ?? ''} 0%, ${secondaryColor ?? ''} 100%)`,
-                backgroundSize    : '100% 0.075em',
-                backgroundRepeat  : 'no-repeat',
+                backgroundImage: `linear-gradient(135deg, ${primaryColor ?? ''} 0%, ${secondaryColor ?? ''} 100%)`,
+                backgroundSize: '100% 0.075em',
+                backgroundRepeat: 'no-repeat',
                 backgroundPosition: '0 92%',
-                transition        : 'background-size 0.25s ease-in, opacity 0.25s ease-in',
+                transition: 'background-size 0.25s ease-in, opacity 0.25s ease-in',
               }}
             >
               {title}
@@ -37,7 +37,7 @@ const LeftTimeline: React.FC<SubTimelineProps> = ({
             </div>
           </div>
         </a>
-        <p className="text-sm leading-tight text-black dark:text-white">{description}</p>
+        <p className="text-sm font-light leading-tight text-black dark:text-white">{description}</p>
         <p className="mt-1 font-dosis text-sm leading-tight text-black dark:text-white">{since}</p>
       </div>
 

src/components/purojekuto/(timeline)/RightTimeline.tsx

@@ -34,15 +34,15 @@ const RightTimeline: React.FC<SubTimelineProps> = ({
 
       {/* Container box */}
       <div className="col-start-6 col-end-10 my-4 mr-0 min-w-[20.5rem]  rounded-xl border border-[#c8c0b7] p-4  font-dosis shadow-2xl  transition-transform hover:translate-y-[3px] dark:border-slate-900 sm:mr-8">
-        <a className="cursor-pointer" href={url} rel="noreferrer">
-          <div className="mb-1 flex justify-between font-dosis text-lg text-black dark:font-light dark:text-white">
+        <a className="cursor-pointer" href={url} rel="noreferrer" target='_blank'>
+          <div className="mb-1 flex justify-between font-dosis text-lg text-black dark:text-white">
             <span
               style={{
-                backgroundImage   : `linear-gradient(135deg, ${primaryColor ?? ''} 0%, ${secondaryColor ?? ''} 100%)`,
-                backgroundSize    : '100% 0.075em',
-                backgroundRepeat  : 'no-repeat',
+                backgroundImage: `linear-gradient(135deg, ${primaryColor ?? ''} 0%, ${secondaryColor ?? ''} 100%)`,
+                backgroundSize: '100% 0.075em',
+                backgroundRepeat: 'no-repeat',
                 backgroundPosition: '0 92%',
-                transition        : 'background-size 0.25s ease-in, opacity 0.25s ease-in',
+                transition: 'background-size 0.25s ease-in, opacity 0.25s ease-in',
               }}
             >
               {title}
@@ -54,7 +54,7 @@ const RightTimeline: React.FC<SubTimelineProps> = ({
             </div>
           </div>
         </a>
-        <p className="text-sm leading-tight text-black dark:text-white">{description}</p>
+        <p className="text-sm font-light leading-tight text-black dark:text-white">{description}</p>
         <p className="mt-1 font-dosis  text-xs leading-tight text-black dark:text-white">{since}</p>
       </div>
     </div>

src/styles/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300&family=Sacramento&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500&family=Sacramento&display=swap');
 
 @font-face {
   font-family: Metropolis;