sravan/sravanbalaji.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bootstrap Migration

Browse Source 
- Migrate all pages to bootstrap framework design
- Add video game platform logos
- Update stylesheet
- Update README To Do List and Page Structure
- Add embedded resume
- Change coursework table to accordion
- Change spotify widget width
This commit is contained in:
Sravan Balaji
2020-01-06 13:00:39 -05:00
parent 901b38f445
commit 0218db3d67
11 changed files with 1078 additions and 850 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Assets/Video Games/logo-nintendo-switch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
Assets/Video Games/logo-pc.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
Assets/Video Games/logo-ps4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

32
README.md
View File

@@ -7,15 +7,15 @@ This is the repository for my personal website. This includes all linked files a
- [x] About
- [x] Short Bio
- [x] Contact Info
- [ ] Resume
- [x] Link to PDF on GitHub
- [x] Link to LinkedIn Page
- [ ] Portfolio
- [x] Link to Resume PDF on GitHub
- [ ] Education
- [ ] Degrees
- [x] Coursework
- [ ] Professional Experience
- [ ] Research
- [ ] Projects
- [x] Coursework
- [ ] Personal Recommendations
- [ ] Personal
- [x] Software
- [x] Link
- [x] Platform(s)
@@ -26,7 +26,7 @@ This is the repository for my personal website. This includes all linked files a
- [x] Specs
- [x] Discussion
- [x] Images
- [ ] Favorite Games
- [ ] Video Games
- [x] List
- [ ] Images
- [ ] Discussion
@@ -37,35 +37,37 @@ This is the repository for my personal website. This includes all linked files a
- [x] Discussion
- [x] Music
- [x] Spotify Playlist
- [ ] Website Documentation
- [x] High-level introduction
- [ ] In-Depth Guide
- [ ] Blog Posts / Articles / Guides
- [ ] Time Management / Handling Workload
- [ ] Quality of Life
- [ ] Interviews / Networking
- [ ] Undergrad / Grad Applications
- [x] Documentation
- [x] Page Restructure
- [x] Add Styling w/ CSS
- [x] Favicon
- [x] Logo w/ Link to Home Page
- [ ] Use a component library to fix formatting issues (especially on phone)
- https://getbootstrap.com/
- [x] Migrate to [Bootstrap](https://getbootstrap.com/)
- [x] Add padding to sides
## Web Page Structure (WIP)
- Home
- About
- Bio
- Contact Me
- Resume
- Portfolio
- Resume
- Education
- Professional Experience
- Research
- Projects
- Coursework
- Personal Recommendations
- Personal
- Software
- Hardware
- Video Games
- Favorite List
- Upcoming Games
- Blogs / Articles / Guides
- Podcasts
- Music
- Blogs / Articles / Guides
- Documentation

152
Web Pages/about.html
View File

@@ -1,82 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script language="javascript" type="text/javascript" src="Templates/header.txt"></script>
<script language="javascript" type="text/javascript" src="Common/header.txt"></script>
<title>About</title>
<style>
table#bio_table td {
padding: 10px;
text-align: left;
.bio img {
max-height: 500px;
}
table#bio_table img {
width: 250px;
}
table#contact_table td {
padding: 10px;
text-align: center;
}
table#contact_table img {
width: 200px;
.contact_me img {
max-height: 100px;
}
</style>
<title>About</title>
</head>
<nav>
<div class="navbar">
<a href="index.html"><img src="../Assets/logo.png" height="20px"></a>
<div class="subnav">
<button class="subnavbtn-active"><b>About &#9660;</b></button>
<div class="subnav-content">
<a href="about.html#bio">Bio</a>
<a href="about.html#contact_me">Contact Me</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn"><b>Resume &#9660;</b></button>
<div class="subnav-content">
<a href="resume.html#professional_experience">Professional Experience</a>
<a href="resume.html#research">Research</a>
<a href="resume.html#projects">Projects</a>
<a href="resume.html#coursework">Coursework</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn"><b>Personal Recommendations &#9660;</b></button>
<div class="subnav-content">
<a href="personal_recommendations.html#software">Software</a>
<a href="personal_recommendations.html#hardware">Hardware</a>
<a href="personal_recommendations.html#video_games">Video Games</a>
<a href="personal_recommendations.html#podcasts">Podcasts</a>
<a href="personal_recommendations.html#music">Music</a>
</div>
</div>
<a href="documentation.html"><b>Documentation</b></a>
</div>
</nav>
<script language="javascript" type="text/javascript" src="Common/navbar.txt"></script>
<body>
<div class="main_content">
<div class="container-fluid px-md-6">
<!---------------------------------
BIO
----------------------------------->
<div class="bio">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="bio">Bio</a></h1>
<table id="bio_table">
<tr>
<td><img src="../Assets/About/Profile Picture.jpg"></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
<img class="img-fluid mx-auto d-block" src="../Assets/About/Profile Picture.jpg">
</div>
<div class="col-md-9">
<p>
I'm a Senior at the <a href="https://umich.edu" target="_blank">University of Michigan</a> pursuing dual B.S.E's in
<a href="https://me.engin.umich.edu/" target="_blank">Mechanical Engineering</a> and
<a href="https://cse.engin.umich.edu/" target="_blank">Computer Science</a>. I expect to graduate with both
Bachelor's degrees in December 2020 and plan on continuing my education with a Master's in Robotics.<br><br>
My professional and academic interests are in robotics, mechatronics, autonomous systems, and controls. I am currently
looking for robotics related internships for the Summer of 2020.<br><br>
looking for robotics related internships for the Summer (May - August) of 2020.<br><br>
My personal interests include video games, podcasts, music, cooking, football, soccer, and personal / project management software. You can
check out some of my favorite <a href="personal_recommendations.html#video_games">video games</a>, <a href="personal_recommendations.html#podcasts">podcasts</a>,
<a href="personal_recommendations.html#music">music</a>, and <a href="personal_recommendations.html#software">software</a> on the <a href="personal_recommendations.html">Personal Recommendations page</a>.<br><br>
check out some of my favorite <a href="personal.html#video_games">video games</a>, <a href="personal.html#podcasts">podcasts</a>,
<a href="personal.html#music">music</a>, and <a href="personal.html#software">software</a> on the <a href="personal.html">Personal</a> page.<br><br>
My favorite sports teams, in ranked order, are:
<ol>
@@ -85,31 +53,61 @@
<li>New England Patriots (NFL)</li>
<li>Detroit Sports Teams</li>
</ol>
</td>
</tr>
</table>
</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="contact_me">Contact Me</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<p>
Feel free to reach out to me via email if you have any questions about my website, college education, professional experience, or anything else.
If you have suggestions for the website or would like to see the source files, check out my GitHub repository. If you would like to connect with
me on LinkedIn, use the link below. I will do my best to respond to any
communication in a timely manner.
If you have suggestions for the website or would like to see the source files, check out my <a href="https://github.com/balajsra/balajsra.github.io" target="_blank">
GitHub repository</a>. If you would like to connect with me on LinkedIn, use the link below. I will do my best to respond to any communication
in a timely manner.
</p>
<table id="contact_table">
<tr>
<td><a href="mailto:balajsra@umich.edu" target="_blank"><img alt="Email" src="../Assets/About/email.png"></a></td>
<td><a href="https://www.linkedin.com/in/sravan-balaji/" target="_blank"><img alt="LinkedIn" src="../Assets/About/linkedin.png"></a></td>
<td><a href="https://github.com/balajsra" target="_blank"><img alt="GitHub" src="../Assets/About/github.png"></a></td>
</tr>
<tr>
<td><b>Email:</b> balajsra@umich.edu</td>
<td><b>LinkedIn:</b> sravan-balaji</td>
<td><b>GitHub:</b> balajsra</td>
</tr>
</table>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="Templates/footer.txt"></script>
<!---------------------------------
CONTACT ME
----------------------------------->
<div class="contact_me">
<div class="row align-items-center">
<div class="col-md-4 text-center">
<a href="mailto:balajsra@umich.edu" target="_blank">
<img class="img-fluid mx-auto d-block" alt="Email" src="../Assets/About/email.png">
</a>
<p>
<b>Email:</b> balajsra@umich.edu
</p>
</div>
<div class="col-md-4 text-center">
<a href="https://www.linkedin.com/in/sravan-balaji/" target="_blank">
<img class="img-fluid mx-auto d-block" alt="LinkedIn" src="../Assets/About/linkedin.png">
</a>
<p>
<b>LinkedIn:</b> sravan-balaji
</p>
</div>
<div class="col-md-4 text-center">
<a href="https://github.com/balajsra" target="_blank">
<img class="img-fluid mx-auto d-block" alt="GitHub" src="../Assets/About/github.png">
</a>
<p>
<b>GitHub:</b> balajsra
</p>
</div>
</div>
</div>
</div>
</body>
<footer>
<script language="javascript" type="text/javascript" src="Common/footer.txt"></script>
</footer>
</html>

