Коробцев Виталий Сергеевич
55249b5aa6
Changes to be committed: modified: app/(root)/page.jsx modified: app/about/components/about/about.jsx deleted: app/about/components/about/spotify/animation.jsx deleted: app/about/components/about/spotify/card.jsx deleted: app/about/components/about/spotify/fetch.js modified: app/about/components/education.jsx modified: app/about/layout.jsx modified: app/about/loading.jsx modified: app/about/page.jsx modified: app/layout.jsx modified: app/not-found.jsx modified: app/projects/[slug]/page.jsx modified: app/projects/archive/page.jsx modified: app/projects/layout.jsx modified: app/projects/loading.jsx modified: app/projects/page.jsx deleted: components/Chat.jsx modified: components/Footer.jsx modified: components/Navbar.jsx modified: json/data.json modified: pnpm-lock.yaml new file: public/image/me.jpeg deleted: public/image/me.jpg new file: public/image/me1.jpeg deleted: public/image/me1.jpg new file: public/image/me2.jpeg new file: public/image/me3.jpeg deleted: public/image/me3.jpg deleted: public/image/me4.jpeg new file: public/image/me4.jpg new file: public/image/me7.jpg deleted: vite-to_VS/README.md
281 lines
9.5 KiB
JavaScript
281 lines
9.5 KiB
JavaScript
"use client";
|
||
import { useEffect, useState } from "react";
|
||
import Link from "next/link";
|
||
import { motion } from "framer-motion";
|
||
import Button from "@/components/Button";
|
||
import Image from "next/image";
|
||
|
||
// images
|
||
import Intervyou1 from "@/public/image/projects/web/intervyou/intervyou-1.png";
|
||
import Intervyou2 from "@/public/image/projects/web/intervyou/intervyou-2.png";
|
||
import Intervyou3 from "@/public/image/projects/web/intervyou/intervyou-3.png";
|
||
import ProjectAll from "@/public/image/projects.png";
|
||
|
||
import Hr from "@/components/Hr";
|
||
import ProjectCard from "./components/ProjectCard";
|
||
import Projects from "@/json/data.json";
|
||
import FixedButon from "@/components/FixedButton";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
|
||
|
||
const category = {
|
||
1: "WEB разработка",
|
||
2: "Linux и ПО",
|
||
9: "Другие",
|
||
};
|
||
|
||
export default function Page() {
|
||
const [activeCategory, setActiveCategory] = useState(1);
|
||
const projects = Projects.Projects.filter((item) => item.show === true);
|
||
|
||
useEffect(() => {
|
||
window.scrollTo(0, 0);
|
||
}, []);
|
||
return (
|
||
<>
|
||
<main className="overflow-hidden">
|
||
<FixedButon href="/#projects">
|
||
<FontAwesomeIcon icon={faChevronLeft} className="text-black pr-10" />
|
||
</FixedButon>
|
||
<div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden">
|
||
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
||
<motion.div
|
||
initial={{ scale: 1 }}
|
||
animate={{ scale: 1.6 }}
|
||
transition={{ duration: 1, ease: "circOut" }}
|
||
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
|
||
<Image
|
||
src={ProjectAll}
|
||
alt="Korobtsev"
|
||
layout="fill"
|
||
objectFit="cover"
|
||
placeholder="blur"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 pt-4 backdrop-filter backdrop-blur-sm md:backdrop-blur-none md:backdrop-filter-none bg-gray-100 bg-opacity-50 md:bg-transparent md:pt-0">
|
||
<h1 className="md:bg-white bg-transparent lg:bg-transparent bg-opacity-50 md-px-0 text-black text-5xl md:text-8xl font-bold">
|
||
Проекты
|
||
</h1>
|
||
<Hr />
|
||
<p className="title text-xl mt-4 tracking-wider text-gray-900 leading-[1.7rem] mb-5">
|
||
Некоторые из проектов с моим учаcтием{" "}
|
||
<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">
|
||
{" "}
|
||
или под моим руководством.
|
||
</span>
|
||
</p>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 100 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, ease: "circOut" }}
|
||
onClick={() => {
|
||
window.scrollTo({
|
||
top: 1000,
|
||
behavior: "smooth",
|
||
});
|
||
}}
|
||
className="mb-3">
|
||
<Button variation="primary">Прокрутить</Button>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
|
||
<div className="flex justify-center items-center flex-col my-5 self-start ">
|
||
<Hr variant="long"></Hr>
|
||
<h1 className="text-3xl font-bold mt-3">Основное</h1>
|
||
</div>
|
||
</div>
|
||
<div className="relative w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10">
|
||
<div className="flex justify-center items-start flex-col mb-5 ">
|
||
<div className="images relative w-full aspect-square">
|
||
<div className="absolute top-28 left-10 h-[40%] aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150 z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.5, x: 100 }}
|
||
whileInView={{
|
||
opacity: 1,
|
||
scale: 1,
|
||
x: 0,
|
||
}}
|
||
className="w-full h-full shadow-lg">
|
||
<Image
|
||
src={Intervyou1}
|
||
alt="Korobtsev"
|
||
layout="fill"
|
||
objectFit="cover"
|
||
placeholder="blur"
|
||
className="rat"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
<div className="absolute top-10 right-28 h-[30%] aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
|
||
<motion.div
|
||
initial={{
|
||
opacity: 0,
|
||
scale: 0.5,
|
||
x: -100,
|
||
}}
|
||
whileInView={{
|
||
opacity: 1,
|
||
scale: 1,
|
||
x: 0,
|
||
}}
|
||
transition={{ delay: 0.3 }}
|
||
className="w-full h-full shadow-lg ">
|
||
<Image
|
||
src={Intervyou3}
|
||
alt="Korobtsev"
|
||
layout="fill"
|
||
objectFit="cover"
|
||
placeholder="blur"
|
||
objectPosition="0% 0%"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
<div className="absolute bottom-10 md:bottom-26 right-20 h-[35%] aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
|
||
<motion.div
|
||
initial={{
|
||
opacity: 0,
|
||
scale: 0.5,
|
||
x: -100,
|
||
}}
|
||
whileInView={{
|
||
opacity: 1,
|
||
scale: 1,
|
||
x: 0,
|
||
}}
|
||
transition={{
|
||
delay: 0.5,
|
||
}}
|
||
className="w-full h-full shadow-lg">
|
||
<Image
|
||
src={Intervyou2}
|
||
alt="Korobtsev"
|
||
layout="fill"
|
||
objectFit="cover"
|
||
placeholder="blur"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<motion.div
|
||
className="flex justify-center items-start flex-col mb-5 md:px-10"
|
||
initial={{
|
||
opacity: 0,
|
||
x: 200,
|
||
}}
|
||
whileInView={{
|
||
opacity: 1,
|
||
x: 0,
|
||
}}
|
||
transition={{
|
||
delay: 0.5,
|
||
type: "spring",
|
||
}}>
|
||
<h2 className="text-2xl font-bold tracking-wider mb-3">
|
||
ОС ОСГОС
|
||
</h2>
|
||
<p className="text-gray-600 text-justify title text-lg">
|
||
Операционная система на ядре Debian linux актуальной версии.
|
||
Изначально разрабатывалась для одного из Государственных заказчиков.
|
||
На данный момент проект построен на Debian 13, имеет собственные репозитории
|
||
и магазин приложений, инфраструктуру технической поддержки. Проект поддерживается
|
||
и активно развивается, обрастая собственными сервисами и ПО, несмотря на
|
||
высокую конкуренцию в данном серменте.
|
||
Разработано несколько вариантов дистрибутива, в том числе и специализированные версии.
|
||
Серверное направление выделено в отдельный продукт.
|
||
</p>{" "}
|
||
<div className="mt-3">
|
||
<Button variation="primary">
|
||
<Link href="projects/intervyou">Больше</Link>
|
||
</Button>
|
||
<Button variation="secondary">
|
||
<a
|
||
href="https://www.osgos.ru"
|
||
target="_blank"
|
||
rel="noopener noreferrer">
|
||
Просмотреть
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
|
||
<div className="flex justify-center items-center flex-col my-5 self-start">
|
||
<Hr variant="long"></Hr>
|
||
<motion.h1
|
||
className="text-3xl font-bold mt-3"
|
||
initial={{
|
||
opacity: 0,
|
||
x: -200,
|
||
}}
|
||
whileInView={{
|
||
opacity: 1,
|
||
x: 0,
|
||
}}
|
||
transition={{
|
||
delay: 0.7,
|
||
type: "spring",
|
||
}}>
|
||
Другие ключевые проекты
|
||
</motion.h1>
|
||
</div>
|
||
</div>
|
||
|
||
{/* choose category */}
|
||
<motion.div
|
||
initial={{
|
||
opacity: 0,
|
||
x: 200,
|
||
}}
|
||
whileInView={{
|
||
opacity: 1,
|
||
x: 0,
|
||
}}
|
||
transition={{
|
||
type: "spring",
|
||
}}
|
||
className="flex flex-row justify-center items-start flex-wrap gap-3 md:gap-5 my-5 ">
|
||
{Object.keys(category).map((key, index) => (
|
||
<button
|
||
key={index}
|
||
className={`px-2 md:px-4 py-2 rounded-lg cursor-pointer transition-all ease duration-300 focus:bg-gray-300 focus:text-black focus:ring focus:ring-slate-500 ${
|
||
activeCategory === key
|
||
? "bg-gray-300 text-black hover:bg-gray-700 hover:text-white"
|
||
: "bg-gray-700 text-white hover:bg-gray-300 hover:text-black"
|
||
}`}
|
||
onClick={() => setActiveCategory(key)}>
|
||
{category[key]}
|
||
</button>
|
||
))}
|
||
</motion.div>
|
||
|
||
{/* projects */}
|
||
<div className="w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10 cursor-pointer">
|
||
{projects.map((project, index) => (
|
||
<ProjectCard
|
||
project={project}
|
||
key={index}
|
||
activeCategory={activeCategory}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* view in archive btn */}
|
||
<motion.div
|
||
initial={{
|
||
opacity: 0,
|
||
}}
|
||
whileInView={{
|
||
opacity: 1,
|
||
}}
|
||
className="flex justify-center items-center flex-col my-5 self-start ">
|
||
<Button variation="primary">
|
||
<Link href="projects/archive">Посмотреть все</Link>
|
||
</Button>
|
||
</motion.div>
|
||
</main>
|
||
</>
|
||
);
|
||
}
|