Skip to content

Commit

Permalink
change complete UI
Browse files Browse the repository at this point in the history
  • Loading branch information
Vishal Dhanotiya authored and Vishal Dhanotiya committed Jun 24, 2024
1 parent cd74506 commit c356081
Show file tree
Hide file tree
Showing 64 changed files with 2,552 additions and 2,385 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"typed.js": "^2.1.0",
"typescript": "^5.4.5",
"typewriter-effect": "^2.21.0",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
93 changes: 46 additions & 47 deletions src/components/FifthSection.scss
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,71 @@
@import "../res/theme/variable";
:root {
--white: #{$white};
--gray: #{$gray};
--blood-red: #{$blood-red};
--white: #{$white};
--gray: #{$gray};
--blood-red: #{$blood-red};
}
.fifth-title {
color: var(--gray);
padding-top: 6rem;
font-weight: bold;
font-size: 2.2rem;
color: #f51940;
padding-top: 6rem;
font-weight: bold;
font-size: 2.2rem;
}
.pagination-container {
justify-content: center;
display: flex;
justify-content: center;
display: flex;
}
.pagination {
display: flex;
justify-content: center;
display: flex;
justify-content: center;
}
.review-container {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.left-arrow {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(../res/left-arrow.png);
width: 2rem;
height: 2rem;
margin-right: 3rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(../res/left-arrow.png);
width: 2rem;
height: 2rem;
margin-right: 3rem;
}
.right-arrow {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(../res/right-arrow.png);
margin-left: 3rem;
width: 2rem;
height: 2rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(../res/right-arrow.png);
margin-left: 3rem;
width: 2rem;
height: 2rem;
}
.review-text-container {
justify-content: center;
align-items: center;
justify-content: center;
align-items: center;
}
.reviewer-name {
color: var(--gray);
font-weight: bold;
font-size: 1.2rem;
color: white;
font-weight: bold;
font-size: 2rem;
}
.reviewer-review {
font-size: 1rem;
color: var(--gray);
font-size: 1rem;
color: var(--gray);
}
.image-container {
margin-block: 1rem;
display: block;
justify-content: center;
align-items: center;
margin-block: 1rem;
display: block;

justify-content: center;
align-items: center;
}
.reviewer-image-item {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 4rem;
margin-left: auto;
margin-right: auto;
width: 8rem;
height: 8rem;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 50rem;
border-radius: 1%;
height: 30rem;
}
219 changes: 142 additions & 77 deletions src/components/FifthSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,151 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import "./FifthSection.scss";
const gridImage = [
{
text: "Noah Lucas",
review: `This shirt is so soft and comfortable.
{
id: 1,
text: "Top Talent 2024",
review: `This shirt is so soft and comfortable.
I was a bit worried about the size running small, but I normally wear a medium and it fits great.`,
value: "https://i.imgur.com/CzXTtJV.jpg",
},
{
text: "James Levi",
review: "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: "https://i.imgur.com/OB0y6MR.jpg",
},
{
text: "William Jackson",
review: "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: "https://farm4.staticflickr.com/3852/14447103450_2d0ff8802b_z_d.jpg",
},
{
text: "Daniel Benjamin",
review: "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: "https://farm2.staticflickr.com/1533/26541536141_41abe98db3_z_d.jpg",
},
value: require("../res/top2024.png"),
},
{
id: 2,
text: "Top Talent 2023",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/top2023.png"),
},
{
id: 3,
text: "Bravo - Individual Awards",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/bravo.png"),
},

{
id: 4,
text: "GenAI Foundation - GenAI Assisted Coding using Amazon CdeWhisperer on FY 2023",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/genai.png"),
},
{
id: 5,
text: "Interviewers Certification Workshop",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/interview.png"),
},
{
id: 6,
text: "React Native - The Practical Guide",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/rn2024.png"),
},

{
id: 7,
text: "Master CI/CD for React Native",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/ci-cd.png"),
},
{
id: 8,
text: "Fastlane for React Native: Deploy your app autonomously!",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/fastlane.png"),
},
{
id: 9,
text: "The Git & Github Bootcamp",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/github-bootcamp.png"),
},
{
id: 10,
text: "The Complete React Native + Hooks Course",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/hook.png"),
},
{
id: 11,
text: "Android Studio Masterclass Conquer the Android IDE",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/android-certificate.png"),
},
{
id: 12,
text: "Android Unit Testing and Test Driven Development",
review:
"This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.",
value: require("../res/unit-testing.png"),
},
];

export default function FifthSection() {
const [activeIndex, setActiveIndex] = useState(0);
return (
<div id="fifthSection" style={{ backgroundColor: "#ebebeb" }}>
<p className="fifth-title">WHAT THEY SAY ABOUT ME</p>
const [activeIndex, setActiveIndex] = useState(0);

return (
<div
id="fifthSection"
style={{ marginBlock: -35, backgroundColor: "#000000" }}
>
<p className="fifth-title">Achievements</p>

<div className="review-container">
<div
onClick={() => {
if (activeIndex) {
setActiveIndex(activeIndex - 1);
}
}}
className="left-arrow"
/>
<div className="image-container">
<img
className="reviewer-image-item"
src={gridImage[activeIndex].value}
/>
</div>
<div className="review-container">
<div
onClick={() => {
if (activeIndex) {
setActiveIndex(activeIndex - 1);
}
}}
className="left-arrow"
/>
<div className="image-container">
<img
className="reviewer-image-item"
src={gridImage[activeIndex].value}
/>
</div>

<div
onClick={() => {
if (activeIndex < gridImage.length - 1) {
setActiveIndex(activeIndex + 1);
}
}}
className="right-arrow"
/>
</div>
<div className="review-text-container">
<p className="reviewer-name">{gridImage[activeIndex].text}</p>
<p className="reviewer-review">
{gridImage[activeIndex].review}
</p>
</div>
<div className="pagination-container">
{gridImage.map((item, index) => {
return (
<div className="pagination">
<div
style={{
height: 10,
width: 10,
marginBottom: 80,
marginTop: 45,
marginInline: 2,
borderRadius: 5,
backgroundColor:
index === activeIndex ? "pink" : "gray",
}}
/>
</div>
);
})}
</div>
</div>
);
<div
onClick={() => {
if (activeIndex < gridImage.length - 1) {
setActiveIndex(activeIndex + 1);
}
}}
className="right-arrow"
/>
</div>
<div className="review-text-container">
<p className="reviewer-name">{gridImage[activeIndex].text}</p>
</div>
<div className="pagination-container">
{gridImage.map((item, index) => {
return (
<div className="pagination">
<div
style={{
height: 10,
width: 10,
marginBottom: 80,
marginTop: 45,
marginInline: 2,
borderRadius: 5,
backgroundColor: index === activeIndex ? "pink" : "gray",
}}
/>
</div>
);
})}
</div>
</div>
);
}
Loading

0 comments on commit c356081

Please sign in to comment.