185
Web Pages/documentation.html
View File

@@ -1,7 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script language="javascript" type="text/javascript" src="Templates/header.txt"></script>
<script language="javascript" type="text/javascript" src="Common/header.txt"></script>
<title>Documentation</title>
<style>
table td {
@@ -13,46 +14,23 @@
width: 200px;
}
</style>
<title>Documentation</title>
</head>
<nav>
<div class="navbar">
<a href="index.html"><img src="../Assets/logo.png" height="20px"></a>
<div class="subnav">
<button class="subnavbtn"><b>About &#9660;</b></button>
<div class="subnav-content">
<a href="about.html#bio">Bio</a>
<a href="about.html#contact_me">Contact Me</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn"><b>Resume &#9660;</b></button>
<div class="subnav-content">
<a href="resume.html#professional_experience">Professional Experience</a>
<a href="resume.html#research">Research</a>
<a href="resume.html#projects">Projects</a>
<a href="resume.html#coursework">Coursework</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn"><b>Personal Recommendations &#9660;</b></button>
<div class="subnav-content">
<a href="personal_recommendations.html#software">Software</a>
<a href="personal_recommendations.html#hardware">Hardware</a>
<a href="personal_recommendations.html#video_games">Video Games</a>
<a href="personal_recommendations.html#podcasts">Podcasts</a>
<a href="personal_recommendations.html#music">Music</a>
</div>
</div>
<a class="active" href="documentation.html"><b>Documentation</b></a>
</div>
</nav>
<script language="javascript" type="text/javascript" src="Common/navbar.txt"></script>
<body>
<div class="main_content">
<h1>Introduction</h1>
<div class="container-fluid px-md-6">
<!---------------------------------
INTRODUCTION
----------------------------------->
<div class="introduction">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="introduction">Introduction</a></h1>
</div>
</div>
<div class="row algin-items-center">
<div class="col-md-12">
<p>
My original intention with this page was to simply save useful links so I could refer back to them, but I thought it might be better to
include some of my thoughts on why I made certain decisions (e.g. website hosting) to help anyone else looking to build a website from
@@ -63,14 +41,30 @@
<a href="https://getbootstrap.com/" target="_blank">bootstrap</a>), but I do have plans to implement more responsive and dynamic features
with mobile support when I find the time.
</p>
</div>
</div>
</div>
<h1>Website Hosting</h1>
<!---------------------------------
WEBSITE HOSTING
----------------------------------->
<div class="website_hosting">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="website_hosting">Website Hosting</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Purchasing a Domain Name</h2>
<p>
Per <a href="https://vesikar.com/" target="_blank">Yash Vesikar</a>'s recommendation, I used
<a href="https://domains.google.com/" target="_blank">Google Domains</a> to purchase the <a href="https://sravanbalaji.com/">sravanbalaji.com</a> domain.
</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Hosting Website</h2>
<p>
There are a couple of options I have found for hosting my website (for free). As a U of M student, I am able to create my own UM Web Page hosted on U of M Servers
@@ -87,40 +81,106 @@
of your &lt;username&gt;.github.io repository. I found <a href="https://trentyang.com/how-to-setup-google-domain-for-github-pages/" target="_blank">Trent Yang's post</a>
about setting up Google Domain for GitHub pages very useful.
</p>
</div>
</div>
</div>
<h1>HTML / CSS Features</h1>
<h2>Navigation & Subnavigation Bar</h2>
<!---------------------------------
WEB DESIGN
----------------------------------->
<div class="web_design">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="web_design">Web Design</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Bootstrap Framework</h2>
<p>
I created the navigation bar you see at the top of this page based on the example code provided in
<a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_subnav" target="_blank">Subnav/dropdown menu inside a Navigation Bar</a>.
When I first made this website, it was implemented in HTML and CSS without the use of a framework. This gave me a lot of custom control over every
aspect, but it made some things unnecessarily tedious and difficult. One example of this is the navigation bar. Trying to implement that without
a framework is more difficult than it needs to be. Another issue I ran into was compatibility with mobile browsers. Per
<a href="https://www.linkedin.com/in/tianhongwen/" target="_blank">Tianhong (Sam) Wen</a>'s recommendation, I looked into
<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>. This has built-in "responsive" classes that can auto adjust
</p>
<h2>Common Page Headers and Footers</h2>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Reusing HTML</h2>
<p>
The easiest way I found to re-use HTML code is via JavaScript as described in
<a href="https://www.uvm.edu/~bnelson/computer/javascript/pageheadersandfooters.html" target="_blank">Page Headers And Footers</a>.
The easiest way I found to reuse HTML code is via JavaScript as described in
<a href="https://www.uvm.edu/~bnelson/computer/javascript/pageheadersandfooters.html" target="_blank">Page Headers And Footers</a>. This is by no
means the most elegant or automated, but it was the only method I could get to actually work. If you don't want to go through the hassle of manually
removing line breaks, you can use this handy online text converter from <a href="https://www.textfixer.com/tools/remove-line-breaks.php" target="_blank">Text Fixer</a>.
</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Display Resume PDF in Website using GitHub</h2>
<p>
I have the latest version of my <a href="portfolio.html#resume">resume</a> stored in a public <a href="https://github.com/balajsra/resume" target="_blank">
GitHub repository</a>, but I wanted an easy way to share it directly on my website. This led me to look for ways to embed a PDF in HTML.
This works great for local files, but not so great for PDFs stored in a repository. The trick is to get the link to the raw PDF file
from GitHub and to use Google Drive PDF Viewer. This is outlined in
<a href="https://medium.com/@kekayan/display-your-resume-cv-pdf-in-website-using-github-73a088ac961d" target="_blank">Kekayan's Medium post</a>.
</p>
</div>
</div>
</div>
<h1>Logo & Design</h1>
<!---------------------------------
AESTHETICS
----------------------------------->
<div class="aesthetics">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="aesthetics">Aesthetics</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Color Scheme</h2>
<p>
I used the color scheme outlined in <a href="https://vpcomm.umich.edu/brand/style-guide/design-principles/colors" target="_blank">University of Michigan - Style Guide: Colors</a>
when choosing colors for the various elements of my website such as navbar background, text color, background color, etc.
</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Logo</h2>
<table>
<tr>
<td><img src="../Assets/logo_with_name.png"></td>
<td><img src="../Assets/logo.png"></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<img class="img-fluid mx-auto d-block" src="../Assets/logo_with_name.png">
</div>
<div class="col-md-2">
<img class="img-fluid mx-auto d-block" src="../Assets/logo.png">
</div>
<div class="col-md-8">
<p>
I designed my logo for free on <a href="https://hatchful.shopify.com/" target="_blank">hatchful</a>. My main purpose for this was to have a nice looking
favicon for my website on browsers as well as for the home page icon in the navbar.
</td>
</tr>
</table>
</p>
</div>
</div>
</div>
<h1>Inspiration</h1>
<!---------------------------------
INSPIRATION
----------------------------------->
<div class="inspiration">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="inspiration">Inspiration</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<p>
Content, design, and implementation were inspired by the following sources
<ul>
@@ -129,8 +189,13 @@
<li><a href="https://umich.edu/" target="_blank">University of Michigan's Website</a></li>
</ul>
</p>
<script language="javascript" type="text/javascript" src="Templates/footer.txt"></script>
</div>
</div>
</div>
</div>
</body>
<footer>
<script language="javascript" type="text/javascript" src="Common/footer.txt"></script>
</footer>
</html>

