Skip to content

Commit 4ea6b9a

Browse files
shansitadsshansitads
committed
Merge branch 'feature/educationals'
2 parents 847b827 + d860d79 commit 4ea6b9a

File tree

14 files changed

+585
-1
lines changed

14 files changed

+585
-1
lines changed

‎public/assets/educationals/brainhack.org.jpeg‎

54.4 KB
Loading

‎public/assets/educationals/neurodatascience.github.io.png‎

624 KB
Loading

‎public/assets/educationals/neuromatch.io.jpg‎

223 KB
Loading

‎public/assets/educationals/neuromatch.io.png‎

115 KB
Loading

‎public/assets/educationals/reprohack.org.jpeg‎

47.2 KB
Loading

‎public/assets/educationals/the-turing-way.org.jpg‎

546 KB
Loading

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Speakers from "./components/Speakers/Speakers";
88
import Footer from "./components/Footer";
99
import Teams from './components/Team/Team';
1010
import Schedule from "./components/Schedule/Schedule";
11+
import Educationals from "./components/Educationals/Educationals";
1112
import {
1213
HashRouter as Router,
1314
Route,
@@ -49,6 +50,7 @@ function App() {
4950
<Route path="/" element={<Home />} />
5051
<Route path="/schedule" element={<Schedule />} />
5152
<Route path="/projects" element={<Projects />} />
53+
<Route path="/educationals" element={<Educationals />} />
5254
<Route path="/team" element={<Teams />} />
5355
<Route path="/faq" element={<FAQ />} />
5456
<Route path="/speakers" element={<Speakers />} />

‎src/components/Educationals/BrainHackGlobal.js‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import React, { useState } from "react";
2+
import { Container, Row, Col } from "react-bootstrap";
3+
import {
4+
AiOutlineDown,
5+
AiOutlineUp,
6+
AiOutlineLaptop,
7+
AiOutlineGithub,
8+
AiOutlineProject,
9+
AiOutlineCode,
10+
AiOutlineDatabase,
11+
AiOutlineCluster,
12+
AiOutlineRobot,
13+
AiOutlineApi,
14+
AiOutlineBug,
15+
} from "react-icons/ai";
16+
17+
const FAQ = () => {
18+
const [activeIndex, setActiveIndex] = useState(null);
19+
20+
// Helper function to render text with custom link text
21+
const renderTextWithLinks = (text) => {
22+
const linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s]+)\)/g;
23+
const parts = [];
24+
let lastIndex = 0;
25+
let match;
26+
27+
while ((match = linkRegex.exec(text)) !== null) {
28+
const [fullMatch, linkText, linkUrl] = match;
29+
parts.push(text.slice(lastIndex, match.index)); // Add preceding text
30+
parts.push(
31+
<a
32+
key={match.index}
33+
href={linkUrl}
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
className="faq-link"
37+
onClick={(e) => e.stopPropagation()}
38+
>
39+
{linkText}
40+
</a>
41+
);
42+
lastIndex = match.index + fullMatch.length;
43+
}
44+
parts.push(text.slice(lastIndex)); // Add remaining text
45+
46+
return parts;
47+
};
48+
49+
const renderAnswer = (answer, icons) => {
50+
if (Array.isArray(answer)) {
51+
return (
52+
<ul style={{ listStyleType: "none", paddingLeft: 0 }}>
53+
{answer.map((point, index) => (
54+
<li
55+
key={index}
56+
style={{ display: "flex", alignItems: "center", margin: "0.5rem 0" }}
57+
>
58+
{/* Icon aligned with the specific point */}
59+
<span style={{ marginRight: "0.5rem" }}>{icons[index]}</span>
60+
<span>{renderTextWithLinks(point)}</span>
61+
</li>
62+
))}
63+
</ul>
64+
);
65+
}
66+
return renderTextWithLinks(answer);
67+
};
68+
69+
const faqData = [
70+
{
71+
question: "Installation and Setup",
72+
answer: [
73+
"[Set up a brainhack friendly computing environment](https://school-brainhack.github.io/modules/installation/)",
74+
"[An introduction to the terminal (Bash)](https://school-brainhack.github.io/modules/introduction_to_terminal/)",
75+
],
76+
icons: [<AiOutlineLaptop />, <AiOutlineCode />],
77+
},
78+
{
79+
question: "Version Control Systems",
80+
answer: [
81+
"[Using Git and Github](https://school-brainhack.github.io/modules/git_github/)",
82+
"[Docker](https://school-brainhack.github.io/modules/containers/)",
83+
"[Standards for Project Management and Organization](https://school-brainhack.github.io/modules/project_management/)"
84+
],
85+
icons: [<AiOutlineGithub />, <AiOutlineCode />, <AiOutlineProject />],
86+
},
87+
88+
{
89+
question: "Introduction to Python for Data Analysis",
90+
answer: [
91+
"[Writing Scripts in Python](https://school-brainhack.github.io/modules/python_scripts/)",
92+
"[Python for Data Analysis](https://school-brainhack.github.io/modules/python_data_analysis/)",
93+
"[Data visualization in Python](https://school-brainhack.github.io/modules/python_visualization/)",
94+
],
95+
icons: [<AiOutlineCode />, <AiOutlineDatabase />, <AiOutlineApi />],
96+
},
97+
{
98+
question: "Data",
99+
answer: [
100+
"[Open Data](https://school-brainhack.github.io/modules/open_data/)",
101+
"[Neuroimaging Data and File Structures in Python](https://school-brainhack.github.io/modules/nibabel/)",
102+
"[Research Data Management with Datalad](https://school-brainhack.github.io/modules/datalad/)",
103+
"[Brain Imaging Data Structures](https://school-brainhack.github.io/modules/bids/)",
104+
],
105+
icons: [<AiOutlineDatabase />, <AiOutlineCluster />, <AiOutlineProject />, <AiOutlineCluster />],
106+
},
107+
{
108+
question: "Neuroimaging Basics and Key Concepts",
109+
answer: [
110+
"[fMRI parcellation](https://school-brainhack.github.io/modules/fmri_parcellation/)",
111+
"[fMRI connectivity](https://school-brainhack.github.io/modules/fmri_connectivity/)",
112+
],
113+
icons: [<AiOutlineCluster />, <AiOutlineApi />],
114+
},
115+
{
116+
question: "Machine Learning for Neuroimaging",
117+
answer: [
118+
"[Machine Learning Basics](https://school-brainhack.github.io/modules/machine_learning_basics/)",
119+
"[Machine Learning Applications](https://school-brainhack.github.io/modules/machine_learning_neuroimaging/)",
120+
],
121+
icons: [<AiOutlineRobot />, <AiOutlineRobot />],
122+
},
123+
{
124+
question: "Deep Learning for Neuroimaging",
125+
answer: [
126+
"[Deep Learning Basics](https://school-brainhack.github.io/modules/deep_learning_intro/)",
127+
"[Deep Learning Applications](https://school-brainhack.github.io/modules/dl_for_neuroimaging/)",
128+
],
129+
icons: [<AiOutlineRobot />, <AiOutlineApi />],
130+
},
131+
{
132+
question: "Advanced Programming",
133+
answer: [
134+
"[Software Testing and Continuous Integration](https://school-brainhack.github.io/modules/testing/)",
135+
],
136+
icons: [<AiOutlineBug />],
137+
},
138+
];
139+
140+
const toggleAccordion = (index) => {
141+
setActiveIndex(activeIndex === index ? null : index);
142+
};
143+
144+
return (
145+
<section>
146+
<Container fluid className="faq-section" id="faq">
147+
<Container>
148+
<h1 className="page-heading">
149+
BrainHack <strong className="purple">Global</strong>
150+
</h1>
151+
<Row className="justify-content-center">
152+
<Col md={10} className="faq-content">
153+
{faqData.map((item, index) => (
154+
<div
155+
key={index}
156+
className={`faq-item ${activeIndex === index ? "active" : ""}`}
157+
onClick={() => toggleAccordion(index)}
158+
>
159+
<div className="faq-question">
160+
<span>{item.question}</span>
161+
{activeIndex === index ? (
162+
<AiOutlineUp className="faq-icon" />
163+
) : (
164+
<AiOutlineDown className="faq-icon" />
165+
)}
166+
</div>
167+
<div
168+
className={`faq-answer ${activeIndex === index ? "show" : ""}`}
169+
>
170+
{renderAnswer(item.answer, item.icons)}
171+
</div>
172+
</div>
173+
))}
174+
</Col>
175+
</Row>
176+
</Container>
177+
</Container>
178+
</section>
179+
);
180+
};
181+
182+
export default FAQ;

