Skip to content

Commit

Permalink
Merge pull request #19 from ComputerSocietyVITC/sinchan
Browse files Browse the repository at this point in the history 
team page done,might add animations
  • Loading branch information
@Sinchancodes
Sinchancodes authored Jun 14, 2024
2 parents 878a2d2 + 6b6c6ff commit 7cf64aa
Show file tree
Hide file tree
Showing 8 changed files with 182 additions and 2 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"homepage": "https://beta.ieeecsvitc.com",
"dependencies": {
"@fontsource/raleway": "^5.0.19",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@heroicons/react": "^2.1.3",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/line-clamp": "^0.4.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
Expand Down
Binary file added src/components/teamImage/img1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/teamImage/img2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions src/components/teamImage/teamcard.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import github from "../../assets/socialmedia/github.png";
import linkedin from "../../assets/socialmedia/linkedin.png";
const Teamcard = ({ name, desig, imageUrl, linkUrl, gitUrl}) => {
return (
<>
<div className='rounded-[36px] p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 h-[555px] lg:w-[430px] md:w-[430px] m-4 sm:w-[300px] cursor-pointer hover:shadow-2xl hover:shadow-[#7ac4ec]/30'>
<div className='rounded-[calc(36px-1px)] p-[30px] bg-gradient-to-b from-[#061b24] from-2% via-[#072031] to-[#000b11] to-9% h-[549px]' >
<div className="flex flex-col justify-center items-center gap-y-9 h-[100%] img-hover ">
<img className="rounded-[50%] w-[220px] h-[220px] align-center mt-8 mb-4 img1" src={imageUrl} alt='none' />
<div className=' flex flex-col '>
<h2 className='text-white text-4xl font-bold text-center'>{name}</h2>
<h3 className='text-b_col3 text-2xl font-thin text-center'>{desig}</h3>
<div className='flex justify-center gap-x-6 '>
<a href={linkUrl}><img src={linkedin} alt="Linkedin" className="h-10 my-5 mx-auto lg:mx-0" /></a>
<a href={gitUrl}><img src={github} alt="Github" className="h-10 my-5 mx-auto lg:mx-0"/></a>
</div>
</div>
</div>
</div>
</div>
</>
);
};

export default Teamcard;
25 changes: 25 additions & 0 deletions src/components/teamImage/teamcard2.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import github from "../../assets/socialmedia/github.png";
import linkedin from "../../assets/socialmedia/linkedin.png";
const Teamcard2 = ({ name, desig, imageUrl, linkUrl, gitUrl}) => {
return (
<>
<div className='rounded-[36px] p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 h-[555px] w-[300px] m-4 col-span-1 cursor-pointer hover:shadow-2xl hover:shadow-[#7ac4ec]/30'>
<div className='rounded-[calc(36px-1px)] p-[30px] bg-gradient-to-b from-[#061b24] from-2% via-[#072031] to-[#000b11] to-9% h-[549px] ' >
<div className="flex flex-col justify-center items-center gap-y-9 h-[100%] img-hover card">
<img className="rounded-[50%] w-[220px] h-[220px] align-center mt-8 mb-4 img1" src={imageUrl} alt='none' />
<div className=' flex flex-col '>
<h2 className='text-white text-4xl font-bold text-center'>{name}</h2>
<h3 className='text-b_col3 text-2xl font-thin text-center'>{desig}</h3>
<div className='flex justify-center gap-x-6 '>
<a href={linkUrl}><img src={linkedin} alt="Linkedin" className="h-10 my-5 mx-auto lg:mx-0" /></a>
<a href={gitUrl}><img src={github} alt="Github" className="h-10 my-5 mx-auto lg:mx-0"/></a>
</div>
</div>
</div>
</div>
</div>
</>
);
};

export default Teamcard2;
11 changes: 11 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,3 +160,14 @@ div {
.gradient {
background: linear-gradient(to bottom, #0E1C31, #040414);
}

.img-hover:hover .img1 {
transform: rotate(0deg);
width:200px;
height:200px;
border-radius:45%;
transition:0.5s;
}



46 changes: 45 additions & 1 deletion src/pages/team.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,53 @@
import Teamcard from '../components/teamImage/teamcard'
import Teamcard2 from '../components/teamImage/teamcard2'
import myTeam from './teamdata'
import Footer from "../components/footer";

const Team = () => {
return (
<>
<div className={"min-h-screen gradient"}>TEAM</div>
<div className='min-h-screen gradient py-20 flex flex-col items-center'>
<h1 className='text-7xl text-white font-bold text-center pb-16'>Our Team</h1>
<div className="w-full max-w-6xl mb-16 px-14" >
<div className='flex justify-around flex-wrap'>
{myTeam.slice(0,2).map((teamm, mem) => (
<Teamcard
key={teamm.name}
name={teamm.name}
desig={teamm.desig}
imageUrl={teamm.imageUrl}
linkUrl={teamm.linkUrl}
gitUrl={teamm.gitUrl}
/>
))}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-18 md:gap-x-20 p-4 justify-items-center">
{myTeam.slice(2,8).map((teamm, mem) => (
<Teamcard2
key={teamm.name}
name={teamm.name}
desig={teamm.desig}
imageUrl={teamm.imageUrl}
linkUrl={teamm.linkUrl}
gitUrl={teamm.gitUrl}
/>
))}
</div>
<div className='flex justify-around flex-wrap'>
{myTeam.slice(8).map((teamm, mem) => (
<Teamcard
key={teamm.name}
name={teamm.name}
desig={teamm.desig}
imageUrl={teamm.imageUrl}
linkUrl={teamm.linkUrl}
gitUrl={teamm.gitUrl}
/>
))}
</div>

</div>
</div>
<Footer/>
</>
)
Expand Down
75 changes: 75 additions & 0 deletions src/pages/teamdata.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
const myTeam =[
{
name: "Person1",
desig: "secretary",
imageUrl: 'https://via.placeholder.com/300',
linkUrl: "https://www.linkedin.com/company/ieee",
gitUrl: "https://github.com/ComputerSocietyVITC/club-website-24",
},
{
name: "Random1",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
},
{
name: "Random2",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
},
{
name: "Random3",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
},
{
name: "Random4",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
},
{
name: "Random5",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
},
{
name: "Random6",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
},
{
name: "Random7",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
},
{
name: "Random8",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
},
{
name: "Random9",
desig: "President",
imageUrl: "https://via.placeholder.com/300",
linkUrl: "https://www.linkedin.com/company/ieee-sa-ieee-standards-association/",
gitUrl: "https://github.com/Sinchancodes",
}

]

export default myTeam;

0 comments on commit 7cf64aa

Please sign in to comment.