48
Web Pages/index.html
View File

@@ -1,46 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script language="javascript" type="text/javascript" src="Templates/header.txt"></script>
<script language="javascript" type="text/javascript" src="Common/header.txt"></script>
<title>Sravan Balaji</title>
</head>
<nav>
<div class="navbar">
<a class="active" href="index.html"><img src="../Assets/logo.png" height="20px"></a>
<div class="subnav">
<button class="subnavbtn"><b>About &#9660;</b></button>
<div class="subnav-content">
<a href="about.html#bio">Bio</a>
<a href="about.html#contact_me">Contact Me</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn"><b>Resume &#9660;</b></button>
<div class="subnav-content">
<a href="resume.html#professional_experience">Professional Experience</a>
<a href="resume.html#research">Research</a>
<a href="resume.html#projects">Projects</a>
<a href="resume.html#coursework">Coursework</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn"><b>Personal Recommendations &#9660;</b></button>
<div class="subnav-content">
<a href="personal_recommendations.html#software">Software</a>
<a href="personal_recommendations.html#hardware">Hardware</a>
<a href="personal_recommendations.html#video_games">Video Games</a>
<a href="personal_recommendations.html#podcasts">Podcasts</a>
<a href="personal_recommendations.html#music">Music</a>
</div>
</div>
<a href="documentation.html"><b>Documentation</b></a>
</div>
</nav>
<script language="javascript" type="text/javascript" src="Common/navbar.txt"></script>
<body>
<div class="main_content">
<div class="container-fluid px-md-6">
<div class="row align-items-center">
<div class="col-md-12">
<h1>Welcome</h1>
<p>
Welcome to my personal website! For information on how this website was created and hosted,
@@ -49,8 +19,12 @@
This website is currently a work in progress and updates will be made as I find time.
You can follow development and make suggestions on <a href="https://github.com/balajsra/balajsra.github.io" target="_blank">GitHub</a>.
</p>
<script language="javascript" type="text/javascript" src="Templates/footer.txt"></script>
</div>
</div>
</div>
</body>
<footer>
<script language="javascript" type="text/javascript" src="Common/footer.txt"></script>
</footer>
</html>

626
Web Pages/personal_recommendations.html → Web Pages/personal.html
View File

