parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home is responsive now!

Browse Source
This commit is contained in:
parsa aghaei 2024-09-23 17:48:34 +03:30
parent 0ece4ccde6
commit 05c88a8b80
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout.tsx
View File

@ -38,7 +38,7 @@ export default function RootLayout({
>
<div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal">
<Image src={"/images/logo.svg"} width={67} height={67} alt="logo" />
<p className="ms-[5px] whitespace-nowrap text-[38px] font-[400] xl:ms-[20px] xl:text-[48px]">
<p className="ms-5 whitespace-nowrap text-[38px] font-[400] xl:ms-[20px] xl:text-[48px]">
Parsa Aghayi
</p>
</div>
@ -85,7 +85,7 @@ export default function RootLayout({
</button>
</div>
<div className="main my-[67px]">{children}</div>
<div className="main w-full my-[67px]">{children}</div>
<div className="flex w-full flex-col">
<div className="flex flex-col items-center gap-[50px] bg-[#F8F8F8] py-[50px]">

47
src/app/page.tsx
View File

@ -7,30 +7,14 @@ import MyProjects from "./_components/my-projects/page";
export default function Home() {
return (
<div className="my-[100px] flex w-[1420px] flex-col items-center gap-[50px]">
<div className="my-[100px] flex w-full max-w-[1420px] flex-col items-center gap-[50px]">
{/* Home */}
<div className="flex flex-nowrap" id="home">
<div
className="flex flex-wrap w-full justify-center gap-10 xl:gap-15 2xl:gap-20 lg:flex-nowrap"
id="home"
>
{/* start */}
<div className="flex flex-col">
<p className="text-[24px] font-[400] text-black">Hi I am </p>
<p className="text-[32px] font-[600] text-[#FD6F00]">Parsa Aghayi</p>
<p className="text-[80px] font-[700] text-black">
Frontend & Backend
</p>
<p className="ms-[350px] mt-[-40px] text-[100px] font-[700] text-black">
Developer{" "}
</p>
<p className="my-[40px] pe-[50px] text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa
nibh lectus netus in. Aliquet donec morbi convallis pretium. Turpis
tempus pharetra
</p>
<button className="flex h-[52px] w-[188px] items-center whitespace-nowrap rounded-md bg-[#FD6F00] p-[18px] px-[52px] text-[21px] font-[400] text-[#fff]">
Hire Me
</button>
</div>
{/* end */}
<div className="flex flex-wrap">
<div className="flex flex-wrap justify-center w-full lg:w-[45%] xl:w-[50%] max-w-[500px]">
<div className="aboutme-image">
<Image
src={"/images/profile.png"}
@ -70,6 +54,25 @@ export default function Home() {
</div>
</div>
</div>
{/* end */}
<div className="flex flex-col w-full items max-w-[80%] md:max-w-[70%] lg:w-[45%] xl:w-[50%]">
<p className="text-[20px] 2xl:text-[24px] font-[400] text-black">Hi I am </p>
<p className="text-[30px] 2xl:text-[32px] font-[600] text-[#FD6F00]">Parsa Aghayi</p>
<p className="text-[40px] lg:text-[45px] xl:text-[60px] 2xl:text-[80px] font-[700] text-black text-start whitespace-nowrap">
Frontend & Backend
</p>
<p className="text-end mt-[-20px] text-[50px] lg:text-[50px] lg:mt-[-30px] xl:text-[70px] 2xl:text-[100px] font-[700] text-black">
Developer
</p>
<p className="my-[40px] pe-[50px] lg:pe-0 text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa
nibh lectus netus in. Aliquet donec morbi convallis pretium. Turpis
tempus pharetra
</p>
<button className="flex h-[52px] w-[188px] items-center whitespace-nowrap rounded-md bg-[#FD6F00] p-[18px] px-[52px] text-[21px] font-[400] text-[#fff]">
Hire Me
</button>
</div>
</div>
<AboutMe />