Skip to content

Commit 4a6518e

Browse files
saqibbedarsaqibbedar
committed
style(homepage): update homepage ui
1 parent 45150c9 commit 4a6518e

4 files changed

Lines changed: 32 additions & 24 deletions

File tree

‎frontend/src/components/sections/home/CoverSection/CoverSection.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
const CoverSection = () => {
22

33
return (
4-
<div className="px-3 md:px-8 relative min-h-[100dvh] h-[100dvh] overflow-hidden">
4+
<div className="px-3 md:px-8 relative min-h-[100vh] h-[100vh] overflow-hidden">
55

66
{/* Content */}
77
<div className="h-full flex place-items-center z-10">
8-
<div className="h-[80dvh] w-full">
8+
<div className="h-[80vh] w-full">
99
<div
1010
className={`relative h-full w-full flex flex-col sm:flex-row justify-between overflow-hidden`}
1111
>
@@ -45,13 +45,13 @@ const CoverSection = () => {
4545
</div>
4646
</div>
4747
<div
48-
className={`w-full mt-4 sm:mt-2 flex items-center justify-between`}
48+
className={`w-full mt-4 sm:mt-2 flex items-center justify-end sm:justify-between`}
4949
>
5050
<div className="flex flex-col justify-center">
51-
<span className="text-[14px] sm:text-[16px] font-semibold tracking-wider">
51+
<span className="text-[13px] sm:text-[16px] font-semibold tracking-wider">
5252
Available for full time & Freelance
5353
</span>
54-
<span className="text-[14px] sm:text-[16px] font-semibold tracking-wider">
54+
<span className="text-[13px] sm:text-[16px] font-semibold tracking-wider text-right sm:text-left">
5555
Work from Feb {"'23"}
5656
</span>
5757
</div>
@@ -63,7 +63,7 @@ const CoverSection = () => {
6363
{/* focused Image (center) */}
6464
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
6565
<div
66-
className="h-[14rem] w-[14rem] sm:h-55 sm:w-55 md:h-65 md:w-65 lg:h-75 lg:w-75 xl:h-80 xl:w-80 overflow-hidden rounded-full opacity-75"
66+
className="h-[15rem] w-[15rem] sm:h-55 sm:w-55 md:h-65 md:w-65 lg:h-75 lg:w-75 xl:h-80 xl:w-80 overflow-hidden rounded-full opacity-75"
6767
>
6868
<img
6969
src="/images/profile2.png"

‎frontend/src/components/sections/home/HomeView.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const HomeView = () => {
2020
<SkillSection />
2121
{/* <CertificateSection /> */}
2222
{/* <TestimonialSection /> */}
23-
<FAQSection />
23+
{/* <FAQSection /> */}
2424
</>
2525
);
2626
};

‎frontend/src/components/sections/home/ProjectSection/ProjectSection.jsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useProjects } from "@/context";
2+
import { Link } from "react-router-dom";
23

34
const ProjectSection = () => {
45

@@ -11,19 +12,26 @@ const ProjectSection = () => {
1112

1213
return (
1314
<div>
14-
<div className="my-20 mx-8 auto">
15-
{featuredProjects.map((project, index) => (
16-
<div
17-
key={index}
18-
className={`w-full flex items-center justify-between border-white/10 ${index === 0 ? "border-b-[.1px] border-t-[.1px]" : "border-b-[.1px]"}`}
19-
>
20-
<div className="py-8 lg:text-[6vw] font-semibold uppercase text-[var(--dt-sec-fg)]">
21-
{project.name}
15+
<div className="px-3 md:px-8 my-6 md:my-20">
16+
{featuredProjects.map((project, index) => (
17+
<div
18+
key={index}
19+
className={`w-full flex items-center justify-between border-[var(--dt-bdr-clr-xtra)] ${
20+
index === 0
21+
? "border-b-[1px] border-t-[1px]"
22+
: "border-b-[1px]"
23+
}`}
24+
>
25+
<Link
26+
to={`/projects/${project._id}`}
27+
className="py-6 md:py-8 text-[2rem] sm:text-[7vw] md:text-[6vw] lg:text-[6vw] font-semibold uppercase text-[var(--dt-sec-fg)]"
28+
>
29+
{project.name}
30+
</Link>
31+
<div className="text-[14px] md:text-[16px] font-semibold">2020</div>
2232
</div>
23-
<div>2020</div>
24-
</div>
25-
))}
26-
<button>View More</button>
33+
))}
34+
<button className="">View More</button>
2735
</div>
2836
</div>
2937
);

‎frontend/src/components/sections/home/SkillSection/SkillSection.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import {Link} from "react-router-dom"
44

55
const SkillSection = () => {
66
return (
7-
<div className="mt-10">
7+
<div className="my-12">
88
<div className="">
99

1010
<div className="">
1111
<Marquee pauseOnHover={true} autoFill={true} speed={70}>
1212
<div className="flex">
1313
{skills.first_row.map((skill, index) => (
14-
<Link to={`/search?q=${skill.name}`} key={index} className="flex items-center justify-center px-20 py-10 border border-[var(--dt-border-color)] hover:bg-[var(--dt-bdr-clr-xtra)]" title={skill.name}>
15-
{<skill.icon className="h-14 w-14"/>}
14+
<Link to={`/search?q=${skill.name}`} key={index} className="flex items-center justify-center px-10 py-5 md:px-15 md:py-8 lg:px-20 lg:py-10 border border-[var(--dt-border-color)] hover:bg-[var(--dt-bdr-clr-xtra)]" title={skill.name}>
15+
{<skill.icon className="h-8 w-8 md:h-14 md:w-14"/>}
1616
</Link>
1717
))}
1818
</div>
@@ -21,8 +21,8 @@ const SkillSection = () => {
2121
<Marquee pauseOnHover={true} autoFill={true} speed={70} direction="right">
2222
<div className="flex">
2323
{skills.second_row.map((skill, index) => (
24-
<Link to={`/search?q=${skill.name}`} key={index} className="flex items-center justify-center px-20 py-10 border border-[var(--dt-border-color)] hover:bg-[var(--dt-bdr-clr-xtra)]" title={skill.name}>
25-
{<skill.icon className="h-14 w-14"/>}
24+
<Link to={`/search?q=${skill.name}`} key={index} className="flex items-center justify-center px-10 py-5 md:px-15 md:py-8 lg:px-20 lg:py-10 border border-[var(--dt-border-color)] hover:bg-[var(--dt-bdr-clr-xtra)]" title={skill.name}>
25+
{<skill.icon className="h-8 w-8 md:h-14 md:w-14"/>}
2626
</Link>
2727
))}
2828
</div>

0 commit comments

Comments
 (0)