‎src/components/Educationals/EduCard.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React from "react";
2+
import { BsGithub } from "react-icons/bs";
3+
import { PiCursorClickBold } from "react-icons/pi";
4+
import { BsPersonBadge } from "react-icons/bs";
5+
6+
7+
8+
const EduCard = ({
9+
videoUrl,
10+
title,
11+
description,
12+
githubUrl,
13+
personalUrl,
14+
isResource = false,
15+
imageUrl,
16+
visitUrl
17+
}) => {
18+
const renderMedia = () => {
19+
if (isResource && imageUrl) {
20+
return (
21+
<div className="thumbnail-wrapper">
22+
<a href={visitUrl} target="_blank" rel="noopener noreferrer">
23+
<img
24+
src={imageUrl}
25+
alt={title}
26+
className="thumbnail rounded"
27+
/>
28+
</a>
29+
</div>
30+
);
31+
}
32+
33+
return (
34+
<div className="ratio ratio-16x9">
35+
<iframe
36+
src={videoUrl}
37+
title={title}
38+
allowFullScreen
39+
className="rounded"
40+
></iframe>
41+
</div>
42+
);
43+
};
44+
45+
const renderButtons = () => {
46+
if (isResource) {
47+
return (
48+
<a
49+
href={visitUrl}
50+
className="btn btn-primary"
51+
target="_blank"
52+
rel="noopener noreferrer"
53+
>
54+
<PiCursorClickBold /> &nbsp; Visit
55+
</a>
56+
);
57+
}
58+
59+
return (
60+
<>
61+
{githubUrl && (
62+
<a href={githubUrl} className="btn btn-primary">
63+
<BsGithub /> &nbsp; GitHub
64+
</a>
65+
)}
66+
{personalUrl && (
67+
<a href={personalUrl} className="btn btn-primary">
68+
<BsPersonBadge /> &nbsp; Speaker
69+
</a>
70+
)}
71+
</>
72+
);
73+
};
74+
75+
return (
76+
<div className="project-card-view">
77+
{renderMedia()}
78+
<h5>{title}</h5>
79+
<p>{description}</p>
80+
{renderButtons()}
81+
</div>
82+
);
83+
};
84+
85+
export default EduCard;

