On branch master

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

.eslintrc.json

@@ -1,3 +1,4 @@
 {
   "extends": "next/core-web-vitals"
 }
+// TODO: FIX ESLINT ERRORS

.vscode/settings.json

@@ -11,6 +11,7 @@
         "editor.tabSize": 2
     },
     "prettier.singleAttributePerLine": false,
+    "npm-scripts.showStartNotification": false,
     
     
 }

LICENSE

@@ -1,4 +1,7 @@
-                    GNU GENERAL PUBLIC LICENSE
+korobtsev-NextJS01 - A Next.js Portfolio Project  
+Copyright (C) 2025 Alvalen Bilyunazra <alvalen.shafel04@gmail.com>
+                      
+                      GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>

README.md

@@ -1,35 +1,29 @@
-# Alvalens Porto 2
+# Мой личный сайт на основе Korobtsev Porto 2
 
-![visitor badge](https://visitor-badge.laobi.icu/badge?page_id=aleph-discord-bot.visitor-badge)
+Проект построен на базе шаблона Korobtsev Porto 2. Изменения будут перечислены в соответствующем разделе.
 
-This is my debut project utilizing Next.js, a portfolio website featuring four primary sections: Home, About, Projects, and Contact. The site is brought to life with animations powered by Framer Motion, enhanced page transitions with Fullpage.js, and styled using elements of Tailwind CSS. This project also read list of project data from a JSON file. It serves as a showcase of my web development skills and represents my initial foray into web development with Next.js.
+## Фишки
 
-![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
+* **Плавная анимация:** Сквозная прокрутка страниц и прокрутка анимации.
+* **Плавный переход страниц:** Плавный переход страницы с предварительной выборкой функции NEXTJS.
+* **Динамические данные:** Получает данные проекта из файла JSON.
 
-## Features
+## Установка
-
-* **Smooth Animation:** Smooth page scroll and scroll trigger animation.
-* **Smooth Page Transition:** Smooth page transition with prefetching feature of next js.
-* **Dynamic Data:** Read the project data from JSON file instead of directly implemented the data.
-* **Intelliticks chat widget:** Chat with owner of the web realtime.
-* **Spotify realtime widget:** Show what song youre playing in this web.
-
-## Installation
-
-1. Ensure you have [pnpm](https://pnpm.io/) installed. If not, you can install it using:
 
+1. Убедитесь, что у вас установлен [PNPM](https://pnpm.io/). Если нет, вы можете установить его, используя: 
+ 
    ```shell
    npm install -g pnpm
    ```
-2. Clone the repository:
+2. Склонируйте репозиторий:
 
    ```shell
-   git clone https://github.com/Alvalens/Alvalens-porto-2-nextJs.git
+   git clone https://dev.gossys.dev/v.korobtsev/korobtsev-NextJS01.git
    ```
 3. Navigate to the project directory:
 
    ```shell
-   cd Alvalens-porto-2-nextJs
+   cd korobtsev-NextJS01
    ```
 4. Install dependencies:
 
@@ -41,33 +35,6 @@ This is my debut project utilizing Next.js, a portfolio website featuring four p
    ```shell
    pnpm next dev
    ```
-6. Update the Intelliticks chat widget script in components/Chat.jsx, with your own
-
-   ```javascript
-    "use client"
-    import { useEffect } from "react";
-
-    // Component for Intelliticks chat widget
-    const Chat = () => {
-    	useEffect(() => {
-    		// Replace the Intelliticks script here
-
-    	}, []);
-
-    	return null;
-    };
-
-    export default Chat;
-   ```
-7. Set env.local by copying env.example and fill the variable
-
-   ```
-   NEXT_PUBLIC_SPOTIFY_CLIENT_ID=
-   NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET=
-   NEXT_PUBLIC_SPOTIFY_REFRESH_TOKEN=
-   ```
-
-   for further reference on how to setup spotify api you can check this [link ](https://leerob.io/blog/spotify-api-nextjs "leerob blog")
 
 ## Usage
 
@@ -112,3 +79,5 @@ Contributions are welcome! If you find any issues or have suggestions, feel free
 ## License
 
 This project is licensed under the GPL-3.0 License see the [LICENSE](LICENSE) file for details.
+
+Copyright (C) 2025 Alvalen Shafelbilyunazra

app/(root)/loading.jsx

@@ -1,11 +1,7 @@
 export default function Loading() {
 	return (
-		<>
+		<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
-			(
+			<h1 className="text-4xl text-gray-900">Загрузка...</h1>
-			<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
+		</div>
-				<h1 className="text-4xl text-gray-900">Loading...</h1>
-			</div>
-			)
-		</>
 	);
 }

app/(root)/page.jsx

@@ -5,20 +5,19 @@ import Image from "next/legacy/image";
 import { motion } from "framer-motion";
 import Link from "next/link";
 
-// components
+// Компоненты
 import Button from "@/components/Button";
-import Me from "@/public/image/me.jpg";
+import Me from "@/public/image/me.jpeg";
-import MeAbout from "@/public/image/me2.jpg";
+import MeAbout from "@/public/image/me7.jpg";
 import Setup from "@/public/image/setup.jpg";
 import ProjectAll from "@/public/image/projects.png";
 import Hr from "@/components/Hr";
-// icons
+// Значки
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { faInstagram } from "@fortawesome/free-brands-svg-icons";
-import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
-import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { faVk } from "@fortawesome/free-brands-svg-icons";
+import { faTelegram } from "@fortawesome/free-brands-svg-icons";
 
 const MyPage = () => {
 	const fullpageOptions = {
@@ -27,7 +26,6 @@ const MyPage = () => {
 		licenseKey: "gplv3-license",
 		menu: "#sidebar",
 		lockAnchors: false,
-		
 	};
 
 	return (
@@ -44,14 +42,14 @@ const MyPage = () => {
 									transition={{
 										type: "spring",
 									}}>
-									<div className="block md:hidden col-span-1 mx-auto my-10">
+									<div className="block md:hidden col-span-1 mx-auto my-5">
-										<div className="bg-slate-500 rounded-full h-60 w-60 grayscale hover:grayscale-0 transition-all ease duration-300">
+										<div className="bg-slate-500 rounded h-40 w-40 grayscale hover:grayscale-0 transition-all ease duration-300">
 											<Image
 												src={Me}
 												width={500}
 												height={500}
-												className="rounded-full w-full h-full object-cover "
+												className="rounded w-half h-half object-cover "
-												alt="Alvalens"
+												alt="V.Korobtsev"
 												placeholder="blur"
 											/>
 										</div>
@@ -64,7 +62,7 @@ const MyPage = () => {
 											delay: 0.2,
 											type: "spring",
 										}}>
-										Alvalen Shafel
+										Виталий Коробцев
 									</motion.h3>
 									<motion.h1
 										className="text-black text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-bold my-2 md:my-5"
@@ -74,7 +72,7 @@ const MyPage = () => {
 											delay: 0.3,
 											type: "spring",
 										}}>
-										Full Stack Developer
+										Главное
 									</motion.h1>
 									<motion.p
 										className="title text-md  2xl:text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem]"
@@ -84,12 +82,8 @@ const MyPage = () => {
 											delay: 0.4,
 											type: "spring",
 										}}>
-										A junior fullstack developer who
+										Привет! Я Виталий Коробцев. Создатель "Гибридной Офисной Системы". Под моим руководством (или с моим участием) создано множество крупных проектов. На данном сайте я решил собрать некоторые из них и рассказать о себе и своих проектах - завершенных, текущих, планируемых.
-										currently focused on Web Development.
+
-										Other than that, I also interested in
-										UX/UI Design, Mobile and AI Development.
-										I love to learn new things and always
-										open to new opportunities.
 									</motion.p>
 									<motion.div
 										className="buttons flex flex-row justify-center items-center space-x-4 mt-10"
@@ -100,17 +94,10 @@ const MyPage = () => {
 											type: "spring",
 										}}>
 										<Button variation="primary">
-											<Link
+											<a href="#projects">Проекты</a>
-												href={"/docs/cv.pdf"}
-												target="_blank"
-												rel="noopener noreferrer"
-												locale={false}
-												download>
-												Download CV
-											</Link>
 										</Button>
 										<Button variation="secondary">
-											<a href="#contact">Contact Me</a>
+											<a href="#contact">Связаться</a>
 										</Button>
 									</motion.div>
 								</motion.div>
@@ -128,7 +115,7 @@ const MyPage = () => {
 											width={400}
 											height={550}
 											placeholder="blur"
-											alt="Alvalens"
+											alt="Korobtsev"
 											className="rounded-full w-full h-full object-cover"
 										/>
 									</div>
@@ -160,7 +147,7 @@ const MyPage = () => {
 											src={MeAbout}
 											layout="fill"
 											className="object-cover"
-											alt="Alvalens"
+											alt="Korobtsev"
 											placeholder="blur"
 										/>
 									</motion.div>
@@ -174,7 +161,7 @@ const MyPage = () => {
 											delay: 0.1,
 											type: "spring",
 										}}>
-										About Me
+										Обо мне
 									</motion.h1>
 									<Hr />
 									<motion.p
@@ -185,8 +172,7 @@ const MyPage = () => {
 											delay: 0.2,
 											type: "spring",
 										}}>
-										A brief introduction about me and my
+										Немного обо мне и моих интересах.
-										interest.
 									</motion.p>
 									<motion.div
 										initial={{ y: 40, opacity: 0 }}
@@ -196,9 +182,7 @@ const MyPage = () => {
 											type: "spring",
 										}}>
 										<Button variation="primary">
-											<Link href="/about">
+											<Link href="/about">Читать</Link>
-												Learn More
-											</Link>
 										</Button>
 									</motion.div>
 								</div>
@@ -229,7 +213,7 @@ const MyPage = () => {
 											src={ProjectAll}
 											layout="fill"
 											className="object-cover"
-											alt="Alvalens Setup"
+											alt="Рабочее место"
 											placeholder="blur"
 										/>
 									</motion.div>
@@ -243,7 +227,7 @@ const MyPage = () => {
 											delay: 0.1,
 											type: "spring",
 										}}>
-										My Projects
+										Проекты
 									</motion.h1>
 									<Hr />
 									<motion.p
@@ -254,11 +238,10 @@ const MyPage = () => {
 											delay: 0.2,
 											type: "spring",
 										}}>
-										This is some of my projects that I have
+										Некоторые из проектов с моим учаcтием {" "}
-										done{" "}
 										<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">
 											{" "}
-											and currently working on.
+											или под моим руководством.
 										</span>
 									</motion.p>
 									<motion.div
@@ -269,9 +252,7 @@ const MyPage = () => {
 											type: "spring",
 										}}>
 										<Button variation="primary">
-											<Link href="/projects">
+											<Link href="/projects">Просмотреть</Link>
-												Learn More
-											</Link>
 										</Button>
 									</motion.div>
 								</div>
@@ -302,7 +283,7 @@ const MyPage = () => {
 											src={Setup}
 											layout="fill"
 											className="object-cover"
-											alt="Alvalens Setup"
+											alt="Рабочее место"
 											placeholder="blur"
 										/>
 									</motion.div>
@@ -316,7 +297,7 @@ const MyPage = () => {
 											delay: 0.1,
 											type: "spring",
 										}}>
-										Get In Touch
+										Связаться
 									</motion.h1>
 									<Hr />
 									<motion.p
@@ -327,9 +308,9 @@ const MyPage = () => {
 											delay: 0.2,
 											type: "spring",
 										}}>
-										Feel free to contact me if you have any{" "}
+										Не стесняйтесь связаться со мной,{" "}
 										<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">
-											questions or just want to say hi.
+											можем посотрудничать и реализовать Ваш проект.
 										</span>
 									</motion.p>
 									<motion.p
@@ -340,14 +321,14 @@ const MyPage = () => {
 											delay: 0.3,
 											type: "spring",
 										}}>
-										<a href="mailto:Alvalen.shafel04@gmail.com?subject=Hello&body=Hello Alvalens,">
+										<a href="mailto:vk@gossys.dev?subject=Я с сайта Korobtsev.ru&body=Приветствую Виталий!">
-											alvalen.shafel04@gmail.com
+											vk@gossys.dev
 										</a>
 									</motion.p>
 									{/* icons */}
 									<div className="flex justify-center items-center space-x-4">
 										<motion.a
-											href="mailto:Alvalen.shafel04@gmail.com?subject=Hello&body=Hello Alvalens,"
+											href="mailto:vk@gossys.dev?subject=Я с сайта Korobtsev.ru&body=Приветствую Виталий!"
 											className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
 											initial={{ y: 40, opacity: 0 }}
 											whileInView={{ y: 0, opacity: 1 }}
@@ -355,14 +336,11 @@ const MyPage = () => {
 												y: { delay: 0.1 },
 												opacity: { delay: 0.2 },
 											}}>
-											<FontAwesomeIcon
+											<FontAwesomeIcon icon={faEnvelope} className="text-3xl" />
-												icon={faEnvelope}
-												className="text-3xl"
-											/>
 										</motion.a>
 
 										<motion.a
-											href="https://github.com/Alvalens"
+											href="https://dev.gossys.dev/v.korobtsev/"
 											target="_blank"
 											rel="noopener noreferrer"
 											className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
@@ -372,13 +350,10 @@ const MyPage = () => {
 												y: { delay: 0.2 },
 												opacity: { delay: 0.3 },
 											}}>
-											<FontAwesomeIcon
+											<FontAwesomeIcon icon={faGithub} className="text-3xl" />
-												icon={faGithub}
-												className="text-3xl"
-											/>
 										</motion.a>
 										<motion.a
-											href="https://www.instagram.com/alvalens_/"
+											href="https://vk.ru/Miguelle74/"
 											target="_blank"
 											rel="noopener noreferrer"
 											className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
