first commit

app/page.js

@@ -0,0 +1,299 @@
+"use client";
+
+import React, { useState } from "react";
+import { useTranslations, useLocale } from "next-intl";
+import { Header } from "@/components/header";
+import { SiVk, SiTelegram, SiNextdotjs, SiTailwindcss, SiPostgresql, SiSupabase, SiReact, SiDocker, SiLinux, SiGo, SiPython, SiHtml5, SiJavascript, SiPhp, SiMaildotru, SiGmail, SiFacebook, SiTiktok, SiPrisma, SiMapbox } from "react-icons/si";
+import Link from "next/link";
+import Image from "next/image";
+import { TriangleAlert } from "lucide-react";
+
+export default function Main() {
+  const [isHovered, setIsHovered] = useState(false);
+  const t = useTranslations("main");
+  const locale = useLocale();
+
+  const handleToggleLanguage = () => {
+    const nextLocale = locale === "en" ? "ru" : "en";
+    document.cookie = `locale=${nextLocale}; path=/; max-age=31536000`;
+    window.location.reload();
+  };
+
+  const timeline = [
+    {
+      era: t("skills.timeline.0.era"),
+      text: (<h3>{t("skills.timeline.0.text")}</h3>),
+      icon: <SiHtml5 className="w-5 h-5 text-orange-500" />,
+    },
+    {
+      era: t("skills.timeline.1.era"),
+      text: (<h3>{t("skills.timeline.1.text")}</h3>),
+      icon: <SiReact className="w-5 h-5 text-orange-500" />,
+    },
+    {
+      era: t("skills.timeline.2.era"),
+      text: (<h3>{t("skills.timeline.2.text")}</h3>),
+      icon: <SiPostgresql className="w-5 h-5 text-orange-500" />,
+    },
+    {
+      era: t("skills.timeline.3.era"),
+      text: (<h3>{t("skills.timeline.3.text")}</h3>),
+      icon: <SiGo className="w-5 h-5 text-orange-500" />,
+    },
+  ];
+
+  const skillsRunline = [
+    { name: "Next.js", icon: <SiNextdotjs /> },
+    { name: "Tailwind", icon: <SiTailwindcss /> },
+    { name: "Prisma", icon: <SiPrisma /> },
+    { name: "Postgres", icon: <SiPostgresql /> },
+    { name: "Supabase", icon: <SiSupabase /> },
+    { name: "React", icon: <SiReact /> },
+    { name: "Docker", icon: <SiDocker /> },
+    { name: "Linux", icon: <SiLinux /> },
+    { name: "HTML", icon: <SiHtml5 /> },
+    { name: "JS", icon: <SiJavascript /> },
+    { name: "Go", icon: <SiGo /> },
+    { name: "PHP", icon: <SiPhp /> },
+    { name: "Python", icon: <SiPython /> },
+    { name: "Mapbox", icon: <SiMapbox /> },
+  ];
+
+  const contacts = [
+    {"icon": <SiTelegram />, "name": t("contact.contacts.0.name"), "username": "@rezcjikov", "url": "https://t.me/rezcjikov/"},
+    {"icon": <SiMaildotru />, "name": t("contact.contacts.1.name"), "username": "rezcjikov@mail.ru", "url": "mailto:rezcjikov@mail.ru"},
+    {"icon": <SiGmail />, "name": t("contact.contacts.2.name"), "username": "rezcjikov@gmail.com", "url": "mailto:rezcjikov@gmail.com"},
+    {"icon": <SiVk />, "name": t("contact.contacts.3.name"), "username": "@rezcjikov", "url": "https://vk.com/rezcjikov/"},
+    {"icon": <SiTiktok />, "name": t("contact.contacts.4.name"), "username": "@gattowolfe", "url": "https://tiktok.com/@gattowolfe/"},
+  ]
+
+  const languages = [
+    {
+      flag: "/img/flags/ru.png",
+      name: t("notOnlyCoding.languages.0.name"),
+      level: t("notOnlyCoding.languages.0.level"),
+      text: t("notOnlyCoding.languages.0.text")
+    },
+    {
+      flag: "/img/flags/en.png",
+      name: t("notOnlyCoding.languages.1.name"),
+      level: t("notOnlyCoding.languages.1.level"),
+      text: t("notOnlyCoding.languages.1.text")
+    },
+    {
+      flag: "/img/flags/it.png",
+      name: t("notOnlyCoding.languages.2.name"),
+      level: t("notOnlyCoding.languages.2.level"),
+      text: t("notOnlyCoding.languages.2.text")
+    },
+    {
+      flag: "/img/fi.png",
+      name: t("notOnlyCoding.languages.3.name"),
+      level: t("notOnlyCoding.languages.3.level"),
+      text: t("notOnlyCoding.languages.3.text")
+    }
+  ];
+
+  const projects = [
+    {
+      screenshot: "/img/screenshots/duid/main.png",
+      screenshotBg: "bg-gray-50",
+      logo: "/img/coat_of_arms.png",
+      logoAlt: t("projects.items.0.logoAlt"),
+      title: t("projects.items.0.title"),
+      url: "https://id.dusiburg.ru/",
+      hostname: "id.dusiburg.ru",
+      description: t("projects.items.0.description"),
+      skills: ["Next.js", "Tailwind", "Postgres", "Supabase"]
+    },
+    {
+      screenshot: "/img/screenshots/map.png",
+      screenshotBg: "bg-zinc-700",
+      logo: "/img/map.png",
+      logoAlt: t("projects.items.1.logoAlt"),
+      title: t("projects.items.1.title"),
+      url: "https://map.dusiburg.ru/",
+      hostname: "map.dusiburg.ru",
+      description: t("projects.items.1.description"),
+      skills: ["Next.js", "Tailwind", "Mapbox", "Postgres", "Supabase"]
+    },
+    {
+      screenshot: "/img/screenshots/vote.png",
+      screenshotBg: "bg-gray-50",
+      logo: "/img/coat_of_arms.png",
+      logoAlt: t("projects.items.2.logoAlt"),
+      title: t("projects.items.2.title"),
+      url: "https://vote.dusiburg.ru/",
+      hostname: "vote.dusiburg.ru",
+      description: t("projects.items.2.description"),
+      skills: ["Next.js", "Tailwind", "Prisma", "Postgres", "Supabase"]
+    },
+    {
+      screenshot: "/img/screenshots/fastlink.png",
+      screenshotBg: "bg-zinc-800",
+      logo: "/img/fastlink.png",
+      logoAlt: t("projects.items.3.logoAlt"),
+      title: t("projects.items.3.title"),
+      description: t("projects.items.3.description"),
+      skills: ["Next.js", "Tailwind", "Go", "Postgres", "Supabase"]
+    }
+  ]
+
+  return (
+    <>
+      <Header />
+      <main className="flex flex-col">
+        <section className="flex flex-col gap-2 px-4 xl:px-8 pb-8 xl:pb-10 bg-blue-300" id="whoami">
+          <h2>{t("whoami.title")}</h2>
+          <h3>{t("whoami.text")}</h3>
+          <h4 className="mt-6 xl:mt-0 xl:absolute xl:right-8 text-blue-200 cursor-pointer select-none" onClick={handleToggleLanguage}>
+            {t("changeLanguage").split("").map((ch, i) => (
+              <span
+                key={i}
+                className="animate-wave"
+                style={{ animationDelay: `${i * 0.06}s` }}
+              >
+                {ch === " " ? "\u00A0" : ch}
+              </span>
+            ))}
+          </h4>
+        </section>
+
+        {locale == "it" && (<section className="flex gap-4 items-center px-4 xl:px-8 pb-8 xl:pb-10 bg-red-300">
+          <TriangleAlert />
+          <h3>Cari italiani, mi scuso, ma il sito non è completamente tradotto in italiano. Sarebbe meglio usare la versione in inglese.</h3>
+        </section>)}
+
+        <section className="flex flex-col px-4 xl:px-8 pb-8 xl:pb-10 bg-orange-50" id="skills">
+          <h2 className="text-2xl font-semibold mb-6">{t("skills.title")}</h2>
+
+          <div className="mt-2 mb-8 overflow-hidden">
+            <div 
+              className="flex items-center gap-3 animate-marquee"
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+              style={{ animationPlayState: isHovered ? "paused" : "running" }}
+            >
+              {[...skillsRunline.slice(0, 13), ...skillsRunline.slice(0, 13)].map((skill, index) => (
+                <div key={index} className="flex items-center gap-2 rounded-full bg-orange-500 text-white px-3 py-1 transition-all hover:scale-[1.08] cursor-default whitespace-nowrap">
+                  <div>{skill.icon}</div>
+                  <p>{skill.name}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex w-full flex-col items-start">
+            {timeline.map((element, index) => (
+              <div className="group flex gap-x-4 xl:gap-x-6" key={index}>
+                <div className="relative">
+                  <div className="absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2 bg-orange-500" />
+                  <span className="relative z-10 grid h-3 w-3 place-items-center rounded-full bg-orange-400" />
+                </div>
+                <div className="-translate-y-1.5 pb-8 space-y-4">
+                  <div className="flex flex-row items-center gap-4">
+                    {element.icon}
+                    <h2>{element.era}</h2>
+                  </div>
+                  {element.text}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="flex flex-col gap-8 px-4 xl:px-8 pb-8 xl:pb-10 relative bg-gray-100" id="projects"
+          style={{
+            backgroundImage: `
+              linear-gradient(to right, rgba(21, 93, 252, 0.1) 3px, transparent 1px),
+              linear-gradient(to bottom, rgba(21, 93, 252, 0.1) 3px, transparent 1px)
+            `,
+            backgroundSize: "100px 100px"
+          }}
+        >
+          <h2>{t("projects.title")}</h2>
+          <h3>{t("projects.intro")}</h3>
+          <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+            {projects.map((project, index) => (
+              <div key={index} className="flex flex-col justify-between gap-4 p-2 rounded-xl bg-black/10 w-full max-w-lg transition-all hover:scale-[1.02] cursor-default">
+                <div className={`w-full p-2 rounded-lg ${project.screenshotBg}`}>
+                  <Image className="rounded-md w-full h-auto" src={project.screenshot} width={500} height={50} alt={`${project.title} screenshot`} />
+                </div>
+                <div className="flex flex-col mx-1">
+                  <div className="flex gap-2 items-center flex-wrap">
+                    <Image src={project.logo} width={24} height={24} className="p-0.5 bg-white rounded-sm" alt={project.logoAlt} />
+                    <h3>{project.title}</h3>
+                  </div>
+                  {project.url && project.hostname && (<Link href={project.url} target="_blank" className="text-blue-500 hover:text-blue-600 duration-200">
+                    <h4>{project.hostname}</h4>
+                  </Link>)}
+                </div>
+                <h4 className="mx-1">{project.description}</h4>
+                <div className="flex flex-wrap gap-2 items-center">
+                  {project.skills.map((skillName, idx) => {
+                    const skill = skillsRunline.find(s => s.name === skillName);
+                    return skill ? (
+                      <div key={idx} className="flex items-center gap-2 rounded-full bg-white px-2 xl:px-3 py-1">
+                        {skill.icon}
+                        <h6>{skill.name}</h6>
+                      </div>
+                    ) : null;
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="flex flex-col gap-6 px-4 xl:px-8 pb-8 xl:pb-10 bg-pink-50">
+          <h2>{t("notOnlyCoding.title")}</h2>
+          <h3>{t("notOnlyCoding.subtitle")}</h3>
+          <div className="flex flex-col gap-8">
+            {languages.map((language, index) => (
+              <div key={index} className={`flex flex-col xl:flex-row gap-16 items-center p-3 xl:p-6 rounded-2xl transition-all hover:scale-[1.02] ${index % 2 === 1 ? "xl:flex-row-reverse bg-pink-100" : "bg-fuchsia-100"} cursor-default`}>
+                <Image src={language.flag} width={200} height={200} className={`w-36 h-36 rounded-lg ${index % 2 === 1 ? "rotate-2" : "-rotate-2"}`} alt={`Flag #${index}`} />
+                <div className="flex flex-col gap-4">
+                  <div className="flex gap-4 items-center">
+                    <h2>{language.name}</h2>
+                    <h5 className="w-max px-2.5 py-0.5 rounded-full border-3 border-black">
+                      {language.level}
+                    </h5>
+                  </div>
+                  <h3>{language.text}</h3>
+                </div>
+              </div>
+            ))}
+          </div>
+          <h3>{t("notOnlyCoding.outro")}</h3>
+        </section>
+
+        <section className="flex flex-col gap-6 px-4 xl:px-8 py-8 xl:py-12 bg-amber-600 text-white" id="contact">
+          <h2>{t("contact.title")}</h2>
+          <h3 className="max-w-2xl">{t("contact.subtitle")}</h3>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+            {contacts.map((item, index) => (
+              <Link key={index} href={item.url} target="_blank" className="group flex flex-col gap-0.5 xl:gap-0 xl:flex-row xl:items-center justify-between rounded-xl bg-white/10 backdrop-blur-sm px-4 py-3 hover:bg-white/20 transition-all duration-200 cursor-pointer">
+                <div className="flex gap-2 items-center text-white/80">
+                  {item.icon}
+                  <h4 className="text-xs! xl:text-lg!">{item.name}</h4>
+                </div>
+                <h4>{item.username}</h4>
+              </Link>
+            ))}
+          </div>
+          <div className="flex flex-wrap gap-3 mt-8">
+            <p className="text-white/60 mr-2">{t("contact.remember")}</p>
+            <div className="flex flex-wrap gap-3">
+              {skillsRunline.slice(0, 6).map((skill, index) => (
+                <div key={index} className="flex items-center gap-2 rounded-full bg-white/20 px-2 xl:px-3 py-1">
+                  <div className="text-white">{skill.icon}</div>
+                  <h6>{skill.name}</h6>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}