‎src/components/Educationals/Educationals.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from "react";
2+
import { Container, Row, Col } from "react-bootstrap";
3+
import EduCard from "./EduCard";
4+
import Particle from "../Particle";
5+
import BrainHackGlobal from "./BrainHackGlobal";
6+
import { videoData, resourceData, eventData, labData } from "./eduData";
7+
import './educationals.css';
8+
9+
const CardSection = ({ title, subtitle, data, isResource = false }) => (
10+
<Container>
11+
<h2 className="project-heading">
12+
{title.split(' ').map((word, index) =>
13+
index === 1 ? <strong key={index} className="purple">{word} </strong> : word + ' '
14+
)}
15+
</h2>
16+
<p className="project-description">{subtitle}</p>
17+
<Row className="project-row">
18+
{data.map((item, index) => (
19+
<Col key={index} md={4} className="project-card">
20+
<EduCard {...item} isResource={isResource} />
21+
</Col>
22+
))}
23+
</Row>
24+
</Container>
25+
);
26+
27+
function Educationals() {
28+
return (
29+
<Container fluid className="project-section">
30+
<Particle />
31+
32+
{/* Videos Section */}
33+
<CardSection
34+
title="BrainHack Vanderbilt"
35+
subtitle="Past BrainHack Vanderbilt workshops and talks."
36+
data={videoData}
37+
/>
38+
39+
<BrainHackGlobal />
40+
41+
{/* Resources Section */}
42+
<CardSection
43+
title="Community Resources"
44+
subtitle="Explore these additional resources to learn more about neuroscience and open education."
45+
data={resourceData}
46+
isResource={true}
47+
/>
48+
49+
{/* Events Section */}
50+
<CardSection
51+
title="Community Events"
52+
subtitle="Join collaborative events spanning multiple scientific domains, from building reproducibility practices across sciences, to advancing neuroscience through data science."
53+
data={eventData}
54+
isResource={true}
55+
/>
56+
57+
{/* Labs Section */}
58+
<CardSection
59+
title="Lab Spotlight"
60+
subtitle="Discover research groups dedicated to open science through accessible resources, and reproducible practices."
61+
data={labData}
62+
isResource={true}
63+
/>
64+
65+
</Container>
66+
);
67+
}
68+
69+
export default Educationals;

0 commit comments

Comments
 (0)