@@ -389,12 +364,12 @@ const MyPage = () => {
 												opacity: { delay: 0.4 },
 											}}>
 											<FontAwesomeIcon
-												icon={faInstagram}
+												icon={faVk}
 												className="text-3xl"
 											/>
 										</motion.a>
 										<motion.a
-											href="https://www.linkedin.com/in/alvalen-shafel-8a081a254/"
+											href="https://t.me/Gosys_Maestro/"
 											target="_blank"
 											rel="noopener noreferrer"
 											className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
@@ -404,26 +379,8 @@ const MyPage = () => {
 												y: { delay: 0.4 },
 												opacity: { delay: 0.5 },
 											}}>
-											<FontAwesomeIcon
+											<FontAwesomeIcon icon={faTelegram} 
-												icon={faLinkedin}
+											className="text-3xl" />
-												className="text-3xl"
-											/>
-										</motion.a>
-										<motion.a
-											href="https://discordapp.com/users/bloody#6118"
-											target="_blank"
-											rel="noopener noreferrer"
-											className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
-											initial={{ opacity: 0, y: 40 }}
-											whileInView={{ opacity: 1, y: 0 }}
-											transition={{
-												y: { delay: 0.5 },
-												opacity: { delay: 0.6 },
-											}}>
-											<FontAwesomeIcon
-												icon={faDiscord}
-												className="text-3xl"
-											/>
 										</motion.a>
 									</div>
 								</div>

app/about/components/about/about.jsx

@@ -1,9 +1,8 @@
 import Image from "next/image";
-import Card from "./spotify/card";
 import { motion } from "framer-motion";
