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

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}