Skip to content

Commit 9d8b09a

Browse files
shivanirameshot7-pixel2shivanirameshot7-pixel2
committed
initial draft of alumini and blogs page
1 parent b586456 commit 9d8b09a

21 files changed

Lines changed: 2214 additions & 10 deletions

File tree

‎src/components/navbar.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,8 @@ export default function Nav(props) {
113113
<NavPill onClick={props.roadmap}>Roadmap</NavPill>
114114
<NavPill onClick={props.team}>Team</NavPill>
115115
<NavPill onClick={props.projects}>Projects</NavPill>
116+
<NavPill onClick={props.alumni}>Alumini</NavPill>
117+
<NavPill onClick={props.blogs}>Blogs</NavPill>
116118
<NavPill
117119
href="https://github.com/IDEA-Amrita"
118120
target="_blank"

‎src/content/about.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,21 @@ const AboutPage = (props) => {
106106
}`,
107107
}}
108108
/>
109+
<Navbar.Circle
110+
onClick={props.alumni}
111+
style={{
112+
backgroundColor: props.isLight
113+
? "var(--accent-violet)"
114+
: "var(--accent-lime)",
115+
}}
116+
/>
117+
<Navbar.Stick
118+
style={{
119+
border: `1px solid ${
120+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
121+
}`,
122+
}}
123+
/>
109124
</Navbar.TimelineBarLeft>
110125
<Socials isLight={props.isLight} />
111126
<Navbar.TopTitle>

‎src/content/alumni.js‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import React, { useRef, useState } from "react";
2+
import { Alumni, Navbar } from "../subcomponents";
3+
import { Socials } from "../components";
4+
import { AiOutlineArrowUp } from "react-icons/ai";
5+
import useElementOnScreen from "../animations";
6+
import alumni from "../data/alumni";
7+
8+
const AlumniPage = (props) => {
9+
const [activeAlum, setActiveAlum] = useState(0);
10+
const ref = useRef(null);
11+
const onScreen = useElementOnScreen(ref);
12+
13+
const selected = alumni[activeAlum] || alumni[0];
14+
const defaultAlumniImage = "/images/team/user.png";
15+
16+
return (
17+
<>
18+
<Alumni>
19+
<Navbar.TopContainer>
20+
<Navbar.TimelineBarLeft>
21+
<Navbar.Circle
22+
onClick={props.about}
23+
style={{
24+
backgroundColor: props.isLight
25+
? "var(--accent-violet)"
26+
: "var(--accent-lime)",
27+
}}
28+
/>
29+
<Navbar.Stick
30+
style={{
31+
border: `1px solid ${
32+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
33+
}`,
34+
}}
35+
/>
36+
<Navbar.Circle
37+
onClick={props.roadmap}
38+
style={{
39+
backgroundColor: props.isLight
40+
? "var(--accent-violet)"
41+
: "var(--accent-lime)",
42+
}}
43+
/>
44+
<Navbar.Stick
45+
style={{
46+
border: `1px solid ${
47+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
48+
}`,
49+
}}
50+
/>
51+
<Navbar.Circle
52+
onClick={props.team}
53+
style={{
54+
backgroundColor: props.isLight
55+
? "var(--accent-violet)"
56+
: "var(--accent-lime)",
57+
}}
58+
/>
59+
<Navbar.Stick
60+
style={{
61+
border: `1px solid ${
62+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
63+
}`,
64+
}}
65+
/>
66+
<Navbar.Circle
67+
onClick={props.projects}
68+
style={{
69+
backgroundColor: props.isLight
70+
? "var(--accent-violet)"
71+
: "var(--accent-lime)",
72+
}}
73+
/>
74+
<Navbar.Stick
75+
style={{
76+
border: `1px solid ${
77+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
78+
}`,
79+
}}
80+
/>
81+
<Navbar.Circle
82+
onClick={props.contribute}
83+
style={{
84+
backgroundColor: props.isLight
85+
? "var(--accent-violet)"
86+
: "var(--accent-lime)",
87+
}}
88+
/>
89+
<Navbar.Stick
90+
style={{
91+
border: `1px solid ${
92+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
93+
}`,
94+
}}
95+
/>
96+
<Navbar.Circle
97+
onClick={props.alumni}
98+
size={true}
99+
style={{
100+
backgroundColor: props.isLight
101+
? "var(--accent-violet)"
102+
: "var(--accent-lime)",
103+
}}
104+
/>
105+
<Navbar.Stick
106+
style={{
107+
border: `1px solid ${
108+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
109+
}`,
110+
}}
111+
/>
112+
<Navbar.Circle
113+
style={{
114+
backgroundColor: props.isLight
115+
? "var(--accent-violet)"
116+
: "var(--accent-lime)",
117+
}}
118+
/>
119+
</Navbar.TimelineBarLeft>
120+
<Socials isLight={props.isLight} />
121+
</Navbar.TopContainer>
122+
123+
<Alumni.AlumniContentContainer>
124+
<Alumni.AlumniListContainer>
125+
<Alumni.ListTitle>Alumini</Alumni.ListTitle>
126+
<Alumni.ListSubTitle>
127+
The class of every year stays in touch. Reconnect with classmates,
128+
share what you're building, and find each other across cities,
129+
careers, and decades.
130+
</Alumni.ListSubTitle>
131+
<Alumni.ListContainer>
132+
{alumni.map((item, index) => {
133+
const isActive = index === activeAlum;
134+
return (
135+
<Alumni.ListItem
136+
key={index}
137+
onClick={() => setActiveAlum(index)}
138+
isActive={isActive}
139+
>
140+
<Alumni.ListItemArrowContainer
141+
color={isActive ? "var(--accent-violet)" : ""}
142+
>
143+
<AiOutlineArrowUp
144+
style={{
145+
transition: "300ms ease-in-out",
146+
transform: isActive
147+
? "rotate(135deg)"
148+
: "rotate(-45deg)",
149+
color: isActive ? "#fff" : "var(--ink-soft)",
150+
}}
151+
/>
152+
</Alumni.ListItemArrowContainer>
153+
<Alumni.ListItemName isActive={isActive}>
154+
{item.name}
155+
</Alumni.ListItemName>
156+
</Alumni.ListItem>
157+
);
158+
})}
159+
</Alumni.ListContainer>
160+
</Alumni.AlumniListContainer>
161+
162+
<Alumni.DescriptionContainer>
163+
<Alumni.DescriptionHeader>
164+
<Alumni.DescriptionHeaderImage
165+
src={selected.image || defaultAlumniImage}
166+
alt={selected.name}
167+
/>
168+
<Alumni.DescriptionHeaderContent>
169+
<Alumni.AlumniTitle>{selected.name}</Alumni.AlumniTitle>
170+
<Alumni.AlumniRole>
171+
{selected.role} • Batch {selected.batch}
172+
</Alumni.AlumniRole>
173+
</Alumni.DescriptionHeaderContent>
174+
</Alumni.DescriptionHeader>
175+
<Alumni.DescriptionContent>
176+
<Alumni.AlumniDescription>
177+
{selected.description}
178+
</Alumni.AlumniDescription>
179+
{selected.field && (
180+
<Alumni.Field>
181+
<Alumni.FieldLabel>Field of Work</Alumni.FieldLabel>
182+
<Alumni.FieldValue>{selected.field}</Alumni.FieldValue>
183+
</Alumni.Field>
184+
)}
185+
{selected.location && (
186+
<Alumni.Field>
187+
<Alumni.FieldLabel>Current Location</Alumni.FieldLabel>
188+
<Alumni.FieldValue>{selected.location}</Alumni.FieldValue>
189+
</Alumni.Field>
190+
)}
191+
</Alumni.DescriptionContent>
192+
</Alumni.DescriptionContainer>
193+
</Alumni.AlumniContentContainer>
194+
</Alumni>
195+
</>
196+
);
197+
};
198+
199+
export default AlumniPage;
200+

‎src/content/blogs.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import React from "react";
2+
import { Generic, Navbar } from "../subcomponents";
3+
import Blogs from "../subcomponents/blogs";
4+
import { Socials } from "../components";
5+
6+
const BlogsPage = (props) => {
7+
return (
8+
<>
9+
<Generic>
10+
<Navbar.TopContainer>
11+
<Navbar.TimelineBarLeft>
12+
<Navbar.Circle
13+
onClick={props.about}
14+
style={{
15+
backgroundColor: props.isLight
16+
? "var(--accent-violet)"
17+
: "var(--accent-lime)",
18+
}}
19+
/>
20+
<Navbar.Stick
21+
style={{
22+
border: `1px solid ${
23+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
24+
}`,
25+
}}
26+
/>
27+
<Navbar.Circle
28+
style={{
29+
backgroundColor: props.isLight
30+
? "var(--accent-violet)"
31+
: "var(--accent-lime)",
32+
}}
33+
onClick={props.roadmap}
34+
/>
35+
<Navbar.Stick
36+
style={{
37+
border: `1px solid ${
38+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
39+
}`,
40+
}}
41+
/>
42+
<Navbar.Circle
43+
onClick={props.team}
44+
style={{
45+
backgroundColor: props.isLight
46+
? "var(--accent-violet)"
47+
: "var(--accent-lime)",
48+
}}
49+
/>
50+
<Navbar.Stick
51+
style={{
52+
border: `1px solid ${
53+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
54+
}`,
55+
}}
56+
/>
57+
<Navbar.Circle
58+
onClick={props.projects}
59+
style={{
60+
backgroundColor: props.isLight
61+
? "var(--accent-violet)"
62+
: "var(--accent-lime)",
63+
}}
64+
/>
65+
<Navbar.Stick
66+
style={{
67+
border: `1px solid ${
68+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
69+
}`,
70+
}}
71+
/>
72+
<Navbar.Circle
73+
onClick={props.alumni}
74+
style={{
75+
backgroundColor: props.isLight
76+
? "var(--accent-violet)"
77+
: "var(--accent-lime)",
78+
}}
79+
/>
80+
<Navbar.Stick
81+
style={{
82+
border: `1px solid ${
83+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
84+
}`,
85+
}}
86+
/>
87+
<Navbar.Circle
88+
size={true}
89+
style={{
90+
backgroundColor: props.isLight
91+
? "var(--accent-violet)"
92+
: "var(--accent-lime)",
93+
}}
94+
/>
95+
<Navbar.Stick
96+
style={{
97+
border: `1px solid ${
98+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
99+
}`,
100+
}}
101+
/>
102+
<Navbar.Circle
103+
onClick={props.contribute}
104+
style={{
105+
backgroundColor: props.isLight
106+
? "var(--accent-violet)"
107+
: "var(--accent-lime)",
108+
}}
109+
/>
110+
</Navbar.TimelineBarLeft>
111+
<Socials isLight={props.isLight} />
112+
</Navbar.TopContainer>
113+
<Blogs.Container>
114+
<Blogs.TimeLineContainer>
115+
{/* Add timeline indicator here if needed */}
116+
</Blogs.TimeLineContainer>
117+
<Blogs.BlogsContentContainer>
118+
<Blogs.BlogHeader>
119+
<Blogs.BlogTitle>blogs</Blogs.BlogTitle>
120+
<Blogs.BlogSubtitle>
121+
Insights, ideas, and stories from the iDEA community
122+
</Blogs.BlogSubtitle>
123+
</Blogs.BlogHeader>
124+
<Blogs.BlogSummary>
125+
Discover our latest articles in a dedicated blog space. Click the
126+
button below to open the full blog endpoint and browse all
127+
published posts.
128+
</Blogs.BlogSummary>
129+
<Blogs.BrowseButton onClick={props.browseBlogs}>
130+
Browse blogs
131+
</Blogs.BrowseButton>
132+
</Blogs.BlogsContentContainer>
133+
</Blogs.Container>
134+
</Generic>
135+
</>
136+
);
137+
};
138+
139+
export default BlogsPage;

‎src/content/contribute.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,21 @@ const ContributePage = (props) => {
9393
}`,
9494
}}
9595
/>
96+
<Navbar.Circle
97+
onClick={props.alumni}
98+
style={{
99+
backgroundColor: props.isLight
100+
? "var(--accent-violet)"
101+
: "var(--accent-lime)",
102+
}}
103+
/>
104+
<Navbar.Stick
105+
style={{
106+
border: `1px solid ${
107+
props.isLight ? "var(--accent-violet)" : "var(--accent-lime)"
108+
}`,
109+
}}
110+
/>
96111
</Navbar.TimelineBarLeft>
97112
<Socials isLight={props.isLight} />
98113
</Navbar.TopContainer>

0 commit comments

Comments
 (0)