@@ -1,98 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script language="javascript" type="text/javascript" src="Templates/header.txt"></script>
<script language="javascript" type="text/javascript" src="Common/header.txt"></script>
<title>Personal</title>
<style>
table#software_table td {
padding: 10px;
text-align: left;
.software img {
max-height: 200px;
}
table#software_table img {
width: 175px;
.hardware img {
max-height: 400px;
}
table#hardware_table td {
padding: 10px;
text-align: left;
.video_games img {
max-height: 250px;
}
table#hardware_table img {
width: 350px;
}
table#gaming_profile_table td {
padding: 0;
text-align: center;
}
table#gaming_profile_table img {
width: 200px;
}
table#favorite_games_table td {
padding: 10px;
text-align: left;
}
table#favorite_games_table img {
width: 200px;
}
table#podcast_table td {
padding: 10px;
text-align: left;
}
table#podcast_table img {
width: 175px;
.podcasts img {
max-height: 200px;
}
</style>
<title>Personal Recommendations</title>
</head>
<nav>
<div class="navbar">
<a href="index.html"><img src="../Assets/logo.png" height="20px"></a>
<div class="subnav">
<button class="subnavbtn"><b>About &#9660;</b></button>
<div class="subnav-content">
<a href="about.html#bio">Bio</a>
<a href="about.html#contact_me">Contact Me</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn"><b>Resume &#9660;</b></button>
<div class="subnav-content">
<a href="resume.html#professional_experience">Professional Experience</a>
<a href="resume.html#research">Research</a>
<a href="resume.html#projects">Projects</a>
<a href="resume.html#coursework">Coursework</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn-active"><b>Personal Recommendations &#9660;</b></button>
<div class="subnav-content">
<a href="personal_recommendations.html#software">Software</a>
<a href="personal_recommendations.html#hardware">Hardware</a>
<a href="personal_recommendations.html#video_games">Video Games</a>
<a href="personal_recommendations.html#podcasts">Podcasts</a>
<a href="personal_recommendations.html#music">Music</a>
</div>
</div>
<a href="documentation.html"><b>Documentation</b></a>
</div>
</nav>
<script language="javascript" type="text/javascript" src="Common/navbar.txt"></script>
<body>
<div class="main_content">
<div class="container-fluid px-md-6">
<!---------------------------------
SOFTWARE
----------------------------------->
<div class="software">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="software">Software</a></h1>
<table id="software_table">
<tr>
<td><a href="https://www.stardock.com/products/fences/" target="_blank"><img src="../Assets/Software/logo-fences.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://www.stardock.com/products/fences/" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-fences.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Fences" href="https://www.stardock.com/products/fences/" target="_blank">Fences</a></h2>
<h3>Platform: Windows</h3>
<p>
@@ -105,11 +55,15 @@
can also get it directly from <a href="https://www.stardock.com/products/fences/" target="_blank">Stardock's website</a>.
Would definitely recommend getting it if you have a cluttered desktop.
</p>
</td>
</tr>
<tr>
<td><a href="https://www.stardock.com/products/start10/" target="_blank"><img src="../Assets/Software/logo-start10.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://www.stardock.com/products/start10/" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-start10.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Start10" href="https://www.stardock.com/products/start10/" target="_blank">Start10</a></h2>
<h3>Platform: Windows</h3>
<p>
@@ -123,11 +77,15 @@
getting Start10 on its own as I don't see much value in it, but it is a nice addition if you have
ever wanted to change the look of your taskbar or start menu.
</p>
</td>
</tr>
<tr>
<td><a href="https://www.wallpaperengine.io/" target="_blank"><img src="../Assets/Software/logo-wallpaper-engine.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://www.wallpaperengine.io/" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-wallpaper-engine.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Wallpaper Engine" href="https://www.wallpaperengine.io/" target="_blank">Wallpaper Engine</a></h2>
<h3>Platform: Windows</h3>
<p>
@@ -139,11 +97,15 @@
saving options that can pause the program when another program is in full-screen and in-focus to improve
battery life and performance.
</p>
</td>
</tr>
<tr>
<td><a href="https://www.notion.so/?r=542c7e5df78d4ff0bf5417dd397f26b8" target="_blank"><img src="../Assets/Software/logo-notion.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://www.notion.so/?r=542c7e5df78d4ff0bf5417dd397f26b8" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-notion.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Notion" href="https://www.notion.so/?r=542c7e5df78d4ff0bf5417dd397f26b8" target="_blank">Notion</a></h2>
<h3>Platform: Web App, Mac, Windows, iOS, Android</h3>
<p>
@@ -156,11 +118,15 @@
<a href="https://www.notion.so/?r=542c7e5df78d4ff0bf5417dd397f26b8" target="_blank">referral link</a> to get
some free credit on your account to use if you decide to use any of the paid tiers.
</p>
</td>
</tr>
<tr>
<td><a href="https://www.microsoft.com/en-us/p/clatter/9nps35br12q8" target="_blank"><img src="../Assets/Software/logo-clatter.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://www.microsoft.com/en-us/p/clatter/9nps35br12q8" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-clatter.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Clatter" href="https://www.microsoft.com/en-us/p/clatter/9nps35br12q8" target="_blank">Clatter</a></h2>
<h3>Platform: Windows</h3>
<p>
@@ -169,11 +135,15 @@
at once, but with Clatter, they are all neatly packaged in one application. Any messaging service with a web
app can be accessed through Clatter. Give it a try, I'm sure you will enjoy it as much as I do.
</p>
</td>
</tr>
<tr>
<td><a href="https://chocolatey.org/" target="_blank"><img src="../Assets/Software/logo-chocolatey.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://chocolatey.org/" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-chocolatey.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Chocolatey" href="https://chocolatey.org/" target="_blank">Chocolatey</a></h2>
<h3>Platform: Windows</h3>
<p>
@@ -182,11 +152,15 @@
Windows app on the Microsoft Store. If not, I check Chocolatey. More times than not, it's available there.
You can easily install any programs you need via command prompt and avoid the tedious installation wizard.
</p>
</td>
</tr>
<tr>
<td><a href="https://www.pocketcasts.com/" target="_blank"><img src="../Assets/Software/logo-pocket-casts.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://www.pocketcasts.com/" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-pocket-casts.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Pocket Casts" href="https://www.pocketcasts.com/" target="_blank">Pocket Casts</a></h2>
<h3>Platform: Web App, iOS, Android</h3>
<p>
@@ -195,11 +169,15 @@
has implemented. While I don't agree with this new pay structure, I appreciate that they have implemented a
free tier that has the majority of features that most people will need.
</p>
</td>
</tr>
<tr>
<td><a href="https://vanced.app/" target="_blank"><img src="../Assets/Software/logo-youtube-vanced.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://vanced.app/" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-youtube-vanced.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="YouTube Vanced" href="https://vanced.app/" target="_blank">YouTube Vanced</a></h2>
<h3>Platform: Android</h3>
<p>
@@ -209,33 +187,45 @@
reddit post. The gist of the app is that it removes ads from YouTube on your android phone and you can play
music while your screen is off for free.
</p>
</td>
</tr>
<tr>
<td><a href="https://xodo.com/" target="_blank"><img src="../Assets/Software/logo-xodo.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://xodo.com/" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-xodo.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Xodo" href="https://xodo.com/" target="_blank">Xodo</a></h2>
<h3>Platform: Web App, iOS, Android, Windows</h3>
<p>
This is the best PDF editor/reader I have found that doesn't require a paid subscription (unlike Adobe) for
all of its features. You can easily write/edit, fill out forms, and add digital signatures. All for free.
</p>
</td>
</tr>
<tr>
<td><a href="https://www.microsoft.com/en-us/p/mytube/9wzdncrcwf3l" target="_blank"><img src="../Assets/Software/logo-mytube.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://www.microsoft.com/en-us/p/mytube/9wzdncrcwf3l" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-mytube.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="myTube!" href="https://www.microsoft.com/en-us/p/mytube/9wzdncrcwf3l" target="_blank">myTube!</a></h2>
<h3>Platform: Windows</h3>
<p>
Similar to <a href="#YouTube Vanced">YouTube Vanced</a>, this app removes ads from YouTube. The main difference
here is that myTube! is a Windows app rather than an Android app.
</p>
</td>
</tr>
<tr>
<td><a href="https://www.microsoftedgeinsider.com/en-us/download" target="_blank"><img src="../Assets/Software/logo-edge.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://www.microsoftedgeinsider.com/en-us/download" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-edge.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Microsoft Edge" href="https://www.microsoftedgeinsider.com/en-us/download" target="_blank">Microsoft Edge (Chromium)</a></h2>
<h3>Platform: Windows, macOS, iOS, Android</h3>
<p>
@@ -249,11 +239,15 @@
the new Edge is privacy features. Overall, there are still a few issues I have encountered like links in google searches
not opening properly, but I'm sure these will be ironed out by the official release date.
</p>
</td>
</tr>
<tr>
<td><a href="https://support.microsoft.com/en-us/help/4531293/your-phone-system-requirements-and-set-up" target="_blank"><img src="../Assets/Software/logo-your-phone.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://support.microsoft.com/en-us/help/4531293/your-phone-system-requirements-and-set-up" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-your-phone.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Your Phone" href="https://support.microsoft.com/en-us/help/4531293/your-phone-system-requirements-and-set-up" target="_blank">Your Phone</a></h2>
<h3>Platform: Windows, Android</h3>
<p>
@@ -266,11 +260,15 @@
and the <a href="https://www.microsoft.com/en-us/p/your-phone/9nmpj99vjbwv" target="_blank">Windows App</a>. If you have
ever wanted a better way to integrate your desktop/laptop and phone experience, this is it.
</p>
</td>
</tr>
<tr>
<td><a href="https://play.google.com/store/apps/details?id=ro.andreimircius.remotefingerauth&hl=en_US" target="_blank"><img src="../Assets/Software/logo-remote-fingerprint-unlock.png"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://play.google.com/store/apps/details?id=ro.andreimircius.remotefingerauth&hl=en_US" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Software/logo-remote-fingerprint-unlock.png">
</a>
</div>
<div class="col-md-10">
<h2><a name="Remote Fingerprint Unlock" href="https://play.google.com/store/apps/details?id=ro.andreimircius.remotefingerauth&hl=en_US" target="_blank">Remote Fingerprint Unlock</a></h2>
<h3>Platform: Windows, Android</h3>
<p>
@@ -282,48 +280,59 @@
and the <a href="http://bit.ly/2Q4YoUP" target="_blank">Windows Program</a>. If you get the Pro version, you can even use the
Wake-on-LAN feature.
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<!---------------------------------
HARDWARE
----------------------------------->
<div class="hardware">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="hardware">Hardware</a></h1>
<table id="hardware_table">
<tr>
<td><img src="../Assets/Hardware/desktop-case.png"></td>
<td>
<h2>Desktop PC: Custom</h2>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
<img class="img-fluid mx-auto d-block" src="../Assets/Hardware/desktop-case.png">
</div>
<div class="col-md-9">
<h2><a name="Remote Fingerprint Unlock" href="https://pcpartpicker.com/user/sr98vn/saved/#view=dv8LJx" target="_blank">Desktop PC: Custom</a></h2>
<p>
A full list of my desktop PC build components can be found on <a href="https://pcpartpicker.com/user/sr98vn/saved/#view=dv8LJx" target="_blank">PCPartPicker</a>.
My current build has stayed largely the same from when I first built it, with the exception of the peripherals and monitors.
I have upgraded my keyboard, mouse, and speakers over the past couple of years as I found deals.
</p>
</td>
</tr>
<tr>
<td><img src="../Assets/Hardware/spectre-x360.png"></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
<img class="img-fluid mx-auto d-block" src="../Assets/Hardware/spectre-x360.png">
</div>
<div class="col-md-9">
<h2>Laptop: HP Spectre x360 15"</h2>
<h3>CPU: Intel i7-7500U</h3>
<h3>GPU: NVIDIA GeForce 940MX</h3>
<h3>RAM: 16 GB</h3>
<p>
My main laptop use case is for school. I wanted a touchscreen so I could take digital written notes in class and
My laptop is mainly used for school. I wanted a touchscreen so I could take digital written notes in class and
I needed a good processor and dedicated graphics card for CAD software and for general programming applications.
I landed on the HP Specture x360 because it had a great balance of specs, amazing display, touch screen, and very
nice typing experience for a reasonable price. I was initially leaning towards a Razer Blade or Microsoft's Surface Book.
The former would be great for my use case and for gaming, but it isn't great for taking handwritten digital notes.
I landed on the HP Spectre x360 because it had a great balance of specs, amazing display, touch screen, and very
nice typing experience for a reasonable price. I was initially leaning towards a Razer Blade or Microsoft's Surface
Book. The former would be great for school and for gaming, but it isn't great for taking handwritten digital notes.
The latter is similar to the Spectre in regards to specs, but has a favorable display ratio. The main reason I chose
against it in the end was the high price relative to the Spectre. I was able to get very comparable specs for a much
lower price with the spectre.
lower price with the Spectre. My laptop is the 2016 model with Intel i7-7500U CPU, NVIDIA GeForce 940MX GPU, and
16 GB RAM. The newer models have thinner bezels, diamond-cut corners, updated specs, and better trackpad drivers.
I got around this issue by <a href="https://www.windowscentral.com/how-enable-precision-touchpad-drivers" target="_blank">
installing Microsoft's Precision Trackpad drivers</a> myself as the pre-installed Synaptics drivers are trash.
</p>
</td>
</tr>
<tr>
<td><img src="../Assets/Hardware/surface-go.png"></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
<img class="img-fluid mx-auto d-block" src="../Assets/Hardware/surface-go.png">
</div>
<div class="col-md-9">
<h2>Tablet: Microsoft Surface Go</h2>
<h3>CPU: Intel Pentium 4415Y</h3>
<h3>RAM: 4 GB</h3>
<p>
The Surface Go is primarily used as a secondary-device and tablet. I use it for media consumption and occasional e-book
reading. It is by no means powerful enough to act as my primary device, but I like it as a secondary device that
@@ -331,12 +340,15 @@
<a href="https://www.windowscentral.com/surface-go-how-unlock-windows-10-s-mode" target="_blank">turn off S mode</a>
to be able to install apps that aren't on the Microsoft Store. If you are a Costco member, I would recommend
looking at the <a href="https://www.costco.com/microsoft-surface-go-bundle---intel-pentium---1800-x-1200-display---windows-10-in-s-mode---surface-type-cover.product.100428070.html" target="_blank">Surface Type Cover bundle</a>.
This bundle has a 128 GB SSD, 4GB RAM, Intel Pentium Gold 4415Y CPU, and includes the type cover.
</p>
</td>
</tr>
<tr>
<td><img src="../Assets/Hardware/galaxy-s10-plus.png"></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
<img class="img-fluid mx-auto d-block" src="../Assets/Hardware/galaxy-s10-plus.png">
</div>
<div class="col-md-9">
<h2>Phone: Samsung Galaxy S10+</h2>
<p>
Got the Galaxy S10+ on sale on Amazon's Prime Day. My previous phone was a Pixel 2XL which I really liked, but I decided
@@ -345,11 +357,13 @@
I would have waited to replace my Pixel 2XL until the Galaxy Note 10+ came out and the price dropped down to something reasonable.
However, I am happy with my decision as is.
</p>
</td>
</tr>
<tr>
<td><img src="../Assets/Hardware/galaxy-watch.png"></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
<img class="img-fluid mx-auto d-block" src="../Assets/Hardware/galaxy-watch.png">
</div>
<div class="col-md-9">
<h2>Watch: Samsung Galaxy Watch</h2>
<p>
I previously had a Moto 360 Sport smartwatch, but the performance was extremely disappointing. After looking at other
@@ -360,62 +374,103 @@
all watches should have some variant of this. Overall, the performance is great and I have come to appreciate
Samsung's brand of apps for my phone and watch.
</p>
</td>
</tr>
<tr>
<td><img src="../Assets/Hardware/galaxy-buds.png"></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
<img class="img-fluid mx-auto d-block" src="../Assets/Hardware/galaxy-buds.png">
</div>
<div class="col-md-9">
<h2>Wireless Earbuds: Samsung Galaxy Buds</h2>
<p>
I found these on sale at Costco and heard that the audio quality was among the best for the price. I love that they also have
audio passthrough so you can hear your environment when necessary, or keep noise cancelling on. They fit nice in my ears
and don't fall out. My only grip is that the mic isn't that great for taking phone calls. Integrates well with my Galaxy
Watch and Galaxy S10+.
Watch and Galaxy S10+. My one grip is the battery life. Samsum reports 6 hours of charge in the earbuds and 7 hours
in the case. In my experience, this is pretty accurate. Don't expect long, continuous music sessions.
</p>
</td>
</tr>
<tr>
<td><img src="../Assets/Hardware/wh-1000xm3.png"></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
<img class="img-fluid mx-auto d-block" src="../Assets/Hardware/wh-1000xm3.png">
</div>
<div class="col-md-9">
<h2>Wireless Headphones: Sony WH-1000XM3</h2>
<p>
I actually purchased the WH-1000XM2's, but the XM3's are an improvement in every way and well worth the price. Sound quality
is amazing, noise cancelling is excellent, and it has audio passthrough in case you need to hear your environment.
If you need wireless bluetooth headphones, this is it. You can get these headphones for around $290 on
<a href="https://drop.com/buy/sony-wh-1000xm3-wireless-noise-canceling-headphones/" target="_blank">Drop</a>.
My favorite feature is definitely the battery life. Sony reports 30 hours of charge. If you will be away from
an outlet for an extended period of time and plan on using your headphones a lot, these are great.
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<!---------------------------------
VIDEO GAMES
----------------------------------->
<div class="video_games">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="video_games">Video Games</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Gaming Platform Profiles</h2>
<table id="gaming_profile_table">
<tr>
<td><a href="https://steamcommunity.com/id/sr98vn/" target="_blank"><img alt="Steam" src="../Assets/Video Games/steam.jpg"></a></td>
</tr>
<tr>
<td><h3>Steam: sr98vn</h3></td>
</tr>
</table>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://steamcommunity.com/id/sr98vn/" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Video Games/steam.jpg" style="max-width: 250px;">
</a>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2 text-center">
<b>Steam:</b> sr98vn
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Favorite Games</h2>
<h3>Nintendo Switch</h3>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<img class="img-fluid mx-auto d-block" src="../Assets/Video Games/logo-nintendo-switch.png">
</div>
<div class="col-md-10" style="border: 3px solid red">
<p><ul>
<li>The Legend of Zelda: Breath of the Wild</li>
<li>Fire Emblem: Three Houses</li>
<li>Super Smash Bros. Ultimate</li>
<li>Octopath Traveler</li>
</ul></p>
<h3>PlayStation 4</h3>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<img class="img-fluid mx-auto d-block" src="../Assets/Video Games/logo-ps4.jpg">
</div>
<div class="col-md-10" style="border: 3px solid blue">
<p><ul>
<li>God of War</li>
<li>Marvel's Spider-Man</li>
<li>Bloodborne</li>
</ul></p>
<h3>PC</h3>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<img class="img-fluid mx-auto d-block" src="../Assets/Video Games/logo-pc.jpeg">
</div>
<div class="col-md-10" style="border: 3px solid black">
<p><ul>
<li>The Witcher III: Wild Hunt</li>
<li>The Elder Scrolls V: Skyrim</li>
@@ -427,12 +482,26 @@
<li>The Sims 3</li>
<li>Monster Hunter: World</li>
</ul></p>
</div>
</div>
</div>
<!---------------------------------
PODCASTS
----------------------------------->
<div class="podcasts">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="podcasts">Podcasts</a></h1>
<table id="podcast_table">
<tr>
<td><a href="https://pca.st/simmons" target="_blank"><img src="../Assets/Podcasts/bill-simmons.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/simmons" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/bill-simmons.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/simmons" target="_blank">The Bill Simmons Podcast (The Ringer)</a></h2>
<p>
As a New England Patriot's fan (most because of Tom Brady), I really enjoy this (perhaps too Boston-centric) sports podcast.
@@ -440,102 +509,153 @@
I enjoy his conversations with friends and family about the week's events in sports, generally focused on NFL and NBA.
He occasionally has celebrity guests and sometimes brings guests on to talk about TV and movies.
</p>
</td>
</tr>
<tr>
<td><a href="https://pca.st/footballweekly" target="_blank"><img src="../Assets/Podcasts/football-weekly.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/footballweekly" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/football-weekly.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/footballweekly" target="_blank">Football Weekly (The Guardian)</a></h2>
<p>
I love the light-hearted and sometimes comedic news and analysis of Premier League (and others) matches. The rotating
cast of football journalists and long-time hosts are thoroughly enjoyable to listen to every week.
Definitely recommend this podcast for any football (soccer) fans.
</p>
</td>
</tr>
<tr>
<td><a href="https://pca.st/bombcast" target="_blank"><img src="../Assets/Podcasts/giant-bombcast.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/bombcast" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/giant-bombcast.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/bombcast" target="_blank">Giant Bombcast (Giant Bomb)</a></h2>
<p>
The Giant Bombcast is a great podcast for video game fans. They discuss video game news, latest releases, and sometimes
stuff completely unrelated. Very fun to listen to throughout the week as each episode is pretty long.
</p>
</td>
</tr>
<tr>
<td><a href="https://pca.st/vergecast" target="_blank"><img src="../Assets/Podcasts/vergecast.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/vergecast" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/vergecast.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/vergecast" target="_blank">The Vergecast (The Verge)</a></h2>
<p>
The Vergecast is perhaps my favorite podcast of any genre. The hosts discuss the week's tech news and other
nerdy topics as well as interviews with tech leaders. Cannot recommend this enough.
</p>
</td>
</tr>
<tr>
<td><a href="https://pca.st/nprwaitwait" target="_blank"><img src="../Assets/Podcasts/wait-wait.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/nprwaitwait" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/wait-wait.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/nprwaitwait" target="_blank">Wait Wait... Don't Tell Me! (NPR)</a></h2>
<p>
This is my favorite news/comedy podcast. I love hearing about the week's wacky stories and the rotating
panel of comedians' opinons on world events.
</p>
</td>
</tr>
<tr>
<td><a href="https://pca.st/thedaily" target="_blank"><img src="../Assets/Podcasts/the-daily.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/thedaily" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/the-daily.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/thedaily" target="_blank">The Daily (The New York Times)</a></h2>
<p>
My go to for the major news events of the day (as implied by the name). It's ready every weekday by 6 AM and
generally doesn't run longer than 30 minutes. Great way to start the day.
</p>
</td>
</tr>
<tr>
<td><a href="https://pca.st/hardcorehist" target="_blank"><img src="../Assets/Podcasts/hardcore-history.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/hardcorehist" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/hardcore-history.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/hardcorehist" target="_blank">Dan Carlin's Hardcore History (Dan Carlin)</a></h2>
<p>
This is long-form historical discussion and analysis. If you are interested in diving deep into historical
events from the perspective of someone who knows how to tell a story, this is the podcast for you. Episodes
are generally 4 to 5 hours long and aren't released very often as they require an enormous amount of research.
</p>
</td>
</tr>
<tr>
<td><a href="https://pca.st/lmm1" target="_blank"><img src="../Assets/Podcasts/throughline.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/lmm1" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/throughline.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/lmm1" target="_blank">Throughline (NPR)</a></h2>
<p>
The premise of Throughline is exploring how we can look at the past to understand the present. The hosts are
awesome and always find very interesting stories in the past relating to current events that help put
things in perspective.
</p>
</td>
</tr>
<tr>
<td><a href="https://pca.st/invisibilia" target="_blank"><img src="../Assets/Podcasts/invisibilia.jpg"></a></td>
<td>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-2">
<a href="https://pca.st/invisibilia" target="_blank">
<img class="img-fluid mx-auto d-block" src="../Assets/Podcasts/invisibilia.jpg">
</a>
</div>
<div class="col-md-10">
<h2><a href="https://pca.st/invisibilia" target="_blank">Invisibilia (NPR)</a></h2>
<p>
I'm not entirely sure how to describe this podcast. According to the podcast description, Invisibilia is about
the unseeable forces that control human behavior and shake our ideas, beliefs, and assumptions. Definitely very
interesting and different from most of the other podcasts I listen to.
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<!---------------------------------
MUSIC
----------------------------------->
<div class="music">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="music">Music</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<h2>Spotify Playlist</h2>
<p>
These are my current (approximately 100) favorite songs.
</p>
<iframe src="https://open.spotify.com/embed/playlist/28Qjnry0Pw8D6Z6n5pzxSv" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<script language="javascript" type="text/javascript" src="Templates/footer.txt"></script>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<iframe src="https://open.spotify.com/embed/playlist/28Qjnry0Pw8D6Z6n5pzxSv" width="100%" height="580" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
</div>
</div>
</body>
<footer>
<script language="javascript" type="text/javascript" src="Common/footer.txt"></script>
</footer>
</html>

