239 lines
11 KiB
JavaScript
239 lines
11 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { useTranslations, useLocale } from "next-intl";
|
|
import { Header } from "@/components/header";
|
|
import { SiVk, SiTelegram, SiPostgresql, SiReact, SiGo, SiHtml5, SiMaildotru, SiGmail, SiTiktok, SiGithub } from "react-icons/si";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { TriangleAlert } from "lucide-react";
|
|
import ProjectDialog from "@/components/projectDialog";
|
|
import { skillsList } from "@/lib/skillsList";
|
|
import projectsData from "@/lib/projects.json";
|
|
|
|
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; SameSite=Lax`;
|
|
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 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/"},
|
|
{"icon": <SiGithub />, "name": t("contact.contacts.5.name"), "username": "@dusiburg", "url": "https://github.com/dusiburg/"},
|
|
]
|
|
|
|
const languages = [
|
|
{
|
|
flag: "/images/flags/ru.png",
|
|
name: t("notOnlyCoding.languages.0.name"),
|
|
level: t("notOnlyCoding.languages.0.level"),
|
|
text: t("notOnlyCoding.languages.0.text")
|
|
},
|
|
{
|
|
flag: "/images/flags/uk.png",
|
|
name: t("notOnlyCoding.languages.1.name"),
|
|
level: t("notOnlyCoding.languages.1.level"),
|
|
text: t("notOnlyCoding.languages.1.text")
|
|
},
|
|
{
|
|
flag: "/images/flags/it.png",
|
|
name: t("notOnlyCoding.languages.2.name"),
|
|
level: t("notOnlyCoding.languages.2.level"),
|
|
text: t("notOnlyCoding.languages.2.text")
|
|
},
|
|
{
|
|
flag: "/images/flags/fi.png",
|
|
name: t("notOnlyCoding.languages.3.name"),
|
|
level: t("notOnlyCoding.languages.3.level"),
|
|
text: t("notOnlyCoding.languages.3.text")
|
|
}
|
|
];
|
|
|
|
const projects = projectsData.map(p => ({
|
|
...p,
|
|
logoAlt: t(p.logoAlt),
|
|
title: t(p.title),
|
|
description: t(p.description),
|
|
text: t(p.text)
|
|
}));
|
|
|
|
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="px-4 xl:px-8 pb-8 xl:pb-10 bg-red-300">
|
|
<h3>Cari italiani, mi scuso, ma il sito non è completamente tradotto in italiano. Un giorno lo tradurrerò! Per ora, 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" }}
|
|
>
|
|
{[...skillsList.slice(0, 13), ...skillsList.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) => (
|
|
<ProjectDialog key={index} project={project}>
|
|
<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.screenshots[0]} 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="w-max text-blue-500 hover:text-blue-600 duration-200">
|
|
<h4>{project.hostname}</h4>
|
|
</Link>)}
|
|
</div>
|
|
<h4 className="mx-1">{project.description}</h4>
|
|
</div>
|
|
</ProjectDialog>
|
|
))}
|
|
</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+1}`} />
|
|
<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">
|
|
{skillsList.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>
|
|
</>
|
|
);
|
|
} |