[feat] small color, content revision

app/(root)/layout.js

@@ -1,9 +1,5 @@
 "use client"
 import Sidebar from "@/components/Sidebar";
-export const metadata = {
-	title: "Create Next App",
-	description: "Generated by create next app",
-};
 
 export default function RootLayout({ children }) {
 	return (

app/(root)/page.js

@@ -22,7 +22,6 @@ import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 
 const MyPage = () => {
 	const fullpageOptions = {
-		// only define last anchor as contact
 		anchors: ["home", "about", "projects", "contact"],
 		scrollingSpeed: 1000,
 		licenseKey: "gplv3-license",
@@ -33,7 +32,6 @@ const MyPage = () => {
 
 	return (
 		<div>
-			{/* Content with ReactFullpage for interactive behavior */}
 			<ReactFullpage
 				render={({ state, fullpageApi }) => (
 					<ReactFullpage.Wrapper>
@@ -47,7 +45,7 @@ const MyPage = () => {
 										type: "spring",
 									}}>
 									<div className="block md:hidden col-span-1 mx-auto my-10">
-										<div className="bg-slate-500 rounded-full h-60 w-60">
+										<div className="bg-slate-500 rounded-full h-60 w-60 grayscale hover:grayscale-0">
 											<Image
 												src={Me}
 												width={500}
@@ -337,7 +335,7 @@ const MyPage = () => {
 									<div className="flex justify-center items-center space-x-4">
 										<motion.a
 											href="mailto:Alvalen.shafel04@gmail.com?subject=Hello&body=Hello Alvalens,"
-											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
+											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 }}
 											transition={{
@@ -354,7 +352,7 @@ const MyPage = () => {
 											href="https://github.com/Alvalens"
 											target="_blank"
 											rel="noopener noreferrer"
-											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
+											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={{
@@ -370,7 +368,7 @@ const MyPage = () => {
 											href="https://www.instagram.com/alvalens_/"
 											target="_blank"
 											rel="noopener noreferrer"
-											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
+											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={{
@@ -386,7 +384,7 @@ const MyPage = () => {
 											href="https://www.linkedin.com/in/alvalen-shafel-8a081a254/"
 											target="_blank"
 											rel="noopener noreferrer"
-											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
+											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={{
@@ -402,7 +400,7 @@ const MyPage = () => {
 											href="https://discordapp.com/users/bloody#6118"
 											target="_blank"
 											rel="noopener noreferrer"
-											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
+											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={{

app/globals.css

@@ -26,7 +26,7 @@ html {
 body {
 	font-family: 'Poppins', sans-serif !important;
 	color: black;
-	background-color: #f6f6f6;
+	background-color: rgb(230, 230, 230);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -61,8 +61,19 @@ span {
 	font-family: "Jost", sans-serif;
 }
 
-.active {
+li {
-	color: rgb(255, 235, 87);
+	@apply list-none relative;
+}
+li.active:after {
+	content: "";
+	position: absolute;
+	bottom: -5px;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: #ffffff;
+	
+
 }
 
 td, th {

app/layout.js

@@ -4,22 +4,46 @@ import Navbar from "@/components/Navbar";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 config.autoAddCss = false;
-
+import Icon from "@/public/img/icon.png";
 import "./nprogress.css";
+
 export const metadata = {
 	title: "Alvalens | Portofolio",
-	description: "Generated by create next app",
+	description:
+		"My name is Alvalens, I'm a web developer and I'm passionate about it. I'm currently studying at Universitas Negeri Malang.",
+	image: Icon,
+	author: "Alvalens",
+	keywords:
+		"alvalens, alvalen, alvalen shafel, shafel, alvalen shafelbilyunazra, alvalen shafel bilyunazra, bloodfallen, alvalen porto, porto alvalens, alvalens portofolio, web alvalen, alvalens web, alvalens website, website alvalens, alvalens web developer, web portofolio alvalens, alvalen profile, profil alvalen",
+	
 };
 
 const TopProgressBar = dynamic(() => import("@/components/TopProgressBar"), {
 	ssr: false,
 });
 
-export default function RootLayout({ children }) {
+const Meta = () => (
+	<>
+		<meta name="description" content={metadata.description} />
+		<meta property="og:title" content={metadata.title} />
+		<meta property="og:description" content={metadata.description} />
+		<meta property="og:image" content={metadata.image} />
+		<meta property="og:type" content="website" />
+		<meta name="application-name" content="Alvalens | Portofolio" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="author" content="Alvalens" />
+		</>
+);
 
+export default function RootLayout({ children }) {
 	return (
 		<html lang="en">
+			<head>
+			<link rel="icon" href="/img/icon.png" sizes="any" />
+			<Meta />
+			</head>
 			<body>
+				
 				<TopProgressBar />
 				<Navbar />
 				{children}

app/not-found.js

@@ -0,0 +1,33 @@
+"use client"
+import React from "react";
+import Link from "next/link";
+
+const NotFound = () => (
+	<div>
+		<div className="relative min-h-screen w-full  gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
+			<div className="min-h-screen flex justify-center items-center">
+				<div className="mx-auto grid grid-cols-1   ">
+					<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
+							</h1>
+						</div>
+						<div>
+							<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>
+				</div>
+			</div>
+		</div>
+	</div>
+);
+
+export default NotFound;

app/projects/[slug]/page.js

@@ -5,6 +5,8 @@ import jsonData from "../../../json/data.json";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 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";
 
 function Page({ params }) {
 	const [data, setData] = useState(null);
@@ -21,22 +23,9 @@ function Page({ params }) {
 
 	if (data === "404") {
 		return (
-			<div className="relative min-h-screen w-full  gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
+			<>
-				<div className="min-h-screen flex justify-center items-center">
+				<NotFound />
-					<div className="mx-auto grid grid-cols-1   ">
+			</>
-						<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
-								</h1>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
 		);
 	} else if (!data) {
 		// skleton loading
@@ -152,11 +141,13 @@ function Page({ params }) {
 			<div className="mx-auto grid grid-cols-1 p-5 md:p-20  w-full h-auto">
 				<div className="w-full h-auto aspect-video">
 					{data.images.map((image, index) => (
-						<img
+						<Image
 							key={index}
 							src={image}
 							alt={`Project Image ${index + 1}`}
 							className="w-full h-full mb-5"
+							width={1920}
+							height={1080}
 						/>
 					))}
 				</div>

app/projects/archive/page.js

@@ -26,6 +26,20 @@ const projects = [
 		tech: "Python, Serp API, Discord.py",
 		github: "https://github.com/Alvalens/aleph-discord-bot",
 	},
+	{
+		year: "2023",
+		title: "LPTK CUP UM 2023",
+		tech: "PHP, Laravel, Bootstrap, MySQL, jQuery, DataTables",
+		github: "",
+		preview: "",
+	},
+	{
+		year: "2023",
+		title: "NU INO Website",
+		tech: "PHP, Laravel, Livewire Bootstrap, MySQL, jQuery, DataTables",
+		github: "",
+		preview: "",
+	},
 	{
 		year: "2023",
 		title: "Unmuh Jember Landing Page",
@@ -33,12 +47,47 @@ const projects = [
 		github: "https://github.com/Alvalens/unmuh-jember-landing-page",
 		preview: "https://alvalens.github.io/unmuh-jember-landing-page/",
 	},
+	{
+		year: "2023",
+		title: "Alvalens Website",
+		tech: "Javascript, Next Js, TailwindCSS",
+		github: "",
+		preview: "https://alvalens.my.id",
+	},
+	{
+		year: "2023",
+		title: "Python audio tranlator",
+		tech: "Python, Assembly AI",
+		github: "https://github.com/Alvalens/python-audio-translation",
+		preview: "",
+	},
+	{
+		year: "2023",
+		title: "A4 Education website",
+		tech: "PHP, Laravel, Bootstrap, MySQL, jQuery, DataTables",
+		github: "https://github.com/Alvalens/A4",
+		preview: "",
+	},
+	{
+		year: "2023",
+		title: "Cry Cast crypto forecast",
+		tech: "PHP, Laravel, Bootstrap, MySQL",
+		github: "https://github.com/Alvalens/cry-cast",
+		preview: "",
+	},
+	{
+		year: "2023",
+		title: "Mini Harbor",
+		tech: "Python, Pygame",
+		github: "https://github.com/Alvalens/mini-harbor",
+		preview: "",
+	},
 ];
 export default function Page () {
   return (
 		<>
 			<main className="overflow-hidden">
-				<div className="h-screen w-screen  p-10 flex justify-center items-center flex-col mb-10">
+				<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 ">
 						<motion.div
 							className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
@@ -109,7 +158,7 @@ export default function Page () {
 										<td>{project.title}</td>
 										<td>{project.tech}</td>
 										<td>
-											<div>
+											<div className="flex flex-row justify-center items-center">
 												{project.github && (
 													<a
 														href={project.github}

components/Button.js

@@ -3,8 +3,8 @@ const Button = ({ children, variation, ...props }) => (
 		{...props}
 		className={`title mr-3  rounded-2xl px-8 py-2 shadow-md transition duration-300 ease-in-out ${
 			variation === "primary"
-				? "bg-gray-400 hover:bg-slate-500 text-gray-100 hover:text-white"
+				? "bg-gray-700 hover:bg-transparent border-transparent hover:border-gray-700 border-2 text-gray-100 hover:text-gray-700 box-border"
-				: "transparent border border-gray-400 hover:border-slate-500 text-gray-400 hover:text-gray-300"
+				 : "transparent border-2 border-gray-700 text-gray-700 hover:bg-gray-700 hover:text-gray-100 box-border"
 		}`}>
 		{children}
 	</button>

components/Sidebar.js

@@ -21,10 +21,10 @@ const Sidebar = () => {
 		return "";
 	};
 	return (
-		<div className="hidden md:flex fixed z-40 bg-gray-600 h-[50vh] w-14  flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
+		<div className="hidden md:flex fixed z-40 bg-gray-700 h-[50vh] w-14  flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
 			<ul
 				id="sidebar"
-				className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
+				className="flex flex-col justify-center items-center h-full space-y-16 text-gray-50">
 				<li data-menuanchor="home" className="active">
 					<button onClick={() => handleMoveToSection(1)}>
 						<FontAwesomeIcon icon={faHome} className="text-xl" />

json/data.json

@@ -144,7 +144,7 @@
         "I learned a lot about web developement in this project. I Also learn how to use Git and Github. This project is the reason why I started to learn web development."
       ],
       "year": "2022",
-      "preview": "",
+      "preview": "https://alvalens.my.id",
       "code": "",
       "images": [
         "/projects/porto/porto1.png",