294
Web Pages/portfolio.html Normal file
View File

@@ -0,0 +1,294 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script language="javascript" type="text/javascript" src="Common/header.txt"></script>
<title>Portfolio</title>
<style>
.resume iframe {
width: 100%;
height: 750px;
}
.education img {
max-height: 400px;
}
.education .card {
margin-bottom: 20px;
}
.professional_experience img {
max-height: 400px;
}
.research img {
max-height: 400px;
}
.projects img {
max-height: 400px;
}
</style>
</head>
<script language="javascript" type="text/javascript" src="Common/navbar.txt"></script>
<body>
<div class="container-fluid px-md-6">
<!---------------------------------
RESUME
----------------------------------->
<div class="resume">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="resume">Resume</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12">
<iframe src="https://docs.google.com/gview?url=https://github.com/balajsra/resume/raw/master/sravan_balaji_resume.pdf&embedded=true"></iframe>
</div>
</div>
</div>
<!---------------------------------
EDUCATION
----------------------------------->
<div class="education">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="education">Education</a></h1>
</div>
</div>
<div class="row align-items-center">
<!-- TODO -->
<div class="col-md-3">
</div>
<div class="col-md-9">
</div>
</div>
<div id="accordion">
<div class="card">
<!-- 1. FALL 2016 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#fall2016">
1. Fall 2016
</a>
</div>
<div id="fall2016" class="collapse" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>ALA 105 - Digital Research: Critical Concepts & Strategies</li>
<li>ENGR 151 - Accelerated Introduction to Computers and Programming</li>
<li>MATH 216 - Introduction to Differential Equations</li>
<li>SOC 100 - Introduction to Sociology</li>
</ul></p>
</div>
</div>
<!-- 2. WINTER 2017 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#winter2017">
2. Winter 2017
</a>
</div>
<div id="winter2017" class="collapse" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>CLCIV 385 - Greek Mythology</li>
<li>EECS 203 - Discrete Mathematics</li>
<li>ENGR 100 - Introduction to Engineering: Solar Energy and Self-Powered Wireless Systems</li>
<li>MECHENG 211 - Introduction to Solid Mechanics</li>
</ul></p>
</div>
</div>
<!-- 3. FALL 2017 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#fall2017">
3. Fall 2017
</a>
</div>
<div id="fall2017" class="collapse" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>EECS 280 - Programming and Introductory Data Structures</li>
<li>MECHENG 235 - Thermodynamics I</li>
<li>MECHENG 240 - Introduction to Dynamics and Vibrations</li>
<li>MECHENG 250 - Design and Manufacturing I</li>
</ul></p>
</div>
</div>
<!-- 4. WINTER 2018 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#winter2018">
4. Winter 2018
</a>
</div>
<div id="winter2018" class="collapse" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>EECS 281 - Data Structures and Algorithms</li>
<li>EECS 314 - Electrical Circuits, Systems, and Applications</li>
<li>EECS 370 - Introduction to Computer Organization</li>
<li>MECHENG 320 - Fluid Mechanics I</li>
</ul></p>
</div>
</div>
<!-- 5. FALL 2018 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#fall2018">
5. Fall 2018
</a>
</div>
<div id="fall2018" class="collapse" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>MECHENG 350 - Design and Manufacturing II</li>
<li>MECHENG 360 - Modeling, Analysis, and Control of Dynamic Systems</li>
<li>MECHENG 382 - Mechanical Behavior of Materials</li>
</ul></p>
</div>
</div>
<!-- 6. WINTER 2019 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#winter2019">
6. Winter 2019
</a>
</div>
<div id="winter2019" class="collapse" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>EECS 201 - Computer Science Pragmatics</li>
<li>EECS 376 - Foundations of Computer Science</li>
<li>EECS 442 - Computer Vision</li>
<li>MECHENG 395 - Laboratory I</li>
<li>STATS 412 - Introduction to Probability & Statistics</li>
</ul></p>
</div>
</div>
<!-- 7. FALL 2019 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#fall2019">
7. Fall 2019
</a>
</div>
<div id="fall2019" class="collapse" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>EECS 492 - Introduction to Artificial Intelligence</li>
<li>MECHENG 335 - Heat Transfer</li>
<li>MECHENG 450 - Design and Manufacturing III</li>
<li>MECHENG 461 - Automatic Control</li>
</ul></p>
</div>
</div>
<!-- 8. WINTER 2020 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#winter2020">
8. Winter 2020
</a>
</div>
<div id="winter2020" class="collapse show" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>EECS 467 - Autonomous Robotics</li>
<li>EECS 496 - Major Design Experience Professionalism</li>
<li>MECHENG 561 - Design of Digital Control Systems</li>
<li>ROB 530 - Mobile Robotics: Methods & Algorithms</li>
</ul></p>
</div>
</div>
<!-- 9. FALL 2020 -->
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#fall2020">
9. Fall 2020 (Planned Courses)
</a>
</div>
<div id="fall2020" class="collapse" data-parent="#accordion">
<div class="card-body">
<p><ul>
<li>EECS 445 - Introduction to Machine Learning</li>
<li>EECS 493 - User Interface Development</li>
<li>MECHENG 495 - Laboratory II</li>
<li>ROB 501 - Math for Robotics</li>
</ul></p>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------
PROFESSIONAL EXPERIENCE
----------------------------------->
<div class="professional_experience">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="professional_experience">Professional Experience</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
</div>
<div class="col-md-9">
</div>
</div>
</div>
<!---------------------------------
RESEARCH
----------------------------------->
<div class="research">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="research">Research</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
</div>
<div class="col-md-9">
</div>
</div>
</div>
<!---------------------------------
Projects
----------------------------------->
<div class="projects">
<div class="row align-items-center">
<div class="col-md-12">
<h1><a name="projects">Projects</a></h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-3">
</div>
<div class="col-md-9">
</div>
</div>
</div>
</div>
</body>
<footer>
<script language="javascript" type="text/javascript" src="Common/footer.txt"></script>
</footer>
</html>

