Skip to content

Commit

Permalink
it works!!!
Browse files Browse the repository at this point in the history
  • Loading branch information
sehbaw committed Mar 12, 2024
1 parent 3571f7f commit 2da0a55
Show file tree
Hide file tree
Showing 10 changed files with 151 additions and 63 deletions.
6 changes: 3 additions & 3 deletions contact.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Sehba!!</title>
<title>Sehba</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -13,7 +13,7 @@
<meta name="description" content="A jekyll based resume template">
<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="alternate" type="application/rss+xml" title="Researcher RSS" href="/feed.xml" />
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="/css/main.css">


<!-- Facebook Open Graph -->
Expand All @@ -40,7 +40,7 @@
<ul id="navlist" class="alignable pull-right navbar-ul">


<li class="alignable pull-left nav-list"><a href="index.html">About</a>
<li class="alignable pull-left nav-list"><a href="/swani/">About</a>


/
Expand Down
3 changes: 0 additions & 3 deletions contact.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ is_contact: true
* Email: [sehbaw@gmail.com](mailto:sehbaw@gmail.com)


---

---

## Social

Expand Down
70 changes: 70 additions & 0 deletions css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,74 @@ border-bottom:1px solid rgba(255,255,255,0.3)}
width: 100%;
margin: 0 3% 0 3%;
}
/* gotta get some filters in here */
input[type="checkbox"] {
display:relative;
}

input[type="checkbox"]:hover {
background: rgba(166, 164, 164, 0.1);
}

input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 1.05em;
height: 1.05em;
border-radius: 5px;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
top: -15%;
left: 0;
}

/*input[type="checkbox"]:checked::after {
content: "";
display: block;
/*background-color: rgb(148 33 13 / 90%);
display: block;
width: 1.05em;
height: 1.05em;
border-radius: 5px;
height: 110%;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 110%;
position: relative;
/* top: -12%;
left: -10%;
top: -15%;
left: 0;
}*/

#gallery.creative .card.type-creative,
#gallery.hackathons .card.type-hackathons,
#gallery.tech .card.type-tech {
display: initial;
margin-top: 60px;
margin-bottom: -60px;
cursor: crosshair;
}
/*label {
/* cursor: pointer;
display: flex;
font-size: 1.5rem;
align-items: center;
height: 100%;
margin-right: 30px;
margin-top: 11px;
margin-bottom: 11px;
margin-left: 12px;
font-family: "Montreal-Book";
float: left;
}*/

.filters {
margin-top: 50px;
margin-left: 120px;
margin-right: 120px;
margin-bottom: 60px;
overflow: hidden;
}

Binary file added imgs/atari.JPG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions imgs/check.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/flyerlivecode.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/letsgetgreen.JPG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 9 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,18 @@ <h2 id="about-me">About Me</h2>
<h2 id="research-interest">Research Interest</h2>
<p>My current research interest is in regards to data collection with social sciences and technology usage in government services. One of the biggest
reasons I switched from a more technical background was the lack of inclusion of the humanities aspect regarding technology. Usability is just as important
as functionality!
as functionality! I am currently doing research as a Visting Fellow at The University of Texas Austin with the ISchool Inclusion Institute.
</p>
<h2 id="Works">Current Works</h2>

<p> Currently I am working on various data insight reports of open data and geographic data.
I am working on some audio visualization projects as well with p5.js. Javascript was the first language I ever learned
and one of my goals this year is to get back up to a higher proficiency. Check out my <a href="https://www.github.com/sehbaw"></a>Github</a>
<p> Apart from research I am really looking into exploring various technological pratices:
<ul>
<li>Data Science</li>
<li>Artificial Intelligence (AI)</li>
<li></li>
</ul>