-import Me1 from "@/public/image/me1.jpg";
+import Me1 from "@/public/image/me1.jpeg";
-import Me2 from "@/public/image/me2.jpg";
+import Me2 from "@/public/image/me2.jpeg";
-import Me3 from "@/public/image/me3.jpg";
+import Me3 from "@/public/image/me4.jpg";
 import Hr from "@/components/Hr";
 
 function Title() {
@@ -11,7 +10,7 @@ function Title() {
 		<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">Who Am I?</h1>
+				<h1 className="text-3xl font-bold mt-3">Обо мне</h1>
 			</div>
 		</div>
 	);
@@ -35,7 +34,7 @@ export default function About() {
 								className="w-full h-full">
 								<Image
 									src={Me1}
-									alt="Alvalens"
+									alt="Korobtsev.ru"
 									layout="fill"
 									objectFit="cover"
 									placeholder="blur"
@@ -58,7 +57,7 @@ export default function About() {
 								className="w-full h-full">
 								<Image
 									src={Me2}
-									alt="Alvalens"
+									alt="Korobtsev"
 									layout="fill"
 									objectFit="cover"
 									placeholder="blur"
@@ -83,7 +82,7 @@ export default function About() {
 								className="w-full h-full">
 								<Image
 									src={Me3}
-									alt="Alvalens"
+									alt="Korobtsev"
 									layout="fill"
 									objectFit="cover"
 									placeholder="blur"
@@ -108,43 +107,37 @@ export default function About() {
 						type: "spring",
 					}}>
 					<h2 className="text-2xl font-bold tracking-wider mb-3">
-						Alvalen Shafelbilyunazra
+						Виталий Коробцев
 					</h2>
 					<p className="text-gray-600 text-justify title text-lg">
-						Hey there, I&rsquo;m Alvalen Shafelbilyunazra, a
+						Привет! Я Виталий Коробцев,
 						<span className="text-black font-medium">
 							{" "}
-							tech enthusiast
+							разработчик, архитектор, 
 						</span>{" "}
-						and
+						with a growing expertise in
 						<span className="text-black font-medium">
 							{" "}
-							aspiring Web Developer.
+							Artificial Intelligence.
+						</span>{" "}
+						Hailing from Pasuruan, East Java, Indonesia, I&rsquo;m currently
+						pursuing my degree in{" "}
+						<span className="text-black font-medium">
+							Computer Science
 						</span>{" "}
-						Originating from Pasuruan, East Java, Indonesia,
-						I&rsquo;m currently embarking on a fascinating journey
 						at{" "}
 						<span className="text-black font-medium">
-							Universitas Negeri Malang,
+							Universitas Negeri Malang.
 						</span>{" "}
-						where I&rsquo;m pursuing my degree in{" "}
+						My work bridges modern web technologies and intelligent systems—from
-						<span className="text-black font-medium">
+						building responsive, scalable websites to exploring generative AI
-							Informatics Engineering.
+						and LLM-based solutions. Beyond development, I stay curious about
-						</span>{" "}
+						design and emerging technologies. In today&rsquo;s ever-changing
-						My passion for technology and coding knows no bounds.
+						digital landscape, I believe being a
-						Beyond the world of coding, I find myself deeply
+						<span className="text-black font-medium"> lifelong learner</span> is
-						immersed in the realms of design, Game Development, and
+						essential. Let&rsquo;s connect and explore the evolving intersection
-						the fascinating universe of AI. I believe that in
+						of web and AI together!
-						today&rsquo;s fast-paced digital landscape, being a
-						<span className="text-black font-medium">
-							{" "}
-							lifelong learner
-						</span>{" "}
-						is not just a choice, but a necessity. Let&rsquo;s
-						connect and explore this ever-evolving world of tech
-						together!
 					</p>
-					<Card />
 				</motion.div>
 			</div>
 		</>

app/about/components/about/spotify/animation.jsx

@@ -1,25 +0,0 @@
-import { motion } from "framer-motion";
-
-const PlayingAnimation = () => {
-	return (
-		<div className="relative flex justify-between w-4 h-8 space-x-1">
-			<motion.span
-				className="w-1 h-full bg-gray-500 rounded-full"
-				animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
-				transition={{ duration: 2.2, repeat: Infinity }}
-			/>
-			<motion.span
-				className="w-1 h-full bg-gray-500 rounded-full"
-				animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
-				transition={{ duration: 2.2, repeat: Infinity, delay: -2 }}
-			/>
-			<motion.span
-				className="w-1 h-full bg-gray-500 rounded-full"
-				animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
-				transition={{ duration: 2.2, repeat: Infinity, delay: -3.7 }}
-			/>
-		</div>
-	);
-};
-
-export default PlayingAnimation;

app/about/components/about/spotify/card.jsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from "react";
-import getNowPlayingItem from "./fetch";
-import PlayingAnimation from "./animation";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSpotify } from "@fortawesome/free-brands-svg-icons";
-import Image from "next/image";
-
-const Card = () => {
-	const [loading, setLoading] = useState(true);
-	const [result, setResult] = useState({});
-
-useEffect(() => {
-	const fetchData = async () => {
-		const results = await Promise.all([getNowPlayingItem()]);
-		console.log(results);
-		setResult(results[0]);
-		setLoading(false);
-	};
-	fetchData(); // Fetch data immediately on component mount
-
-	const intervalId = setInterval(fetchData, 60 * 1000); // ! Fetch data every minute: temporary 
-
-	return () => clearInterval(intervalId); 
-}, []);
-
-	return (
-		<div className="mt-3 flex justify-center w-full">
-			{loading ? (
-				<div className="flex justify-center mb-8">
-					{/* Replace this with your own loading spinner */}
-					<div className="loader ease-linear rounded-full border-4 border-t-4 border-black h-12 w-12 mb-4"></div>
-				</div>
-			) : (
-				<div className="relative w-full mb-8 grid grid-cols-2  gap-2 border-2 border-gray-500 p-4 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-30">
-					{result.isPlaying && (
-					<Image
-						src={result.albumImageUrl}
-						alt="backgroundImage"
-						layout="fill"
-						objectFit="cover"
-						className="z-0 opacity-20 absolute"
-					/>
-					)}
-					<div className="z-10  flex items-center">
-						<FontAwesomeIcon
-							icon={faSpotify}
-							className="text-black text-5xl me-5 md:me-1 xl:me-8"
-						/>
-						<p className="font-semibold me-5 md:me-1 xl:me-7">
-							{result.isPlaying
-								? "Now playing"
-								: "Currently offline"}
-						</p>
-						{result.isPlaying && <PlayingAnimation />}
-					</div>
-					{result.isPlaying && (
-						<div className="z-10 rounded-lg ms-5">
-							<div className="flex items-center space-x-4">
-								<div className="overflow-hidden">
-									<a
-										href={result.songUrl}
-										target="_blank"
-										className="block font-semibold w-full truncate text-blue-500">
-										{result.title}
-									</a>
-									<p className="truncate text-gray-500">
-										{result.artist}
-									</p>
-								</div>
-							</div>
-						</div>
-					)}
-				</div>
-			)}
-		</div>
-	);
-};
-
-export default Card;
-

app/about/components/about/spotify/fetch.js

@@ -1,53 +0,0 @@
-import querystring from "querystring";
-const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;
-const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
-const client_id = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID;
-const client_secret = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET;
-const refresh_token = process.env.NEXT_PUBLIC_SPOTIFY_REFRESH_TOKEN;
-
-const basic = Buffer.from(`${client_id}:${client_secret}`).toString("base64");
-const getAccessToken = async () => {
-	const response = await fetch(TOKEN_ENDPOINT, {
-		method: "POST",
-		headers: {
-			Authorization: `Basic ${basic}`,
-			"Content-Type": "application/x-www-form-urlencoded",
-		},
-		body: querystring.stringify({
-			grant_type: "refresh_token",
-			refresh_token,
-		}),
-	});
-
-	return response.json();
-};
-
-export const getNowPlaying = async () => {
-	const { access_token } = await getAccessToken();
-	return fetch(NOW_PLAYING_ENDPOINT, {
-		headers: {
-			Authorization: `Bearer ${access_token}`,
-		},
-	});
-};
-
-export default async function getNowPlayingItem() {
-	const response = await getNowPlaying();
-	if (response.status === 204 || response.status > 400) {
-		return false;
-	}
-	const song = await response.json();
-	const albumImageUrl = song.item.album.images[0].url;
-	const artist = song.item.artists.map((_artist) => _artist.name).join(", ");
-	const isPlaying = song.is_playing;
-	const songUrl = song.item.external_urls.spotify;
-	const title = song.item.name;
-
-	return {
-		albumImageUrl,
-		artist,
-		isPlaying,
-		songUrl,
-		title,
-	};
-}

app/about/components/education.jsx

@@ -1,26 +1,37 @@
 import Image from "next/image";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMedal } from "@fortawesome/free-solid-svg-icons";
+import {
-import { motion } from "framer-motion";
+	faMedal,
-import Me4 from "@/public/image/me4.jpeg";
+	faGraduationCap,
+	faTrophy,
+	faAward,
+	faChevronDown,
+	faChevronUp,
+} from "@fortawesome/free-solid-svg-icons";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+import Me4 from "@/public/image/me4.jpg";
+import Me5 from "@/public/image/me5.jpg";
+import Me6 from "@/public/image/me6.jpg";
 
 function Wrapper({ children }) {
 	return (
-		<div className="mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
+		<div className="mx-auto container gap-10 p-10 grid grid-cols-1 my-10">
 			<motion.div
-				className="flex justify-center items-start flex-col mb-5 "
+				className="flex justify-center items-start flex-col mb-5"
 				initial={{
 					opacity: 0,
-					x: -200,
+					y: 50,
 				}}
 				whileInView={{
 					opacity: 1,
-					x: 0,
+					y: 0,
 				}}
 				transition={{
-					delay: 0.5,
+					delay: 0.3,
-
+					duration: 0.8,
 					type: "spring",
+					stiffness: 100,
 				}}>
 				{children}
 			</motion.div>
@@ -29,170 +40,313 @@ function Wrapper({ children }) {
 }
 
 export default function Education() {
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	const achievementsByYear = {
+		2025: [
+			{
+				icon: faMedal,
+				title: "1st place (Gold Medal)",
+				subtitle: "Fesmaro IT Business Competition",
+				date: "Mar 2025",
+				color: "from-yellow-400 to-orange-500",
+			},
+			{
+				icon: faAward,
+				title: "Finalist",
+				subtitle: "Hackfest Build to Billion 2025",
+				date: "Apr 2025",
+				color: "from-blue-500 to-purple-600",
+			},
+			{
+				icon: faMedal,
+				title: "3rd place (Bronze Medal)",
+				subtitle: "Faculty of Engineering Most Outstanding Student",
+				date: "Feb 2025",
+				color: "from-amber-600 to-yellow-600",
+			},
+		],
+		2024: [
+			{
+				icon: faTrophy,
+				title: "Special Award | Gold Medal | Incubation Opportunity",
+				subtitle: "Indonesia Inventor Day 2024 (IID)",
+				date: "Aug 2024",
+				color: "from-yellow-400 to-orange-500",
+			},
+			{
+				icon: faMedal,
+				title: "1st place (Gold Medal)",
+				subtitle: "Tech & Trade Expo 2024",
+				date: "Jul 2024",
+				color: "from-yellow-400 to-orange-500",
+			},
+			{
+				icon: faMedal,
+				title: "2nd place (Silver Medal)",
+				subtitle: "IdeaFest 2024",
+				date: "Jul 2024",
+				color: "from-slate-400 to-slate-500",
+			},
+			{
+				icon: faAward,
+				title: "Finalist",
+				subtitle: "37th National Student Science Week (PIMNAS)",
+				date: "Oct 2024",
+				color: "from-blue-500 to-purple-600",
+			},
+			{
+				icon: faMedal,
+				title: "3rd place (Bronze Medal)",
+				subtitle: "Student Digital Innovation Competition (LIDM)",
+				date: "Jun 2024",
+				color: "from-amber-600 to-yellow-600",
+			},
+			{
+				icon: faMedal,
+				title: "3rd place (Bronze Medal)",
+				subtitle: "Fesmaro UI/UX Design",
+				date: "Jun 2024",
+				color: "from-amber-600 to-yellow-600",
+			},
+		],
+		2023: [
+			{
+				icon: faAward,
+				title: "Finalist",
+				subtitle: "36th National Student Science Week (PIMNAS)",
+				date: "Nov 2023",
+				color: "from-blue-500 to-purple-600",
+			},
+			{
+				icon: faMedal,
+				title: "3rd place (Bronze Medal)",
+				subtitle: "FORKAFEST 3.0 Web Development competition",
+				date: "Jan 2023",
+				color: "from-amber-600 to-yellow-600",
+			},
+		],
+	};
+
+	// Flatten all achievements into a single array for easier limiting
+	const allAchievements = Object.entries(achievementsByYear)
+		.sort(([a], [b]) => parseInt(b) - parseInt(a))
+		.flatMap(([year, achievements]) =>
+			achievements.map((achievement) => ({ ...achievement, year }))
+		);
+
+	const visibleAchievements = isExpanded
+		? allAchievements
+		: allAchievements.slice(0, 6);
+	const hasMoreAchievements = allAchievements.length > 6;
+
 	return (
 		<Wrapper>
 			<section className="grid gap-8 md:gap-12">
-				<div className="text-center space-y-2">
+				{" "}
+				{/* Header */}
+				<motion.div
+					className="text-center space-y-2"
+					initial={{ opacity: 0, y: 30 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					transition={{ duration: 0.6 }}>
 					<h1 className="text-3xl md:text-4xl font-bold tracking-tighter">
 						Education
 					</h1>
 					<p className="text-muted-foreground max-w-[800px] mx-auto">
 						Get to know more about my educational background.
 					</p>
-				</div>
+				</motion.div>
-				<div className="grid gap-8 md:gap-12">
+				{/* Main Content */}
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-						<div className="px-5">
+					{/* Education Section - Left */}
-							<div className="font-medium text-lg">
+					<motion.div
-								2022 - Present
+						className="px-5"
-							</div>
+						initial={{ opacity: 0, x: -50 }}
-							<div>
+						whileInView={{ opacity: 1, x: 0 }}
-								<h2 className="font-semibold text-xl">
+						transition={{ duration: 0.8, delay: 0.2 }}>
-									Universitas Negeri Malang
+						<div className="font-medium text-lg mb-4">2022 - Present</div>
-								</h2>
+						<div>
-								<h3 className="text-md font-normal mb-3">
+							<h2 className="font-semibold text-xl">
-									S1 Teknik Informatika | Computer Science
+								Universitas Negeri Malang
-								</h3>
-								<div className="gap-4 mb-4 flex items-stretch md:h-[300px] xl:h-[400px]">
-									<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
-										<Image
-											src={Me4}
-											width={400}
-											height={225}
-											alt="University"
-											className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
-										/>
-									</div>
-									<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
-										<Image
-											src={Me4}
-											width={400}
-											height={225}
-											alt="University"
-											className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
-										/>
-									</div>
-									<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
-										<Image
-											src={Me4}
-											width={400}
-											height={225}
-											alt="University"
-											className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
-										/>
-									</div>
-								</div>
-								<div className="flex items-center gap-2">
-									<p className="text-justify">
-										Aspiring to be a software engineer, I am
-										currently pursuing a bachelor&rsquo;s
-										degree in computer science at
-										Universitas Negeri Malang. Fascinated by
-										the world of technology, I am eager to
-										learn and explore new things in the
-										field of computer science.
-									</p>
-								</div>
-								{/* add gpa in a style */}
-								<div className="flex flex-wrap gap-2 mt-4 text-sm">
-									<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-										GPA: 3.9 out of 4
-									</div>
-								</div>
-							</div>
-						</div>
-						<div className="flex flex-col justify-start px-5 md:px-0">
-							<h2 className="font-semibold text-xl mt-7">
-								Achievements
 							</h2>
-							<p className="text-md font-normal mb-3 md:mb-12">
+							<h3 className="text-md font-normal mb-3">
-								Some of my achievements during my study.
+								S1 Teknik Informatika | Computer Science
-							</p>
+							</h3>
-							<div className="flex items-center gap-4 mb-4">
+							<div className="gap-4 mb-4 flex items-stretch md:h-[300px] xl:h-[400px]">
-								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+								<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
-									<FontAwesomeIcon
+									<Image
-										icon={faMedal}
+										src={Me5}
-										className="text-white h-5 w-5"
+										width={400}
+										height={225}
+										alt="University"
+										className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
 									/>
 								</div>
-								<div>
+								<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
-									<h3 className="font-medium">
+									<Image
-										Special Award | Gold Medal | Incubation
+										src={Me4}
-										Opportunity
+										width={400}
-									</h3>
+										height={225}
-									<p className="text-sm">
+										alt="University"
-										Indonesia Inventor Day 2024 (IID) | Aug
+										className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
-										2024
+									/>
-									</p>
+								</div>
+								<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
+									<Image
+										src={Me6}
+										width={400}
+										height={225}
+										alt="University"
+										className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
+									/>
 								</div>
 							</div>
-							<div className="flex items-center gap-4 mb-4">
+							<div className="flex items-center gap-2">
-								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+								<p className="text-gray-600 text-justify title text-lg">
-									<FontAwesomeIcon
+									Aspiring to become a professional Software Engineer, I&rsquo;m
-										icon={faMedal}
+									currently pursuing my Bachelor&rsquo;s degree in{" "}
-										className="text-white h-5 w-5"
+									<span className="text-black font-medium">
-									/>
+										Computer Science
-								</div>
+									</span>{" "}
-								<div>
+									at{" "}
-									<h3 className="font-medium">
+									<span className="text-black font-medium">
-										3rd place (Bronze Medal)
+										Universitas Negeri Malang
-									</h3>
+									</span>
-									<p className="text-sm">
+									. My journey in tech is driven by curiosity and
-										Student Digital Innovation Competition
+									creativity—combining web development with cutting-edge AI
-										(LIDM) | Jun 2024
+									research and implementation.
-									</p>
+									<br />
-								</div>
+									<br />
+									As the{" "}
+									<span className="text-black font-medium">
+										Co-Lead of Google Developer Group on Campus (GDGoC)
+									</span>{" "}
+									at my university, I&rsquo;ve led technical initiatives,
+									mentored peers, and helped build impactful digital solutions.
+									I&rsquo;ve actively participated in various{" "}
+									<span className="text-black font-medium">
+										national or international technology competitions
+									</span>
+									, earning recognition through awards such as{" "}
+									<span className="text-black font-medium">
+										PIMNAS Finalist, Indonesia Inventor Day Gold Medalist, Top 3
+										at LIDM 2024
+									</span>
+									, and more.
+									<br />
+									<br />I am passionate about solving real-world problems
+									through code, especially at the intersection of{" "}
+									<span className="text-black font-medium">
+										Web Development
+									</span>{" "}
+									and{" "}
+									<span className="text-black font-medium">
+										Artificial Intelligence
+									</span>
+									. Constantly learning, building, and collaborating—I&rsquo;m
+									excited to keep growing and contributing to the evolving tech
+									landscape.
+								</p>
 							</div>
-							<div className="flex items-center gap-4 mb-4">
+							<div className="flex flex-wrap gap-2 mt-4 text-sm">
-								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+								<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-									<FontAwesomeIcon
+									GPA: 3.9 out of 4
-										icon={faMedal}
-										className="text-white h-5 w-5"
-									/>
-								</div>
-								<div>
-									<h3 className="font-medium">
-										3rd place (Bronze Medal)
-									</h3>
-									<p className="text-sm">
-										Fesmaro UI/UX Design | Jun 2024
-									</p>
-								</div>
-							</div>
-							<div className="flex items-center gap-4 mb-5">
-								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
-									<FontAwesomeIcon
-										icon={faMedal}
-										className="text-white h-5 w-5"
-									/>
-								</div>
-								<div>
-									<h3 className="font-medium">Finalist</h3>
-									<p className="text-sm">
-										36th National Student Science Week
-										(PIMNAS) | Nov 2023
-									</p>
-								</div>
-							</div>
-							<div className="flex items-center gap-4 mb-5">
-								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
-									<FontAwesomeIcon
-										icon={faMedal}
-										className="text-white h-5 w-5"
-									/>
-								</div>
-								<div>
-									<h3 className="font-medium">
-										3rd place (Bronze Medal)
-									</h3>
-									<p className="text-sm">
-										FORKAFEST 3.0 Web Development
-										competition | Jan 2023
-									</p>
 								</div>
 							</div>
 						</div>
-					</div>
+					</motion.div>{" "}
+					{/* Achievements Section - Right */}
+					<motion.div
+						className="flex flex-col justify-start px-5 md:px-0"
+						initial={{ opacity: 0, x: 50 }}
+						whileInView={{ opacity: 1, x: 0 }}
+						transition={{ duration: 0.8, delay: 0.4 }}>
+						<h2 className="font-semibold text-xl mt-7">Achievements</h2>
+						<p className="text-md font-normal mb-3 md:mb-6">
+							Some of my achievements during my study.
+						</p>
+
+						{/* Achievements Container with transparent bottom effect */}
+						<div className="relative">
+							<div className="space-y-4">
+								{/* Show visible achievements */}
+								<AnimatePresence>
+									{visibleAchievements.map((achievement, index) => (
+										<motion.div
+											key={`${achievement.year}-${index}`}
+											className="group"
+											initial={{ opacity: 0, y: 20 }}
+											animate={{ opacity: 1, y: 0 }}
+											exit={{ opacity: 0, y: -20 }}
+											transition={{ duration: 0.5, delay: index * 0.05 }}>
+											{/* Year indicator for first achievement of each year */}
+											{index === 0 ||
+											visibleAchievements[index - 1]?.year !==
+												achievement.year ? (
+												<div className="flex items-center gap-3 mb-3 mt-2">
+													<div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+														<span className="text-xs font-bold text-gray-600">
+															{achievement.year}
+														</span>
+													</div>
+													<div className="flex-1 h-px bg-gradient-to-r from-gray-300 to-transparent"></div>
+												</div>
+											) : null}
+
+											{/* Glassmorphism achievement card with monochrome to color effect */}
+											<div className="bg-white/20 backdrop-blur-md border border-white/30 rounded-2xl p-4 shadow-lg hover:bg-white/30 transition-all duration-300 hover:shadow-xl grayscale hover:grayscale-0">
+												<div className="flex items-center gap-4">
+													<div
+														className={`aspect-square w-10 rounded-full bg-gradient-to-r ${achievement.color} flex items-center justify-center text-primary-foreground transition-all duration-300`}>
+														<FontAwesomeIcon
+															icon={achievement.icon}
+															className="text-white h-5 w-5"
+														/>
+													</div>
+													<div>
+														<h3 className="font-medium">{achievement.title}</h3>
+														<p className="text-sm">{achievement.subtitle}</p>
+														<div className="text-xs text-gray-500 mt-1">
+															{achievement.date}
+														</div>
+													</div>
+												</div>
+											</div>
+										</motion.div>
+									))}
+								</AnimatePresence>
+							</div>
+
+							{/* Transparent bottom overlay when not expanded */}
+							{!isExpanded && hasMoreAchievements && (
+								<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-stale-300 via-stale/70 to-transparent pointer-events-none"></div>
+							)}
+
+							{/* Expand/Collapse Button */}
+							{hasMoreAchievements && (
+								<motion.div
+									className="flex justify-center mt-6"
+									initial={{ opacity: 0 }}
+									animate={{ opacity: 1 }}
+									transition={{ delay: 0.5 }}>
+									<button
+										onClick={() => setIsExpanded(!isExpanded)}
+										className="flex items-center gap-2 px-6 py-3 bg-white/30 backdrop-blur-md border border-white/40 rounded-full hover:bg-white/40 transition-all duration-300 text-sm font-medium shadow-lg hover:shadow-xl">
+										<span>
+											{isExpanded
+												? `Show Less`
+												: `Show ${allAchievements.length - 4} More`}
+										</span>
+										<FontAwesomeIcon
+											icon={isExpanded ? faChevronUp : faChevronDown}
+											className="h-3 w-3 transition-transform duration-300"
+										/>
+									</button>
+								</motion.div>
+							)}
+						</div>
+					</motion.div>
 				</div>
 			</section>
 		</Wrapper>

app/about/components/experience.jsx

@@ -1,5 +1,124 @@
+"use client";
 import Hr from "@/components/Hr";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+
+const experiences = [
+	{
+		id: 1,
+		startDate: "Sep 2023",
+		endDate: "Jan 2024",
+		company: "Universitas Negeri Malang",
+		position: "Assistant Lecturer",
+		type: "Seasonal",
+		location: "Malang, Indonesia",
+		description:
+			"Assisted in teaching and mentoring students in algorithms and data structures, focusing on practical applications and problem-solving techniques. Developed course materials and provided support in lab sessions.",
+		skills: ["Python", "C", "Algorithms", "Data Structures", "Mentoring"],
+	},
+	{
+		id: 2,
+		startDate: "Jul 2024",
+		endDate: "Jan 2025",
+		company: "Outlier AI",
+		position: "AI Trainer",
+		type: "Freelance (Remote)",
+		location: "Oakland, California",
+		description:
+			"Trained LLM models using RLFH, focusing on enhancing their understanding of human language and improving their response accuracy. Collaborated with a team of AI specialists to refine model performance and ensure high-quality outputs.",
+		skills: ["Generative AI", "RLFH", "LLM", "Prompt Engineering", "Teamwork"],
+	},
+	{
+		id: 3,
+		startDate: "Jun 2023",
+		endDate: "Feb 2025",
+		company: "PUI-PT DLI",
+		position: "Fullstack Developer",
+		type: "Freelance",
+		location: "Malang, Indonesia",
+		description:
+			"Crafted and maintained web applications using Laravel, ensuring high performance and responsiveness. Collaborated with designers and other  developers to create seamless user experiences.",
+		skills: ["Laravel", "MySQL", "PHP", "JavaScript", "Teamwork"],
+	},
+	{
+		id: 4,
+		startDate: "Apr 2025",
+		endDate: "Jul 2025",
+		company: "Vektorian Labophase",
+		position: "Front-end Developer",
+		type: "Freelance",
+		location: "Malang, Indonesia",
+		description:
+			"Developed and maintained web applications using Next.js. Focused on creating responsive and user-friendly interfaces while ensuring backend functionality. Collaborated with backend and designers to implement modern UI/UX principles.",
+		skills: ["Next.js", "Typescript", "Teamwork"],
+	},
+	{
+		id: 5,
+		startDate: "Apr 2023",
+		endDate: "Present",
+		company: "Self-Employed",
+		position: "Web Developer & AI Consultant",
+		type: "Freelance",
+		location: "Malang, Indonesia",
+		description:
+			"Developed 15+ web applications using Next.js, React, and Laravel. Provided AI consulting services, including creating custom LLMs. Focused on delivering high-quality, user-friendly applications and AI solutions.",
+		skills: [
+			"Next.js",
+			"React",
+			"Laravel",
+			"MySQL",
+			"PostgreSQL",
+			"MongoDB",
+			"JavaScript",
+			"TypeScript",
+			"Gemini AI",
+		],
+	},
+	{
+		id: 6,
+		startDate: "Aug 2023",
+		endDate: "Present",
+		company: "PT Hafdzamedia Teknologi Aplikasi",
+		position: "Fullstack Web Developer",
+		type: "Part-time",
+		location: "Malang, Indonesia",
+		description:
+			"Developed and maintained web applications using React, Next.js, and Laravel. Focused on creating responsive and user-friendly interfaces while ensuring backend functionality.",
+		skills: [
+			"React",
+			"Next.js",
+			"Laravel",
+			"MySQL",
+			"JavaScript",
+			"TypeScript",
+			"Teamwork",
+		],
+	},
+	{
+		id: 7,
+		startDate: "Feb 2025",
+		endDate: "Present",
+		company: "Joki Proyek",
+		position: "IT Implementation Specialist",
+		type: "Internship (Remote)",
+		location: "Malang, Indonesia",
+		description:
+			"Developed and maintained current internal web applications using Next.js & and Laravel. Fixed bugs and implemented new features to enhance user experience. Collaborated with the team to ensure smooth deployment and functionality of applications.",
+		skills: [
+			"Next.js",
+			"Laravel",
+			"MySQL",
+			"PostgreSQL",
+			"JavaScript",
+			"TypeScript",
+			"MongoDB",
+			"Docker",
+			"Teamwork",
+		],
+	},
+];
+
+experiences.reverse();
 
 function Title() {
 	return (
@@ -18,7 +137,6 @@ function Title() {
 					}}
 					transition={{
 						delay: 0.7,
-
 						type: "spring",
 					}}>
 					Profesional Experience
@@ -28,135 +146,193 @@ function Title() {
 	);
 }
 
+function TimelineCard({ experience, index, isEven }) {
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: -20 }}
+			whileInView={{ opacity: 1, y: 0 }}
+			transition={{ delay: index * 0.15, duration: 0.5 }}
+			className={`flex ps-10 md:ps-0 ${
+				isEven
+					? "md:justify-center md:translate-x-68"
+					: "md:justify-center md:-translate-x-68"
+			} justify-center mb-4`}>
+			<div className="bg-gradient-to-r from-black to-gray-800 text-white px-12 py-3 rounded-xl shadow-lg border border-gray-600 min-w-max">
+				<div className="flex items-center justify-center gap-6">
+					<div className="text-center">
+						<div className="text-sm font-bold">{experience.startDate}</div>
+						<div className="text-xs text-gray-300">Start</div>
+					</div>
+					<div className="w-px h-8 bg-gray-500"></div>
+					<div className="text-center">
+						<div className="text-sm font-bold">{experience.endDate}</div>
+						<div className="text-xs text-gray-300">End</div>
+					</div>					<div className="w-px h-8 bg-gray-500"></div>
+					<div className="text-center">
+						<div className="text-sm font-medium text-gray-400">
+							{experience.location}
+						</div>
+						<div className="text-xs text-gray-300">Location</div>
+					</div>
+				</div>
+			</div>
+		</motion.div>
+	);
+}
+
+function ExperienceCard({ experience, index, isEven }) {
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: 50 }}
+			whileInView={{ opacity: 1, y: 0 }}
+			transition={{ delay: index * 0.2, duration: 0.6 }}
+			className={`relative group ${
+				isEven ? "md:ml-auto md:pl-12" : "md:mr-auto md:pr-12"
+			} md:w-1/2`}>
+			{" "}
+			{/* Card */}
+			<div
+				className={`bg-white/20 backdrop-blur-sm border border-gray-300/30 rounded-2xl p-6 shadow-lg 
+				hover:shadow-xl hover:bg-white/30 transition-all duration-300 ml-12 md:ml-0`}>
+				{/* Company & Position */}
+				<div className="mb-4">
+					<h3 className="font-bold text-xl text-black mb-1">
+						{experience.company}
+					</h3>
+					<h4 className="font-medium text-lg text-gray-700">
+						{experience.position}
+						<span className="text-sm font-normal text-gray-500 ml-2">
+							• {experience.type}
+						</span>
+					</h4>
+				</div>
+
+				{/* Description */}
+				<p className="text-gray-600 text-justify leading-relaxed mb-4">
+					{experience.description}
+				</p>
+
+				{/* Skills */}
+				<div className="flex flex-wrap gap-2">
+					{experience.skills.map((skill, idx) => (
+						<span
+							key={idx}
+							className="bg-gray-200/60 hover:bg-gray-300/60 border border-gray-400/40 text-black px-3 py-1 rounded-full text-sm font-medium transition-all duration-300 backdrop-blur-sm hover:scale-105">
+							{skill}
+						</span>
+					))}
+				</div>
+			</div>
+		</motion.div>
+	);
+}
+
 function Wrapper({ children }) {
 	return (
-		<div className="mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
+		<div className="mx-auto container px-6 py-10">
-			<motion.div
+			<div
-				className="flex justify-center items-start flex-col mb-5 "
+				className="flex justify-center items-center flex-col">
-				initial={{
+				{children}
-					opacity: 0,
+			</div>
-					x: -200,
-				}}
-				whileInView={{
-					opacity: 1,
-					x: 0,
-				}}
-				transition={{
-					delay: 0.5,
-
-					type: "spring",
-				}}>
-				<section className="grid gap-8 md:gap-12">
-					<div className="relative after:absolute after:inset-y-2 after:w-1 after:bg-gray-700 after:left-[-4px] md:after:left-1 lg:after:left-2 xl:after:left-3 grid gap-8 md:gap-12 pl-6 md:pl-8">
-						{children}
-					</div>
-				</section>
-			</motion.div>
 		</div>
 	);
 }
 
 export default function Experience() {
+	const [showAll, setShowAll] = useState(false);
+	const displayedExperiences = showAll ? experiences : experiences.slice(0, 3);
+
 	return (
 		<>
-			<Title/>
+			<Title />
 			<Wrapper>
-				<div className="grid gap-4 relative">
+				{" "}
-					<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
+				<div className="relative w-full max-w-6xl mx-auto">
-					<div className="font-medium text-lg">2023 - Present</div>
+					{" "}
-					<div>
+					{/* Timeline line - hidden on mobile, visible on md+ */}
-						<h3 className="font-semibold text-xl text-black">
+					<div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-1 bg-gradient-to-b from-black via-gray-400 to-transparent h-full"></div>
-							PT Hafdzamedia Teknologi Aplikasi
+					{/* Mobile timeline line */}
-						</h3>
+					<div className="md:hidden absolute left-0 w-1 bg-gradient-to-b from-black via-gray-400 to-transparent h-full"></div>{" "}
-						<h4 className=" font-light text-md mb-4">
+					{/* Experience cards */}
-							Fullstack Web Developer | Part-time
+					<div className="space-y-12 md:space-y-16 relative">
-						</h4>
+						<AnimatePresence>
-						<p className="text-justify">
+							{displayedExperiences.map((experience, index) => (
-							Responsible for building and maintaining scalable
+								<div key={experience.id} className="relative">
-							web applications using the latest technologies.
+									{/* Timeline period card - flows naturally above content */}
-							Collaborated with cross-functional teams to deliver
+									<TimelineCard
-							high-quality solutions that meet business
+										experience={experience}
-							requirements.
+										index={index}
-						</p>
+										isEven={index % 2 === 1}
-						<div className="flex flex-wrap gap-2 mt-4 text-sm">
+									/>
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-								React
-							</div>
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-								Next.js
-							</div>
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-								Laravel
-							</div>
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-								MySql
-							</div>
-						</div>
-					</div>
-				</div>
-				<div className="grid gap-4 relative">
-					<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
-					<div className="font-medium text-lg">2024 - Present</div>
-					<div>
-						<h3 className="font-semibold text-xl text-black">
-							Outlier
-						</h3>
-						<h4 className=" font-light text-md mb-4">
-							AI Trainer | Freelance
-						</h4>
-						<p className="text-justify">
-							Crafted and refined chatbot prompts using prompt
-							engineering and RLHF techniques to improve the AI
-							responses in English and Indonesian, leading to more
-							accurate and contextually relevant interactions.
-						</p>
 
-						<div className="flex flex-wrap gap-2 mt-4 text-sm">
+									{/* Timeline dot - positioned at the start of the experience card */}
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+									<div
-								Generative AI
+										className={`absolute w-6 h-6 bg-black rounded-full border-4 border-white shadow-lg z-30
-							</div>
+										md:left-1/2 md:-translate-x-1/2 md:top-4
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+										left-0 -translate-x-1/2 top-5`}
-								Prompt Engineering
+									/>
-							</div>
+
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+									{/* Experience content card */}
-								Problem Solving
+									<ExperienceCard
-							</div>
+										experience={experience}
-						</div>
+										index={index}
-					</div>
+										isEven={index % 2 === 1}
-				</div>
+									/>
-				<div className="grid gap-4 relative">
+								</div>
-					<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
+							))}
-					<div className="font-medium text-lg">2023 - Present</div>
+						</AnimatePresence>
-					<div>
-						<h3 className="font-semibold text-xl text-black">
-							Self-Employed
-						</h3>
-						<h4 className=" font-light text-md mb-4">
-							Web Developer | Freelance
-						</h4>
-						<p className="text-justify">
-							Specialized in crafting innovative solutions using
-							Laravel and Next.js, enhancing client satisfaction
-							and project efficiency. Contributed expertise in
-							both frontend and backend development during
-							collaborative team projects, leading to successful
-							project completions
-						</p>
-						<div className="flex flex-wrap gap-2 mt-4 text-sm">
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-								React
-							</div>
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-								Next.js
-							</div>
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-								Laravel
-							</div>
-							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-								MySql
-							</div>
-						</div>
 					</div>
+					{/* Expand/Collapse button */}
+					{experiences.length > 3 && (
+						<motion.div
+							className="flex justify-center mt-12"
+							initial={{ opacity: 0 }}
+							whileInView={{ opacity: 1 }}
+							transition={{ delay: 0.5 }}>
+							<button
+								onClick={() => setShowAll(!showAll)}
+								className="bg-black hover:bg-gray-800 text-white px-8 py-3 rounded-full font-medium 
+									transition-all duration-300 hover:scale-105 shadow-lg flex items-center gap-2">
+								{showAll ? (
+									<>
+										Show Less
+										<svg
+											className="w-4 h-4 transform rotate-180"
+											fill="none"
+											stroke="currentColor"
+											viewBox="0 0 24 24">
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												strokeWidth={2}
+												d="M19 9l-7 7-7-7"
+											/>
+										</svg>
+									</>
+								) : (
+									<>
+										View More Experience
+										<svg
+											className="w-4 h-4"
+											fill="none"
+											stroke="currentColor"
+											viewBox="0 0 24 24">
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												strokeWidth={2}
+												d="M19 9l-7 7-7-7"
+											/>
+										</svg>
+									</>
+								)}
+							</button>
+						</motion.div>
+					)}{" "}
+					{/* Gradient fade effect at bottom */}
+					{!showAll && (
+						<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-stale-300 to-transparent pointer-events-none"></div>
+					)}
 				</div>
 			</Wrapper>
 		</>

app/about/components/quote/useIntersectionObserver.js

@@ -17,13 +17,15 @@ export function useIntersectionObserver() {
 			}
 		);
 
-		if (ref.current) {
+		const currentRef = ref.current; // Store the ref value in a variable
-			observer.observe(ref.current);
+
+		if (currentRef) {
+			observer.observe(currentRef);
 		}
 
 		return () => {
-			if (ref.current) {
+			if (currentRef) {
-				observer.unobserve(ref.current);
+				observer.unobserve(currentRef);
 			}
 		};
 	}, []);

app/about/components/skills/icons.jsx

@@ -0,0 +1,84 @@
+function ActivityIcon(props) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round">
+			<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
+		</svg>
+	);
+}
+function CodepenIcon(props) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round">
+			<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" />
+			<line x1="12" x2="12" y1="22" y2="15.5" />
+			<polyline points="22 8.5 12 15.5 2 8.5" />
+			<polyline points="2 15.5 12 8.5 22 15.5" />
+			<line x1="12" x2="12" y1="2" y2="8.5" />
+		</svg>
+	);
+}
+
+function WebhookIcon(props) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round">
+			<path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" />
+			<path d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06" />
+			<path d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8" />
+		</svg>
+	);
+}
+
+function MobileIcon(props) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round">
+			<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+			<line x1="12" x2="12" y1="18" y2="18" />
+		</svg>
+	);
+}
+
+export {
+  ActivityIcon,
+  CodepenIcon,
+  WebhookIcon,
+  MobileIcon,
+};

