First iteration of project Z

groovychoons · Nov 6, 2024 · acdc08d · acdc08d
1 parent 759f173
commit acdc08d
Show file tree

Hide file tree

Showing 13 changed files with 436 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,11 +6,18 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.3",
     "react": "^18.3.1",
+    "react-bootstrap": "^2.10.5",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object":"7.21.11"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Zara Siddique</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,35 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import About from './pages/About';
+import CV from './pages/CV';
+import Blog from './pages/Blog';
+import cv from "./assets/Zara Siddique CV.pdf";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Container className="mt-5" style={{ backgroundColor: 'white'}}>
+        <Navbar expand="lg">
+          <Navbar.Brand href="/">Zara Siddique</Navbar.Brand>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav>
+              <Nav.Link href="/">About</Nav.Link>
+              <Nav.Link href={cv} target="_blank" rel="noreferrer">CV</Nav.Link>
+              <Nav.Link href="/blog">Blog</Nav.Link>
+            </Nav>
+          </Navbar.Collapse>
+        </Navbar>
+        <hr className='mb-5'/>
+
+        <Routes>
+          <Route path="/" element={<About />} />
+          <Route path="/cv" element={<CV />} />
+          <Route path="/blog" element={<Blog />} />
+        </Routes>
+      </Container>
+    </Router>
   );
 }
 

diff --git a/src/assets/Zara Siddique CV.pdf b/src/assets/Zara Siddique CV.pdf
diff --git a/src/assets/zara.png b/src/assets/zara.png
diff --git a/src/index.css b/src/index.css
@@ -11,3 +11,11 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+h1 {
+  font-size: 1.5em !important;
+}
+
+h2 {
+  font-size: 1.5em !important;
+}
diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

diff --git a/src/pages/About.js b/src/pages/About.js
@@ -0,0 +1,79 @@
+import React from "react";
+import { Container, Row, Col, Image } from "react-bootstrap";
+import { FaLinkedin, FaTwitter, FaGithub } from "react-icons/fa";
+
+function About() {
+  return (
+    <Container className="px-5">
+      <Row>
+        {/* Empty column on the left */}
+        <Col md={1}></Col>
+
+        {/* Profile column */}
+        <Col md={3} className="text-center">
+          <Image
+            src={require("../assets/zara.png")}
+            roundedCircle
+            fluid
+            alt="Zara"
+          />
+
+          <div className="my-3">
+            <a
+              href="https://www.linkedin.com/in/zarasiddique"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FaLinkedin size={24} className="me-3" />
+            </a>
+            <a
+              href="https://twitter.com/thezarasiddique"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FaTwitter size={24} className="me-3" />
+            </a>
+            <a
+              href="https://github.com/groovychoons"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FaGithub size={24} />
+            </a>
+          </div>
+        </Col>
+        <Col md={1}></Col>
+
+        {/* Main content column */}
+        <Col md={6}>
+          <p>
+            I'm a third-year PhD student at Cardiff University in the{" "}
+            <a href="https://cardiffnlp.github.io/">Cardiff NLP</a> Group. My
+            research focuses on intersectional harms in LLMs, looking
+            specifically at how we can measure and mitigate these harms in NLP
+            systems.
+          </p>
+          <p>If you'd like to know more about me, my CV is linked above.</p>
+          <h2>Publications</h2>
+          <ul>
+            <li>
+              <a href="https://arxiv.org/abs/2407.06917">
+                Who is better at math, Jenny or Jingzhen? Uncovering Stereotypes
+                in Large Language Models
+              </a>
+              <p>
+                <strong>Zara Siddique,</strong> Liam D. Turner, Luis
+                Espinosa-Anke (EMNLP 2024).
+              </p>
+            </li>
+          </ul>
+        </Col>
+
+        {/* Empty column on the right */}
+        <Col md={1}></Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default About;
diff --git a/src/pages/Blog.js b/src/pages/Blog.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+
+function Blog() {
+  return (
+    <Container>
+      <h1>Under Construction!</h1>
+      <p>(She's a busy gal)</p>
+    </Container>
+  );
+}
+
+export default Blog;
diff --git a/src/pages/CV.js b/src/pages/CV.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Container, Button } from 'react-bootstrap';
+
+function CV() {
+  return (
+    <Container>
+      <h1>My CV</h1>
+      <p>You can download my CV by clicking the link below:</p>
+      <Button variant="primary" href="/path-to-your-cv.pdf" download>Download CV</Button>
+    </Container>
+  );
+}
+
+export default CV;