feat add new project
This commit is contained in:
Alvalen
parent
04b28fba3a
commit
ac5c350b94
7 changed files with 60 additions and 52 deletions
|
|
@ -7,12 +7,20 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
|||
import FixedButon from "@/components/FixedButton";
|
||||
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
const projects = [
|
||||
{
|
||||
year: "2024",
|
||||
title: "Generative Trivia",
|
||||
tech: "NextJS, Gemini AI, TailwindCSS, ShadcnUI, Firebase",
|
||||
github: "https://github.com/Alvalens/generative-trivia",
|
||||
preview: "https://generative-trivia.vercel.app/",
|
||||
},
|
||||
{
|
||||
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"
|
||||
preview:
|
||||
"https://github.com/Alvalens/ludo-game/releases/tag/pre-release",
|
||||
},
|
||||
{
|
||||
year: "2023",
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@ import Button from "@/components/Button";
|
|||
import Image from "next/legacy/image";
|
||||
|
||||
// images
|
||||
import ReactChat1 from "@/public/projects/react-chat.png";
|
||||
import ReactChat2 from "@/public/projects/react-chat2.png";
|
||||
import ReactChat3 from "@/public/projects/react-chat3.png";
|
||||
import ReactChat1 from "@/public/projects/trivia/trivia1.png";
|
||||
import ReactChat2 from "@/public/projects/trivia/trivia2.png";
|
||||
import ReactChat3 from "@/public/projects/trivia/trivia3.png";
|
||||
import ProjectAll from "@/public/img/projects-all.jpg";
|
||||
// main project image
|
||||
import Trivia from "@/public/projects/main-project/trivia.png";
|
||||
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";
|
||||
import LPTK from "@/public/projects/lptk/lptk1.png";
|
||||
import NUINO from "@/public/projects/ino/ino1.png";
|
||||
import UnmuhJember from "@/public/projects/unmuh/unmuh1.png";
|
||||
import Porto from "@/public/projects/porto/porto1.png";
|
||||
|
||||
import Hr from "@/components/Hr";
|
||||
|
|
@ -26,6 +26,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|||
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: "Generative Trivia",
|
||||
desc: "Generative Trivia is a web application that I created using Gemini AI API to generate trivia questions and answers.",
|
||||
year: "2024",
|
||||
tech: "NextJS, Gemini AI API, Tailwind CSS, Shadcn UI, Firebase",
|
||||
bg: Trivia,
|
||||
slug: "trivia",
|
||||
},
|
||||
{
|
||||
title: "LUDOang",
|
||||
desc: "LUDOang is a game created using python and pygame. This game is inspired by LUDO game.",
|
||||
|
|
@ -74,14 +82,6 @@ const projects = [
|
|||
bg: NUINO,
|
||||
slug: "nu-ino-website",
|
||||
},
|
||||
{
|
||||
title: "Unmuh Jember Landing Page",
|
||||
desc: "Landing page for Universitas Muhammadiyah Jember. This web is made for competition held by Universitas Muhammadiyah Jember.",
|
||||
year: "2023",
|
||||
tech: "HTML, CSS, Javascript",
|
||||
bg: UnmuhJember,
|
||||
slug: "unmuh-jember-landing-page",
|
||||
},
|
||||
{
|
||||
title: "My First Portofolio Website",
|
||||
desc: "My first portofolio website that i created using HTML, CSS, and Javascript. This website is the reason why i learn web development.",
|
||||
|
|
@ -161,7 +161,7 @@ export default function Page() {
|
|||
<div className="relative w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10">
|
||||
<div className="flex justify-center items-start flex-col mb-5 ">
|
||||
<div className="images relative w-full aspect-square">
|
||||
<div className="absolute top-28 left-10 w-[50%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
|
||||
<div className="absolute top-28 left-10 h-[40%] aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150 z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.5, x: 100 }}
|
||||
whileInView={{
|
||||
|
|
@ -176,10 +176,11 @@ export default function Page() {
|
|||
layout="fill"
|
||||
objectFit="cover"
|
||||
placeholder="blur"
|
||||
className="rat"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="absolute top-16 right-28 w-[30%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
|
||||
<div className="absolute top-16 right-28 h-[30%] aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
|
|
@ -203,7 +204,7 @@ export default function Page() {
|
|||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="absolute bottom-16 right-20 w-[40%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
|
||||
<div className="absolute bottom-16 right-20 h-[35%] aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
|
|
@ -246,29 +247,26 @@ export default function Page() {
|
|||
type: "spring",
|
||||
}}>
|
||||
<h2 className="text-2xl font-bold tracking-wider mb-3">
|
||||
React Chat WebApp
|
||||
Generative Trivia
|
||||
</h2>
|
||||
<p className="text-gray-600 text-justify title text-lg">
|
||||
React Chat WebApp is a chat application that I
|
||||
created using ReactJS, Firebase, and TailwindCSS.
|
||||
This is my second project using ReactJS and
|
||||
Firebase. I created this project to learn more about
|
||||
ReactJS and Firebase. I also use TailwindCSS to make
|
||||
the UI more beautiful and responsive. In this
|
||||
project i learn many things about react and
|
||||
firebase, such as react hooks, react router,
|
||||
firebase authentication, firebase firestore, and
|
||||
firebase storage. You can see the source code of
|
||||
this project on my github account or preview the
|
||||
project by clicking the button below.
|
||||
A generative trivia website built with Next.js,
|
||||
Firebase, NextAuth, Google OAuth, and TypeScript.
|
||||
Users can generate trivia questions for predefined
|
||||
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/react-chat ">More</Link>
|
||||
<Link href="projects/trivia">More</Link>
|
||||
</Button>
|
||||
<Button variation="secondary">
|
||||
<a
|
||||
href="https://react-chat-rouge.vercel.app/"
|
||||
href="https://generative-trivia.vercel.app/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
Preview
|
||||
|
|
|
|||
|
|
@ -1,5 +1,28 @@
|
|||
{
|
||||
"Projects": [
|
||||
{
|
||||
"title": "Generative Trivia",
|
||||
"desc": [
|
||||
"A generative trivia website built with Next.js, Firebase, NextAuth, Google OAuth, and TypeScript. Users can generate trivia questions for predefined school subjects and answer them with a unique interactive input style. The application supports user authentication with Google and stores data in Firestore.",
|
||||
"The project is a culmination of my passion for web development and my desire to create a fun and interactive learning platform. The website is designed to be user-friendly and engaging, with a clean and modern interface that appeals to a wide audience. The trivia questions are generated using the Gemini API, which provides a diverse range of questions for users to answer."
|
||||
],
|
||||
"year": "2023",
|
||||
"preview": "https://generative-trivia.vercel.app/",
|
||||
"code": "https://github.com/Alvalens/generative-trivia",
|
||||
"images": [
|
||||
"/projects/trivia/trivia1.png",
|
||||
"/projects/trivia/trivia2.png",
|
||||
"/projects/trivia/trivia3.png"
|
||||
],
|
||||
"tech": [
|
||||
"NextJS",
|
||||
"Shadcn UI",
|
||||
"Tailwind CSS",
|
||||
"Firebase",
|
||||
"Gemini API"
|
||||
],
|
||||
"slug": "trivia"
|
||||
},
|
||||
{
|
||||
"title": "LUDOang",
|
||||
"desc": [
|
||||
|
|
@ -137,27 +160,6 @@
|
|||
],
|
||||
"slug": "nu-ino-website"
|
||||
},
|
||||
{
|
||||
"title": "Unmuh Jember Landing Page",
|
||||
"desc": [
|
||||
"Unmuh Jember landing page is a website that I created for a competition held by Universitas Muhammadiyah Jember. The website is built natively using HTML, CSS, and JavaScript. The website has a few features such as a registration form, a login system, and a dashboard for the admin to manage the contents.",
|
||||
"This project is my first freelance project and my first project using JavaScript. I learned a lot about how to use JavaScript and how to use it to create a website. I also learned how to work with a team and how to manage a project."
|
||||
],
|
||||
"year": "2023",
|
||||
"preview": "https://alvalens.github.io/unmuh-jember-landing-page/",
|
||||
"code": "https://github.com/Alvalens/unmuh-jember-landing-page",
|
||||
"images": [
|
||||
"/projects/unmuh/unmuh1.png",
|
||||
"/projects/unmuh/unmuh2.png",
|
||||
"/projects/unmuh/unmuh3.png"
|
||||
],
|
||||
"tech": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript"
|
||||
],
|
||||
"slug": "unmuh-jember-landing-page"
|
||||
},
|
||||
{
|
||||
"title": "My First Portofolio Website",
|
||||
"desc": [
|
||||
|
|
|
|||
BIN
public/projects/main-project/trivia.png
Normal file
BIN
public/projects/main-project/trivia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
BIN
public/projects/trivia/trivia1.png
Normal file
BIN
public/projects/trivia/trivia1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
public/projects/trivia/trivia2.png
Normal file
BIN
public/projects/trivia/trivia2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
BIN
public/projects/trivia/trivia3.png
Normal file
BIN
public/projects/trivia/trivia3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Loading…
Add table
Add a link
Reference in a new issue