feat: general improvements

Author: vshakitskiy

src/app.tsx

@@ -8,6 +8,7 @@ import {
   Projects,
   Technologies,
 } from "@/components/ui"
+import { glitchPrimary, glitchSecondary } from "@/data/colors"
 
 export const App = () => {
   // ? On load animation
@@ -17,17 +18,19 @@ export const App = () => {
       <LetterGlitch
         centerVignette={true}
         className="fixed top-0"
-        glitchColors={["#3a2813", "#6c4a24"]}
+        glitchColors={[glitchPrimary, glitchSecondary]}
         glitchSpeed={60}
         outerVignette={true}
         smooth={true}
       />
       <div className="relative z-1 flex h-full flex-col">
-        <div className="fixed z-2 w-full border-2 border-dashed border-[#6c4a24] bg-[#3a2813]" />
+        <div className="fixed z-2 w-full border-2 border-dashed border-glitch-primary bg-glitch-secondary" />
         <div className="mx-auto mt-4 max-w-screen-max-px flex-1 px-3 sm:px-6">
           <Header />
           <Hero />
           <About />
+          {/* TODO: github activity */}
+          <div />
           <Technologies />
           <Projects />
           <Contact />

src/components/ui/About.tsx

@@ -1,19 +1,57 @@
 import { Age } from "./dynamics/Age"
-import { TaggedText } from "./TaggedText"
 
-import { useText } from "@/hooks"
+import { useLanguage } from "@/hooks"
+
+const translation = {
+  ru: {
+    about:
+      "y/o, студент и разработчик из России. Вовлечен в изучении новых технологий и разработке масштабируемых систем. Варюсь в сфере Backend и сетевых технологий. Обожаю",
+    status: [
+      "Вношу вклад в open source и разрабатываю свои пет-проекты. Например,",
+      "(書き留める - to write down, to make a note of)",
+    ],
+  },
+  en: {
+    about:
+      "y/o, student & developer from Russia. I'm passionate about learning new things and creating scalable systems. Mostly Backend & Networking. In love with",
+    status: [
+      "Contributing to open source and developing my own pet projects. For example,",
+      "(書き留める - to write down, to make a note of)",
+    ],
+  },
+}
 
 export const About = () => {
-  const { about } = useText()
+  const { language } = useLanguage()
 
   return (
     <section className="mt-8">
       <p className="base-text">
-        <Age />{" "}
-        <TaggedText inserts={about.inserts.about} text={about.text.about} />
+        <Age /> {translation[language].about}{" "}
+        <span className="text-primary">
+          <a
+            href="https://rateyourmusic.com/list/Hyp3r10n/_dariacore-hyperflip/"
+            rel="noreferrer"
+            target="_blank"
+          >
+            #hyperflip
+          </a>{" "}
+          <a href="https://gleam.run" rel="noreferrer" target="_blank">
+            #gleam
+          </a>
+        </span>
       </p>
       <p className="base-text mt-4">
-        <TaggedText inserts={about.inserts.current} text={about.text.current} />
+        {translation[language].status[0]}{" "}
+        <a
+          className="text-primary underline"
+          href="https://github.com/kakitomeru/kakitomeru"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Kakitomeru
+        </a>{" "}
+        {translation[language].status[1]}
       </p>
     </section>
   )

src/components/ui/Contact.tsx

@@ -1,15 +1,32 @@
 import { discordId, email, telegramId } from "@/data/config"
-import { useLanyard, useText } from "@/hooks"
+import { useLanguage, useLanyard } from "@/hooks"
+
+const translation = {
+  ru: {
+    title: "Контакты",
+    text: [
+      "Есть вопрос, или хотите связаться? Не стесняйтесь, пишите мне в",
+      "или",
+    ],
+  },
+  en: {
+    title: "Contact me",
+    text: [
+      "Have an inquiry, or want to connect? Feel free to get in touch via",
+      "or",
+    ],
+  },
+}
 
 export const Contact = () => {
   const { data } = useLanyard({ userId: discordId })
-  const { contact } = useText()
+  const { language } = useLanguage()
 
   return (
     <section className="mt-8">
-      <h2 className="text-2xl font-bold">{contact.title}</h2>
+      <h2 className="text-2xl font-bold">{translation[language].title}</h2>
       <p className="base-text mt-4">
-        {contact.text}{" "}
+        {translation[language].text[0]}{" "}
         <a
           className="text-primary underline"
           href={`https://discord.com/users/${discordId}`}
@@ -27,7 +44,7 @@ export const Contact = () => {
         >
           telegram
         </a>
-        , {contact.or}{" "}
+        , {translation[language].text[1]}{" "}
         <a
           className="text-primary underline"
           href={`mailto:${email}`}
@@ -38,22 +55,6 @@ export const Contact = () => {
         </a>
         .
       </p>
-      {amISleeping() ? (
-        <p className="base-text mt-4 text-secondary">{contact.asleep}</p>
-      ) : (
-        <p className="base-text mt-4 text-primary">{contact.awake}</p>
-      )}
     </section>
   )
 }
-
-const amISleeping = () => {
-  const moscowTime = new Date().toLocaleString("en-US", {
-    timeZone: "Europe/Moscow",
-  })
-
-  const moscowDate = new Date(moscowTime)
-  const hours = moscowDate.getHours()
-
-  return hours < 9 || hours >= 21
-}

src/components/ui/Footer.tsx

@@ -10,7 +10,7 @@ export const Footer = () => {
           ©/{new Date().getFullYear()}
         </p>
         <p className="base-text text-secondary">
-          {success ? data!.flag : "..."}
+          wskiy.de | {success ? data!.flag : "🏴‍☠️"}
         </p>
       </div>
     </footer>

src/components/ui/Projects.tsx

@@ -1,54 +1,86 @@
-import { TaggedText } from "./TaggedText"
-
+import sakuraImg from "@/assets/sakura.png"
+import wwwImg from "@/assets/www.png"
 import { GithubIcon } from "@/components/svgs"
-import { useText } from "@/hooks"
+import { primary, sakura } from "@/data/colors"
+import { useLanguage } from "@/hooks"
+
+const translation = {
+  ru: {
+    title: "Проекты",
+  },
+  en: {
+    title: "Projects",
+  },
+}
+
+const projects = [
+  {
+    name: "Sakura🌸",
+    theme: sakura,
+    image: sakuraImg,
+    github: "sakura",
+    text: {
+      ru: 'Sakura - это HTTP фреймворк, разработанный без зависимостей и поддержкой валидации zod, которая позволяет создать сервер, "растущий органически", черпая вдохновение из грациозного изящества дерева сакуры.',
+      en: "Sakura is a HTTP framework built without dependencies and with zod validation support, which allows you to create a server that grows organically, drawing inspiration from the graceful elegance of a cherry blossom tree.",
+    },
+  },
+  {
+    name: "www🗺️",
+    theme: primary,
+    image: wwwImg,
+    github: "www",
+    text: {
+      ru: "Уютненькое портфолио с капелькой креатива, разработанное с использованием React и Tailwind CSS. Оно содержит информацию обо мне, мои навыки и проекты.",
+      en: "A cozy portfolio with a touch of creativity, developed using React and Tailwind CSS. It contains information about me, my skills, and projects.",
+    },
+  },
+]
 
 export const Projects = () => {
-  const { projects } = useText()
+  const { language } = useLanguage()
 
   return (
     <section className="mt-8">
-      <h2 className="text-2xl font-bold md:text-3xl">{projects.title}</h2>
-      <p className="base-text mt-4">{projects.text}</p>
+      <h2 className="text-2xl font-bold md:text-3xl">
+        {translation[language].title}
+      </h2>
       <div className="mt-4 flex flex-col flex-wrap gap-2 md:flex-row">
-        {projects.list.map(({ data, inserts }) => (
+        {projects.map((project) => (
           <div
-            key={data.name}
+            key={project.name}
             className="flex flex-col rounded-md p-2 sm:p-4 md:flex-1/3 xl:flex-1/4"
             style={{
-              backgroundColor: `${data.theme}25`,
+              backgroundColor: `${project.theme}25`,
             }}
           >
             <div className="flex items-center justify-between">
               <h2
                 className="text-lg sm:text-xl lg:text-2xl"
                 style={{
-                  color: data.theme,
+                  color: project.theme,
                 }}
               >
-                {data.name}
+                {project.name}
               </h2>
               <a
                 className="base-text inline-block text-secondary"
-                href={`https://github.com/vshakitskiy/${data.github}`}
+                href={`https://github.com/vshakitskiy/${project.github}`}
                 rel="noreferrer"
                 target="_blank"
               >
                 <GithubIcon
                   className="size-5 sm:size-6"
                   style={{
-                    fill: data.theme,
+                    fill: project.theme,
                   }}
                 />
               </a>
             </div>
-            <p className="base-text mt-4 flex-1">
-              <TaggedText inserts={inserts} text={data.text} />
-            </p>
+            <p className="base-text mt-4 flex-1">{project.text[language]}</p>
             <img
-              alt={data.name}
+              alt={project.name}
               className="mx-auto mt-4 w-full rounded-md"
-              src={data.image}
+              src={project.image}
             />
           </div>
         ))}

src/components/ui/TaggedText.tsx

@@ -1,5 +1,3 @@
-import { TaggedText } from "./TaggedText"
-
 import {
   BunIcon,
   DenoIcon,
@@ -17,7 +15,16 @@ import {
   ViteIcon,
   VscodeIcon,
 } from "@/components/svgs"
-import { useText } from "@/hooks"
+import { useLanguage } from "@/hooks"
+
+const translation = {
+  ru: {
+    title: "Технологии",
+  },
+  en: {
+    title: "Technologies",
+  },
+}
 
 const icons = [
   { name: "Go", icon: GoIcon, className: "size-12 sm:size-14 md:size-15" },
@@ -38,28 +45,28 @@ const icons = [
 ]
 
 export const Technologies = () => {
-  const { technologies } = useText()
+  const { language } = useLanguage()
 
   return (
     <section className="mt-8">
       <h2 className="text-2xl font-bold md:text-3xl">
-        {technologies.text.title}
+        {translation[language].title}
       </h2>
-      <p className="base-text mt-4">
-        <TaggedText
-          inserts={technologies.inserts}
-          text={technologies.text.text}
-        />
-      </p>
       <div className="mt-4 flex flex-wrap gap-1">
         {icons.map((technology) => (
           <div
             key={technology.name}
-            className="flex h-20 flex-1/4 items-center justify-center rounded-md bg-[#b3b3b325] sm:flex-1/5 md:flex-1/6 lg:flex-1/7 xl:flex-1/8"
+            className="group relative flex h-20 flex-1/4 items-center justify-center gap-2 rounded-md bg-primary/10 p-3 hover:border hover:border-glitch-primary/40 hover:bg-primary/20 sm:flex-1/5 md:flex-1/6 lg:flex-1/7 xl:flex-1/8"
           >
             <technology.icon
               className={`size-8 fill-primary sm:size-10 md:size-11 ${technology.className ? ` ${technology.className}` : ""}`}
             />
+            <span className="hidden font-bold text-primary group-hover:sm:block">
+              {technology.name}
+            </span>
+            <span className="absolute -top-4 left-1/2 hidden -translate-x-1/2 rounded-sm border border-glitch-primary bg-background px-2 text-primary group-hover:block group-hover:sm:hidden">
+              {technology.name}
+            </span>
           </div>
         ))}
       </div>