feat: website updates for Jan 2024

SidhantPuntambekar · Jan 21, 2024 · 423eefe · 423eefe
1 parent e7ade11
commit 423eefe
Show file tree

Hide file tree

Showing 12 changed files with 89 additions and 63 deletions.
diff --git a/src/components/Experience.js b/src/components/Experience.js
@@ -34,7 +34,7 @@ const Experience = ({ experience, currentIndex, length }) => {
 
         {experience.bullets.map((pt, x) => (
           <>
-            <h4>{pt}</h4>
+            <h4 style={{ lineHeight: "1.5" }}>{pt}</h4>
             <br></br>
           </>
         ))}

diff --git a/src/components/School.js b/src/components/School.js
@@ -33,6 +33,7 @@ const School = ({ school }) => {
 
         <h3>{school.descriptor1}</h3>
         <p>{school.descriptor2}</p>
+        <p>{school.descriptor3}</p>
       </div>
 
       <div style={rightMargin}>

diff --git a/src/components/Travel.js b/src/components/Travel.js
@@ -31,12 +31,12 @@ const Travel = () => {
         <div className="container">
             <div style={style}>
                 <h2>Travel</h2>
-                <h3>Traveling is one of my favorite ways to spend time outside of work</h3>
-                <h3>Every time I visit a new place, I'll drop a series of pins on the map below</h3>
-                <h3>Blue pins represent overarching cities or provinces</h3>
-                <h3>Red pins represent famous landmarks (national parks, monuments, etc.)</h3>
-                <h3>Yellow pins represent presidential libraries around the United States</h3>
-                <h3>Follow this map to track my progress!</h3>
+                <h4>Traveling is one of my favorite ways to spend time outside of work</h4>
+                <h4>Every time I visit a new place, I'll drop a series of pins on the map below</h4>
+                <h4>Blue pins represent overarching cities or provinces</h4>
+                <h4>Red pins represent famous landmarks (national parks, monuments, etc.)</h4>
+                <h4>Yellow pins represent presidential libraries around the United States</h4>
+                <h4>Follow this map to track my progress!</h4>
                 <div style={mapStyle}>
                     <iframe style={iframeStyle} src="https://www.google.com/maps/d/embed?mid=1rh0t5ra8Fu3X0RfWutBt41WZYL9zKNs&ehbc=2E312F&z=2&ll=33.7127, -38.0059" width="100%" height="100%"></iframe>
                 </div>

diff --git a/src/components/pages/About.js b/src/components/pages/About.js
@@ -10,6 +10,13 @@ const About = () => {
     marginRight: "auto",
   };
 
+  const textStyle = {
+    alignItems: "center",
+    textAlign: "center",
+    marginLeft: "auto",
+    marginRight: "auto",
+  };
+
   const buttonStyle = {
     backgroundColor: "#EEA47FFF",
     border: "none",
@@ -29,26 +36,34 @@ const About = () => {
   return (
     <div className="container-about">
       <div style={style}>
-      <h2>About Me</h2>
+        <h2 style={{ alignItems: "center"}}>About Me</h2>
+      </div>
+
+      <div style={textStyle}>
       <div>
-        <h3 style={{ margin: "20px" }}>
-          Welcome to my portfolio website!   
-        </h3>
-        <h3 style={{ margin: "20px" }}>
-          My name is Sidhant Puntambekar and I
-          am currently a Bioinformatics Analyst at Bionano Genomics in San Diego, California.
-        </h3>
-        <h3 style={{ margin: "20px" }}>
-          While my main passions are Computer Science and Molecular Biology, I am infatuated with learning about all subject
-          areas.
-        </h3>
-        <h3 class="text-red-500">
-          Some of my hobbies include playing chess, playing electric guitar, reading up on
-          military history, and following Denver area sports teams (<span style={{color: "orange"}}>Broncos</span>, <span style={{color: "yellow"}}>Nuggets</span>, <span style={{color: "#FF2400"}}>Avalanche</span>, <span style={{color: "#C0C0C0"}}>Rockies</span>).
-        </h3>
-        <h3>I also enjoy listening to music and watching movies.</h3>
-
-        <a href={Resume} without rel="noopener noreferrer" target="_blank">
+        <h4 style={{ margin: "20px", lineHeight: "1.5" }}>
+          👋 Hello! My name is Sidhant Puntambekar. Welcome to my corner of the internet!
+        </h4>
+        <h4 style={{ margin: "20px", lineHeight: "1.5" }}>
+          Academically, I find computer science and molecular biology to not only be extremely fascinating as separate disciplines, but also tremendously interconnected as novel algorithms and computational workflows are needed to make sense of increasingly complex and unstructured biological data.     
+        </h4>
+        <h4 h4 style={{ margin: "20px", lineHeight: "1.5" }}>
+        While I mainly spend most of my time working and researching at the intersection of these two fields, I also enjoy learning about all sorts of topics in science, technology, engineering, math, history, and geography.
+        </h4>
+        <h4 style={{ margin: "20px", lineHeight: "1.5"}}>
+          Currently, I am employed as a bioinformatics analyst and software developer at Bionano Genomics in San Diego, California.
+          Although I call San Diego home for the moment, I am originally from Boulder, Colorado.
+        </h4>
+        <h4 style={{ margin: "20px", lineHeight: "1.5" }} class="text-red-500">
+          I also have a wide variety of hobbies that I pursue in my spare time; I enjoy playing chess and studying games of the past to improve my own skills, playing musical instruments including the electric guitar and piano, 
+          reading about various military history topics, learning languages such as Spanish and German, running, travelling around the world, and following Denver area sports teams (such as the <span style={{color: "orange"}}>Broncos</span>, <span style={{color: "yellow"}}>Nuggets</span>, <span style={{color: "#FF2400"}}>Avalanche</span>, and <span style={{color: "#C0C0C0"}}>Rockies</span>).
+          Recently, I also started following Formula 1 racing.
+        </h4>
+        <h4 style={{ margin: "20px",  }} >You can often find me listening to rock music, hiking, watching classic movies and TV shows, and exploring San Diego on the weekends.</h4>
+      </div>
+    </div>
+    <div style={style}>
+    <a href={Resume} without rel="noopener noreferrer" target="_blank">
           <button
             trailingIcon="picture_as_pdf"
             label="Resume"
@@ -57,8 +72,8 @@ const About = () => {
             View Resume
           </button>
         </a>
-      </div>
     </div>
+
     </div>
   );
 };

diff --git a/src/components/pages/Blog.js b/src/components/pages/Blog.js
@@ -29,8 +29,9 @@ const Blog = () => {
     return (
         <div className = "container" style={style}>
             <h2>Blogs</h2> 
-            <h3>Welcome to the blog section of my website</h3>
-            <h3>Click the buttons if you are interested in my blogs on World War II or Chess</h3>
+            <h4>Welcome to the blog section of my website</h4>
+            <h4>Click the buttons if you are interested in my blogs on World War II or Chess.</h4>
+            <h4>I don't update these as frequently as I would like, but eventually, I will migrate these to separate pages on this website.</h4>
             <a href="https://sidhantpuntambekar.surge.sh/History" without rel="noopener noreferrer" target="_blank">
             <button
                 trailingIcon="picture_as_pdf"

diff --git a/src/components/pages/Experience.js b/src/components/pages/Experience.js
@@ -11,7 +11,7 @@ const Experiences = () => {
   };
 
   const headerStyle = {
-    padding: "2%"
+    padding: "5%"
   }
 
   return (

diff --git a/src/components/pages/Projects.js b/src/components/pages/Projects.js
@@ -14,6 +14,10 @@ import { Paper }  from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { orange } from '@mui/material/colors';
 
+import {
+  FaGithub,
+  FaLink,
+} from "react-icons/fa"
 
 const projects = data.projects;
 
@@ -32,6 +36,7 @@ const outerTheme = createTheme({
   },
 });
 
+const iconStyle = { color: "white", fontSize: "1.5em" }
 
 export default function BasicCard() {
   return (
@@ -40,7 +45,7 @@ export default function BasicCard() {
         <h2>Projects</h2>  
       </div>
       <Grid container spacing={5}>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid item sm={12} md={6}>
           <ThemeProvider theme={outerTheme}>
             <Card style={{backgroundColor: "#4E342E"}} sx= {{':hover': { boxShadow: 20,},}} elevation={12}>
                 <CardMedia
@@ -57,13 +62,13 @@ export default function BasicCard() {
                   </Typography>
                 </CardContent>
                 <CardActions>
-                  <Button size="small" href="https://github.com/rnabioco/clustifyr-web-app" target="_blank">Code</Button>
-                  <Button size="small" href="https://raysinensis.shinyapps.io/clustifyr-web-app/" target="_blank">Link</Button>
+                  <Button size="small" href="https://github.com/rnabioco/clustifyr-web-app" target="_blank"><FaGithub style={iconStyle}/></Button>
+                  <Button size="small" href="https://raysinensis.shinyapps.io/clustifyr-web-app/" target="_blank"><FaLink style={iconStyle}/></Button>
                 </CardActions>
             </Card>
             </ThemeProvider>
             </Grid>
-            <Grid item xs={12} sm={6} md={4}>
+            <Grid item sm={12} md={6}>
               <ThemeProvider theme={outerTheme}>
                 <Card style={{backgroundColor: "#4E342E"}} sx= {{':hover': { boxShadow: 20,},}} elevation={12}>
                   <CardMedia
@@ -81,12 +86,12 @@ export default function BasicCard() {
                     </Typography>
                   </CardContent>
                   <CardActions>
-                    <Button size="small" href="https://hackcu.org/" target="_blank">Link</Button>
+                    <Button size="small" href="https://hackcu.org/" target="_blank"><FaLink style={iconStyle}/></Button>
                   </CardActions>
                 </Card>
               </ThemeProvider>
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid item sm={12} md={6}>
               <ThemeProvider theme={outerTheme}>
                 <Card style={{backgroundColor: "#4E342E"}} sx= {{':hover': { boxShadow: 20}}} elevation={12}>
                   <CardMedia
@@ -103,13 +108,13 @@ export default function BasicCard() {
                     </Typography>
                   </CardContent>
                   <CardActions>
-                    <Button size="small" href="https://github.com/SidhantPuntambekar/team-cyberhood-1" target="_blank">Code</Button>
-                    <Button size="small" href="https://devpost.com/software/cyberhood-6xg3us" target="_blank">Link</Button>
+                    <Button size="small" href="https://github.com/SidhantPuntambekar/team-cyberhood-1" target="_blank"><FaGithub style={iconStyle}/></Button>
+                    <Button size="small" href="https://devpost.com/software/cyberhood-6xg3us" target="_blank"><FaLink style={iconStyle}/></Button>
                   </CardActions>
                 </Card>
               </ThemeProvider>
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid item sm={12} md={6}>
               <ThemeProvider theme={outerTheme}>
                 <Card style={{backgroundColor: "#4E342E"}} elevation={12} sx= {{':hover': { boxShadow: 20}}}>
                   <CardMedia
@@ -123,40 +128,40 @@ export default function BasicCard() {
                     </Typography>
                     <Typography style={{color:"white"}} variant="body2" color="text.secondary">
                     Cell-type annotations are frequently excluded from single cell datasets.
-                    To better describe the issue, Someta monitors GEO entries monthly, and programmatically determines the fraction of entries with usable cell metadata.
+                    Someta monitors NCBI GEO entries monthly, and programmatically determines the fraction of entries with usable cell metadata.
                     </Typography>
                   </CardContent>
                   <CardActions>
-                    <Button size="small" href="https://github.com/rnabioco/someta" target="_blank">Code</Button>
-                    <Button size="small" href="https://rnabioco.github.io/someta/" target="_blank">Link</Button>
+                    <Button size="small" href="https://github.com/rnabioco/someta" target="_blank"><FaGithub style={iconStyle}/></Button>
+                    <Button size="small" href="https://rnabioco.github.io/someta/" target="_blank"><FaLink style={iconStyle}/></Button>
                   </CardActions>
                 </Card>
               </ThemeProvider>
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid item sm={12} md={6}>
               <ThemeProvider theme={outerTheme}>
                 <Card style={{backgroundColor: "#4E342E"}} elevation={12} sx= {{':hover': { boxShadow: 20}}}>
                   <CardMedia
                     style={{height: 200, paddingTop: '56.25%'}}
                     image={require('../../img/sorry.png').default}
-                    alt="ClustifyR Web Application"
+                    alt="Sorry Board Game"
                   />
                   <CardContent>
                     <Typography style={{color:"white"}} gutterBottom variant="h4" component="div">
-                      Sorry! Board Game
+                      Sorry! Game
                     </Typography>
                     <Typography style={{color:"white"}} variant="body2" color="text.secondary">
                       A recreation of the board game Sorry! built with Java and JavaFX framework. Leverages object oriented 
                       design patterns such as Factory, Model-View-Controller, Command, and Observer. 
                     </Typography>
                   </CardContent>
                   <CardActions>
-                    <Button size="small" href="https://github.com/SidhantPuntambekar/Sorry-Game" target="_blank">Code</Button>
+                    <Button size="small" href="https://github.com/SidhantPuntambekar/Sorry-Game" target="_blank"><FaGithub style={iconStyle}/></Button>
                   </CardActions>
                 </Card>
               </ThemeProvider>
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid item sm={12} md={6}>
               <ThemeProvider theme={outerTheme}>
                 <Card style={{backgroundColor: "#4E342E"}} elevation={12} sx= {{':hover': { boxShadow: 20}}}>
                   <CardMedia
@@ -169,12 +174,12 @@ export default function BasicCard() {
                       genMutation
                     </Typography>
                     <Typography style={{color:"white"}} variant="body2" color="text.secondary">
-                      A project to create a fine-scale mutational map of the human genome using data aggregated from the Broad Institute's Genome Aggregation (gnomAD) database. 
+                      A project to create a fine-scale mutational map of the human genome using data from the Broad Institute's Genome Aggregation (gnomAD) database. 
                       Harvard Medical School SIBMI Program 2021 Project.  
                     </Typography>
                   </CardContent>
                   <CardActions>
-                    <Button size="small" href="https://github.com/SidhantPuntambekar/genMutation" target="_blank">Code</Button>
+                    <Button size="small" href="https://github.com/SidhantPuntambekar/genMutation" target="_blank"><FaGithub style={iconStyle}/></Button>
                   </CardActions>
                 </Card>
               </ThemeProvider>

diff --git a/src/components/styles.css b/src/components/styles.css
@@ -152,8 +152,8 @@ img {
 }
 
 * {
-    -webkit-user-drag: none;
-    user-select: none;
+    -webkit-user-drag: auto;
+    user-select: auto;
     box-sizing: border-box;
   }
 

diff --git a/src/img/exact3.png b/src/img/exact3.png
diff --git a/src/img/exact4.png b/src/img/exact4.png
diff --git a/src/img/exact5.png b/src/img/exact5.png