app/about/components/skills/skills.jsx

@@ -1,164 +1,249 @@
-import { motion } from "framer-motion";
+"use client";
-import Stack from "./stack";
+import { motion, AnimatePresence } from "framer-motion";
-import Tools from "./tools";
+import { useState } from "react";
+import { CodepenIcon, WebhookIcon, ActivityIcon, MobileIcon } from "./icons"
+
+const skillCategories = {
+	web: {
+		title: "Web Development",
+		icon: CodepenIcon,
+		description: "Building modern, responsive web applications",
+		languages: [
+			"HTML",
+			"CSS",
+			"JavaScript",
+			"TypeScript",
+			"PHP",
+			"Python",
+			"React",
+			"NextJS",
+			"TailwindCSS",
+			"Bootstrap",
+			"NodeJS",
+			"ExpressJS",
+			"Laravel",
+			"Flask",
+			"Django",
+			"Firebase"
+		],
+		tools: ["Visual Studio Code", "Git", "Github", "Figma", "Vite", "Docker", "Kubernetes", "Google Cloud", "Postman"],
+	},
+	api: {
+		title: "REST API",
+		icon: WebhookIcon,
+		description: "Creating robust and scalable backend services",
+		languages: [
+			"NodeJS",
+			"ExpressJS",
+			"PHP",
+			"Laravel",
+			"Python",
+			"FastAPI",
+			"Flask",
+			"Django",
+			"MySQL",
+			"PostgreSQL",
+			"MongoDB",
+			"Firebase",
+		],
+		tools: ["Postman", "Docker", "Kubernetes", "Swagger", "Git", "Github", "Google Cloud", "IBM Cloud"],
+	},
+	ai: {
+		title: "AI & Machine Learning",
+		icon: ActivityIcon,
+		description: "Developing intelligent solutions with ML/AI",
+		languages: [
+			"Python",
+			"TensorFlow",
+			"PyTorch",
+			"Scikit-learn",
+			"Pandas",
+			"NumPy",
+			"Jupyter",
+			"OpenAI API",
+			"Gemini API",
+			"LangChain",
+		],
+		tools: [
+			"Jupyter Notebook",
+			"Google Colab",
+			"Google Cloud AI",
+			"AWS SageMaker",
+			"IBM Watson",
+		],
+	},
+	mobile: {
+		title: "Mobile Development",
+		icon: MobileIcon,
+		description: "Cross-platform mobile app development",
+		languages: [
+			"React Native",
+			"JavaScript",
+			"TypeScript",
+			"Dart",
+			"Flutter",
+		],
+		tools: [
+			"Android Studio",
+			"React Native CLI",
+		],
+	},
+};
+
+function SkillCard({ skill, isSelected, onClick }) {
+	const Icon = skill.icon;
 
-function Wrapper({ children }) {
 	return (
-		<div className="mx-auto container gap-4 p-10 grid grid-cols-1 mt-10">
+		<motion.div
+			onClick={onClick}
+			className={`relative cursor-pointer group p-6 rounded-2xl backdrop-blur-lg border transition-all duration-300 ${
+				isSelected
+					? "bg-white/20 border-black border-2 shadow-lg"
+					: "bg-white/10 border-gray-300/20 hover:bg-white/20 hover:border-gray-300/30"
+			}`}
+			whileHover={{
+				scale: 1.05,
+				rotateY: 5,
+			}}
+			whileTap={{ scale: 0.95 }}
+			initial={{ opacity: 0, y: 20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{
+				type: "spring",
+				stiffness: 300,
+				damping: 20,
+			}}>
+			{/* Glow effect - removed for selected state */}
+			{!isSelected && (
+				<div className="absolute inset-0 rounded-2xl transition-opacity duration-300 opacity-0 group-hover:opacity-50 bg-gradient-to-r from-gray-400/20 to-gray-600/20 blur-xl" />
+			)}
+
+			<div className="relative z-10 flex flex-col items-center text-center space-y-4">
+				<div
+					className={`p-4 rounded-xl transition-all duration-300 ${
+						isSelected ? "bg-white/30" : "bg-white/10 group-hover:bg-white/20"
+					}`}>
+					<Icon className="w-8 h-8 text-black" />
+				</div>
+				<div>
+					<h3 className="font-semibold text-black text-lg mb-2">
+						{skill.title}
+					</h3>
+					<p className="text-gray-600 text-sm leading-relaxed">
+						{skill.description}
+					</p>
+				</div>
+			</div>
+		</motion.div>
+	);
+}
+
+function SkillDetails({ selectedSkill }) {
+	if (!selectedSkill) return null;
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: 20 }}
+			animate={{ opacity: 1, y: 0 }}
+			exit={{ opacity: 0, y: -20 }}
+			transition={{ duration: 0.5 }}
+			className="mt-12 space-y-8">
+			{/* Languages & Frameworks */}
 			<motion.div
-				className="flex justify-center items-center flex-col mb-5 "
+				className="backdrop-blur-lg bg-white/20 border border-gray-300/30 rounded-2xl p-8"
-				initial={{
+				initial={{ opacity: 0, x: -50 }}
-					opacity: 0,
+				animate={{ opacity: 1, x: 0 }}
-					x: -200,
+				transition={{ delay: 0.2 }}>
-				}}
+				<h3 className="text-2xl font-semibold text-black mb-6 text-center">
-				whileInView={{
+					Languages & Frameworks
-					opacity: 1,
+				</h3>
-					x: 0,
+				<div className="flex flex-wrap justify-center gap-3">
-				}}
+					{selectedSkill.languages.map((lang, index) => (
-				transition={{
+						<motion.span
-					delay: 0.5,
+							key={lang}
-					type: "spring",
+							initial={{ opacity: 0, scale: 0.8 }}
-				}}>
+							animate={{ opacity: 1, scale: 1 }}
-				{children}
+							transition={{ delay: 0.3 + index * 0.1 }}
+							className="px-4 py-2 bg-gradient-to-r from-gray-200/60 to-white/40 
+									 border border-gray-400/40 rounded-full text-black font-medium
+									 backdrop-blur-sm hover:scale-105 transition-transform cursor-default
+									 hover:bg-gradient-to-r hover:from-gray-300/60 hover:to-white/50">
+							{lang}
+						</motion.span>
+					))}
+				</div>
 			</motion.div>
-		</div>
+
+			{/* Tools */}
+			<motion.div
+				className="backdrop-blur-lg bg-white/20 border border-gray-300/30 rounded-2xl p-8"
+				initial={{ opacity: 0, x: 50 }}
+				animate={{ opacity: 1, x: 0 }}
+				transition={{ delay: 0.4 }}>
+				<h3 className="text-2xl font-semibold text-black mb-6 text-center">
+					Tools & Technologies
+				</h3>
+				<div className="flex flex-wrap justify-center gap-3">
+					{selectedSkill.tools.map((tool, index) => (
+						<motion.span
+							key={tool}
+							initial={{ opacity: 0, scale: 0.8 }}
+							animate={{ opacity: 1, scale: 1 }}
+							transition={{ delay: 0.5 + index * 0.1 }}
+							className="px-4 py-2 bg-gradient-to-r from-gray-300/60 to-gray-100/40 
+									 border border-gray-500/40 rounded-full text-black font-medium
+									 backdrop-blur-sm hover:scale-105 transition-transform cursor-default
+									 hover:bg-gradient-to-r hover:from-gray-400/60 hover:to-gray-200/50">
+							{tool}
+						</motion.span>
+					))}
+				</div>
+			</motion.div>
+		</motion.div>
 	);
 }
 
 export default function Skills() {
+	const [selectedCategory, setSelectedCategory] = useState("web");
 	return (
-		<>
+		<div className="relative">
-			<Wrapper>
+			<div className="mx-auto container px-6 py-20">
-				<section className="grid gap-8 md:gap-12">
+				<motion.div
-					<div className="text-center space-y-2">
+					initial={{ opacity: 0, y: -20 }}
-						<h2 className="text-3xl font-bold mt-3 text-black">
+					whileInView={{ opacity: 1, y: 0 }}
-							Skills and Expertise
+					transition={{ duration: 0.6 }}
-						</h2>
+					className="text-center space-y-4 mb-16">
-						<p className="text-muted-foreground max-w-[800px] mx-auto">
+					<h2 className="text-5xl font-bold bg-gradient-to-r from-black to-gray-600 bg-clip-text text-transparent">
-							Explore some skills I&apos;m proficient in to
+						Skills & Expertise
-							deliver high-quality solutions.
+					</h2>
-						</p>
+					<p className="text-gray-600 max-w-2xl mx-auto text-lg leading-relaxed">
-					</div>
+						Explore my technical skills across different domains. Click on any
-					<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-8">
+						category to see the specific technologies and tools I work with.
-						<div className="flex flex-col items-center gap-2">
+					</p>
-							<CodepenIcon className="w-12 h-12" />
+				</motion.div>
-							<div className="font-medium">Web Development</div>
+
-						</div>
+				{/* Skill Categories Grid */}
-						<div className="flex flex-col items-center gap-2">
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-							<WebhookIcon className="w-12 h-12" />
+					{Object.entries(skillCategories).map(([key, skill], index) => (
-							<div className="font-medium">REST API</div>
+						<motion.div
-						</div>
+							key={key}
-						<div className="flex flex-col items-center gap-2">
+							initial={{ opacity: 0, y: 20 }}
-							<ActivityIcon className="w-12 h-12" />
+							whileInView={{ opacity: 1, y: 0 }}
-							<div className="font-medium">Machine Learning</div>
+							transition={{ delay: index * 0.1 }}>
-						</div>
+							<SkillCard
-						<div className="flex flex-col items-center gap-2">
+								skill={skill}
-							<MobileIcon className="w-12 h-12" />
+								isSelected={selectedCategory === key}
-							<div className="font-medium">
+								onClick={() => setSelectedCategory(key)}
-								Mobile Development
+							/>
-							</div>
+						</motion.div>
-						</div>
+					))}
-						{/* <div className="flex flex-col items-center gap-2">
-					<CloudIcon className="w-12 h-12" />
-					<div className="font-medium">Cloud Computing</div>
 				</div>
-				<div className="flex flex-col items-center gap-2">
+
-					<BarChartIcon className="w-12 h-12" />
+				{/* Skill Details */}
-					<div className="font-medium">Data Analysis</div>
+				<AnimatePresence mode="wait">
-				</div>
+					<SkillDetails selectedSkill={skillCategories[selectedCategory]} />
-				<div className="flex flex-col items-center gap-2">
+				</AnimatePresence>
-					<ComputerIcon className="w-12 h-12" />
-					<div className="font-medium">Cybersecurity</div>
-				</div>
-				<div className="flex flex-col items-center gap-2">
-					<PackageIcon className="w-12 h-12" />
-					<div className="font-medium">Product Management</div>
-				</div> */}
-					</div>
-				</section>
-			</Wrapper>
-			<div className=" mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 mt-10 mb-24">
-				<Stack />
-				<Tools />
 			</div>
-		</>
+		</div>
-	);
-}
-
-function ActivityIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
-		</svg>
-	);
-}
-function CodepenIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" />
-			<line x1="12" x2="12" y1="22" y2="15.5" />
-			<polyline points="22 8.5 12 15.5 2 8.5" />
-			<polyline points="2 15.5 12 8.5 22 15.5" />
-			<line x1="12" x2="12" y1="2" y2="8.5" />
-		</svg>
-	);
-}
-
-function WebhookIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" />
-			<path d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06" />
-			<path d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8" />
-		</svg>
-	);
-}
-
-function MobileIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
-			<line x1="12" x2="12" y1="18" y2="18" />
-		</svg>
 	);
 }

