Skip to content

Commit b457f23

Browse files
author
Palash Patel
committed
LOT OF STYLING CHANGES
1 parent 8644e27 commit b457f23

9 files changed

+154
-11
lines changed

‎package-lock.json

+14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"test": "npm run build"
1616
},
1717
"dependencies": {
18+
"@fontsource/open-sans": "^5.1.1",
19+
"@fontsource/oswald": "^5.1.1",
1820
"@fortawesome/fontawesome-svg-core": "^6.7.2",
1921
"@fortawesome/free-brands-svg-icons": "^6.7.2",
2022
"@fortawesome/react-fontawesome": "^0.2.2",

‎public/avatars/dotted-world-map-black-background-vector-illustration_541075-470.avif

11.8 KB
Binary file not shown.

‎src/components/BackImg.jsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
3+
function BackImg() {
4+
return (
5+
<div style={{ position: "relative", height: "60vh", width: "100%" }}>
6+
<img
7+
src="https://img.freepik.com/premium-vector/dotted-world-map-black-background-vector-illustration_541075-470.jpg"
8+
alt="Background"
9+
style={{ height: "100%", width: "100%", objectFit: "cover" }}
10+
/>
11+
12+
<h1
13+
style={{
14+
position: "absolute",
15+
top: "50%",
16+
left: "50%",
17+
transform: "translate(-50%, -50%)", // Center the text
18+
color: "white",
19+
fontSize: "6.8rem",
20+
textAlign: "center",
21+
}}
22+
>
23+
CS2340 TEAM 4
24+
</h1>
25+
<h1
26+
style={{
27+
position: "absolute",
28+
top: "50%",
29+
left: "50%",
30+
transform: "translate(-50%, -50%)", // Center the text
31+
color: "#FF5252",
32+
fontSize: "7rem",
33+
textAlign: "center",
34+
paddingTop: "10px"
35+
}}
36+
>____________________
37+
</h1>
38+
</div>
39+
);
40+
}
41+
42+
export default BackImg;

‎src/components/Cards.jsx

+60-6
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,52 @@
22
import React from "react";
33
import { Card, Row, Col, Container } from "react-bootstrap";
44
import Image from "next/image";
5+
import "@fontsource/oswald";
6+
57

68
const Cards = ({ members }) => {
79
return (
810
<Container className="py-5">
9-
<h2 className="text-center mb-5" style={headingStyle}>
10-
MEET OUR TEAM!
11+
12+
<h2 className="text-center "
13+
style={{
14+
fontWeight: "bold",
15+
fontSize: "3rem",
16+
paddingBottom: "10px",
17+
}}>
18+
WELCOME
1119
</h2>
20+
21+
<div className="openSanFont" style={{textAlign: "center", margin: "0 auto", paddingBottom:"50px", width: "75%"}}>
22+
Hello, team 4 reporting! This is team 4 nefkijenfunieufneiunifneiunf
23+
eviunrficweun ficvuew uf vcoebvf ucybeouyf vbceouwybcnouewyb'ceuybeuybc
24+
cuewybrcuyebwucyey bceybcureybcnu ibi in in yb8yb uyb.
25+
</div>
26+
27+
<hr style={{width:"80%", textAlign:"center", margin: "0 auto", paddingTop: "50px",}}></hr>
28+
29+
<div style={{ }}>
30+
<h2 className="text-center"
31+
style={{
32+
fontWeight: "bold",
33+
fontSize: "4.5rem",
34+
}}>
35+
MEET OUR TEAM
36+
</h2>
37+
<h1
38+
style={{
39+
position: "relative",
40+
top: "50%",
41+
left: "50%",
42+
transform: "translate(-50%, -50%)",
43+
color: "#FF5252",
44+
fontSize: "7rem",
45+
textAlign: "center",
46+
marginTop: "-20px",
47+
}}
48+
>____________________
49+
</h1>
50+
</div>
1251
<Row className="g-4 justify-content-center">
1352
{members.map((member, index) => (
1453
<Col
@@ -20,8 +59,16 @@ const Cards = ({ members }) => {
2059
className="d-flex justify-content-center"
2160
>
2261
<Card
23-
className="h-100 shadow-lg border-0 card-hover"
62+
className="h-100 shadow-lg card-hover"
2463
style={cardStyle}
64+
onMouseEnter={(e) => {
65+
e.currentTarget.style.transform = "scale(1.05)";
66+
e.currentTarget.style.border = "5px solid rgba(255, 82, 82, 0.5)";
67+
}}
68+
onMouseLeave={(e) => {
69+
e.currentTarget.style.transform = "scale(1.0)";
70+
e.currentTarget.style.border = "2px solid rgba(155, 155, 155, 0.5)";
71+
}}
2572
>
2673
<Card.Body className="">
2774
<div className="d-flex mb-3">
@@ -40,7 +87,7 @@ const Cards = ({ members }) => {
4087
{member.description ||
4188
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
4289
</Card.Text>
43-
<p className="text-primary fw-bold">
90+
<p className="text-role fw-bold" >
4491
{member.role || "Team Member"}
4592
</p>
4693
<div>
@@ -86,7 +133,7 @@ const Cards = ({ members }) => {
86133

87134
// Inline Styles
88135
const headingStyle = {
89-
color: "#6A8EAE",
136+
color: "#FF5252",
90137
fontWeight: "bold",
91138
fontSize: "2rem",
92139
};
@@ -95,12 +142,19 @@ const cardStyle = {
95142
borderRadius: "15px",
96143
background: "linear-gradient(145deg, #ffffff, #e6e6e6)",
97144
transition: "all 0.3s ease-in-out",
145+
border: "2px solid rgba(155, 155, 155, 0.5)",
98146
};
99147

148+
const cardHoverStyle = {
149+
transform: "scale(1.05)", // Slightly enlarges the card on hover
150+
boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.2)", // Adds a subtle shadow effect
151+
};
152+
153+
100154
const cardTitleStyle = {
101155
fontSize: "1.25rem",
102156
fontWeight: "bold",
103-
color: "#6A8EAE",
157+
color: "#FF5252",
104158
};
105159

106160
const cardTextStyle = {

‎src/components/Header.tsx

+16-4
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ const Header: React.FC = () => {
77
<Container>
88
{/* Brand / Logo */}
99
<Navbar.Brand>
10-
<Link href="/" className="text-light fw-bold text-decoration-none">
11-
CS 2340 Team 4
10+
<Link href="/" className="text-light fw-bold text-decoration-none hover-style" style={{color: "#"}}>
11+
CS 2340 TEAM 4
1212
</Link>
1313
</Navbar.Brand>
1414

@@ -54,15 +54,27 @@ const navbarStyle: React.CSSProperties = {
5454
padding: "1rem",
5555
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
5656
zIndex: 10,
57+
top: 0,
58+
59+
/*
60+
backgroundColor: "rgba(34, 34, 34, 0.9)",
61+
backdropFilter: "blur(10px)",
62+
padding: "1rem",
63+
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
64+
zIndex: 10,
65+
position: "fixed", // Keeps the header fixed at the top
66+
top: 0, // Aligns it to the top of the viewport
67+
width: "100%", // Ensures it spans the full width of the page
68+
*/
5769
};
5870

5971
const githubLinkStyle: React.CSSProperties = {
6072
fontWeight: "bold",
61-
border: "2px solid #6A8EAE",
73+
border: "2px solid #FF5252",
6274
padding: "6px 12px",
6375
borderRadius: "5px",
6476
transition: "all 0.3s ease-in-out",
65-
color: "#6A8EAE",
77+
color: "#FF5252",
6678
textDecoration: "none",
6779
cursor: "pointer",
6880
};

‎src/pages/index.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Footer from "@/components/Footer";
44
import Header from "@/components/Header";
55
import HomePage from "@/components/HomePage";
66
import Cards from "@/components/Cards"
7+
import BackImg from "@/components/BackImg";
78

89
export default function Home() {
910

@@ -36,6 +37,8 @@ export default function Home() {
3637
name: "Michael Wittland Jr.",
3738
imageSrc: "https://placehold.co/100",
3839
role: "Developer",
40+
description: "Hello! My name is Michael Wittland. I am a 2nd year " +
41+
"CS strength working on backend development for this project.",
3942
linkedin: "michael-wittland-323081295/",
4043
},
4144
{
@@ -61,6 +64,7 @@ export default function Home() {
6164
</Head>
6265
<Container as="main" className="py-4 px-3">
6366
<Header />
67+
<BackImg />
6468
<Cards members={members} />
6569
<HomePage />
6670
<Footer />

‎src/pages/projects/moviesstore.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Head from "next/head";
22
import Container from "react-bootstrap/Container";
33
import Footer from "@/components/Footer";
44
import Header from "@/components/Header";
5+
import BackImg from "@/components/BackImg";
56

67
export default function Home() {
78
return (
@@ -13,6 +14,7 @@ export default function Home() {
1314
<link rel="icon" href="/favicon.ico" />
1415
</Head>
1516
<Container as="main" className="py-4 px-3 mx-auto">
17+
<BackImg />
1618
<Header />
1719

1820
<h1>moviesstore</h1>

‎src/styles/styles.scss

+14-1
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,21 @@ $theme-colors: map-merge($theme-colors, $mycolors);
1313

1414
body {
1515
padding: 1.5rem;
16+
font-family: "Oswald", sans-serif !important;
17+
}
18+
19+
.openSanFont {
20+
font-family: 'Open Sans', sans-serif !important;
21+
}
22+
23+
.hover-style:hover {
24+
color: #FF5252 !important;
1625
}
1726

1827
.nav-link:hover {
19-
color: #6A8EAE !important;
28+
color: #FF5252 !important;
29+
}
30+
31+
.text-role {
32+
color: #ff7a7a;
2033
}

0 commit comments

Comments
 (0)