One of my goals this year is to get back up to a higher proficiency. Check out my <a href="https://www.github.com/sehbaw"></a>Github</a>
</p>
<p>
</p>
Expand Down
66 changes: 34 additions & 32 deletions portfolio.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<title>Sehba's Portfolio</title>
<script src="scripts/checkbox.js"></script>
<style>
.center {
display: block;
Expand Down Expand Up @@ -39,20 +40,20 @@
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
padding: 16px;
text-align: center;
background-color: #fffff;
background-color: #FFFFFF;
height: auto; /* play around with this number until you get the height you need */
width: auto;
max-width: 100%;
}


@media screen and (max-width: 600px) {
.gallery {
#gallery {
grid-template-columns: 1fr;
}
}

.gallery {
#gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
Expand Down Expand Up @@ -120,55 +121,59 @@
</ul>
</div>
<!--finding new hackathons-->
<div align="center">
<input type="checkbox" id="creative" name="creative" value="creative">




<div align="center">
<input type="checkbox" id="creative">
<label for="creative"> creative </label><br>
<input type="checkbox" id="hackathons" name="hackathons" value="hackathons">
<input type="checkbox" id="hackathons">
<label for="hackathons">hackathons</label><br>
<input type="checkbox" id="tech" name="tech" value="tech">
<input type="checkbox" id="tech">
<label for="tech">tech</label><br>
</div>
</div>
<div>
<div>
<div>
<div>
<div class="gallery">
<div class="card">
<div id="gallery">
<div class="card type-hackathons type-tech">
<!--<img src="cookwme.JPG" alt="Slide" style="width:30%" class = "center"> -->
<img src="imgs/cookwme.JPG" alt="Slide" style="width:30%">
<img src="imgs/cookwme.JPG" alt="Slide" style="width:60%">
<h4><b>Cook With Me </b></h4>
<p>Cook with Me is a designathon project I participated in. The collaboration of the local aging community and a startup platform, this designathon was created
to allow technologists to either design or establish a technological solution for the case problem of how the older generation manuevers around their house. </p>

</div>

<div class="card">
<img src="imgs/transparency.JPG" alt="Slide" style="width:60%" class="center">
<div class="card type-creative">
<img src="imgs/flyerlivecode.png" alt="Slide" style="width:30%" class="center">
<!--<span class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->
<h4><b>LiveCoding 101: A workshop on exploring livecoding.</b></h4>
<h4><b>let's livecode: A workshop on exploring livecoding.</b></h4>
</p>

</div>



<div class="card">
<div class="card type-tech">
<img src="imgs/transparency.JPG" alt="Slide" style="width:60%" class="center">
<!--<span class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->
<h4><b>An AI/ML Use-Case: Finding a Suitable Drug Trial Participant</b></h4>
<p> Through a data analytics internship with the UMB Pharmaceutical Sciences Department.
</p>
</div>

<div class="card">
<div class="card type-tech">
<img src="imgs/" alt="Orbiting Children" style="width:30%" class="center">
<!--<spn class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->
<h4><b>Orbiting Children: Who Are They?</b></h4>
<p>Foster youth is full of diversity and intersectionality. Lets explore that with Python and data provided by the Annie E Casey Foundation.
</p>
</div>

<div class="card">
<div class="card type-creative ">
<img src="imgs/dropin.JPG" alt="Figma Frames" style="width:30%" class="center">
<!--<spn class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->
<h4><b>DropIn</b></h4>
Expand All @@ -177,15 +182,15 @@ <h4><b>DropIn</b></h4>
to avoid information overload and to allow people's cognitive mechanisms to feel familiar.
</p>
</div>
<div class="card">
<div class="card type-hackathons type-hackathons">
<img src="imgs/transparency.jpg" alt="Slide" style="width:60%" class="center">
<!--<span class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->
<h4><b>Let's Get Green</b></h4>
<p>A hackathon project focused on brining awareness about green web hosting and it's importance. <b>I won in 1st place as a beginner!</b>
</p>

</div>
<div class="card">
<div class="card type-hackathons">
<img src="imgs/transparency.JPG" alt="Slide" style="width:60%" class="center">
<!--<span class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->
<h4><b>Supporting Journalistic Transparency</b></h4>
Expand All @@ -195,20 +200,17 @@ <h4><b>Supporting Journalistic Transparency</b></h4>
</div>


<div class="card">
<img src="imgs/transparency.JPG" alt="Slide" class="center">
<div class="card type-hackathons">
<img src="imgs/atari.JPG" alt="Slide" class="center">
<!--<span class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->
<h4><b>Training Atari Games w/Reinforcement Learning</b></h4>
<p>With a group of three other individuals is a hackathon project I participated in with three other individuals. The process of the project began with using web scraping to obtain tools to code into three categories,<br> essentially
creating metadata for each tool. Once the tools were categorized, we were then able to use Nielsen's ten usability heuristics to determine the usability of each tool.
</p>
<p>Can games get better and better each time? Let's train some Atari games to find out!
</div>
<div class="card"
<img src="imgs/transparency.JPG" alt="Slide" class="center">
<div class="card type-tech">
<img src="imgs/atari.JPG" alt="Slide" class="center">
<!--<span class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->
<h4><b>Data Visualization</b></h4>
<p>With a group of three other individuals is a hackathon project I participated in with three other individuals. The process of the project began with using web scraping to obtain tools to code into three categories,<br> essentially
creating metadata for each tool. Once the tools were categorized, we were then able to use Nielsen's ten usability heuristics to determine the usability of each tool.
<h4><b>Data Visualization Practice</b></h4>
<p>With a variety of datasets, I have been practicing d3.js, highcharts, seaborn and more! Check it out on my Github
</p>

</div>
Expand Down Expand Up @@ -238,13 +240,13 @@ <h4><b>Cook With Me </b></h4>
<spn class="class"><img src="cookwme.JPG" alt="Slide" style="width:30%"></span>-->

</div>

</body>
<!--- <footer>
<p style="text-align: center">
<a href="https://github.com/ankitsultana" style="color: black"><small>Page design by Ankit Sultana</small></a>
</p>
</footer> -->
</body>
</footer> -->
</html>


Expand Down
53 changes: 32 additions & 21 deletions scripts/checkbox.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,41 @@
//reused code
let checkboxes = Array.from(document.querySelectorAll("input[type='checkbox']"));
let galleryGrid = document.getElementById("gallery-grid");
for (const checkbox of checkboxes){
galleryGrid.classList.add(checkbox.id);
}

/*let checkboxes = Array.from(document.querySelectorAll("input[type='checkbox']"));
let galleryGrid = document.getElementById("gallery");
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
checkbox.addEventListener("change", () => filterCards());
});

function filterCards() {
let checkboxes = Array.from(document.querySelectorAll("input[type='checkbox']"));
let checked = Array.from(document.querySelectorAll("input[type='checkbox']:checked"));
if (checked.length === 0) {
for (const checkbox of checkboxes){
galleryGrid.classList.add(checkbox.id);
}
} else {
for (const checkbox of checkboxes){
checkbox.checked ?
galleryGrid.classList.add(checkbox.id) :
galleryGrid.classList.remove(checkbox.id);
}
}
}
// Remove all classes from galleryGrid
galleryGrid.className = "";
// Add classes based on checked checkboxes
checked.forEach((checkbox) => {
galleryGrid.classList.add(checkbox.id);
});
}*/

document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach(function (checkbox) {
checkbox.addEventListener("change", function () {
const selectedFilters = Array.from(checkboxes)
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.id);

console.log("Selected Filters:", selectedFilters);

const cards = document.querySelectorAll(".card");
cards.forEach(function (card) {
const cardClasses = card.className.split(" ");
console.log("Card Classes:", cardClasses);

card.style.display = selectedFilters.every((filter) => cardClasses.includes(`type-${filter}`)) ? "block" : "none";
});
});
});
});

0 comments on commit 2da0a55

Please sign in to comment.