app/about/components/skills/stack.jsx

@@ -1,44 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function Stack() {
-  return (
-		<motion.div
-			className="flex justify-center items-center flex-col mb-5 "
-			initial={{
-				opacity: 0,
-				x: -200,
-			}}
-			whileInView={{
-				opacity: 1,
-				x: 0,
-			}}
-			transition={{
-				delay: 0.5,
-
-				type: "spring",
-			}}>
-			<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase ">
-				Language & Framework
-			</h2>
-			<p className="text-gray-500 text-center tracking-widest md:px-5">
-				<span className="text-black font-bold">HTML</span> |{" "}
-				<span className="text-black font-bold">CSS</span> |{" "}
-				<span className="text-black font-bold">Javascript</span> |{" "}
-				<span className="text-black font-bold">Typescript</span> |{" "}
-				<span className="text-black font-bold">React</span> |{" "}
-				<span className="text-black font-bold">NextJS</span> |{" "}
-				<span className="text-black font-bold">TailwindCSS</span> |{" "}
-				<span className="text-black font-bold">Bootstrap</span> |{" "}
-				<span className="text-black font-medium">NodeJS</span> |{" "}
-				<span className="text-black font-medium">ExpressJS</span> |{" "}
-				<span className="text-black font-bold">MySQL</span> |{" "}
-				<span className="text-black font-bold">PostgreSQL</span> |{" "}
-				<span className="text-black font-medium">MongoDB</span> |{" "}
-				<span className="text-black font-medium">Firebase</span> |{" "}
-				<span className="text-black font-medium">PHP</span> |{" "}
-				<span className="text-black font-bold">Laravel</span> |{" "}
-				<span className="text-black font-medium">Python</span>
-			</p>
-		</motion.div>
-  );
-}

app/about/components/skills/tools.jsx

