some font styles changes

This commit is contained in:
parsa aghaei 2024-09-24 15:23:13 +03:30
parent 56857c00cc
commit 8a369b970a
5 changed files with 59 additions and 48 deletions

View File

@ -43,21 +43,21 @@ export default function AboutMe() {
return ( return (
<div <div
className="my-20 flex w-full flex-wrap items-center justify-center gap-10 px-5" className="my-20 flex max-w-[90%] w-full flex-wrap items-center justify-center gap-10 px-5"
id="about-me" id="about-me"
> >
<div className="ms-0 flex w-full min-w-[300px] max-w-[90%] flex-col items-start md:w-[50%]"> <div className="ms-0 flex flex-col w-full items-center md:w-[50%]">
<h2 className="w-full text-[65px] font-[600] text-black"> <h2 className="text-[60px] font-[800] text-black">
{aboutMe?.title || <Skeleton width={300} height={100} />} {aboutMe?.title || <Skeleton width={300} height={100} />}
</h2> </h2>
<p className="text-[21px] font-[400] text-black"> <p className="text-justify text-[21px] font-[400] text-black">
{aboutMe?.description || <Skeleton width={350} height={30} />} {aboutMe?.description || <Skeleton width={350} height={30} />}
</p> </p>
<ul className="mt-10 flex w-full flex-col gap-10"> <ul className="mt-10 flex w-full flex-col gap-10">
{aboutMe?.skills ? ( {aboutMe?.skills ? (
aboutMe?.skills.map((skill, key) => ( aboutMe?.skills.map((skill, key) => (
<li key={key}> <li key={key}>
<h3 className="mb-2">{skill.title}</h3> <h3 className="mb-2 text-[18px] font-[700]">{skill.title}</h3>
<div className="h relative h-[12px] w-full rounded-lg bg-[#EDECEC]"> <div className="h relative h-[12px] w-full rounded-lg bg-[#EDECEC]">
<span <span
className="progress absolute h-[12px] rounded-lg bg-[#FD6F00]" className="progress absolute h-[12px] rounded-lg bg-[#FD6F00]"

View File

@ -77,7 +77,7 @@ export default function MyProjects() {
className="flex w-full max-w-[90%] flex-wrap items-center justify-center" className="flex w-full max-w-[90%] flex-wrap items-center justify-center"
id="projects" id="projects"
> >
<h2 className="my-10 text-[65px] font-[600] text-black">My Projects</h2> <h2 className="my-10 text-[60px] font-[800] text-black">My Projects</h2>
<p className="text-justify text-[21px] font-[400] text-black"> <p className="text-justify text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
est risus lectus. Phasellus consequat urna tellus est risus lectus. Phasellus consequat urna tellus

View File

@ -77,8 +77,8 @@ export default function Services() {
className="flex w-full max-w-[90%] flex-col flex-wrap items-center" className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
id="services" id="services"
> >
<h2 className="my-10 text-[65px] font-[600] text-black">Services</h2> <h2 className="my-10 text-[60px] font-[800] text-black">Services</h2>
<p className="w-full text-center text-[21px] font-[400] text-black"> <p className="text-justify text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
lectus netus in. Aliquet donec morbi convallis pretium lectus netus in. Aliquet donec morbi convallis pretium
</p> </p>

View File

@ -52,7 +52,7 @@ export default function Testimonials() {
className="flex w-full max-w-[90%] flex-wrap justify-center" className="flex w-full max-w-[90%] flex-wrap justify-center"
id="testimonials" id="testimonials"
> >
<h2 className="text-[65px] font-[600] text-black">Testominials</h2> <h2 className="text-[60px] font-[800] text-black">Testominials</h2>
<p className="my-10 text-justify text-[21px] font-[400] text-black"> <p className="my-10 text-justify text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
est risus lectus. Phasellus consequat urna tellus est risus lectus. Phasellus consequat urna tellus

View File

@ -22,7 +22,7 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body <body
suppressHydrationWarning={true} suppressHydrationWarning={true}
className={`${geistSans.variable} relative flex w-full flex-col items-center justify-between border-2 border-red-600 antialiased`} className={`${geistSans.variable} relative flex w-full flex-col items-center justify-between antialiased`}
> >
<div className="scroll-watcher" id="top"></div> <div className="scroll-watcher" id="top"></div>
<a <a
@ -37,8 +37,10 @@ export default function RootLayout({
id="header" id="header"
> >
<div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal"> <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" /> <div className="flex w-[67px]">
<p className="ms-2 whitespace-nowrap text-[28px] xl:text-[38px] font-[800] xl:ms-3 text-[#FD6F00]"> <img src={"/images/logo.svg"} className="w-full" alt="logo" />
</div>
<p className="ms-2 whitespace-nowrap text-[28px] font-[800] text-[#FD6F00] xl:ms-3 xl:text-[38px]">
Parsa Aghayi Parsa Aghayi
</p> </p>
</div> </div>
@ -80,7 +82,7 @@ export default function RootLayout({
Contact Contact
</a> </a>
</ul> </ul>
<button className="flex h-[52px] w-[188px] items-center whitespace-nowrap rounded-md bg-[#FD6F00] p-[18px] text-[21px] font-[400] text-[#fff]"> <button className="flex h-[52px] w-[188px] items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] p-[18px] text-[20px] font-[600] text-[#fff]">
Download CV Download CV
</button> </button>
</div> </div>
@ -98,76 +100,85 @@ export default function RootLayout({
height={67} height={67}
alt="logo" alt="logo"
/> />
<p className="ms-[20px] text-[48px] font-[400]">Parsa Aghayi</p> <p className="ms-2 text-[48px] font-[800] text-[#fd6f00]">
Parsa Aghayi
</p>
</div> </div>
<ul className="flex items-center justify-center"> <ul className="flex w-full flex-wrap items-center justify-center">
<a <a
className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]" className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
href="/#home" href="/#home"
> >
Home Home
</a> </a>
<a <a
className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]" className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
href="/#about-me" href="/#about-me"
> >
About Me About Me
</a> </a>
<a <a
className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]" className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
href="/#services" href="/#services"
> >
Services Services
</a> </a>
<a <a
className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]" className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
href="/#projects" href="/#projects"
> >
Projects Projects
</a> </a>
<a <a
className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]" className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
href="/#testimonials" href="/#testimonials"
> >
Testimonials Testimonials
</a> </a>
<a <a
className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]" className="whitespace-nowrap px-[14px] py-[10px] text-[18px] font-[500] hover:text-[#fd6f00]"
href="/#contact" href="/#contact"
> >
Contact Contact
</a> </a>
</ul> </ul>
<div className="flex items-center gap-[25px]"> {/* socials */}
<Image <div className="flex w-full justify-center">
src={"/images/icons/facebook.svg"} <div className="flex items-center gap-[25px]">
width={32} <Image
height={32} src={"/images/icons/facebook.svg"}
alt="facebook" width={32}
/> height={32}
<Image alt="facebook"
src={"/images/icons/twitter.svg"} className="svg-hover hover:cursor-pointer"
width={32} />
height={32} <Image
alt="twitter" src={"/images/icons/twitter.svg"}
/> width={32}
<Image height={32}
src={"/images/icons/instagram.svg"} alt="twitter"
width={32} className="svg-hover hover:cursor-pointer"
height={32} />
alt="instagram" <Image
/> src={"/images/icons/instagram.svg"}
<Image width={32}
src={"/images/icons/linkedin.svg"} height={32}
width={32} alt="instagram"
height={32} className="svg-hover hover:cursor-pointer"
alt="linkedin" />
/> <Image
src={"/images/icons/linkedin.svg"}
width={32}
height={32}
alt="linkedin"
className="svg-hover hover:cursor-pointer"
/>
</div>
</div> </div>
</div> </div>
<p className="flex h-[84px] items-center justify-center bg-[#545454] text-[21px] font-[400] text-white"> <p className="flex h-[84px] items-center justify-center bg-[#545454] text-[18px] font-[400] text-white">
© 2023 © 2023
<span className="mx-[5px] text-[21px] font-[700] text-[#FD6F00]"> <span className="mx-[5px] text-[18px] font-[700] text-[#FD6F00]">
Parsa Aghayi Parsa Aghayi
</span>{" "} </span>{" "}
All Rights Reserved , Inc. All Rights Reserved , Inc.