263
Web Pages/resume.html
View File

@@ -1,263 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script language="javascript" type="text/javascript" src="Templates/header.txt"></script>
<style>
table#coursework_table {
border-collapse: collapse;
/* width: 80%; */
}
table#coursework_table th {
padding: 8px;
text-align: center;
border: 1px solid #333333;
background-color: #00274c;
color: #eff0f1;
font-size: 20px;
}
table#coursework_table tr, td {
padding: 8px;
text-align: left;
border: 1px solid #333333;
}
table#coursework_table
tr:nth-child(n+2):nth-child(-n+5),
tr:nth-child(n+10):nth-child(-n+13),
tr:nth-child(n+18):nth-child(-n+20),
tr:nth-child(n+26):nth-child(-n+29),
tr:nth-child(n+34):nth-child(-n+37) {
background-color: #ffcb05;
color: #333333;
}
table#coursework_table
tr:nth-child(n+6):nth-child(-n+9),
tr:nth-child(n+14):nth-child(-n+17),
tr:nth-child(n+21):nth-child(-n+25),
tr:nth-child(n+30):nth-child(-n+33) {
background-color: #0d57aa;
color: #eff0f1;
}
</style>
<title>Resume</title>
</head>
<nav>
<div class="navbar">
<a href="index.html"><img src="../Assets/logo.png" height="20px"></a>
<div class="subnav">
<button class="subnavbtn"><b>About &#9660;</b></button>
<div class="subnav-content">
<a href="about.html#bio">Bio</a>
<a href="about.html#contact_me">Contact Me</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn-active"><b>Resume &#9660;</b></button>
<div class="subnav-content">
<a href="resume.html#professional_experience">Professional Experience</a>
<a href="resume.html#research">Research</a>
<a href="resume.html#projects">Projects</a>
<a href="resume.html#coursework">Coursework</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn"><b>Personal Recommendations &#9660;</b></button>
<div class="subnav-content">
<a href="personal_recommendations.html#software">Software</a>
<a href="personal_recommendations.html#hardware">Hardware</a>
<a href="personal_recommendations.html#video_games">Video Games</a>
<a href="personal_recommendations.html#podcasts">Podcasts</a>
<a href="personal_recommendations.html#music">Music</a>
</div>
</div>
<a href="documentation.html"><b>Documentation</b></a>
</div>
</nav>
<body>
<div class="main_content">
<h1>Resume / CV</h1>
Latest PDF version of resume can be found on <a href="https://github.com/balajsra/resume/blob/master/sravan_balaji_resume.pdf" target="_blank">GitHub</a>.<br>
Full education and work experience can be found on <a href="https://www.linkedin.com/in/sravan-balaji/" target="_blank">LinkedIn</a>.<br>
<h1><a name="professional_experience">Professional Experience</a></h1>
<h2>WIP</h2>
<h1><a name="research">Research</a></h1>
<h2>WIP</h2>
<h1><a name="projects">Projects</a></h1>
<h2>WIP</h2>
<h1><a name="coursework">Coursework</a></h1>
<table id="coursework_table">
<tr><b>
<th>Semester</th>
<th>Course ID</th>
<th>Course Name</th>
</b></tr>
<tr>
<td rowspan="4">Fall 2016</td>
<td>ALA 105</td>
<td>Digital Research: Critical Concepts & Strategies</td>
</tr>
<tr>
<td>ENGR 151</td>
<td>Accelerated Introduction to Computers and Programming</td>
</tr>
<tr>
<td>MATH 216</td>
<td>Introduction to Differential Equations</td>
</tr>
<tr>
<td>SOC 100</td>
<td>Introduction to Sociology</td>
</tr>
<tr>
<td rowspan="4">Winter 2017</td>
<td>CLCIV 385</td>
<td>Greek Mythology</td>
</tr>
<tr>
<td>EECS 203</td>
<td>Discrete Mathematics</td>
</tr>
<tr>
<td>ENGR 100</td>
<td>Introduction to Engineering: Solar Energy and Self-Powered Wireless Systems</td>
</tr>
<tr>
<td>MECHENG 211</td>
<td>Introduction to Solid Mechanics</td>
</tr>
<tr>
<td rowspan="4">Fall 2017</td>
<td>EECS 280</td>
<td>Programming and Introductory Data Structures</td>
</tr>
<tr>
<td>MECHENG 235</td>
<td>Thermodynamics I</td>
</tr>
<tr>
<td>MECHENG 240</td>
<td>Introduction to Dynamics and Vibrations</td>
</tr>
<tr>
<td>MECHENG 250</td>
<td>Design and Manufacturing I</td>
</tr>
<tr>
<td rowspan="4">Winter 2018</td>
<td>EECS 281</td>
<td>Data Structures and Algorithms</td>
</tr>
<tr>
<td>EECS 314</td>
<td>Electrical Circuits, Systems, and Applications</td>
</tr>
<tr>
<td>EECS 370</td>
<td>Introduction to Computer Organization</td>
</tr>
<tr>
<td>MECHENG 320</td>
<td>Fluid Mechanics I</td>
</tr>
<tr>
<td rowspan="3">Fall 2018</td>
<td>MECHENG 350</td>
<td>Design and Manufacturing II</td>
</tr>
<tr>
<td>MECHENG 360</td>
<td>Modeling, Analysis, and Control of Dynamic Systems</td>
</tr>
<tr>
<td>MECHENG 382</td>
<td>Mechanical Behavior of Materials</td>
</tr>
<tr>
<td rowspan="5">Winter 2019</td>
<td>EECS 201</td>
<td>Computer Science Pragmatics</td>
</tr>
<tr>
<td>EECS 376</td>
<td>Foundations of Computer Science</td>
</tr>
<tr>
<td>EECS 442</td>
<td>Computer Vision</td>
</tr>
<tr>
<td>MECHENG 395</td>
<td>Laboratory I</td>
</tr>
<tr>
<td>STATS 412</td>
<td>Introduction to Probability & Statistics</td>
</tr>
<tr>
<td rowspan="4">Fall 2019</td>
<td>EECS 492</td>
<td>Introduction to Artificial Intelligence</td>
</tr>
<tr>
<td>MECHENG 335</td>
<td>Heat Transfer</td>
</tr>
<tr>
<td>MECHENG 450</td>
<td>Design and Manufacturing III</td>
</tr>
<tr>
<td>MECHENG 461</td>
<td>Automatic Control</td>
</tr>
<tr>
<td rowspan="4">Winter 2020</td>
<td>EECS 467</td>
<td>Autonomous Robotics</td>
</tr>
<tr>
<td>EECS 496</td>
<td>Major Design Experience Professionalism</td>
</tr>
<tr>
<td>MECHENG 561</td>
<td>Design of Digital Control Systems</td>
</tr>
<tr>
<td>ROB 530</td>
<td>Mobile Robotics: Methods & Algorithms</td>
</tr>
<tr>
<td rowspan="4">Fall 2020<br>(Planned Courses)</td>
<td>EECS 445</td>
<td>Introduction to Machine Learning</td>
</tr>
<tr>
<td>EECS 493</td>
<td>User Interface Development</td>
</tr>
<tr>
<td>MECHENG 495</td>
<td>Laboratory II</td>
</tr>
<tr>
<td>ROB 501</td>
<td>Math for Robotics</td>
</tr>
</table>
<script language="javascript" type="text/javascript" src="Templates/footer.txt"></script>
</div>
</body>
</html>