@@ -1,42 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function Tools() {
-	return (
-		<motion.div
-			className="flex justify-start items-center flex-col mb-5 "
-			initial={{
-				opacity: 0,
-				x: 200,
-			}}
-			whileInView={{
-				opacity: 1,
-				x: 0,
-			}}
-			transition={{
-				delay: 0.6,
-
-				type: "spring",
-			}}>
-			<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase">
-				Tools
-			</h2>
-			<p className="text-gray-500 text-center tracking-wider md:px-">
-				<span className="text-black font-bold">Visual Studio Code</span>{" "}
-				| <span className="text-black font-medium">Jet Brains</span> |{" "}
-				<span className="text-black font-bold">Git</span> |{" "}
-				<span className="text-black font-bold">Github</span> |{" "}
-				<span className="text-black font-medium">Figma</span> |{" "}
-				<span className="text-black font-medium">Adobe Photoshop</span>{" "}
-				|{" "}
-				<span className="text-black font-medium">
-					Adobe Premiere Pro
-				</span>{" "}
-				|{" "}
-				<span className="text-black font-medium">
-					Adobe After Effect
-				</span>{" "}
-				|{" "}
-			</p>
-		</motion.div>
-	);
-}

app/about/layout.jsx

@@ -1,7 +1,7 @@
 import Footer from "@/components/Footer";
 
 export const metadata = {
-	title: "Alvalens | About",
+  title: "Korobtsev.ru | Обо мне"
 };
 export default function Layout({ children }) {
   return (

app/about/loading.jsx

@@ -1,11 +1,7 @@
 export default function Loading() {
 	return (
-		<>
+		<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
-			(
+			<h1 className="text-4xl text-gray-900">Загрузка...</h1>
-			<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
+		</div>
-				<h1 className="text-4xl text-gray-900">Loading...</h1>
-			</div>
-			)
-		</>
 	);
 }

app/about/page.jsx

@@ -13,7 +13,7 @@ import Experience from "./components/experience.jsx";
 import Education from "./components/education.jsx";
 
 // images
-import Hero from "@/public/image/me2.jpg";
+import Hero from "@/public/image/me2.jpeg";
 
 import Hr from "@/components/Hr";
 import About from "./components/about/about.jsx";
@@ -42,7 +42,7 @@ export default function Page() {
 							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
 							<Image
 								src={Hero}
-								alt="Alvalen Shafel"
+								alt="Виталий Коробцев"
 								layout="fill"
 								objectFit="cover"
 								placeholder="blur"
@@ -55,10 +55,10 @@ export default function Page() {
 						</h1>
 						<Hr />
 						<p className="title text-xl mt-4 tracking-wider text-gray-900 leading-[1.7rem] mb-5 ">
-							A brief introduction about me and{" "}
+							Немного обо мне и{" "}
 							<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">
 								{" "}
-								my interest.
+								моих интересах.
 							</span>
 						</p>
 						<motion.div
@@ -72,7 +72,7 @@ export default function Page() {
 								});
 							}}
 							className="mb-3">
-							<Button variation="primary">Scroll Down</Button>
+							<Button variation="primary">Прокрути</Button>
 						</motion.div>
 					</div>
 				</div>

app/globals.css

@@ -3,9 +3,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
 
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
-@tailwind utilities;
 
 html {
 	font-size: 17px !important;
@@ -53,9 +51,9 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 
-h2, h3, h4, h5, h6 {
+/* h2, h3, h4, h5, h6 {
 	@apply text-gray-600;
-}
+} */
 
 span {
 	font-family: "Jost", sans-serif;
@@ -64,6 +62,7 @@ span {
 li {
 	@apply list-none relative;
 }
+
 li.active:after {
 	content: "";
 	position: absolute;
@@ -72,7 +71,7 @@ li.active:after {
 	width: 100%;
 	height: 2px;
 	background-color: #ffffff;
-	
+
 
 }
 

app/layout.jsx

@@ -1,4 +1,3 @@
-import dynamic from "next/dynamic";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
 import { config } from "@fortawesome/fontawesome-svg-core";
@@ -6,60 +5,55 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
 config.autoAddCss = false;
 import "./nprogress.css";
 import { Analytics } from "@vercel/analytics/react";
+import ClientTopProgressBar from "@/components/ClientTopProgressBar";
 
 export const metadata = {
-	title: "Alvalens | Portofolio",
+    title: "Korobtsev.ru | Личный сайт",
-	description:
+
-		"My name is Alvalens, I'm a web developer and I'm passionate about it. I'm currently studying at Universitas Negeri Malang.",
+    description:
-	author: "Alvalen Shafelbilyunazra",
+		"Всем привет! Я Виталий Коробцев и это мой личный сайт! Я хочу рассказать Вам о себе и своих проектах.",
-	siteUrl: "https://www.alvalens.my.id",
+
-	applicationName: "Alvalens",
+    author: "Виталий Коробцев",
-	keywords: [
+    siteUrl: "https://www.korobtsev.ru",
-		"alvalens",
+    applicationName: "Korobtsev.ru",
-		"alvalen",
+
-		"alvalen shafel",
+    keywords: [
-		"shafel",
+		"Korobtsev",
-		"alvalen shafelbilyunazra",
+		"Коробцев",
-		"alvalen shafel bilyunazra",
+		"Виталий Коробцев",
-		"bloodfallen",
+		"Miguelle74",
-		"alvalen porto",
+		"Госис",
-		"alvalen um",
+		"Гибридная Офисная Система",
+		"ОСГОС",
+		"Новый Крым",
+		"Технико",
 	],
-	openGraph: {
+
+    openGraph: {
 		type: "website",
-		url: "https://www.alvalens.my.id",
+		url: "https://www.korobtsev.ru",
-		title: "Alvalens | Portofolio",
+		title: "Korobtsev.ru | Личный сайт",
-		site_name: "Alvalens | Portofolio",
+		site_name: "Korobtsev.ru | Личный сайт",
-		description: "My name is Alvalens, This is my portofolio website.",
+		description: "My name is  Vitaliy Korobtsev, This is my website.",
 		width: 1200,
 		height: 630,
 		images: [
 			{
 				url: "/og-image-rev.png",
-				alt: "Alvalens Portofolio",
+				alt: "Korobtsev ",
 			},
 		],
-		site_name: "Alvalens | Portofolio",
+		site_name: "Korobtsev.ru | Личный сайт",
-	},
+	}
 };
 
-
-import Chat from "@/components/Chat";
-
-const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
-	ssr: false,
-});
-
-
-
 export default function RootLayout({ children }) {
 	return (
 		<html lang="en">
 			<body>
-				<TopProgressBar />
+				<ClientTopProgressBar />
 				<Navbar />
 				{children}
-				<Chat />
 				<Analytics />
 			</body>
 		</html>

app/not-found.jsx

@@ -10,7 +10,7 @@ const NotFound = () => (
 					<div className="flex justify-center items-center flex-col mb-5 space-y-10">
 						<div>
 							<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400 text-center">
-								Page not found
+								А тут совсем ничего нет...
 							</h2>
 							<h1 className="text-4xl font-medium text-neutral-900 text-center">
 								404
@@ -20,7 +20,7 @@ const NotFound = () => (
 							<button
 								onClick={() => window.history.back()}
 								className="text-lg text-neutral-900 hover:text-neutral-800 text-center border-2 border-gray-800 rounded-xl p-3 py-2 mt-2">
-								Go Back
+								Назад
 							</button>
 						</div>
 					</div>

app/projects/(project-card)/index.jsx

@@ -1,10 +1,11 @@
 import Link from "next/link";
-import { motion } from "framer-motion";
 import Image from "next/image";
-export default function projectCard({project, index, activeCategory}){
+import { motion } from "framer-motion";
-	console.log(project.category[0], activeCategory);
+import PropTypes from "prop-types";
-	console.log(project.category.includes(activeCategory));
+import BlurImage from "@/public/image/placeholder/blur.jpg";
-  return (
+
+export default function ProjectCard({ project, index, activeCategory }) {
+	return (
 		<>
 			{project.category.includes(parseInt(activeCategory)) && (
 				<Link href={"projects/" + project.slug} key={index}>
@@ -23,12 +24,12 @@ export default function projectCard({project, index, activeCategory}){
 						}}>
 						<Image
 							src={project.thumbnail}
-							alt="Alvalens"
+							alt="Korobtsev"
 							layout="fill"
 							objectFit="cover"
 							placeholder="blur"
 							className="bg-slate-950 opacity-10  group-hover/tes:opacity-100 transition-all ease duration-500"
-							blurDataURL={project.thumbnail}
+							blurDataURL={BlurImage.src}
 						/>
 						<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
 							<h4 className="text-white">{project.year}</h4>
@@ -56,3 +57,10 @@ export default function projectCard({project, index, activeCategory}){
 		</>
 	);
 }
+
+ProjectCard.propTypes = {
+	project: PropTypes.object.isRequired,
+	index: PropTypes.number.isRequired,
+	activeCategory: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+		.isRequired,
+};

app/projects/[slug]/page.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect } from "react";
+import { useState, useEffect, use } from "react";
 import { motion } from "framer-motion";
 import jsonData from "@/json/data.json";
 
@@ -8,6 +8,7 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import NotFound from "@/app/not-found";
 import Image from "next/image";
+import BlurImage from "@/public/image/placeholder/blur.jpg";
 import FixedButon from "@/components/FixedButton";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
@@ -53,9 +54,10 @@ function ScrollDownButton() {
 }
 
 
-function Page({ params }) {
+function Page(props) {
-	const [data, setData] = useState(null);
+    const params = use(props.params);
-	useEffect(() => {
+    const [data, setData] = useState(null);
+    useEffect(() => {
 		const selectedData = jsonData.Projects.find(
 			(item) => item.slug === params.slug
 		);
@@ -66,7 +68,7 @@ function Page({ params }) {
 		}
 	}, [params.slug]);
 
-	if (data === "404") {
+    if (data === "404") {
 		return (
 			<>
 				<NotFound />
@@ -98,7 +100,7 @@ function Page({ params }) {
 			</div>
 		);
 	}
-	return (
+    return (
 		<div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
 			<FixedButon href="/projects">
 				<FontAwesomeIcon
@@ -112,7 +114,7 @@ function Page({ params }) {
 					<div className="min-h-screen sm:min-h-0 flex justify-center items-start flex-col mb-5 space-y-10 mx-auto">
 						<div>
 							<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
-								Project
+								Проект
 							</h2>
 							<h1 className="text-4xl font-medium text-neutral-900">
 								{data.title}
@@ -120,7 +122,7 @@ function Page({ params }) {
 						</div>
 						<div>
 							<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
-								Technology
+								Технологии
 							</h2>
 							<p className="text-2xl font-normal text-neutral-900">
 								{data.tech.join(", ")}
@@ -128,7 +130,7 @@ function Page({ params }) {
 						</div>
 						<div>
 							<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
-								Year
+								Год(ы)
 							</h2>
 							<p className="text-2xl font-normal text-neutral-900">
 								{data.year}
@@ -137,14 +139,14 @@ function Page({ params }) {
 						{data.preview && (
 							<div>
 								<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
-									Preview
+									Посмотреть
 								</h2>
 								<p className="text-2xl font-normal text-neutral-900">
 									<a
 										href={data.preview}
 										target="_blank"
 										rel="noopener noreferrer">
-										Preview{" "}
+										Перейти{" "}
 										<FontAwesomeIcon
 											icon={faArrowUpRightFromSquare}
 											className="ml-3"
@@ -156,7 +158,7 @@ function Page({ params }) {
 						{data.code && (
 							<div>
 								<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
-									Source Code
+									Код (для Open Source)
 								</h2>
 								<p className="text-2xl font-normal text-neutral-900">
 									<a
@@ -175,7 +177,7 @@ function Page({ params }) {
 					</div>
 					<div className="flex justify-start items-start flex-col mb-5 ">
 						<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
-							Description
+							Описание
 						</h2>
 						{data.desc.map((desc, index) => (
 							<p
@@ -198,7 +200,7 @@ function Page({ params }) {
 							className="mb-5 h-auto max-h-screen max-w-7xl mx-auto"
 							width={1920}
 							height={1080}
-							blurDataURL={image}
+							blurDataURL={BlurImage.src}
 							layout="responsive"
 							objectFit="contain"
 						/>

app/projects/archive/page.jsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { motion } from "framer-motion";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,18 +6,16 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import FixedButon from "@/components/FixedButton";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import Projects from "@/json/data.json"
+import Projects from "@/json/data.json";
+import Link from "next/link";
 
-export default function Page () {
+export default function Page() {
-	const projects = Projects.Projects
+	const projects = Projects.Projects;
-  return (
+	return (
 		<>
 			<main className="overflow-hidden">
 				<FixedButon href="/projects">
-					<FontAwesomeIcon
+					<FontAwesomeIcon icon={faChevronLeft} className="text-black pr-10" />
-						icon={faChevronLeft}
-						className="text-black pr-10"
-					/>
 				</FixedButon>
 				<div className="min-h-screen w-screen mt-10 md:mt-0  p-10 flex justify-center items-center flex-col mb-10">
 					<div className="flex justify-center items-center flex-col my-5 self-start ">
@@ -75,10 +73,10 @@ export default function Page () {
 						<table className="space-y-3">
 							<thead>
 								<tr className=" hover:shadow-md  transition-all ease duration-500">
-									<th className="text-start">Year</th>
+									<th className="text-start">Год создания</th>
-									<th className="text-start">Title</th>
+									<th className="text-start">Название</th>
-									<th className="text-start">Technology</th>
+									<th className="text-start">Технологии</th>
-									<th className="text-start">Link</th>
+									<th className="text-start">Ссылки</th>
 								</tr>
 							</thead>
 							<tbody>
@@ -87,16 +85,16 @@ export default function Page () {
 										key={index}
 										className="hover:shadow-md transition-all ease duration-500">
 										<td>{project.year}</td>
-										<td>{project.title}</td>
 										<td>
-											{project.tech.map((t) => `${t}, `)}
+											<Link href={`/projects/${project.slug}`}>
+												{project.title}
+											</Link>
 										</td>
+										<td>{project.tech.map((t) => `${t}, `)}</td>
 										<td>
 											<div className="flex flex-row justify-center items-center">
 												{project.code && (
-													<a
+													<a href={project.code} title="Link to GitHub">
-														href={project.code}
-														title="Link to GitHub">
 														<FontAwesomeIcon
 															icon={faGithub}
 															className="text-xl mr-2"
@@ -108,9 +106,7 @@ export default function Page () {
 														href={project.preview}
 														title="Link to project preview">
 														<FontAwesomeIcon
-															icon={
+															icon={faArrowUpRightFromSquare}
-																faArrowUpRightFromSquare
-															}
 															className="text-xl"
 														/>
 													</a>
@@ -125,5 +121,5 @@ export default function Page () {
 				</div>
 			</main>
 		</>
-  );
+	);
-}
+}

app/projects/components/ProjectCard.jsx

@@ -0,0 +1,66 @@
+import Link from "next/link";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import PropTypes from "prop-types";
+import BlurImage from "@/public/image/placeholder/blur.jpg";
+
+export default function ProjectCard({ project, index, activeCategory }) {
+	return (
+		<>
+			{project.category.includes(parseInt(activeCategory)) && (
+				<Link href={"projects/" + project.slug} key={index}>
+					<motion.div
+						className="z-10 relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-auto bg-gray-400 group/tes py-20 px-5 md:py-2 aspect-video "
+						initial={{
+							opacity: 0,
+							x: -200,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: 0,
+						}}
+						transition={{
+							type: "spring",
+						}}>
+						<Image
+							src={project.thumbnail}
+							alt="Korobtsev"
+							layout="fill"
+							objectFit="cover"
+							placeholder="blur"
+							className="bg-slate-950 opacity-10  group-hover/tes:opacity-100 transition-all ease duration-500"
+							blurDataURL={BlurImage.src}
+						/>
+						<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
+							<h4 className="text-white">{project.year}</h4>
+						</div>
+						<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0 z-10">
+							<h1 className="text-3xl font-bold mb-3">{project.title}</h1>
+							<p>
+								{project.desc[0].length > 125
+									? `${project.desc[0].slice(0, 125)}...`
+									: project.desc[0]}
+							</p>
+							<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
+								{project.tech.map((t, index) => (
+									<span
+										key={index}
+										className="m-1 px-4 py-2 bg-gray-600 text-white ">
+										{t}
+									</span>
+								))}
+							</div>
+						</div>
+					</motion.div>
+				</Link>
+			)}
+		</>
+	);
+}
+
+ProjectCard.propTypes = {
+	project: PropTypes.object.isRequired,
+	index: PropTypes.number.isRequired,
+	activeCategory: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+		.isRequired,
+};

app/projects/layout.jsx

@@ -2,7 +2,7 @@
 import Footer from "@/components/Footer";
 
 export const metadata = {
-	title: "Alvalens | Projects",
+  title: "Korobtsev.ru | Проекты"
 };
 export default function Layout({ children }) {
   return (

app/projects/loading.jsx

@@ -1,11 +1,7 @@
 export default function Loading() {
 	return (
-		<>
+		<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
-			(
+			<h1 className="text-4xl text-gray-900">Загрузка...</h1>
-			<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
+		</div>
-				<h1 className="text-4xl text-gray-900">Loading...</h1>
-			</div>
-			)
-		</>
 	);
 }

app/projects/page.jsx

@@ -6,28 +6,27 @@ import Button from "@/components/Button";
 import Image from "next/image";
 
 // images
-import ReactChat1 from "@/public/image/projects/web/trivia/trivia1.png";
+import Intervyou1 from "@/public/image/projects/web/intervyou/intervyou-1.png";
-import ReactChat2 from "@/public/image/projects/web/trivia/trivia2.png";
+import Intervyou2 from "@/public/image/projects/web/intervyou/intervyou-2.png";
-import ReactChat3 from "@/public/image/projects/web/trivia/trivia3.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 "./(project-card)";
+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 Development",
+	1: "WEB разработка",
-	2: "AI & Machine Learning",
+	2: "Linux и ПО",
-	9: "Other",
+	9: "Другие",
-}
+};
 
 export default function Page() {
 	const [activeCategory, setActiveCategory] = useState(1);
-	const projects = Projects.Projects.filter	((item) => item.show === true
+	const projects = Projects.Projects.filter((item) => item.show === true);
-	);
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -36,10 +35,7 @@ export default function Page() {
 		<>
 			<main className="overflow-hidden">
 				<FixedButon href="/#projects">
-					<FontAwesomeIcon
+					<FontAwesomeIcon icon={faChevronLeft} className="text-black pr-10" />
-						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 ">
@@ -50,7 +46,7 @@ export default function Page() {
 							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
 							<Image
 								src={ProjectAll}
-								alt="Alvalens"
+								alt="Korobtsev"
 								layout="fill"
 								objectFit="cover"
 								placeholder="blur"
@@ -59,14 +55,14 @@ export default function Page() {
 					</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">
-							My Projects
+							Проекты
 						</h1>
 						<Hr />
 						<p className="title  text-xl mt-4 tracking-wider text-gray-900 leading-[1.7rem] mb-5">
-							List of my projects that I have done and{" "}
+							Некоторые из проектов с моим учаcтием{" "}
 							<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">
 								{" "}
-								currently working on.
+								или под моим руководством.
 							</span>
 						</p>
 						<motion.div
@@ -80,14 +76,14 @@ export default function Page() {
 								});
 							}}
 							className="mb-3">
-							<Button variation="primary">Scroll Down</Button>
+							<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">Hightlight</h1>
+						<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">
@@ -103,8 +99,8 @@ export default function Page() {
 									}}
 									className="w-full h-full shadow-lg">
 									<Image
-										src={ReactChat1}
+										src={Intervyou1}
-										alt="Alvalens"
+										alt="Korobtsev"
 										layout="fill"
 										objectFit="cover"
 										placeholder="blur"
@@ -112,7 +108,7 @@ export default function Page() {
 									/>
 								</motion.div>
 							</div>
-							<div className="absolute top-16 right-28 h-[30%]  aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
+							<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,
@@ -127,8 +123,8 @@ export default function Page() {
 									transition={{ delay: 0.3 }}
 									className="w-full h-full shadow-lg ">
 									<Image
-										src={ReactChat3}
+										src={Intervyou3}
-										alt="Alvalens"
+										alt="Korobtsev"
 										layout="fill"
 										objectFit="cover"
 										placeholder="blur"
@@ -136,7 +132,7 @@ export default function Page() {
 									/>
 								</motion.div>
 							</div>
-							<div className="absolute bottom-16 right-20 h-[35%]  aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
+							<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,
@@ -153,8 +149,8 @@ export default function Page() {
 									}}
 									className="w-full h-full shadow-lg">
 									<Image
-										src={ReactChat2}
+										src={Intervyou2}
-										alt="Alvalens"
+										alt="Korobtsev"
 										layout="fill"
 										objectFit="cover"
 										placeholder="blur"
@@ -178,29 +174,28 @@ export default function Page() {
 							type: "spring",
 						}}>
 						<h2 className="text-2xl font-bold tracking-wider mb-3">
-							Generative Trivia
+							ОС ОСГОС
 						</h2>
 						<p className="text-gray-600 text-justify title text-lg">
-							A generative trivia website built with Next.js,
+							Операционная система на ядре Debian linux актуальной версии.
-							Firebase, NextAuth, Google OAuth, and TypeScript.
+							Изначально разрабатывалась для одного из Государственных заказчиков.
-							Users can generate trivia questions for predefined
+							На данный момент проект построен на Debian 13, имеет собственные репозитории
-							school subjects and answer them with a unique
+							и магазин приложений, инфраструктуру технической поддержки. Проект поддерживается 
-							interactive input style. The application supports
+							и активно развивается, обрастая собственными сервисами и ПО, несмотря на 
-							user authentication with Google and stores data in
+							высокую конкуренцию в данном серменте. 
-							Firestore. You can see the source code of this
+							Разработано несколько вариантов дистрибутива, в том числе и специализированные версии.
-							project on my github account or preview the project
+							Серверное направление выделено в отдельный продукт.
-							by clicking the button below.
 						</p>{" "}
 						<div className="mt-3">
 							<Button variation="primary">
-								<Link href="projects/trivia">More</Link>
+								<Link href="projects/intervyou">Больше</Link>
 							</Button>
 							<Button variation="secondary">
 								<a
-									href="https://generative-trivia.vercel.app/"
+									href="https://www.osgos.ru"
 									target="_blank"
 									rel="noopener noreferrer">
-									Preview
+									Просмотреть
 								</a>
 							</Button>
 						</div>
@@ -223,7 +218,7 @@ export default function Page() {
 								delay: 0.7,
 								type: "spring",
 							}}>
-							Other Note Worthy Projects
+							Другие ключевые проекты
 						</motion.h1>
 					</div>
 				</div>
@@ -277,7 +272,7 @@ export default function Page() {
 					}}
 					className="flex justify-center items-center flex-col my-5 self-start ">
 					<Button variation="primary">
-						<Link href="projects/archive">View In Archive</Link>
+						<Link href="projects/archive">Посмотреть все</Link>
 					</Button>
 				</motion.div>
 			</main>

components/Chat.jsx

@@ -1,35 +0,0 @@
-// components/Intelliticks.js
-"use client"
-import { useEffect } from "react";
-
-// Component for Intelliticks chat widget
-const Chat = () => {
-	useEffect(() => {
-		// Paste the Intelliticks script here
-		(function (I, L, T, i, c, k, s) {
-			if (I.iticks) return;
-			I.iticks = { host: c, settings: s, clientId: k, cdn: L, queue: [] };
-			var h = T.head || T.documentElement;
-			var e = T.createElement(i);
-			var l = I.location;
-			e.async = true;
-			e.src = (L || c) + "/client/inject-v2.min.js";
-			h.insertBefore(e, h.firstChild);
-			I.iticks.call = function (a, b) {
-				I.iticks.queue.push([a, b]);
-			};
-		})(
-			window,
-			"https://cdn-v1.intelliticks.com/prod/common",
-			document,
-			"script",
-			"https://app.intelliticks.com",
-			"u3cWw3sDpdKexqXCY_c",
-			{}
-		);
-	}, []);
-
-	return null;
-};
-
-export default Chat;

components/ClientTopProgressBar.jsx

@@ -0,0 +1,11 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
+	ssr: false,
+});
+
+export default function ClientTopProgressBar() {
+	return <TopProgressBar />;
+}

components/Footer.jsx

@@ -23,7 +23,7 @@ export default function Footer() {
 						transition={{
 							delay: 0.2,
 						}}>
-						Want something like this?
+						Что-то заинтересовало?
 					</motion.h2>
 					<motion.h1
 						className="text-5xl md:text-7xl font-medium mt-3  hover:underline whitespace-nowrap leading-none"
@@ -38,7 +38,7 @@ export default function Footer() {
 						transition={{
 							delay: 0.5,
 						}}>
-						Get In Touch{" "}
+						Связаться{" "}
 						<FontAwesomeIcon
 							icon={faArrowAltCircleRight}
 							className="text-5xl ml-2 "
@@ -49,7 +49,7 @@ export default function Footer() {
 			<footer className="flex justify-center items-center flex-col my-5 self-start]">
 				<p className="text-gray-800 text-sm">
 					&copy;{new Date().getFullYear()} -{" "}
-					<span className="text-gray-700 text-lg">Alvalens</span>
+					<span className="text-gray-700 text-lg">Korobtsev.ru</span>
 				</p>
 			</footer>
 		</div>

components/Navbar.jsx

@@ -99,7 +99,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 				type: "spring",
 				stiffness: 400,
 				damping: 40,
-		},
+			},
 		},
 	};
 
@@ -111,15 +111,15 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 				animate={isNavOpen ? "open" : "closed"}
 				initial={false}>
 				<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] ">
-					<div className="flex flex-col items-center space-y-8 my-auto mx-0">
+					<div className="flex flex-col items-center space-y-8 my-auto mx-0 z-50">
 						{/* title */}
 						<motion.h1
 							variants={itemVariants}
 							animate={isNavOpen ? "open" : "closed"}
 							className="text-6xl font-bold text-white ">
-							Menu
+							Меню
 						</motion.h1>
-						<a href="/#home">
+						<Link href="/#home">
 							<div
 								className="text-2xl font-bold text-white"
 								onClick={handleItemClick}>
@@ -128,10 +128,10 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 									variants={itemVariants}
 									animate={isNavOpen ? "open" : "closed"}
 									custom={0.1}>
-									Home
+									Главная
 								</motion.h2>
 							</div>
-						</a>
+						</Link>
 						<Link href="/about">
 							<div
 								onClick={handleItemClick}
@@ -141,7 +141,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 									variants={itemVariants}
 									animate={isNavOpen ? "open" : "closed"}
 									custom={0.2}>
-									About
+									Обо мне
 								</motion.h2>
 							</div>
 						</Link>
@@ -154,11 +154,11 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 									variants={itemVariants}
 									animate={isNavOpen ? "open" : "closed"}
 									custom={0.3}>
-									Projects
+									Проекты
 								</motion.h2>
 							</div>
 						</Link>
-						<a href="/#contact">
+						<Link href="/#contact">
 							<div
 								onClick={handleItemClick}
 								className="text-2xl font-bold text-white">
@@ -167,10 +167,10 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 									variants={itemVariants}
 									animate={isNavOpen ? "open" : "closed"}
 									custom={0.4}>
-									Contact
+									Контакты
 								</motion.h2>
 							</div>
-						</a>
+						</Link>
 					</div>
 				</div>
 			</motion.div>
@@ -200,7 +200,7 @@ const Navbar = () => {
 						className={`text-2xl ml-2 md:ml-0 transition-colors ease duration-500 ${
 							isNavOpen ? "text-white" : ""
 						}`}>
-						Alvalens
+						Korobtsev.ru
 					</h1>
 				</div>
 				<div className="flex flex-row items-center">
@@ -209,15 +209,11 @@ const Navbar = () => {
 						onClick={toggleNav}>
 						<div
 							className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${
-								isNavOpen
+								isNavOpen ? "rotate-45   bg-white translate-y-[2px]" : ""
-									? "rotate-45   bg-white translate-y-[2px]"
-									: ""
 							}`}></div>
 						<div
 							className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${
-								isNavOpen
+								isNavOpen ? "-rotate-45 -translate-y-2 bg-white" : ""
-									? "-rotate-45 -translate-y-2 bg-white"
-									: ""
 							}`}></div>
 					</button>
 				</div>

generate-sitemap.js

@@ -5,7 +5,7 @@ const fs = require("fs");
 
 async function generateSitemap() {
 	const sitemap = new SitemapStream({
-		hostname: "https://alvalens.my.id/",
+		hostname: "https://korobtsev.ru/",
 	});
 
 	// Add URLs to your sitemap

json/data.json

@@ -2,6 +2,41 @@
   "Projects": [
     {
       "show": true,
+      "title": "ОС ОСГОС",
+      "desc": [
+        "Операционная система Основная Составляющая Гибридной Офисной Системы - ОС ОСГОС, построена на ядре Debian linux актуальной версии. Является десктопной операционной системой общего назначения для использования до уровня секретности КС-4. Имеет свидетельство о Государственной регистрации. Изначально ОС разрабатывалась для одного из Государственных заказчиков.",
+        "ОС имеет собственные репозитории и магазин приложений, инфраструктуру технической поддержки. Проект поддерживается и активно развивается, обрастая собственными сервисами и ПО. Разработано несколько вариантов дистрибутива, в том числе и специализированные версии.",
+        "Основной упор при разработке был сделан на легкую интеграцию в существующую инфраструктуру, построенную на технологиях Microsoft. В результате ОС может бесшовно интегрироваться в гибридную экосистему без потери предоставляемого ей функционала. ОС может работать как в открытом, так и в полностью замкнутом стетевом периметре, обращаясь к локальным серверам обновления. Для поддержки ОС созданы все необходимые сервисы и дополнительное ПО, как на базе Open-Sourse продуктов, так и разработанное с нуля.",
+        "Второй целью являлась простота перехода Пользователя на ОС ОСГОС с других операционных систем и нетребовательность к железу. По результатам тестирования - все поставленные цели были достигнуты."
+      ],
+      "year": "2022-Текущий",
+      "preview": "https://osgos.ru",
+      "code": "",
+      "thumbnail": "/image/projects/web/intervyou/intervyou-thumbnail.jpg",
+      "images": [
+        "/image/projects/web/intervyou/intervyou-1.png",
+        "/image/projects/web/intervyou/intervyou-2.png",
+        "/image/projects/web/intervyou/intervyou-3.png",
+        "/image/projects/web/intervyou/intervyou-4.png",
+        "/image/projects/web/intervyou/intervyou-5.png"
+      ],
+      "tech": [
+        "C",
+        "C#",
+        "Bash",
+        "Go",
+        "Python",
+        "Web Dev",
+        "Database",
+        "Руководство",
+        "Архитектура",
+        "Инфраструктура"
+      ], 
+      "slug": "intervyou",
+      "category": [1, 2]
+    },
+    {
+      "show": false,
       "title": "Client Personal Protfolio Website",
       "desc": [
         "A personal portfolio website that I created for a client. The website is built using two main tech, native (HTML, CSSS, JS) and react based (ReactJs, TailwindCSS, Typescript). The website also created based on the client design, and improved and sliced by me. The website has a few features such as a about page, a project page, resume page, and a contact page.",
@@ -66,7 +101,7 @@
       ],
       "year": "2024",
       "preview": "",
-      "code": "https://github.com/Alvalens/web-javanese-translation",
+      "code": "https://github.com/Korobtsev/web-javanese-translation",
       "thumbnail": "/image/projects/ai/javanese-translation/javanese-translation-thumbnail.jpg",
       "images": [
         "/image/projects/ai/javanese-translation/javanese-translation1.png",
@@ -92,7 +127,7 @@
       ],
       "year": "2024",
       "preview": "",
-      "code": "https://github.com/Alvalens/heart-attack-prediction",
+      "code": "https://github.com/Korobtsev/heart-attack-prediction",
       "thumbnail": "/image/projects/ai/heart-attack-prediction/heart-attack-prediction-thumbnail.jpg",
       "images": [
         "/image/projects/ai/heart-attack-prediction/heart-attack1.png",
@@ -121,7 +156,7 @@
       ],
       "year": "2024",
       "preview": "https://generative-trivia.vercel.app/",
-      "code": "https://github.com/Alvalens/generative-trivia",
+      "code": "https://github.com/Korobtsev/generative-trivia",
       "thumbnail": "/image/projects/web/trivia/trivia-thumbnail.png",
       "images": [
         "/image/projects/web/trivia/trivia1.png",
@@ -201,8 +236,8 @@
         "RandomZone is a feature that allows the player to get a random number of steps. The 3D dice is a feature that allows the player to roll a 3D dice. The game also has a few other features menuy screen and also loading screen.", "Beside that the game also has a audio theme that will play when the game is started. The game also has a few sound effects such as dice roll sound, and a sound when the player win the game."
       ],
       "year": "2023",
-      "preview": "https://github.com/Alvalens/ludo-game/releases/tag/pre-release",
+      "preview": "https://github.com/Korobtsev/ludo-game/releases/tag/pre-release",
-      "code": "https://github.com/Alvalens/ludo-game",
+      "code": "https://github.com/Korobtsev/ludo-game",
       "thumbnail": "/image/projects/other/LUDOang/ludo-thumbnail.png",
       "images": [
         "/image/projects/other/LUDOang/ludo1.png",
@@ -248,7 +283,7 @@
       ],
       "year": "2023",
       "preview": "https://react-chat-rouge.vercel.app",
-      "code": "https://github.com/Alvalens/react-realtime-chat",
+      "code": "https://github.com/Korobtsev/react-realtime-chat",
       "thumbnail": "/image/projects/web/react-chat/chat-thumbnail.png",
       "images": [
         "/image/projects/web/react-chat/chat1.png",
@@ -278,7 +313,7 @@
       ],
       "year": "2023",
       "preview": "https://react-tools-flax.vercel.app",
-      "code": "https://github.com/Alvalens/react-tools",
+      "code": "https://github.com/Korobtsev/react-tools",
       "thumbnail": "/image/projects/web/tools/tools-thumbnail.png",
       "images": [
         "/image/projects/web/tools/tools.png",
@@ -302,7 +337,7 @@
         "Aleph is a Discord bot that I created for my dircord server to use. The bot is built using Python and the discord.py library. The bot has image grabber feauture that takes argument (keywords) and returns an image from the internet.", "Other than that this bot has a few other features such as utility command to delete a messages, and a command to get the server's ping. This bot is still in development and I plan to add more features in the future."],
       "year": "2023",
       "preview": "",
-      "code": "https://github.com/Alvalens/aleph-discord-bot",
+      "code": "https://github.com/Korobtsev/aleph-discord-bot",
       "thumbnail": "/image/projects/other/bot/bot-thumbnail.png",
       "images": [
         "/image/projects/other/bot/bot1.png",

next.config.js

@@ -4,7 +4,15 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 module.exports = withBundleAnalyzer({
 	// your Next.js configuration
 	images: {
-		domains: ["i.scdn.co"],
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "i.scdn.co",
+			},
+		],
+		// Add image optimization settings
+		formats: ["image/avif", "image/webp"],
+		minimumCacheTTL: 60,
 	},
 	webpack: (config, options) => {
 		config.module.rules.push({
@@ -23,8 +31,39 @@ module.exports = withBundleAnalyzer({
 						key: "Content-Type",
 						value: "application/gzip",
 					},
+					{
+						key: "Cache-Control",
+						value: "public, max-age=3600", // Cache for 1 hour
+					},
+				],
+			},
+			{
+				source: "/:path*",
+				headers: [
+					{
+						key: "X-Content-Type-Options",
+						value: "nosniff",
+					},
+					{
+						key: "X-Frame-Options",
+						value: "DENY",
+					},
+					{
+						key: "X-XSS-Protection",
+						value: "1; mode=block",
+					},
 				],
 			},
 		];
 	},
+	// Add performance optimizations
+	reactStrictMode: true,
+	compiler: {
+		removeConsole:
+			process.env.NODE_ENV === "production"
+				? {
+						exclude: ["error", "warn"],
+				  }
+				: false,
+	},
 });

package.json

@@ -1,38 +1,47 @@
 {
-  "name": "my-porto-2",
+  "name": "alvalen-portfolio-website",
+  "author": {
+    "name": "Alvalen Shafelbilyunazra",
+    "email": "alvalen.shafel04@gmail.com",
+    "url": "https://korobtsev.ru"
+  },
+  "license": "GPL-3.0",
+  "copyright": "Copyright (C) 2025 Alvalen Shafelbilyunazra",
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "generate-sitemap": "node generate-sitemap.js"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^7.0.1",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^7.0.1",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^7.0.1",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^7.0.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.6",
-    "@fullpage/react-fullpage": "^0.1.40",
+    "@fullpage/react-fullpage": "^0.1.49",
-    "@vercel/analytics": "^1.0.2",
+    "@tailwindcss/postcss": "^4.1.13",
-    "autoprefixer": "10.4.15",
+    "@vercel/analytics": "^1.5.0",
-    "eslint": "8.48.0",
+    "eslint": "9.33.0",
-    "eslint-config-next": "13.4.19",
+    "eslint-config-next": "15.4.6",
-    "framer-motion": "^10.16.2",
+    "framer-motion": "^12.23.12",
-    "next": "13.4.19",
+    "next": "15.4.6",
     "nprogress": "^0.2.0",
-    "postcss": "8.4.28",
+    "postcss": "^8.5.6",
-    "react": "18.2.0",
+    "prop-types": "^15.8.1",
-    "react-dom": "18.2.0",
+    "react": "19.1.1",
-    "sharp": "^0.32.5",
+    "react-dom": "19.1.1",
-    "sitemap": "^7.1.1",
+    "sharp": "^0.34.3",
-    "swr": "^2.2.2",
+    "sitemap": "^8.0.0",
-    "tailwindcss": "3.3.3"
+    "swr": "^2.3.6",
+    "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^13.4.19",
+    "@next/bundle-analyzer": "15.4.6",
-    "cross-env": "^7.0.3"
+    "@types/react": "19.1.10",
+    "cross-env": "^10.0.0"
   }
-}
+}

pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+packages:
+  - .
+  
+onlyBuiltDependencies:
+  - core-js
+  - sharp

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
-  plugins: {
+	plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
-    autoprefixer: {},
+	},
-  },
+};
-}

public/robots.txt

@@ -1,4 +1,4 @@
 User-agent: *
 Disallow:
 
-Sitemap: https://www.alvalens.my.id/sitemap2.xml
+Sitemap: https://www.korobtsev.ru/sitemap2.xml

public/sitemap2.xml

@@ -8,57 +8,57 @@
 
 
 <url>
-  <loc>https://www.alvalens.my.id/</loc>
+  <loc>https://www.korobtsev.ru/</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>1.00</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/about</loc>
+  <loc>https://www.korobtsev.ru/about</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.80</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects</loc>
+  <loc>https://www.korobtsev.ru/projects</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.80</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects/react-chat</loc>
+  <loc>https://www.korobtsev.ru/projects/react-chat</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.64</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects/react-tools</loc>
+  <loc>https://www.korobtsev.ru/projects/react-tools</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.64</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects/aleph-discord-bot</loc>
+  <loc>https://www.korobtsev.ru/projects/aleph-discord-bot</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.64</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects/lptk-cup-2023</loc>
+  <loc>https://www.korobtsev.ru/projects/lptk-cup-2023</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.64</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects/nu-ino-website</loc>
+  <loc>https://www.korobtsev.ru/projects/nu-ino-website</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.64</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects/unmuh-jember-landing-page</loc>
+  <loc>https://www.korobtsev.ru/projects/unmuh-jember-landing-page</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.64</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects/my-first-portofolio-website</loc>
+  <loc>https://www.korobtsev.ru/projects/my-first-portofolio-website</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.64</priority>
 </url>
 <url>
-  <loc>https://www.alvalens.my.id/projects/archive</loc>
+  <loc>https://www.korobtsev.ru/projects/archive</loc>
   <lastmod>2023-09-11T14:41:56+00:00</lastmod>
   <priority>0.64</priority>
 </url>

tailwind.config.js

@@ -1,12 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  important: true,
+	content: [
-  content: [
+		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+		"./components/**/*.{js,ts,jsx,tsx,mdx}",
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
+		"./app/**/*.{js,ts,jsx,tsx,mdx}",
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+	],
-  ],
+	theme: {
-  theme: {
+		extend: {
-  },
+		},
-  plugins: [],
+	},
-}
+	plugins: [],
+	// Add this to reduce CSS file size in production
+	future: {
+		removeDeprecatedGapUtilities: true,
+		purgeLayersByDefault: true,
+	},
+};

vite-to_VS/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vite-to_VS/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

vite-to_VS/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

vite-to_VS/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "repkorepo_test",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react-swc": "^4.0.0",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
+  }
+}

vite-to_VS/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>