Skip to content

Commit 9896d11

Browse files
Aksh-Bansal-devAksh-Bansal-dev
committed
feat(frontend): new domains page design
1 parent 76eacc8 commit 9896d11

9 files changed

Lines changed: 230 additions & 50 deletions

File tree

‎frontend/src/components/Cards/DomainCard_v2.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import React from "react";
2+
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
3+
import { IconButton, Typography } from "@material-ui/core";
4+
import { Email, GitHub, LinkedIn } from "@material-ui/icons";
5+
6+
const useStyles = makeStyles((theme: Theme) =>
7+
createStyles({
8+
root: {
9+
margin: "5vh 2vh",
10+
height: "25vh",
11+
width: "22vw",
12+
[theme.breakpoints.down("sm")]: {
13+
height: "30vh",
14+
width: "90vw",
15+
},
16+
background: "transparent",
17+
border: "2px solid cyan",
18+
display: "flex",
19+
flexDirection: "column",
20+
justifyContent: "space-around",
21+
alignItems: "center",
22+
borderRadius: "24px",
23+
boxShadow: "0px 0px 14px 5px #11BFD7",
24+
},
25+
title: {
26+
fontSize: "1.2rem",
27+
[theme.breakpoints.down("sm")]: {
28+
fontSize: "1.5rem",
29+
},
30+
color: "white",
31+
opacity: 1,
32+
textAlign: "center",
33+
fontFamily: "monospace",
34+
fontWeight: "bold",
35+
transform: "translateY(-5vh)",
36+
},
37+
subTitle: {
38+
[theme.breakpoints.down("sm")]: {
39+
fontSize: "1.2rem",
40+
},
41+
fontFamily: "monospace",
42+
textAlign: "center",
43+
color: "#BFC7D1",
44+
transform: "translateY(-5vh)",
45+
},
46+
media: {
47+
width: "15vh",
48+
height: "15vh",
49+
borderRadius: "100%",
50+
border: "2px solid white",
51+
transform: "translateY(-6vh)",
52+
},
53+
icoCon: {
54+
transform: "translateY(-5vh)",
55+
display: "flex",
56+
justifyContent: "space-around",
57+
alignItems: "center",
58+
padding: "0 7vh",
59+
},
60+
icons: {
61+
color: "white",
62+
},
63+
})
64+
);
65+
66+
interface DomainCardInterface {
67+
name: string;
68+
team: string;
69+
github: string;
70+
linkedIn: string;
71+
email: string;
72+
profileImg: string;
73+
}
74+
75+
const DomainCard2: React.FC<DomainCardInterface> = ({
76+
name,
77+
team,
78+
github,
79+
email,
80+
profileImg,
81+
linkedIn,
82+
}) => {
83+
const classes = useStyles();
84+
return (
85+
<div className={classes.root}>
86+
<img
87+
src={"/webix.iiitdmj.ac.in/images/profile/" + profileImg}
88+
alt={name}
89+
className={classes.media}
90+
/>
91+
<Typography className={classes.title}>{name}</Typography>
92+
<Typography className={classes.subTitle}>{team}</Typography>
93+
<div className={classes.icoCon}>
94+
<a href={github} target="_blank">
95+
<IconButton>
96+
<GitHub className={classes.icons} />
97+
</IconButton>
98+
</a>
99+
<a href={email} target="_blank">
100+
<IconButton>
101+
<Email className={classes.icons} />
102+
</IconButton>
103+
</a>
104+
<a href={linkedIn} target="_blank">
105+
<IconButton>
106+
<LinkedIn className={classes.icons} />
107+
</IconButton>
108+
</a>
109+
</div>
110+
</div>
111+
);
112+
};
113+
114+
export default DomainCard2;

