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

[feat] populate project images

Browse source
This commit is contained in:
Alvalen 2023-09-05 20:06:59 +07:00
parent 1980fb94ff
commit fb466e1c15
36 changed files with 232 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -270,7 +270,7 @@ const MyPage = () => {
</div>
<div className="section">
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 overflow-x-hidden">
<motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
initial={{
@ -298,7 +298,7 @@ const MyPage = () => {
</div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 overflow-hidden">
<motion.h1
className="bg-white lg:bg-transparent bg-opacity-50 px-3 md-px-0 text-black text-5xl md:text-8xl font-bold"
className="bg-white lg:bg-transparent bg-opacity-50 px-3 md-px-0 text-black text-5xl md:text-8xl font-bold mb-3"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
@ -317,7 +317,9 @@ const MyPage = () => {
type: "spring",
}}>
Feel free to contact me if you have any{" "}
<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">questions or just want to say hi.</span>
<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">
questions or just want to say hi.
</span>
</motion.p>
<motion.p
className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5"
@ -327,12 +329,14 @@ const MyPage = () => {
delay: 0.3,
type: "spring",
}}>
alvalen.shafel04@gmail.com
<a href="mailto:Alvalen.shafel04@gmail.com?subject=Hello&body=Hello Alvalens,">
alvalen.shafel04@gmail.com
</a>
</motion.p>
{/* icons */}
<div className="flex justify-center items-center space-x-4">
<motion.a
href="#"
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"
initial={{ y: 40, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
@ -347,7 +351,9 @@ const MyPage = () => {
</motion.a>
<motion.a
href="#"
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"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@ -361,7 +367,9 @@ const MyPage = () => {
/>
</motion.a>
<motion.a
href="#"
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"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@ -375,7 +383,9 @@ const MyPage = () => {
/>
</motion.a>
<motion.a
href="#"
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"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@ -389,7 +399,9 @@ const MyPage = () => {
/>
</motion.a>
<motion.a
href="#"
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"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}

2
app/nprogress.css
View file

@ -35,7 +35,7 @@
display: block;
position: fixed;
z-index: 1031;
top: 15px;
top: 50px;
right: 15px;
}

26
app/projects/page.js
View file

@ -10,6 +10,14 @@ 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 ProjectAll from "@/public/img/projects-all.jpg";
// main project image
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";
@ -19,7 +27,7 @@ const projects = [
desc: "My second React project. This project is a realtime chat webapp that I created using ReactJS, Firebase, and TailwindCSS.",
year: "2023",
tech: "Javascript, React Js, Firebase, Daisy UI",
bg: ReactChat3,
bg: ReactChatMain,
slug: "react-chat",
},
{
@ -27,7 +35,7 @@ const projects = [
desc: "My first React project. contain three main tools: Todo List, Note, and Expense Tracker that usefull for daily activity",
year: "2023",
tech: "Javascript, React Js, TailwindCSS",
bg: ReactChat3,
bg: ReactTools,
slug: "react-tools",
},
{
@ -35,7 +43,7 @@ const projects = [
desc: "Discord bot that can search images on google and send the result to discord channel, with this bot you can search images on google without leaving discord.",
year: "2023",
tech: "Python, Serp API, Discord.py",
bg: ReactChat3,
bg: AlephBot,
slug: "aleph-discord-bot",
},
{
@ -43,7 +51,7 @@ const projects = [
desc: "LPTK Cup 2023 is a website for a competition that held by Universitas Negeri Malang. This is my second freelance project using Laravel.",
year: "2023",
tech: "PHP, Laravel, Bootstrap, JQuery, MySQL",
bg: ReactChat3,
bg: LPTK,
slug: "lptk-cup-2023",
},
{
@ -51,7 +59,7 @@ const projects = [
desc: "My first freelance project. This project is a website for a School based on a JALAKAR curriculum. The website is built mainly using Laravel and Bootstrap.",
year: "2023",
tech: "PHP, Laravel, Livewire, Bootstrap, JQuery, MySQL",
bg: ReactChat3,
bg: NUINO,
slug: "nu-ino-website",
},
{
@ -59,7 +67,7 @@ const projects = [
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: ReactChat3,
bg: UnmuhJember,
slug: "unmuh-jember-landing-page",
},
{
@ -67,12 +75,13 @@ const projects = [
desc: "My first portofolio website that i created using HTML, CSS, and Javascript. This website is the reason why i learn web development.",
year: "2022",
tech: "HTML, CSS, Javascript, Bootstrap",
bg: ReactChat3,
bg: Porto,
slug: "my-first-portofolio-website",
},
];
export default function Page() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
@ -320,8 +329,9 @@ export default function Page() {
alt="Alvalens"
layout="fill"
objectFit="cover"
placeholder="empty"
placeholder="blur"
className="bg-slate-950 opacity-10 group-hover/tes:opacity-100 transition-all ease duration-500"
blurDataURL={project.bg.blurDataURL}
/>
<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
<h4 className="text-white">