98
Web Pages/styles.css
View File

@@ -1,7 +1,73 @@
/***********
* General *
***********/
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #e4e1df;
padding-top: 65px;
}
/****************
* Main Content *
****************/
/* .main {
color: #333333;
font-size: 16px;
}
.main h1 {
background-color: #00274c;
color: #eff0f1;
padding: 10px 10px;
} */
.container-fluid {
color: #333333;
font-size: 18px;
}
.container-fluid h1 {
background-color: #00274c;
/* color: #eff0f1; */
color: #ffcb05;
padding: 10px 10px;
}
.row {
/* border: 1px solid red; */
margin-bottom: 10px;
}
/* Add an invisible target before
anchor links so navbar doesn't
block content */
:target::before {
content: "";
display: block;
margin-top: -70px;
height: 70px;
width: 1px;
}
@media (min-width: 768px) {
.px-md-6 {
padding-left: 12.5% !important;
padding-right: 12.5% !important;
}
}
/* .main img {
width: 100%;
height: auto;
} */
/**********************
* Navbar & Subnavbar *
**********************/
.navbar {
/* .navbar {
overflow: hidden;
background-color: #00274c;
}
@@ -79,32 +145,4 @@
.subnav:hover .subnav-content {
display: block;
}
/****************
* Main Content *
****************/
.main_content {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-top: 50px;
line-height: 25px;
}
/***********************
* Body: Entire Window *
***********************/
body {
background-color: #e4e1df;
margin: 0;
}
h1 {
background-color: #00274c;
color: #eff0f1;
padding: 10px 10px;
}
} */