Skip to content

Commit 4005c34

Browse files
author
Palash Patel
committed
basic site changes (include cards)
1 parent a3daea5 commit 4005c34

File tree

6 files changed

+199
-32
lines changed

6 files changed

+199
-32
lines changed

‎src/components/Cards.jsx

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from "react";
2+
import { Card, Row, Col, Container } from "react-bootstrap";
3+
import Image from "next/image";
4+
5+
const Cards = ({ members }) => {
6+
return (
7+
<Container className="py-5">
8+
<h2 className="text-center mb-5" style={headingStyle}>
9+
Meet Our Team
10+
</h2>
11+
<Row className="g-4 justify-content-center">
12+
{members.map((member, index) => (
13+
<Col key={index} xs={12} sm={6} md={4} lg={3} className="d-flex justify-content-center">
14+
<Card className="h-100 shadow-sm border-0" style={cardStyle}>
15+
<Card.Body className="text-center">
16+
<div className="d-flex justify-content-center mb-3">
17+
<Image
18+
src={member.imageSrc}
19+
alt={`${member.name} profile`}
20+
width={100}
21+
height={100}
22+
className="rounded-circle"
23+
/>
24+
</div>
25+
<Card.Title style={cardTitleStyle}>{member.name}</Card.Title>
26+
<Card.Text className="text-muted" style={cardTextStyle}>
27+
{member.description || "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
28+
</Card.Text>
29+
<p className="text-primary fw-bold">{member.role || "Team Member"}</p>
30+
<div>
31+
{member.github && (
32+
<a
33+
href={`https://github.com/${member.github}`}
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
className="mx-2 text-dark"
37+
>
38+
<i className="bi bi-github"></i>
39+
</a>
40+
)}
41+
{member.linkedin && (
42+
<a
43+
href={`https://linkedin.com/in/${member.linkedin}`}
44+
target="_blank"
45+
rel="noopener noreferrer"
46+
className="mx-2 text-dark"
47+
>
48+
<i className="bi bi-linkedin"></i>
49+
</a>
50+
)}
51+
{member.twitter && (
52+
<a
53+
href={`https://twitter.com/${member.twitter}`}
54+
target="_blank"
55+
rel="noopener noreferrer"
56+
className="mx-2 text-dark"
57+
>
58+
<i className="bi bi-twitter"></i>
59+
</a>
60+
)}
61+
</div>
62+
</Card.Body>
63+
</Card>
64+
</Col>
65+
))}
66+
</Row>
67+
</Container>
68+
);
69+
};
70+
71+
// Inline Styles
72+
const headingStyle = {
73+
color: "#6A8EAE",
74+
fontWeight: "bold",
75+
fontSize: "2rem",
76+
};
77+
78+
const cardStyle = {
79+
borderRadius: "15px",
80+
};
81+
82+
const cardTitleStyle = {
83+
fontSize: "1.25rem",
84+
fontWeight: "bold",
85+
};
86+
87+
const cardTextStyle = {
88+
fontSize: "0.9rem",
89+
lineHeight: "1.5",
90+
};
91+
92+
export default Cards;

‎src/components/Header.tsx

+59-29
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,67 @@
11
import Link from "next/link";
2-
import { Stack } from "react-bootstrap";
2+
import { Navbar, Nav, Container } from "react-bootstrap";
33

44
const Header: React.FC = () => {
55
return (
6-
<header className="pb-3 mb-5 border-bottom">
7-
<Stack direction="horizontal" gap={3}>
8-
<div>
9-
<h2>
10-
<Link
11-
href="/"
12-
className="d-flex align-items-center text-dark text-decoration-none"
13-
>
14-
<span>CS 2340 Team 4</span>
15-
</Link>
16-
</h2>
17-
</div>
18-
<div>
19-
<Link href="/projects" className="primary">
20-
Projects
6+
<Navbar expand="lg" className="px-3" style={navbarStyle}>
7+
<Container>
8+
{/* Brand / Logo */}
9+
<Navbar.Brand>
10+
<Link href="/" className="text-light fw-bold text-decoration-none">
11+
CS 2340 Team 4
2112
</Link>
22-
</div>
23-
<div className="ms-auto">
24-
<a
25-
href="https://github.com/thatrobotdev/cs-2340-team-website"
26-
target="_blank"
27-
rel="noopener"
28-
>
29-
View on GitHub
30-
</a>
31-
</div>
32-
</Stack>
33-
</header>
13+
</Navbar.Brand>
14+
15+
{/* Mobile Toggle Button */}
16+
<Navbar.Toggle aria-controls="basic-navbar-nav" className="border-0" />
17+
18+
{/* Navbar Content */}
19+
<Navbar.Collapse id="basic-navbar-nav">
20+
<Nav className="ms-auto d-flex align-items-center gap-4">
21+
{/* Inline Links */}
22+
<Nav.Item className="d-flex gap-3">
23+
<Link href="/projects" className="nav-link text-light">
24+
About
25+
</Link>
26+
<Link href="/projects" className="nav-link text-light">
27+
Projects
28+
</Link>
29+
</Nav.Item>
30+
31+
{/* GitHub Link */}
32+
<Nav.Item>
33+
<a
34+
href="https://github.com/thatrobotdev/cs-2340-team-website"
35+
target="_blank"
36+
rel="noopener"
37+
className="nav-link"
38+
style={githubLinkStyle}
39+
>
40+
View on GitHub
41+
</a>
42+
</Nav.Item>
43+
</Nav>
44+
</Navbar.Collapse>
45+
</Container>
46+
</Navbar>
3447
);
3548
};
3649

37-
export default Header;
50+
// Inline Styles
51+
const navbarStyle: React.CSSProperties = {
52+
backgroundColor: "#222",
53+
padding: "1rem",
54+
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
55+
};
56+
57+
const githubLinkStyle: React.CSSProperties = {
58+
fontWeight: "bold",
59+
border: "2px solid #6A8EAE",
60+
padding: "6px 12px",
61+
borderRadius: "5px",
62+
transition: "all 0.3s ease-in-out",
63+
color: "#6A8EAE",
64+
textDecoration: "none",
65+
};
66+
67+
export default Header;

‎src/components/HomePage.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import ProjectsShowcase from "./ProjectsShowcase";
2-
import TeamInfo from "./TeamInfo";
32

43
const HomePage: React.FC = () => {
54
return (
65
<>
76
<ProjectsShowcase/>
8-
<TeamInfo />
97
</>
108
);
119
};

‎src/components/TeamInfo.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/*
12
import { Col, Container, Row } from "react-bootstrap";
23
import TeamInfoBox from "./TeamInfoBox";
34
@@ -67,3 +68,4 @@ const TeamInfo: React.FC = () => {
6768
};
6869
6970
export default TeamInfo;
71+
*/

‎src/components/TeamInfoBox.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/*
12
import Image from "next/image";
23
import SocialIcons from "./SocialIcons";
34
@@ -47,3 +48,4 @@ const TeamInfo: React.FC<TeamInfoProps> = ({
4748
};
4849
4950
export default TeamInfo;
51+
*/

‎src/pages/index.tsx

+44-1
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,51 @@ import Container from "react-bootstrap/Container";
33
import Footer from "@/components/Footer";
44
import Header from "@/components/Header";
55
import HomePage from "@/components/HomePage";
6+
import Cards from "@/components/Cards"
67

78
export default function Home() {
9+
10+
const members = [
11+
{
12+
name: "Aryamann Sheoran",
13+
imageSrc: "/cs-2340-team-website/avatars/aryamannsheoran.png",
14+
role: "Creative Leader",
15+
github: "aryamannsheoran",
16+
linkedin: "aryamannsheoran",
17+
},
18+
{
19+
name: "James Kerrane",
20+
imageSrc: "/cs-2340-team-website/avatars/jameskerrane.jpg",
21+
role: "Sales Manager",
22+
github: "thatrobotdev",
23+
linkedin: "jameskerrane",
24+
twitter: "jameskerrane",
25+
},
26+
{
27+
name: "Michael Wittland Jr.",
28+
imageSrc: "https://placehold.co/100",
29+
role: "Web Developer",
30+
linkedin: "michael-wittland-323081295/",
31+
},
32+
{
33+
name: "Palash Patel",
34+
imageSrc: "/cs-2340-team-website/avatars/palashpatel.jpg",
35+
role: "Web Designer",
36+
linkedin: "palash-patel-1b001a210",
37+
},
38+
{
39+
name: "Shane Hanley",
40+
imageSrc: "https://placehold.co/100",
41+
role: "Web Designer",
42+
},
43+
{
44+
name: "Emmanuel Munoz",
45+
imageSrc: "/cs-2340-team-website/avatars/emmanuelmunoz.png",
46+
role: "Mentor",
47+
},
48+
];
49+
50+
851
return (
952
<>
1053
<Head>
@@ -15,7 +58,7 @@ export default function Home() {
1558
</Head>
1659
<Container as="main" className="py-4 px-3">
1760
<Header />
18-
<h1>Crafting <mark className="bg-neon-yellow">fun</mark>, <mark className="bg-neon-magenta">innovative</mark>, and <mark className="bg-neon-cyan">seamless</mark> full-stack web experiences.</h1>
61+
<Cards members={members} />
1962
<HomePage />
2063
<Footer />
2164
</Container>

0 commit comments

Comments
 (0)