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

[feat] implement json data for project

Browse source
This commit is contained in:
Alvalen 2023-09-03 20:26:08 +07:00
parent c6aab9074d
commit b64d7fb30d
19 changed files with 284 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,8 @@ import Link from "next/link";
import Button from "@/components/Button";
import Me from "../../public/img/me.jpg";
import MeAbout from "@/public/img/me2.jpg";
import Setup from "@/public/img/setup.jpg";
import ProjectAll from "@/public/img/projects-all.jpg";
import Hr from "@/components/Hr";
// icons
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -115,17 +117,15 @@ const MyPage = () => {
delay: 0.7,
type: "spring",
}}>
<div className=" rounded-full h-auto w-auto md:px-12">
<div className="h-[300px] w-auto">
<Image
src={Me}
layout="fill"
objectFit="cover"
placeholder="blur"
className="grayscale hover:grayscale-0"
alt="Alvalens"
/>
</div>
<div className="rounded-full h-auto w-auto lg:px-12 grayscale hover:grayscale-0">
<Image
src={Me}
width={400}
height={550}
placeholder="blur"
alt="Alvalens"
className="rounded-full w-full h-full object-cover"
/>
</div>
</motion.div>
</div>
@ -134,6 +134,7 @@ const MyPage = () => {
<div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
initial={{
x: 300,
opacity: 0,
@ -147,8 +148,7 @@ const MyPage = () => {
transition={{
delay: 0.5,
type: "spring",
}}
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
}}>
<Image
src={MeAbout}
layout="fill"
@ -160,7 +160,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 py-5">
<motion.h1
className="text-black text-5xl md:text-8xl font-bold"
className="bg-white md:bg-transparent bg-opacity-50 px-3 md-px-0 text-black text-5xl md:text-8xl font-bold"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
@ -201,7 +201,7 @@ const MyPage = () => {
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] "
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
initial={{
x: 300,
opacity: 0,
@ -215,11 +215,19 @@ const MyPage = () => {
transition={{
delay: 0.5,
type: "spring",
}}></motion.div>
}}>
<Image
src={ProjectAll}
layout="fill"
className="object-cover"
alt="Alvalens Setup"
placeholder="blur"
/>
</motion.div>
</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 py-5">
<motion.h1
className="text-black text-5xl md:text-8xl font-bold"
className="bg-white bg-opacity-50 px-3 md-px-0 text-black md:bg-none text-5xl md:text-8xl font-bold"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
@ -259,7 +267,15 @@ const MyPage = () => {
<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="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0">
<Image
src={Setup}
layout="fill"
className="object-cover"
alt="Alvalens Setup"
placeholder="blur"
/>
</div>
</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