Research resources

.gitignore

@@ -4,4 +4,7 @@
 node_modules/
 /.pnp
 .pnp.js
-/venv
+/venv
+.env
+/node_modules
+node_modules

src/Initiatives.js

@@ -170,7 +170,7 @@ export default function BasicCard() {
           </p>
           <p>
             <ThemeProvider theme={theme}>
-              <Button color="yellow" size="large" variant='contained' href='/researchresources'>More Info</Button>
+              <Button color="yellow" size="large" variant='contained' href='/research'>More Info</Button>
             </ThemeProvider>
           </p>
         </div>

src/Navbar.js

@@ -51,6 +51,9 @@ export default function Navbar() {
                 <li>
                     <Link to = "/mentorship-penpals"> Mentorship </Link>
                 </li>
+                <li>
+                    <Link to = "/research"> Research Resources </Link>
+                </li>
 
 
 

src/Research.css

@@ -0,0 +1,24 @@
+.video-container {
+    flex: 1;
+    max-width: max-content;
+}
+
+.side-content {
+    margin-left: 6%;
+}
+
+.main-content {
+    margin-right: 6%;
+    margin-bottom: 24px;
+}
+
+h4 {
+    margin-top: 72px;
+    margin-bottom: 20px;
+    text-align: left;
+}
+
+h5 {
+    font-size: large;
+    margin-bottom: 12px;
+}

src/Research.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import './Research.css';
+import StickySideNav from "./StickySideNav";
+import Stack from '@mui/material/Stack';
+
+function Research() {
+    return (
+        <div>
+            <Stack direction="row">
+                <div className="side-content">
+                    <StickySideNav />
+                </div>
+                <div className="main-content">
+                    <h4>Research Resources</h4>
+                    <div>
+                        {/* Add your embedded video code here */}
+                        <iframe width="660" height="335" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
+                    </div>
+                    <div>
+                        <p>
+                            Hear from students, faculty, and staff in the CS Department about doing research.
+                        </p>
+                        <blockquote>
+                            <i>"Computer scientists are creative problem solvers, and those problems exist everywhere. Interested in agriculture? Curious about chemistry? Have a love of languages? There are computer science problems to solve in all of those areas and beyond! Anything you can imagine, any unanswered question you can fathom is likely being explored at some level through a research project on Purdue's campus." </i>
+                            - Amber Stanley, Undergraduate Programs Specialist
+                        </blockquote>
+                        <p>
+                            Read more about Amber's thoughts on getting started with research <a href="https://purdue0-my.sharepoint.com/:w:/g/personal/spushpa_purdue_edu/EZm7Z_PgrZlGmrzaz22eTakBxWx92LKsC73_Hp3ERQexaQ?rtime=1BPslF113Eg" target="_blank">here</a>.
+                        </p>
+                    </div>
+                </div>
+            </Stack>
+        </div>
+    );
+}
+export default Research;

src/StickySideNav.css

@@ -0,0 +1,11 @@
+/* SideNav.css */
+
+.side-nav {
+    position: sticky;
+    top: 72px;
+    margin: 20px;
+    margin-top: 17px;
+    width: 240px;
+    background-color: #f4f4f4;
+    padding: 20px;
+  }

src/StickySideNav.jsx

@@ -0,0 +1,18 @@
+import './StickySideNav.css'; // Import CSS for styling
+import { Link } from "react-router-dom";
+
+const StickySideNav = () => {
+  return (
+    <div className='side-nav'>
+      <div><Link to="/research"> Getting Started </Link></div>
+      <div><Link to="/research/faq"> FAQ </Link></div>
+      {/* <div><Link to="/research/current-projects"> Current Projects </Link></div> */}
+      <div><Link to="/research/orgs-and-programs"> Organizations + Programs </Link></div>
+      <div><Link to="/research/presenting"> Presenting Your Research </Link></div>
+      <div><Link to="/research/cs-specific"> CS-Specific Research </Link></div>
+      <div><Link to="/research/calendar"> Calendar </Link></div>
+    </div>
+  );
+};
+
+export default StickySideNav;

src/index.js

@@ -20,43 +20,57 @@ import CS193 from "./CS193"
 import TownHall from "./TownHall"
 import Mentorship from './Mentorship';
 import Contact from './Contact';
+import Research from './Research';
+
+import FAQ from './rr_pages/faq';
+import CurrentProjects from './rr_pages/currProjects';
+import ResearchOrgs from './rr_pages/researchOrgs';
+import PresentingResearch from './rr_pages/presentingResearch';
+import CSSpecific from './rr_pages/cs-specific';
+import Calendar from './rr_pages/calendar';
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-    <head>
-      <link 
-        rel="stylesheet" 
-        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" 
-      />
-      <link
-        rel="stylesheet"
-        href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      />
-      <meta name="viewport" content="initial-scale=1, width=device-width" />
-    </head>
-    <Navbar />
-       <Routes>
-        <Route exact path="/" element ={<Landing />} />
-        <Route path = "/wiki" element={<Wiki />}  />
-        <Route path="/addBlog" element={<AddBlog/>} />
-        <Route path = "/displayBlog" element = {<DisplayBlog/>} />
-        <Route path = "/blogPost" element = {<BlogPost/>} />
-        <Route path = "/initiatives" element = {<Initiatives/>} />
-        <Route path = "/clubhub" element =  {<ClubHub/>}/>
-        <Route path = "/ptp" element =  {<PTP/>}/>
-        <Route path = "/internationalstudentresources" element = {<International/>}/>
-        <Route path = "/CS193" element =  {<CS193/>}/>
-        <Route path = "/studentforum-townhall" element =  {<TownHall/>}/>
-        <Route path = "/mentorship" element =  {<Mentorship/>}/>
-        <Route path = "/contact" element =  {<Contact/>}/>
-
+      <head>
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/icon?family=Material+Icons"
+        />
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </head>
+      <Navbar />
+      <Routes>
+        <Route exact path="/" element={<Landing />} />
+        <Route path="/wiki" element={<Wiki />} />
+        <Route path="/addBlog" element={<AddBlog />} />
+        <Route path="/displayBlog" element={<DisplayBlog />} />
+        <Route path="/blogPost" element={<BlogPost />} />
+        <Route path="/initiatives" element={<Initiatives />} />
+        <Route path="/clubhub" element={<ClubHub />} />
+        <Route path="/ptp" element={<PTP />} />
+        <Route path="/isr" element={<International />} />
+        <Route path="/cs193" element={<CS193 />} />
+        <Route path="/studentforum-townhall" element={<TownHall />} />
+        <Route path="/mentorship" element={<Mentorship />} />
+        <Route path="/contact" element={<Contact />} />
+        <Route path="/research" element={<Research />} />
 
+        <Route path="/research/current-projects" element={<CurrentProjects />}/>
+        <Route path="/research/faq" element={<FAQ />}/>
+        <Route path="/research/orgs-and-programs" element={<ResearchOrgs />}/>
+        <Route path="research/presenting" element={<PresentingResearch />}/>
+        <Route path="research/cs-specific" element={<CSSpecific />}/>
+        <Route path="research/calendar" element={<Calendar />}/>
 
-        </Routes>
-      </BrowserRouter>
+      </Routes>
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/rr_pages/bleh.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import Stack from "@mui/material/Stack";
+import StickySideNav from "../StickySideNav";
+import image1 from './images/presenting_1.jpeg';
+import image2 from './images/presenting_2.jpg';
+import "../Research.css"; // Assuming you will move styles here
+
+function PresentingResearch() {
+    return (
+        <div>
+            <Stack direction="row">
+                <div className="side-content">
+                    <StickySideNav />
+                </div>
+                <div className="main-content">
+                    <h4>Interested in sharing your research?</h4>
+                    <ul className="research-list">
+                        <li>
+                            Presenting your research is a great way to get feedback, connect with other researchers, and increase your exposure in academia. Here are some ways to do so at Purdue!
+                        </li>
+                        <li>
+                            <h2>Undergraduate Research Conferences</h2>
+                            <ul>
+                                <li>
+                                    <h3>Fall Undergraduate Research Expo</h3>
+                                    <ul>
+                                        <li>Nov. 19-26, 2024</li>
+                                        <li>An excellent opportunity for undergraduate researchers to showcase their scholarly work and creative endeavors through poster presentations or research talks.</li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <h3>Spring Undergraduate Research Conference</h3>
+                                    <ul>
+                                        <li>April 8-15, 2025</li>
+                                        <li>The largest showcase of undergraduate research at Purdue, featuring oral or poster presentations.</li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <h3>Summer Undergraduate Research Symposium</h3>
+                                    <ul>
+                                        <li>July 25, 2024</li>
+                                        <li>An opportunity for undergraduate researchers to present their work through research talks or poster presentations.</li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <h2>Journal of Purdue Undergraduate Research (JPUR)</h2>
+                            <ul>
+                                <li>Publish research snapshots or articles in JPUR to gain experience in scientific writing and share your work with a broader audience.</li>
+                                <li>Submission deadlines:
+                                    <ul>
+                                        <li>Fall: Nov. 15</li>
+                                        <li>Spring: Feb. 15</li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <h2>Undergraduate Research Seminar Series</h2>
+                            <ul>
+                                <li>Great resources to share your work, attend others' presentations, and connect with faculty projects.</li>
+                                <li>Upcoming: Apr 24, 4pm - Marketing your undergraduate research experiences</li>
+                            </ul>
+                        </li>
+                        <li>
+                            <h4>Need help with writing about your research?</h4>
+                            <ul>
+                                <li>Journal of Purdue Undergraduate Research - Tips for Authors</li>
+                                <li>Purdue Online Writing Lab (OWL)</li>
+                                <li>Research and Citation Resources</li>
+                                <li>Writing scientific abstracts presentation</li>
+                                <li>Writing a research paper</li>
+                            </ul>
+                        </li>
+                    </ul>
+                    <div className="image-container">
+                        <div className="image-frame">
+                            <img src={image1} alt="Research Posters" className="image"/>
+                            <div className="caption">Students presenting their research posters at the fall undergraduate research expo</div>
+                        </div>
+                        <div className="image-frame">
+                            <img src={image2} alt="JPUR Cover Page" className="image"/>
+                            <div className="caption">
+                                Research article cover page in JPUR journal, vol 13. "Machine Learning of Big Data: A Gaussian Regression Model to Predict" by Jerry Gu (purdue.edu)
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Stack>
+        </div>
+    );
+}
+
+export default PresentingResearch;

src/rr_pages/calendar.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Stack } from "@mui/material";
+import StickySideNav from "../StickySideNav";
+import "../Research.css"
+
+function calendar() {
+  const calenderId = '88e0056451d336ea63dbb2cfc2ae5691fb511e40dbcc5e5d79dc6ed439fb7337@group.calendar.google.com'
+  const timeZone = 'America%2FIndiana%2FIndianapolis'
+  return (
+    <iframe
+      title="Google Calendar"
+      src={`https://calendar.google.com/calendar/embed?src=${calenderId}&ctz=${timeZone}`}
+      style={{ border: '0', width: '800px', height: '600px', frameborder: '0', scrolling: 'no' }}
+      allowFullScreen
+    ></iframe>
+  );
+}
+
+const MyComponent = () => {
+  return (
+    <div>
+      <Stack direction="row">
+        <div className="side-content">
+          <StickySideNav />
+        </div>
+        <div className="main-content">
+          <h4> Calendar </h4>
+          {calendar()}
+        </div>
+      </Stack>
+    </div>
+  );
+};
+
+export default MyComponent;