Skip to content

Add project pages #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
benserrette wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add project pages #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,25 @@ <h2>Links</h2>
</li>
</ul>
</section>
<hr>
<section id="projects">
<h2>Projects</h2>
<ul>
<li><a href="projects/cadre.html">CADRE</a></li>
<li><a href="projects/cam.html">Conference Agenda Manager</a></li>
<li><a href="projects/captain-numbskull.html">Captain Numbskull</a></li>
<li><a href="projects/comics.html">Comics</a></li>
<li><a href="projects/hoaxy.html">Hoaxy</a></li>
<li><a href="projects/illustrated-guide.html">Illustrated Guide to Programming</a></li>
<li><a href="projects/imls-video.html">IMLS Video</a></li>
<li><a href="projects/infinite-canvas.html">Infinite Canvas 2.0</a></li>
<li><a href="projects/osome.html">OSoMe</a></li>
<li><a href="projects/shake-it-tarot.html">Shake It Tarot</a></li>
<li><a href="projects/strips-4-singles.html">Strips 4 Singles</a></li>
<li><a href="projects/the-stache.html">The Stache</a></li>
<li><a href="projects/vaporbot.html">VaporBot</a></li>
</ul>
</section>
<hr>
<section id="about">
<h2>About Me</h2>
Expand Down
39 changes: 39 additions & 0 deletions projects/cadre.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CADRE - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>CADRE</h1>
<p class="subtitle">Collaborative Archive &amp; Data Research Environment</p>
<hr>
<section>
<blockquote>
<p>
The Collaborative Archive &amp; Data Research Environment (CADRE) addresses the critical issue of providing sustainable, affordable, and standardized data and text mining services for licensed big data sets.
</p>
<footer class="blockquote-footer">
<cite><a href="https://iuni.iu.edu/projects/cadre" target="_blank">The IUNI Website</a></cite>
</footer>
</blockquote>
<p>
CADRE features a number of complimentary pieces. The web-based interface is hosted on AWS and uses several services to connect the frontend with the middleware and databases.
</p>
<p>
As lead software engineer I directed the IUNI IT Team in the design and implementation of the CADRE Gateway. The frontend was built with Vue.js and Bootstrap, while asynchronous database queries ran via AWS SQS.
</p>
<p>
The marketing site uses the flat-file CMS Grav and AWS SNS for contact forms. After becoming Director of IT I successfully brokered a deal to sunset the project, saving significant resources.
</p>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
34 changes: 34 additions & 0 deletions projects/cam.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CAM - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>Conference Agenda Manager</h1>
<p class="subtitle">CAM</p>
<hr>
<section>
<blockquote>
<p>
The Conference Agenda Manager (CAM) allows conference administrators to provide attendees with a searchable database of events. Attendees can build and share customized agendas without creating an account.
</p>
<footer class="blockquote-footer"><cite><a href="http://iuni.iu.edu/projects/cam" target="_blank">The IUNI Website</a></cite></footer>
</blockquote>
<p>
CAM was built at IUNI for NetSci 2017 and used again for NetSci 2018.
</p>
<p>
The front-end was created with Quasar and intended for compilation into a native mobile app. Backend services were written in PHP with a MySQL database.
</p>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
29 changes: 29 additions & 0 deletions projects/captain-numbskull.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Captain Numbskull - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>Captain Numbskull in Space</h1>
<hr>
<section>
<blockquote class="blockquote">
<p>Space. It’s cold, it’s dark, and it goes on forever. There is an infinite number of points in the space between here and there. At each point there awaits untold dangers and unforeseeable peril. Few men dare to brave this great emptiness alone. Our good captain is one of them and no amount of space will keep him from the adventure that lies ahead.</p>
<footer class="blockquote-footer"><cite>excerpt from CaptainNumbskull.com</cite></footer>
</blockquote>
<p>Captain Numbskull in Space is a comic book about a bumbling space pirate and his exploits in space.</p>
<p>Numbskull was originally created as a random filler comic for The Vermilion during the summer of 2005. The concept was so appealing that I continued sketching Numbskull until finally creating a comic book based on the character.</p>
<p>The comic was finally completed and, thanks to a successful Kickstarter, printed in 2014.</p>
<p>Want a copy? Hit me up at <a href="mailto:ben.serrette@example.com">email me</a> and we can work something out.</p>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
31 changes: 31 additions & 0 deletions projects/comics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comics - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>Comics</h1>
<p class="subtitle">Storytelling with Sequential Art</p>
<hr>
<section>
<p>I have enjoyed comics since I was a youth, both reading and creating them. Below is a collection of comics I've created over the years, some dating back to 2004.</p>
<h2 class="nsfw">Toilet Humor and Dick Jokes</h2>
<p>The site is hosted on <a href="https://thadj.neocities.org/" target="_blank">Neocities</a> because it reminds me of the glory days of GeoCities.</p>
<h2>Strips 4 Singles</h2>
<p>I devised Strips 4 Singles as a way to encourage drawing by taking $1 commissions. A gallery of some of the strips can be found <a href="strips-4-singles.html">here</a>.</p>
<h2>24 Hour Comic Day 2014</h2>
<p>24 Hour Comic Day is a yearly event where cartoonists create comics from start to finish in 24 consecutive hours. I participated in 2014 and almost succeeded, finishing the next day.</p>
<h2 class="nsfw">Poonheads</h2>
<p>My first foray into web comics followed the bizarre misadventures of three friends. The archive can be found at <a href="https://poonheads.com" target="_blank">poonheads.com</a>.</p>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
47 changes: 47 additions & 0 deletions projects/hoaxy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hoaxy - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>Hoaxy</h1>
<p class="subtitle">Misinformation Research Tool</p>
<hr>
<section>
<blockquote class="blockquote">
<p>
Hoaxy is a tool that visualizes the spread of articles online. Articles can be found on Twitter, or in a corpus of claims and related fact checking.
</p>
<footer class="blockquote-footer">
<cite>
<a href="http://hoaxy.iuni.iu.edu/faq.html#faq-q1" target="_blank">The Hoaxy Website</a>
</cite>
</footer>
</blockquote>
<p>
I began working on Hoaxy as a consultant in fall of 2016, but we were unable to get it launchable in time for the election. Months later, we got a grant to incorporate <a href="https://botometer.iuni.iu.edu/#!/" target="_blank">Botometer</a> into Hoaxy.
</p>
<p>
As part of the grant, I was assigned as the lead front-end developer. We built the original prototype using JQuery, but because there would be a great deal more functionality added on for the grant, I elected to port the front-end to Vue.js. We also used <a href="http://nvd3.org/" target="_blank">NV.D3</a> for the timeline and <a href="http://sigmajs.org/" target="_blank">Sigma.js</a> for the network graph visualization.
</p>
<p>
The members of the Hoaxy team have changed multiple times over the course of its development. During my time as lead developer I trained and mentored many incoming developers. After becoming IT Director, development was taken over by my team of software engineers.
</p>
<p>
After Twitter discontinued its free API plans, OSoMe was unable to maintain Hoaxy's search capabilities directly. It now offers a few free searches, after which a user with a paid plan must input their bearer token and use their own search quota.
</p>
<p>
An older, open source version of Hoaxy's frontend code can be found on <a href="https://github.com/IUNetSci/hoaxy-frontend" target="_blank">GitHub</a>.
</p>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
26 changes: 26 additions & 0 deletions projects/illustrated-guide.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>An Illustrated Guide to Programming - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>An Illustrated Guide to Programming</h1>
<p class="subtitle">for Absolute Beginners and the Computer Illiterate</p>
<hr>
<section>
<p>This book was an assignment for an instructional design course. The requirement was to create a fully illustrated booklet of at least 16 pages. As both a programmer and an illustrator, I merged the two to create a primer explaining the basics of computer programming using lengthy illustrations instead of paragraphs.</p>
<p>Programming cannot really be explained in 16 pages, so the project soon ballooned to around 100 pages.</p>
<p>I consider this volume&nbsp;1 in a series. The deadline approached before I could tackle advanced topics. I hope to eventually complete this book or create a volume&nbsp;2, and find a cost-effective way to publish it.</p>
<p>You can download the contents <a href="/assets/files/Illustrated_Guide_To_Programming.pdf" target="_blank">here (PDF)</a>.</p>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
29 changes: 29 additions & 0 deletions projects/imls-video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMLS Video - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>IMLS Video</h1>
<p class="subtitle">Animated introduction video for CADRE</p>
<hr>
<section>
<p><a href="cadre.html">The CADRE project</a> was funded by a grant from the IMLS. To support the proposal, we needed an eye-catching introduction video explaining the problem and our proposed solution.</p>
<p>With limited resources, the IUNI IT Team brainstormed a "whiteboard" style animation because it could be produced quickly with off-the-shelf software. I created the visuals, tracing drawings into Illustrator and importing them into the animation software.</p>
<p>The script was a collaboration between the principal investigators and our data manager, who also provided the narration thanks to his British accent.</p>
<p>The entire process was completed in under a week and is widely believed to have been a major factor in the success of our grant proposal.</p>
<div class="text-center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/33ev6Rzhd0A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
34 changes: 34 additions & 0 deletions projects/infinite-canvas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Infinite Canvas 2.0 - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>Infinite Canvas 2.0</h1>
<p class="subtitle">2010 Masters Capstone Project</p>
<hr>
<section>
<h2>Summary</h2>
<p>This project explores bringing Scott McCloud's idea of the Infinite Canvas into the social arena of Web&nbsp;2.0.</p>
<p>The prototype was built using JQuery.</p>
<p>The final paper can be found <a href="/assets/files/Capstone_paper.pdf" target="_blank">here (.pdf, 3.49MB)</a>.</p>
<p>The final presentation can be viewed <a href="/assets/files/Capstone_presentation.pdf" target="_blank">here (.pdf, 11.6MB)</a>. A video of the final presentation can be found at <a href="http://vimeo.com/13216700" target="_blank">vimeo.com/13216700</a>.</p>
<h2>Introduction</h2>
<p>Comics as most people think about them have been around since the late 1700s. They range from short political cartoons to super hero comic books to graphic novels.</p>
<p>Comics is, however, a much more diverse medium. Will Eisner defined comics as "sequential art". Scott McCloud expands this with his own definition of "juxtaposed pictorial and other images in deliberate sequence." Under these definitions, the word "comics" can be applied to early cave paintings and Egyptian hieroglyphics.</p>
<p>The most recent format for comics is the web comic. Web comics are, as the name implies, comics posted on the web. While web comics can be traced back to Usenet, they became popular in the late 1990s with the start of such comics as Penny Arcade and PVP.</p>
<p>Until recently, comics were confined to the physical dimensions of the medium that the comic is created in. In 1999, McCloud introduced the concept commonly known as the Infinite Canvas. Screens could be used as windows to view a comic, allowing panels to be placed in any direction and size, virtually without limit.</p>
<p>Unfortunately, with the exception of a few experimental comics, the infinite canvas never took off. McCloud attributed this to both technical and mental limitations. At the time screen sizes were limited and broadband access was rare.</p>
<p>Today we live in the world of Web&nbsp;2.0. There is no reason the Infinite Canvas cannot take advantage of dynamic sites and social media to become a rich, interactive experience.</p>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
43 changes: 43 additions & 0 deletions projects/osome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OSoMe - Ben Serrette</title>
<link rel="stylesheet" href="../main.css?v=3">
</head>
<body>
<h1>OSoMe</h1>
<p class="subtitle">Observatory on Social Media</p>
<hr>
<section>
<blockquote class="blockquote">
<h2>What is the Observatory on Social Media?</h2>
<p>
The Observatory on Social Media (OSoMe, pronounced awe&bull;some) is a joint project of the Center for Complex Networks and Systems Research at the Luddy School, the Media School, and the Network Science Institute at Indiana University. OSoMe unites data scientists and journalists in studying the role of media and technology in society, and building tools to analyze and counter disinformation and manipulation on social media.
</p>
<footer class="blockquote-footer">
<cite>
<a href="http://osome.iuni.iu.edu" target="_blank">The OSoMe Website</a>
</cite>
</footer>
</blockquote>
<p>
OSoMe was originally created as a sophisticated data collection and storage system to archive the Twitter stream. Over time, OSoMe expanded into a set of tools used to combat misinformation on Twitter.
</p>
<h2>Development</h2>
<p>
My initial contribution to OSoMe was the <a href="http://osome.iuni.iu.edu/tools/networks/" target="_blank">Diffusion Network Graph</a>. The interface was created using Angular and Zurb Foundation while the middleware used Python and NetworkX.
</p>
<p>
As OSoMe's mission grew, so did my role. I led the development of the <a href="hoaxy.html">Hoaxy</a> frontend, mentored junior developers, and oversaw the creation of BotSlayer. I continue to guide the technical strategy for OSoMe's tools.
</p>
</section>
<hr>
<p><a href="../index.html">Back to Home</a></p>
<footer>
<p>&copy; <span id="year">20XX</span> Ben Serrette</p>
</footer>
</body>
<script src="../main.js?v=1"></script>
</html>
Loading