‎frontend/src/components/Mission_vision/Mission.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Mission: React.FC = () => {
1515
<div className={styles.vectors}>
1616
<img
1717
className={styles.aboutImg}
18-
src="/images/home/mission.png"
18+
src="/webix.iiitdmj.ac.in/images/home/mission.png"
1919
alt="code"
2020
/>
2121
</div>

‎frontend/src/components/Mission_vision/Vision.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Vision: React.FC = () => {
1414
<div className={styles.vectors}>
1515
<img
1616
className={styles.aboutImg}
17-
src="/images/home/vision.png"
17+
src="/webix.iiitdmj.ac.in/images/home/vision.png"
1818
alt="code"
1919
/>
2020
</div>

‎frontend/src/components/Navs/Nav_v2/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) =>
4040
},
4141
drawerList: {
4242
width: 300,
43-
background: "#262626",
43+
background: "#171717",
4444
height: "100vh",
4545
color: "white",
4646
},
@@ -108,7 +108,11 @@ const Nav2: React.FC = () => {
108108
<AppBar className={classes.bg} position="static">
109109
<Toolbar className={classes.wrapper} variant="regular">
110110
<Link to="/">
111-
<img className={classes.logo} src="/tpclogo.png" alt="TPC" />
111+
<img
112+
className={classes.logo}
113+
src="/webix.iiitdmj.ac.in/tpclogo.png"
114+
alt="TPC"
115+
/>
112116
</Link>
113117
<IconButton
114118
edge="start"

‎frontend/src/components/WhyUs/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const WhyUs: React.FC = () => {
2626
<div className={styles.vectors}>
2727
<img
2828
className={styles.aboutImg}
29-
src="/images/other/why_us.png"
29+
src="/webix.iiitdmj.ac.in/images/other/why_us.png"
3030
alt="tech"
3131
/>
3232
</div>

‎frontend/src/components/aboutUs/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,22 +30,22 @@ const AboutUs: React.FC = () => {
3030
<div className={styles.vectors}>
3131
<img
3232
className={styles.aboutImg}
33-
src="/images/about/btn_7.png"
33+
src="/webix.iiitdmj.ac.in/images/about/btn_7.png"
3434
alt="code"
3535
/>
3636
<img
3737
className={styles.aboutImg}
38-
src="/images/about/btn_8.png"
38+
src="/webix.iiitdmj.ac.in/images/about/btn_8.png"
3939
alt="android"
4040
/>
4141
<img
4242
className={styles.aboutImg}
43-
src="/images/about/btn_9.png"
43+
src="/webix.iiitdmj.ac.in/images/about/btn_9.png"
4444
alt="gsoc"
4545
/>
4646
<img
4747
className={styles.aboutImg}
48-
src="/images/about/btn_10.png"
48+
src="/webix.iiitdmj.ac.in/images/about/btn_10.png"
4949
alt="ai-ml"
5050
/>
5151
</div>

‎frontend/src/pages/Domains/domainList.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
export const domainList = [
2+
{
3+
name: "Aksh Bansal",
4+
domain: "Web Developer",
5+
gitLink: "https://github.com/Aksh-Bansal-dev",
6+
email: "mailto:20bcs021@iiitdmj.ac.in",
7+
profilePic: "/webix.iiitdmj.ac.in/images/profile/profilepic.jfif",
8+
},
9+
{
10+
name: "Aksh Bansal",
11+
domain: "Web Developer",
12+
gitLink: "https://github.com/Aksh-Bansal-dev",
13+
email: "mailto:20bcs021@iiitdmj.ac.in",
14+
profilePic: "/webix.iiitdmj.ac.in/images/profile/profilepic.jfif",
15+
},
16+
{
17+
name: "Aksh Bansal",
18+
domain: "Web Developer",
19+
gitLink: "https://github.com/Aksh-Bansal-dev",
20+
email: "mailto:20bcs021@iiitdmj.ac.in",
21+
profilePic: "/webix.iiitdmj.ac.in/images/profile/profilepic.jfif",
22+
},
23+
{
24+
name: "Aksh Bansal",
25+
domain: "Web Developer",
26+
gitLink: "https://github.com/Aksh-Bansal-dev",
27+
email: "mailto:20bcs021@iiitdmj.ac.in",
28+
profilePic: "/webix.iiitdmj.ac.in/images/profile/profilepic.jfif",
29+
},
30+
{
31+
name: "Aksh Bansal",
32+
domain: "Web Developer",
33+
gitLink: "https://github.com/Aksh-Bansal-dev",
34+
email: "mailto:20bcs021@iiitdmj.ac.in",
35+
profilePic: "/webix.iiitdmj.ac.in/images/profile/profilepic.jfif",
36+
},
37+
];

‎frontend/src/pages/Domains/index.tsx‎

Lines changed: 64 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,40 @@
11
import React from "react";
2-
import NavBar from "../../components/Navs/Navbar";
32
import { createStyles, makeStyles } from "@material-ui/core/styles";
4-
import { Container, Typography } from "@material-ui/core";
5-
import DomainCard from "src/components/Cards/DomainCard";
3+
import { Typography } from "@material-ui/core";
4+
import Nav2 from "src/components/Navs/Nav_v2";
5+
import DomainCard2 from "src/components/Cards/DomainCard_v2";
66
import { teamlist } from "./teamlist";
77

88
const useStyles = makeStyles(() =>
99
createStyles({
1010
root: {
1111
minHeight: "100vh",
12+
display: "flex",
13+
flexDirection: "column",
14+
alignItems: "center",
15+
},
16+
heading: {
17+
fontFamily: "var(--heading-font)",
18+
fontSize: "4rem",
19+
textTransform: "uppercase",
20+
color: "rgba(255, 255, 255, 0.9)",
21+
textShadow: "-4px 4px 4px #10ABC2",
22+
},
23+
subHeading: {
24+
color: "rgba(255, 255, 255, 0.75)",
25+
fontFamily: "monospace",
1226
},
1327
title: {
14-
margin: "4vh",
15-
color: "white",
16-
fontWeight: "bold",
17-
fontSize: "1.7rem",
28+
marginBottom: "5vh",
29+
marginTop: "8vh",
30+
fontFamily: "var(--heading-font)",
31+
fontSize: "2.5rem",
32+
textTransform: "uppercase",
33+
color: "rgba(255, 255, 255, 0.9)",
34+
textShadow: "-4px 4px 4px #10ABC2",
1835
},
1936
flexbox: {
20-
flexGrow: 1,
37+
width: "90vw",
2138
display: "flex",
2239
justifyContent: "space-around",
2340
flexWrap: "wrap",
@@ -27,61 +44,69 @@ const useStyles = makeStyles(() =>
2744
const Domains: React.FC = () => {
2845
const classes = useStyles();
2946
return (
30-
<div className={classes.root}>
31-
<NavBar />
32-
33-
<Container>
47+
<div>
48+
<Nav2 />
49+
<div className={classes.root}>
50+
<Typography className={classes.heading} align="center">
51+
We are everywhere
52+
</Typography>
53+
<Typography className={classes.subHeading} align="center">
54+
{"<p>From web to app, AI to ML, Blockchain to DevOps</p>"}
55+
</Typography>
3456
<Typography className={classes.title} align="center">
35-
Coordinator
57+
COORDINATOR
3658
</Typography>
37-
<Container className={classes.flexbox}>
59+
<div className={classes.flexbox}>
3860
{teamlist.map((e, i) => {
3961
if (e.team === "coordinator") {
40-
return <DomainCard key={i} {...e} />;
62+
return <DomainCard2 key={i} {...{ ...e, team: "Coordinator" }} />;
63+
} else {
64+
return <></>;
4165
}
42-
return null;
4366
})}
44-
</Container>
45-
</Container>
46-
<Container>
67+
</div>
4768
<Typography className={classes.title} align="center">
48-
Co-Coordinator
69+
CO-COORDINATOR
4970
</Typography>
50-
<Container className={classes.flexbox}>
71+
<div className={classes.flexbox}>
5172
{teamlist.map((e, i) => {
5273
if (e.team === "coco") {
53-
return <DomainCard key={i} {...e} />;
74+
return <DomainCard2 key={i} {...{ ...e, team: "Coco" }} />;
75+
} else {
76+
return <></>;
5477
}
55-
return null;
5678
})}
57-
</Container>
58-
</Container>
59-
<Container>
79+
</div>
6080
<Typography className={classes.title} align="center">
61-
Developers
81+
DEVELOPERS
6282
</Typography>
63-
<Container className={classes.flexbox}>
83+
<div className={classes.flexbox}>
6484
{teamlist.map((e, i) => {
6585
if (e.team === "dev") {
66-
return <DomainCard key={i} {...e} />;
86+
return <DomainCard2 key={i} {...{ ...e, team: "Developer" }} />;
87+
} else {
88+
return <></>;
6789
}
68-
return null;
6990
})}
70-
</Container>
71-
</Container>
72-
<Container>
91+
</div>
7392
<Typography className={classes.title} align="center">
74-
Competitive Programmers
93+
COMPETITIVE PROGRAMMERS
7594
</Typography>
76-
<Container className={classes.flexbox}>
95+
<div className={classes.flexbox}>
7796
{teamlist.map((e, i) => {
7897
if (e.team === "cp") {
79-
return <DomainCard key={i} {...e} />;
98+
return (
99+
<DomainCard2
100+
key={i}
101+
{...{ ...e, team: "Competitive Programmer" }}
102+
/>
103+
);
104+
} else {
105+
return <></>;
80106
}
81-
return null;
82107
})}
83-
</Container>
84-
</Container>
108+
</div>
109+
</div>
85110
</div>
86111
);
87112
};

‎frontend/src/pages/homePage/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ const HomePage: React.FC = () => {
2323
</span>
2424
<img
2525
className={styles.learnQ}
26-
src="/images/home/ifyouwanttolearn.png"
26+
src="/webix.iiitdmj.ac.in/images/home/ifyouwanttolearn.png"
2727
alt="learn"
2828
/>
2929
</div>
3030
<img
3131
className={styles.brackets}
32-
src="/images/home/brackets.png"
32+
src="/webix.iiitdmj.ac.in/images/home/brackets.png"
3333
alt="{}"
3434
/>
3535
</div>

0 commit comments

Comments
 (0)