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

feat: add new project

Browse source
This commit is contained in:
Alvalen 2023-12-16 11:29:56 +07:00
parent 064e83224b
commit 253d1a72a1
8 changed files with 48 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/projects/[slug]/page.jsx
View file

@ -59,7 +59,7 @@ function Page({ params }) {
window.history.back();
};
return (
<div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
<div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
<FixedButon onClick={handleBack}>
<FontAwesomeIcon
icon={faChevronLeft}
@ -68,7 +68,7 @@ function Page({ params }) {
</FixedButon>
<div className="min-h-screen flex justify-center items-center">
<div className="mx-auto grid grid-cols-1 md:grid-cols-2 mt-10 md:mt-0">
<div className="flex justify-center items-start flex-col mb-5 space-y-10 mx-auto">
<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
@ -147,14 +147,15 @@ function Page({ params }) {
</div>
</div>
{/* images */}
<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">
<div className="mx-auto grid grid-cols-1 p-5 md:p-20 w-full">
<div className="w-full h-auto text-center flex flex-col justify-center ">
{data.images.map((image, index) => (
<Image
key={index}
src={image}
alt={`Project Image ${index + 1}`}
className="w-full h-full mb-5"
className="mb-5 max-h-screen w-auto"
layout="responsive"
width={1920}
height={1080}
/>

7
app/projects/archive/page.jsx
View file

@ -7,6 +7,13 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import FixedButon from "@/components/FixedButton";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
const projects = [
{
year: "2023",
title: "LUDOang",
tech: "Python, Pygame, OpenGL",
github: "https://github.com/Alvalens/ludo-game",
preview: "https://github.com/Alvalens/ludo-game/releases/tag/pre-release"
},
{
year: "2023",
title: "React Realtime Chat",

17
app/projects/page.jsx
View file

@ -11,6 +11,7 @@ import ReactChat2 from "@/public/projects/react-chat2.png";
import ReactChat3 from "@/public/projects/react-chat3.png";
import ProjectAll from "@/public/img/projects-all.jpg";
// main project image
import LUDOang from "@/public/projects/main-project/ludo.png";
import ReactChatMain from "@/public/projects/main-project/react-chat.png";
import ReactTools from "@/public/projects/main-project/react-tools.png";
import AlephBot from "@/public/projects/main-project/aleph-bot.png";
@ -25,6 +26,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
const projects = [
{
title: "LUDOang",
desc: "LUDOang is a game created using python and pygame. This game is inspired by LUDO game.",
year: "2023",
tech: "Python, Pygame, OpenGL",
bg: LUDOang,
slug: "ludoang",
},
{
title: "React Chat WebApp",
desc: "My second React project. This project is a realtime chat webapp that I created using ReactJS, Firebase, and TailwindCSS.",
@ -84,7 +93,6 @@ const projects = [
];
export default function Page() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
@ -122,8 +130,11 @@ export default function Page() {
</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 <span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent"> currently
working on.</span>
List of my projects that I have done and{" "}
<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">
{" "}
currently working on.
</span>
</p>
<motion.div
initial={{ opacity: 0, y: 100 }}