v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[feat] small color, content revision

Browse source
This commit is contained in:
Alvalen 2023-09-05 21:39:08 +07:00
parent fb466e1c15
commit 3d53a8f54a
11 changed files with 171 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/(root)/layout.js
View file

@ -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 (

14
app/(root)/page.js
View file

@ -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={{

17
app/globals.css
View file

@ -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 {
color: rgb(255, 235, 87);
li {
@apply list-none relative;
}
li.active:after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: #ffffff;
}
td, th {

30
app/layout.js
View file

@ -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}

33
app/not-found.js Normal file
View file

@ -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;

25
app/projects/[slug]/page.js
View file

@ -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">
<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>
<>
<NotFound />
</>
);
} 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>

107
app/projects/archive/page.js
View file

@ -6,39 +6,88 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
const projects = [
{
year: "2023",
title: "React Realtime Chat",
tech: "Javascript, React Js, Firebase, Daisy UI",
github: "https://github.com/Alvalens/react-realtime-chat",
preview: "https://react-chat-rouge.vercel.app",
},
{
year: "2023",
title: "React Tools",
tech: "Javascript, React Js, TailwindCSS",
github: "https://github.com/Alvalens/react-tools",
preview: "react-tools-flax.vercel.app",
},
{
year: "2023",
title: "Aleph Discord Bot",
tech: "Python, Serp API, Discord.py",
github: "https://github.com/Alvalens/aleph-discord-bot",
},
{
year: "2023",
title: "Unmuh Jember Landing Page",
tech: "HTML, CSS, Javascript",
github: "https://github.com/Alvalens/unmuh-jember-landing-page",
preview: "https://alvalens.github.io/unmuh-jember-landing-page/",
},
{
year: "2023",
title: "React Realtime Chat",
tech: "Javascript, React Js, Firebase, Daisy UI",
github: "https://github.com/Alvalens/react-realtime-chat",
preview: "https://react-chat-rouge.vercel.app",
},
{
year: "2023",
title: "React Tools",
tech: "Javascript, React Js, TailwindCSS",
github: "https://github.com/Alvalens/react-tools",
preview: "react-tools-flax.vercel.app",
},
{
year: "2023",
title: "Aleph Discord Bot",
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",
tech: "HTML, CSS, Javascript",
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}

4
components/Button.js
View file

@ -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"
: "transparent border border-gray-400 hover:border-slate-500 text-gray-400 hover:text-gray-300"
? "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-2 border-gray-700 text-gray-700 hover:bg-gray-700 hover:text-gray-100 box-border"
}`}>
{children}
</button>

4
components/Sidebar.js
View file

@ -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" />

2
json/data.json
View file

@ -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",

BIN
public/img/icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 107 KiB