Updated Content, Single Stylesheet, Whitespace Changes
- Update whitespace formatting with prettier extension - Reorganize files under src folder - Move html files out of web_pages folder - Move stylesheet into style folder - Change links from old repo to new repo - Clean-up some files - Move all in-line styles to styles.css
This commit is contained in:
Sravan Balaji
@@ -4,8 +4,8 @@ This is the repository for my personal website, which can be found at [sravanbal
|
||||
|
||||
## Development Progress
|
||||
|
||||
You can follow my current development plans for this website on my [GitHub project](https://github.com/balajsra/balajsra.github.io/projects/1).
|
||||
You can follow the development of this website on my [GitHub project](https://github.com/balajsra/sravanbalaji.com).
|
||||
|
||||
## Feedback & Suggestions
|
||||
|
||||
If you find any issues or have suggestions for ways to improve my website, please submit a bug or enhancement request on [GitHub](https://github.com/balajsra/balajsra.github.io/issues).
|
||||
If you find any issues or have suggestions for ways to improve my website, please submit a bug or enhancement request on [GitHub](https://github.com/balajsra/sravanbalaji.com/issues).
|
||||
|
||||
@@ -1,179 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script language="javascript" type="text/javascript" src="../common/header.txt"></script>
|
||||
<title>Docker</title>
|
||||
|
||||
<style>
|
||||
img {
|
||||
max-height: 500px;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<script language="javascript" type="text/javascript" src="../common/navbar.txt"></script>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid px-md-6">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<!-- Nothing -->
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<!-- Title -->
|
||||
<h1>Getting Started with Docker</h1>
|
||||
|
||||
<!-- Author & Date/Time -->
|
||||
<p class="lead">
|
||||
Updated on March 18, 2020
|
||||
</p>
|
||||
|
||||
<!-- Preview Image -->
|
||||
<img class="img-fluid rounded" src="https://cdn.vox-cdn.com/thumbor/fbrTLtxuP2D29o8VJUaE-u3NKfU=/0x0:792x613/1200x800/filters:focal(300x237:426x363)/cdn.vox-cdn.com/uploads/chorus_image/image/59850273/Docker_logo_011.0.png" alt="">
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Post Content -->
|
||||
<h2><a name="introduction">Introduction</a></h2>
|
||||
<p>
|
||||
Throughout my college career in computer science, I have found the need to develop applications that will be deployed in a Linux environment. As a windows user, I have usually turned to a couple of different options: virtual machines, <a href="https://docs.microsoft.com/en-us/windows/wsl/about" target="_blank">Windows Subsystem for Linux</a>, or <a href="https://www.cygwin.com" target="_blank">Cygwin</a>. Recently, I discovered an alternative method for building and testing Linux apps that is especially useful for collaboration and deployment. Docker allows you to package an OS and all the necessary dependencies into a <b>docker image</b>. You can then spin up an instance of this image called a <b>docker container</b> in which you can run your source code. Jake Wright's video was incredibly helpful in my understanding of what docker is, how it's different from virtual machines, and how to use it.
|
||||
</p>
|
||||
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/YFl2mCHdv24" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2><a name="installing_docker">Installing Docker</a></h2>
|
||||
<p>
|
||||
Depending on your host machine's operating system, you will install one of the following Docker products. If you have macOS or Windows, your first option should be Docker Desktop. Check if you meet the system requirements. If you do not, Docker Toolbox is the legacy option that uses Oracle VirtualBox rather than Hyper-V or HyperKit for virtualization. I am using a computer with Windows 10 Home, so I use Docker Toolbox for Windows. This blog post will discuss some solutions to edge-case issues with Docker Toolbox that Docker Desktop users will hopefully not have to deal with.
|
||||
</p>
|
||||
<ul>
|
||||
<li>macOS</li>
|
||||
<ul>
|
||||
<li><a href="https://docs.docker.com/docker-for-mac/install/" target="_blank">Docker Desktop for Mac</a></li>
|
||||
<li><a href="https://docs.docker.com/toolbox/toolbox_install_mac/" target="_blank">Docker Toolbox for macOS</a> (Legacy)</li>
|
||||
</ul>
|
||||
|
||||
<li>Windows</li>
|
||||
<ul>
|
||||
<li><a href="https://docs.docker.com/docker-for-windows/install/" target="_blank">Docker Desktop for Windows</a></li>
|
||||
<ul>
|
||||
<li><a href="https://chocolatey.org/packages/docker-desktop/2.2.0.4" target="_blank">Chocolatey</a>: <code>choco install docker-desktop</code></li>
|
||||
</ul>
|
||||
|
||||
<li><a href="https://docs.docker.com/toolbox/toolbox_install_windows/" target="_blank">Docker Toolbox for Windows</a> (Legacy)</li>
|
||||
<ul>
|
||||
<li><a href="https://chocolatey.org/packages/docker-toolbox" target="_blank">Chocolatey</a>: <code>choco install docker-toolbox</code></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<li>Linux</li>
|
||||
<ul>
|
||||
<li><a href="https://docs.docker.com/install/linux/docker-ce/centos/" target="_blank">Docker Engine - Community for CentOS</a></li>
|
||||
<li><a href="https://docs.docker.com/install/linux/docker-ce/debian/" target="_blank">Docker Engine - Community for Debian</a></li>
|
||||
<li><a href="https://docs.docker.com/install/linux/docker-ce/fedora/" target="_blank">Docker Engine - Community for Fedora</a></li>
|
||||
<li><a href="https://docs.docker.com/install/linux/docker-ce/ubuntu/" target="_blank">Docker Engine - Community for Ubuntu</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<h3>Docker Toolbox & WSL</h3>
|
||||
<p>
|
||||
As mentioned previously, I am using Docker Toolbox since Windows 10 Home does not support Hyper-V for virtualization with Docker Desktop. You can run docker toolbox in a command prompt or powershell terminal, but I personally prefer to use WSL because I am more familiar with bash terminal commands. If you are interested in this setup, continue reading this section. Otherwise, you can skip ahead.
|
||||
</p>
|
||||
|
||||
<h4>Installing WSL</h4>
|
||||
<p>
|
||||
The default way to install WSL is through the <a href="https://docs.microsoft.com/en-us/windows/wsl/about" target="_blank">Microsoft Store</a>. This will install WSL on your system drive (e.g. C:\). If you are like me and don't want to install it on your system drive, follow the instructions <a href="https://kontext.tech/column/tools/308/how-to-install-windows-subsystem-for-linux-on-a-non-c-drive" target="_blank">here</a>.
|
||||
</p>
|
||||
|
||||
<h4>Setting Up Docker Toolbox with WSL</h4>
|
||||
<p>
|
||||
After installing WSL, follow the instructions in <a href="https://medium.com/@joaoh82/setting-up-docker-toolbox-for-windows-home-10-and-wsl-to-work-perfectly-2fd34ed41d51" target="_blank">Setting Up Docker Toolbox for Windows Home 10 and WSL to Work Perfectly!</a> starting with <b>Install Docker and Docker Compose within WSL</b>. As you will have seen near the end of that post, there are some extra steps needed to ensure that volume mounts work. After setting <code>root = /</code>, you will need to configure shared folders for the <code>default</code> docker machine in VirtualBox.
|
||||
</p>
|
||||
|
||||
<h4>Shared Folder Configuration for Volume Mounting</h4>
|
||||
<p>
|
||||
I configured all of my drives as shared folders so I can mount any folders on my host machine to any docker containers I run. In your WSL terminal, run <code>docker-machine.exe start</code> to start the <code>default</code> docker machine created by the Docker Quickstart Terminal. After your docker machine is running, open the shared folder settings as shown in <a href="https://medium.com/@Charles_Stover/fixing-volumes-in-docker-toolbox-4ad5ace0e572" target="_blank">Fixing Volumes in Docker Toolbox</a>. The image below shows how <code>C:\</code> on my host computer is mounted at <code>/</code> in folder <code>c</code> on my docker machine such that <code>C:\</code> maps to <code>/c</code>. Make sure you have enabled <code>Auto-mount</code> and <code>Make Permanent</code>. Click <b>OK</b> to save all settings, then go back to the WSL terminal and run <code>docker-machine.exe restart default</code>. Now your docker machine should be properly configured to allow volume mounting.
|
||||
</p>
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/blog_posts/Docker/virtual_box_shared_folder.jpg">
|
||||
|
||||
<h4>Increase Docker Machine Resources</h4>
|
||||
<p>
|
||||
One issue I ran into with the default settings for the <code>default</code> docker machine is the amount of RAM allocated to it. I attempted to build the <a href="https://github.com/borglab/gtsam" target="_blank">GTSAM</a> library inside a docker container and ran into an <i>internal compiler error: Killed (program cc1plus)</i>. As mentioned <a href="https://github.com/docker/for-win/issues/403" target="_blank">here</a>, the solution is to increase the RAM allocated to the docker machine in VirtualBox. In the WSL terminal, run <code>docker-machine.exe stop</code> to shutdown the docker machine. When this is complete, right click on the <code>default</code> docker machine in VirtualBox and open <b>Settings</b>. In the <b>System</b> tab, increase <i>Base Memory</i>. Similar to virtual machines, I would not recommend allocating more than half of your system's RAM. For example, my computer has 16 GB of RAM, so I would only recommend allocating up to 8 GB of RAM to the docker machine. You can look through the other options, such as number of allocated processor cores, as well if you wish.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2><a name="building_images_and_running_containers">Building Images & Running Containers</a></h2>
|
||||
<p>
|
||||
To learn about Dockerfiles and a basic example, check out the video in the <a href="#introduction">introduction</a>. To learn about Docker Compose, check out Jake Wright's video on the topic.
|
||||
</p>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/Qw9zlE3t8Ko" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2><a name="x_forwarding">X Forwarding for GUI Applications</a></h2>
|
||||
<p>
|
||||
In a virtual machine, you can easily run GUI applications such as a web browser, text editor, etc. In a docker container, the process is a little bit different. You will need to download an X Server such as <a href="https://sourceforge.net/projects/vcxsrv/" target="_blank">VcXsrv Windows X Server</a>. If you are using <a href="https://chocolatey.org/packages/vcxsrv" target="_blank">chocolatey</a>, you can run <code>choco install vcxsrv</code>.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://dev.to/darksmile92/run-gui-app-in-linux-docker-container-on-windows-host-4kde" target="_blank">Run GUI app in linux docker container on windows host</a> provides a great explanation of why you would want to do this and how to run your docker container. The post discusses how to set your IP address as the <code>DISPLAY</code> environment variable that is passed to docker via the <code>-e DISPLAY=$DISPLAY</code> command line argument. You can alternatively pass your IP address as an environment variable in your docker compose file. This is shown in <a href="https://github.com/MAAV-Software/ros-tutorial" target="_blank">MAAV's ROS Tutorial</a> (reproduced below). The main settings to look at below are <code>environment</code> and <code>network_mode</code>. Set the <code>DISPLAY</code> environment variable to <code>[ip_address]:0.0</code> and set <code>network_mode: "host"</code>.
|
||||
</p>
|
||||
<pre>
|
||||
<code>
|
||||
# docker-compose.yml
|
||||
version: "2"
|
||||
|
||||
services:
|
||||
ros-demo:
|
||||
image: ros-demo
|
||||
privileged: true
|
||||
volumes:
|
||||
# Mount the current directory do everything in /tutorial within docker
|
||||
- .:/tutorial:rw
|
||||
environment:
|
||||
- DISPLAY=1.1.1.1:0.0 # Change 1.1.1.1 to your IP Address
|
||||
network_mode: "host"
|
||||
container_name: ros-demo
|
||||
command: "/bin/bash --init-file scripts/source-ros.sh" #source ros automatically
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2><a name="helpful_commands">Helpful Docker Commands</a></h2>
|
||||
<p>
|
||||
<ul>
|
||||
<li>System Prune to clear space on Docker Machine</li>
|
||||
<ul>
|
||||
<li><code>docker system prune --volumes</code></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2><a name="conclusion">Conclusion</a></h2>
|
||||
<p>
|
||||
Hopefully by this point, you have a better understanding of what docker is, why you might want to use it, and how to get a docker machine setup so you can build and run docker containers. If you have any questions or suggestions for improvement, feel free to <a href="../web_pages/about.html#contact_me">contact me</a>.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<!-- Nothing -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script language="javascript" type="text/javascript" src="../common/footer.txt"></script>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
<div class="container-fluid px-md-6">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<small>
|
||||
Copyright © 2019 Sravan Balaji under <a rel="license" href="https://docs.google.com/gview?url=https://github.com/balajsra/balajsra.github.io/raw/master/LICENSE" target="_blank">MIT License</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,22 +0,0 @@
|
||||
<!--Required meta tags-->
|
||||
<meta charset="utf-8">
|
||||
<meta name="author" content="Sravan Balaji">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" type="text/css" href="../common/styles.css"/>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="../assets/branding/favicon.ico" type="image/x-icon"/>
|
||||
@@ -1 +0,0 @@
|
||||
document.write('<!--Required meta tags--> <meta charset="utf-8"> <meta name="author" content="Sravan Balaji"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <!-- Stylesheet --> <link rel="stylesheet" type="text/css" href="../common/styles.css"/> <!-- Favicon --> <link rel="icon" href="../assets/branding/favicon.ico" type="image/x-icon"/>')
|
||||
@@ -1,111 +0,0 @@
|
||||
<nav class="navbar my-nav navbar-expand-md fixed-top">
|
||||
<!-- Brand -->
|
||||
<a class="navbar-brand" href="../web_pages/index.html">
|
||||
<img src="../assets/branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top">
|
||||
<img src="../assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center">
|
||||
</a>
|
||||
|
||||
<!-- Toggler/collapsibe Button -->
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Navbar links -->
|
||||
<div class="collapse navbar-collapse" id="collapsibleNavbar">
|
||||
<ul class="navbar-nav">
|
||||
<!-- About -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="../web_pages/about.html" id="navbardrop" data-toggle="dropdown">
|
||||
About
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="../web_pages/about.html#bio">
|
||||
Bio
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/about.html#contact_me">
|
||||
Contact Me
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Portfolio -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="../web_pages/portfolio.html" id="navbardrop" data-toggle="dropdown">
|
||||
Portfolio
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="../web_pages/portfolio.html#resume">
|
||||
Resume
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/portfolio.html#education">
|
||||
Education
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/portfolio.html#professional_experience">
|
||||
Professional Experience
|
||||
</a>
|
||||
<!-- <a class="dropdown-item" href="../web_pages/portfolio.html#research">
|
||||
Research
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/portfolio.html#projects">
|
||||
Projects
|
||||
</a> -->
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Personal -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="../web_pages/personal.html" id="navbardrop" data-toggle="dropdown">
|
||||
Personal
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="../web_pages/personal.html#software">
|
||||
Software
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/personal.html#hardware">
|
||||
Hardware
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/personal.html#video_games">
|
||||
Video Games
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/personal.html#podcasts">
|
||||
Podcasts
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/personal.html#music">
|
||||
Music
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Blog -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="../web_pages/blog.html">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Documentation -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="../web_pages/documentation.html" id="navbardrop" data-toggle="dropdown">
|
||||
Documentation
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="../web_pages/documentation.html#introduction">
|
||||
Introduction
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/documentation.html#website_hosting">
|
||||
Website Hosting
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/documentation.html#web_design">
|
||||
Web Design
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/documentation.html#aesthetics">
|
||||
Aesthetics
|
||||
</a>
|
||||
<a class="dropdown-item" href="../web_pages/documentation.html#inspiration">
|
||||
Inspiration
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1 +0,0 @@
|
||||
document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="../web_pages/index.html"> <img src="../assets/branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top"> <img src="../assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="../web_pages/about.html" id="navbardrop" data-toggle="dropdown"> About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="../web_pages/about.html#bio"> Bio </a> <a class="dropdown-item" href="../web_pages/about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="../web_pages/portfolio.html" id="navbardrop" data-toggle="dropdown"> Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="../web_pages/portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="../web_pages/portfolio.html#education"> Education </a> <a class="dropdown-item" href="../web_pages/portfolio.html#professional_experience"> Professional Experience </a> <!-- <a class="dropdown-item" href="../web_pages/portfolio.html#research"> Research </a> <a class="dropdown-item" href="../web_pages/portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="../web_pages/personal.html" id="navbardrop" data-toggle="dropdown"> Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="../web_pages/personal.html#software"> Software </a> <a class="dropdown-item" href="../web_pages/personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="../web_pages/personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="../web_pages/personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="../web_pages/personal.html#music"> Music </a> </div> </li> <!-- Blog --> <li class="nav-item"> <a class="nav-link" href="../web_pages/blog.html"> Blog </a> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="../web_pages/documentation.html" id="navbardrop" data-toggle="dropdown"> Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="../web_pages/documentation.html#introduction"> Introduction </a> <a class="dropdown-item" href="../web_pages/documentation.html#website_hosting"> Website Hosting </a> <a class="dropdown-item" href="../web_pages/documentation.html#web_design"> Web Design </a> <a class="dropdown-item" href="../web_pages/documentation.html#aesthetics"> Aesthetics </a> <a class="dropdown-item" href="../web_pages/documentation.html#inspiration"> Inspiration </a> </div> </li> </ul> </div> </nav>')
|
||||
@@ -1,67 +0,0 @@
|
||||
/***********
|
||||
* General *
|
||||
***********/
|
||||
body {
|
||||
background-color: #E8EEF2;
|
||||
padding-top: 65px;
|
||||
font-family: Arial, Verdana, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
/****************
|
||||
* Main Content *
|
||||
****************/
|
||||
.my-nav {
|
||||
background: #00274C;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.my-nav .nav-link {
|
||||
color: #FFCB05;
|
||||
}
|
||||
|
||||
.my-nav .nav-link:hover {
|
||||
color: #30C5FF;
|
||||
}
|
||||
|
||||
.my-nav .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 39, 76, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.my-nav .navbar-toggler {
|
||||
background: #FFCB05; /* pick your color */
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.container-fluid h1 {
|
||||
padding: 10px 10px;
|
||||
background: #00274C;
|
||||
color: #FFCB05;
|
||||
}
|
||||
|
||||
.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: -80px;
|
||||
height: 80px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
/* Side Padding */
|
||||
@media (min-width: 768px) {
|
||||
.px-md-6 {
|
||||
padding-left: 12.5% !important;
|
||||
padding-right: 12.5% !important;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,7 @@
|
||||
<!--Dummy File to Redirect to index.html in Web Pages Folder-->
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="0; url=https://balajsra.github.io/web_pages/index.html">
|
||||
</head>
|
||||
<meta
|
||||
http-equiv="refresh"
|
||||
content="0; url=https://sravanbalaji.com/src/index.html"
|
||||
/>
|
||||
</head>
|
||||
|
||||
166
src/about.html
Normal file
166
src/about.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/header.txt"
|
||||
></script>
|
||||
<title>About</title>
|
||||
</head>
|
||||
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/navbar.txt"
|
||||
></script>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid px-md-6">
|
||||
<!---------------------------------
|
||||
BIO
|
||||
----------------------------------->
|
||||
<div id="bio">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h1><a name="bio">Bio</a></h1>
|
||||
</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>
|
||||
Sravan Balaji is 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
|
||||
>
|
||||
with an expected graduation of December 2020. Upon
|
||||
completion of his Bachelor's degrees, he plans on
|
||||
continuing his education with a Master's in
|
||||
Robotics.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sravan recently completed an ADAS Controls
|
||||
Internship at
|
||||
<a href="https://rivian.com/" target="_blank"
|
||||
>Rivian</a
|
||||
>
|
||||
during the summer of 2020. You can learn more about
|
||||
this and his other work experiences in the
|
||||
<a href="./portfolio.html#professional_experience"
|
||||
>professional experience</a
|
||||
>
|
||||
section of the
|
||||
<a href="./portfolio.html">portfolio</a>
|
||||
page. Sravan is currently in his final undergraduate
|
||||
semester at the
|
||||
<a href="https://umich.edu" target="_blank"
|
||||
>University of Michigan</a
|
||||
>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sravan's professional and academic interests are in
|
||||
robotics, mechatronics, autonomous systems,
|
||||
controls, programming, and GNU/Linux among other
|
||||
things. His personal interests include video games,
|
||||
podcasts, music, cooking, football, soccer, and
|
||||
productivity software.
|
||||
</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
|
||||
<a
|
||||
href="https://github.com/balajsra/sravanbalaji.com"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
CONTACT ME
|
||||
----------------------------------->
|
||||
<div id="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>
|
||||
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 432 KiB After Width: | Height: | Size: 432 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 198 KiB After Width: | Height: | Size: 198 KiB |
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 155 KiB After Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
84
src/blog.html
Normal file
84
src/blog.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/header.txt"
|
||||
></script>
|
||||
<title>Blog</title>
|
||||
</head>
|
||||
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/navbar.txt"
|
||||
></script>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid px-md-6">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h1>Blog Posts</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<img
|
||||
class="card-img-top"
|
||||
src="https://cdn.vox-cdn.com/thumbor/fbrTLtxuP2D29o8VJUaE-u3NKfU=/0x0:792x613/1200x800/filters:focal(300x237:426x363)/cdn.vox-cdn.com/uploads/chorus_image/image/59850273/Docker_logo_011.0.png"
|
||||
alt="Docker Whale"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">
|
||||
<a href="blog_docker.html"
|
||||
>Getting Started with Docker</a
|
||||
>
|
||||
</h4>
|
||||
<p class="card-text">
|
||||
A brief introduction to docker, how to use it,
|
||||
and what you can do with it.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="" alt="">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title"></h4>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="" alt="">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title"></h4>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="" alt="">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title"></h4>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/footer.txt"
|
||||
></script>
|
||||
</footer>
|
||||
</html>
|
||||
425
src/blog_docker.html
Normal file
425
src/blog_docker.html
Normal file
@@ -0,0 +1,425 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/header.txt"
|
||||
></script>
|
||||
<title>Docker</title>
|
||||
</head>
|
||||
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/navbar.txt"
|
||||
></script>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid px-md-6">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<!-- Nothing -->
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<!-- Title -->
|
||||
<h1>Getting Started with Docker</h1>
|
||||
|
||||
<!-- Author & Date/Time -->
|
||||
<p class="lead">Updated on March 18, 2020</p>
|
||||
|
||||
<!-- Preview Image -->
|
||||
<div class="blog-cover">
|
||||
<img
|
||||
class="img-fluid rounded"
|
||||
src="https://cdn.vox-cdn.com/thumbor/fbrTLtxuP2D29o8VJUaE-u3NKfU=/0x0:792x613/1200x800/filters:focal(300x237:426x363)/cdn.vox-cdn.com/uploads/chorus_image/image/59850273/Docker_logo_011.0.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Post Content -->
|
||||
<h2><a name="introduction">Introduction</a></h2>
|
||||
<p>
|
||||
Throughout my college career in computer science, I have
|
||||
found the need to develop applications that will be
|
||||
deployed in a Linux environment. As a windows user, I
|
||||
have usually turned to a couple of different options:
|
||||
virtual machines,
|
||||
<a
|
||||
href="https://docs.microsoft.com/en-us/windows/wsl/about"
|
||||
target="_blank"
|
||||
>Windows Subsystem for Linux</a
|
||||
>, or
|
||||
<a href="https://www.cygwin.com" target="_blank"
|
||||
>Cygwin</a
|
||||
>. Recently, I discovered an alternative method for
|
||||
building and testing Linux apps that is especially
|
||||
useful for collaboration and deployment. Docker allows
|
||||
you to package an OS and all the necessary dependencies
|
||||
into a <b>docker image</b>. You can then spin up an
|
||||
instance of this image called a
|
||||
<b>docker container</b> in which you can run your source
|
||||
code. Jake Wright's video was incredibly helpful in my
|
||||
understanding of what docker is, how it's different from
|
||||
virtual machines, and how to use it.
|
||||
</p>
|
||||
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe
|
||||
class="embed-responsive-item"
|
||||
src="https://www.youtube-nocookie.com/embed/YFl2mCHdv24"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2><a name="installing_docker">Installing Docker</a></h2>
|
||||
<p>
|
||||
Depending on your host machine's operating system, you
|
||||
will install one of the following Docker products. If
|
||||
you have macOS or Windows, your first option should be
|
||||
Docker Desktop. Check if you meet the system
|
||||
requirements. If you do not, Docker Toolbox is the
|
||||
legacy option that uses Oracle VirtualBox rather than
|
||||
Hyper-V or HyperKit for virtualization. I am using a
|
||||
computer with Windows 10 Home, so I use Docker Toolbox
|
||||
for Windows. This blog post will discuss some solutions
|
||||
to edge-case issues with Docker Toolbox that Docker
|
||||
Desktop users will hopefully not have to deal with.
|
||||
</p>
|
||||
<ul>
|
||||
<li>macOS</li>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.docker.com/docker-for-mac/install/"
|
||||
target="_blank"
|
||||
>Docker Desktop for Mac</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.docker.com/toolbox/toolbox_install_mac/"
|
||||
target="_blank"
|
||||
>Docker Toolbox for macOS</a
|
||||
>
|
||||
(Legacy)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<li>Windows</li>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.docker.com/docker-for-windows/install/"
|
||||
target="_blank"
|
||||
>Docker Desktop for Windows</a
|
||||
>
|
||||
</li>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://chocolatey.org/packages/docker-desktop/2.2.0.4"
|
||||
target="_blank"
|
||||
>Chocolatey</a
|
||||
>: <code>choco install docker-desktop</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.docker.com/toolbox/toolbox_install_windows/"
|
||||
target="_blank"
|
||||
>Docker Toolbox for Windows</a
|
||||
>
|
||||
(Legacy)
|
||||
</li>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://chocolatey.org/packages/docker-toolbox"
|
||||
target="_blank"
|
||||
>Chocolatey</a
|
||||
>: <code>choco install docker-toolbox</code>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<li>Linux</li>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.docker.com/install/linux/docker-ce/centos/"
|
||||
target="_blank"
|
||||
>Docker Engine - Community for CentOS</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.docker.com/install/linux/docker-ce/debian/"
|
||||
target="_blank"
|
||||
>Docker Engine - Community for Debian</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.docker.com/install/linux/docker-ce/fedora/"
|
||||
target="_blank"
|
||||
>Docker Engine - Community for Fedora</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.docker.com/install/linux/docker-ce/ubuntu/"
|
||||
target="_blank"
|
||||
>Docker Engine - Community for Ubuntu</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<h3>Docker Toolbox & WSL</h3>
|
||||
<p>
|
||||
As mentioned previously, I am using Docker Toolbox since
|
||||
Windows 10 Home does not support Hyper-V for
|
||||
virtualization with Docker Desktop. You can run docker
|
||||
toolbox in a command prompt or powershell terminal, but
|
||||
I personally prefer to use WSL because I am more
|
||||
familiar with bash terminal commands. If you are
|
||||
interested in this setup, continue reading this section.
|
||||
Otherwise, you can skip ahead.
|
||||
</p>
|
||||
|
||||
<h4>Installing WSL</h4>
|
||||
<p>
|
||||
The default way to install WSL is through the
|
||||
<a
|
||||
href="https://docs.microsoft.com/en-us/windows/wsl/about"
|
||||
target="_blank"
|
||||
>Microsoft Store</a
|
||||
>. This will install WSL on your system drive (e.g.
|
||||
C:\). If you are like me and don't want to install it on
|
||||
your system drive, follow the instructions
|
||||
<a
|
||||
href="https://kontext.tech/column/tools/308/how-to-install-windows-subsystem-for-linux-on-a-non-c-drive"
|
||||
target="_blank"
|
||||
>here</a
|
||||
>.
|
||||
</p>
|
||||
|
||||
<h4>Setting Up Docker Toolbox with WSL</h4>
|
||||
<p>
|
||||
After installing WSL, follow the instructions in
|
||||
<a
|
||||
href="https://medium.com/@joaoh82/setting-up-docker-toolbox-for-windows-home-10-and-wsl-to-work-perfectly-2fd34ed41d51"
|
||||
target="_blank"
|
||||
>Setting Up Docker Toolbox for Windows Home 10 and
|
||||
WSL to Work Perfectly!</a
|
||||
>
|
||||
starting with
|
||||
<b>Install Docker and Docker Compose within WSL</b>. As
|
||||
you will have seen near the end of that post, there are
|
||||
some extra steps needed to ensure that volume mounts
|
||||
work. After setting <code>root = /</code>, you will need
|
||||
to configure shared folders for the
|
||||
<code>default</code> docker machine in VirtualBox.
|
||||
</p>
|
||||
|
||||
<h4>Shared Folder Configuration for Volume Mounting</h4>
|
||||
<p>
|
||||
I configured all of my drives as shared folders so I can
|
||||
mount any folders on my host machine to any docker
|
||||
containers I run. In your WSL terminal, run
|
||||
<code>docker-machine.exe start</code> to start the
|
||||
<code>default</code> docker machine created by the
|
||||
Docker Quickstart Terminal. After your docker machine is
|
||||
running, open the shared folder settings as shown in
|
||||
<a
|
||||
href="https://medium.com/@Charles_Stover/fixing-volumes-in-docker-toolbox-4ad5ace0e572"
|
||||
target="_blank"
|
||||
>Fixing Volumes in Docker Toolbox</a
|
||||
>. The image below shows how <code>C:\</code> on my host
|
||||
computer is mounted at <code>/</code> in folder
|
||||
<code>c</code> on my docker machine such that
|
||||
<code>C:\</code> maps to <code>/c</code>. Make sure you
|
||||
have enabled <code>Auto-mount</code> and
|
||||
<code>Make Permanent</code>. Click <b>OK</b> to save all
|
||||
settings, then go back to the WSL terminal and run
|
||||
<code>docker-machine.exe restart default</code>. Now
|
||||
your docker machine should be properly configured to
|
||||
allow volume mounting.
|
||||
</p>
|
||||
<img
|
||||
class="img-fluid mx-auto d-block"
|
||||
src="./assets/blog_posts/Docker/virtual_box_shared_folder.jpg"
|
||||
/>
|
||||
|
||||
<h4>Increase Docker Machine Resources</h4>
|
||||
<p>
|
||||
One issue I ran into with the default settings for the
|
||||
<code>default</code> docker machine is the amount of RAM
|
||||
allocated to it. I attempted to build the
|
||||
<a
|
||||
href="https://github.com/borglab/gtsam"
|
||||
target="_blank"
|
||||
>GTSAM</a
|
||||
>
|
||||
library inside a docker container and ran into an
|
||||
<i>internal compiler error: Killed (program cc1plus)</i
|
||||
>. As mentioned
|
||||
<a
|
||||
href="https://github.com/docker/for-win/issues/403"
|
||||
target="_blank"
|
||||
>here</a
|
||||
>, the solution is to increase the RAM allocated to the
|
||||
docker machine in VirtualBox. In the WSL terminal, run
|
||||
<code>docker-machine.exe stop</code> to shutdown the
|
||||
docker machine. When this is complete, right click on
|
||||
the <code>default</code> docker machine in VirtualBox
|
||||
and open <b>Settings</b>. In the <b>System</b> tab,
|
||||
increase <i>Base Memory</i>. Similar to virtual
|
||||
machines, I would not recommend allocating more than
|
||||
half of your system's RAM. For example, my computer has
|
||||
16 GB of RAM, so I would only recommend allocating up to
|
||||
8 GB of RAM to the docker machine. You can look through
|
||||
the other options, such as number of allocated processor
|
||||
cores, as well if you wish.
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>
|
||||
<a name="building_images_and_running_containers"
|
||||
>Building Images & Running Containers</a
|
||||
>
|
||||
</h2>
|
||||
<p>
|
||||
To learn about Dockerfiles and a basic example, check
|
||||
out the video in the
|
||||
<a href="#introduction">introduction</a>. To learn about
|
||||
Docker Compose, check out Jake Wright's video on the
|
||||
topic.
|
||||
</p>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe
|
||||
class="embed-responsive-item"
|
||||
src="https://www.youtube-nocookie.com/embed/Qw9zlE3t8Ko"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>
|
||||
<a name="x_forwarding"
|
||||
>X Forwarding for GUI Applications</a
|
||||
>
|
||||
</h2>
|
||||
<p>
|
||||
In a virtual machine, you can easily run GUI
|
||||
applications such as a web browser, text editor, etc. In
|
||||
a docker container, the process is a little bit
|
||||
different. You will need to download an X Server such as
|
||||
<a
|
||||
href="https://sourceforge.net/projects/vcxsrv/"
|
||||
target="_blank"
|
||||
>VcXsrv Windows X Server</a
|
||||
>. If you are using
|
||||
<a
|
||||
href="https://chocolatey.org/packages/vcxsrv"
|
||||
target="_blank"
|
||||
>chocolatey</a
|
||||
>, you can run <code>choco install vcxsrv</code>.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://dev.to/darksmile92/run-gui-app-in-linux-docker-container-on-windows-host-4kde"
|
||||
target="_blank"
|
||||
>Run GUI app in linux docker container on windows
|
||||
host</a
|
||||
>
|
||||
provides a great explanation of why you would want to do
|
||||
this and how to run your docker container. The post
|
||||
discusses how to set your IP address as the
|
||||
<code>DISPLAY</code> environment variable that is passed
|
||||
to docker via the
|
||||
<code>-e DISPLAY=$DISPLAY</code> command line argument.
|
||||
You can alternatively pass your IP address as an
|
||||
environment variable in your docker compose file. This
|
||||
is shown in
|
||||
<a
|
||||
href="https://github.com/MAAV-Software/ros-tutorial"
|
||||
target="_blank"
|
||||
>MAAV's ROS Tutorial</a
|
||||
>
|
||||
(reproduced below). The main settings to look at below
|
||||
are <code>environment</code> and
|
||||
<code>network_mode</code>. Set the
|
||||
<code>DISPLAY</code> environment variable to
|
||||
<code>[ip_address]:0.0</code> and set
|
||||
<code>network_mode: "host"</code>.
|
||||
</p>
|
||||
<pre>
|
||||
<code>
|
||||
# docker-compose.yml
|
||||
version: "2"
|
||||
|
||||
services:
|
||||
ros-demo:
|
||||
image: ros-demo
|
||||
privileged: true
|
||||
volumes:
|
||||
# Mount the current directory do everything in /tutorial within docker
|
||||
- .:/tutorial:rw
|
||||
environment:
|
||||
- DISPLAY=1.1.1.1:0.0 # Change 1.1.1.1 to your IP Address
|
||||
network_mode: "host"
|
||||
container_name: ros-demo
|
||||
command: "/bin/bash --init-file scripts/source-ros.sh" #source ros automatically
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>
|
||||
<a name="helpful_commands">Helpful Docker Commands</a>
|
||||
</h2>
|
||||
<ul>
|
||||
<li>System Prune to clear space on Docker Machine</li>
|
||||
<ul>
|
||||
<li><code>docker system prune --volumes</code></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2><a name="conclusion">Conclusion</a></h2>
|
||||
<p>
|
||||
Hopefully by this point, you have a better understanding
|
||||
of what docker is, why you might want to use it, and how
|
||||
to get a docker machine setup so you can build and run
|
||||
docker containers. If you have any questions or
|
||||
suggestions for improvement, feel free to
|
||||
<a href="./about.html#contact_me">contact me</a>.
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<!-- Nothing -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/footer.txt"
|
||||
></script>
|
||||
</footer>
|
||||
</html>
|
||||
15
src/common/footer.html
Normal file
15
src/common/footer.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<div class="container-fluid px-md-6">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<small>
|
||||
Copyright © 2019 Sravan Balaji under
|
||||
<a
|
||||
rel="license"
|
||||
href="https://docs.google.com/gview?url=https://github.com/balajsra/sravanbalaji.com/raw/master/LICENSE"
|
||||
target="_blank"
|
||||
>MIT License</a
|
||||
>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1 +1 @@
|
||||
document.write('<div class="container-fluid px-md-6"> <div class="row align-items-center"> <div class="col-md-12"> <small> Copyright © 2019 Sravan Balaji under <a rel="license" href="https://docs.google.com/gview?url=https://github.com/balajsra/balajsra.github.io/raw/master/LICENSE" target="_blank">MIT License</a> </small> </div> </div> </div>')
|
||||
document.write('<div class="container-fluid px-md-6"> <div class="row align-items-center"> <div class="col-md-12"> <small> Copyright © 2019 Sravan Balaji under <a rel="license" href="https://docs.google.com/gview?url=https://github.com/balajsra/sravanbalaji.com/raw/master/LICENSE" target="_blank" >MIT License</a > </small> </div> </div> </div> ')
|
||||
33
src/common/header.html
Normal file
33
src/common/header.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!--Required meta tags-->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="Sravan Balaji" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
||||
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
|
||||
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
|
||||
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" type="text/css" href="style/styles.css" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="././assets/branding/favicon.ico" type="image/x-icon" />
|
||||
1
src/common/header.txt
Normal file
1
src/common/header.txt
Normal file
@@ -0,0 +1 @@
|
||||
document.write('<!--Required meta tags--> <meta charset="utf-8" /> <meta name="author" content="Sravan Balaji" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script> <!-- Stylesheet --> <link rel="stylesheet" type="text/css" href="style/styles.css" /> <!-- Favicon --> <link rel="icon" href="././assets/branding/favicon.ico" type="image/x-icon" /> ')
|
||||
161
src/common/navbar.html
Normal file
161
src/common/navbar.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<nav class="navbar my-nav navbar-expand-md fixed-top">
|
||||
<!-- Brand -->
|
||||
<a class="navbar-brand" href="./index.html">
|
||||
<img
|
||||
src="./assets/branding/logo.png"
|
||||
alt="Icon"
|
||||
width="30px"
|
||||
height="30px"
|
||||
class="d-inline-block align-top"
|
||||
/>
|
||||
<img
|
||||
src="./assets/branding/name.png"
|
||||
alt="Name"
|
||||
height="30px"
|
||||
class="d-inline-block align-center"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<!-- Toggler/collapsibe Button -->
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#collapsibleNavbar"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Navbar links -->
|
||||
<div class="collapse navbar-collapse" id="collapsibleNavbar">
|
||||
<ul class="navbar-nav">
|
||||
<!-- About -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="./about.html"
|
||||
id="navbardrop"
|
||||
data-toggle="dropdown"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="./about.html#bio"> Bio </a>
|
||||
<a class="dropdown-item" href="./about.html#contact_me">
|
||||
Contact Me
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Portfolio -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="./portfolio.html"
|
||||
id="navbardrop"
|
||||
data-toggle="dropdown"
|
||||
>
|
||||
Portfolio
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="./portfolio.html#resume">
|
||||
Resume
|
||||
</a>
|
||||
<a class="dropdown-item" href="./portfolio.html#education">
|
||||
Education
|
||||
</a>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="./portfolio.html#professional_experience"
|
||||
>
|
||||
Professional Experience
|
||||
</a>
|
||||
<!-- <a class="dropdown-item" href="./portfolio.html#research">
|
||||
Research
|
||||
</a>
|
||||
<a class="dropdown-item" href="./portfolio.html#projects">
|
||||
Projects
|
||||
</a> -->
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Personal -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="./personal.html"
|
||||
id="navbardrop"
|
||||
data-toggle="dropdown"
|
||||
>
|
||||
Personal
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="./personal.html#software">
|
||||
Software
|
||||
</a>
|
||||
<a class="dropdown-item" href="./personal.html#hardware">
|
||||
Hardware
|
||||
</a>
|
||||
<a class="dropdown-item" href="./personal.html#video_games">
|
||||
Video Games
|
||||
</a>
|
||||
<a class="dropdown-item" href="./personal.html#podcasts">
|
||||
Podcasts
|
||||
</a>
|
||||
<a class="dropdown-item" href="./personal.html#music">
|
||||
Music
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Blog -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./blog.html"> Blog </a>
|
||||
</li>
|
||||
|
||||
<!-- Documentation -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="./documentation.html"
|
||||
id="navbardrop"
|
||||
data-toggle="dropdown"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="./documentation.html#introduction"
|
||||
>
|
||||
Introduction
|
||||
</a>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="./documentation.html#website_hosting"
|
||||
>
|
||||
Website Hosting
|
||||
</a>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="./documentation.html#web_design"
|
||||
>
|
||||
Web Design
|
||||
</a>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="./documentation.html#aesthetics"
|
||||
>
|
||||
Aesthetics
|
||||
</a>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="./documentation.html#inspiration"
|
||||
>
|
||||
Inspiration
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
1
src/common/navbar.txt
Normal file
1
src/common/navbar.txt
Normal file
@@ -0,0 +1 @@
|
||||
document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="./index.html"> <img src="./assets/branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top" /> <img src="./assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center" /> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" > <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./about.html" id="navbardrop" data-toggle="dropdown" > About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./about.html#bio"> Bio </a> <a class="dropdown-item" href="./about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./portfolio.html" id="navbardrop" data-toggle="dropdown" > Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="./portfolio.html#education"> Education </a> <a class="dropdown-item" href="./portfolio.html#professional_experience" > Professional Experience </a> <!-- <a class="dropdown-item" href="./portfolio.html#research"> Research </a> <a class="dropdown-item" href="./portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./personal.html" id="navbardrop" data-toggle="dropdown" > Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./personal.html#software"> Software </a> <a class="dropdown-item" href="./personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="./personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="./personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="./personal.html#music"> Music </a> </div> </li> <!-- Blog --> <li class="nav-item"> <a class="nav-link" href="./blog.html"> Blog </a> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./documentation.html" id="navbardrop" data-toggle="dropdown" > Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./documentation.html#introduction" > Introduction </a> <a class="dropdown-item" href="./documentation.html#website_hosting" > Website Hosting </a> <a class="dropdown-item" href="./documentation.html#web_design" > Web Design </a> <a class="dropdown-item" href="./documentation.html#aesthetics" > Aesthetics </a> <a class="dropdown-item" href="./documentation.html#inspiration" > Inspiration </a> </div> </li> </ul> </div> </nav> ')
|
||||
367
src/documentation.html
Normal file
367
src/documentation.html
Normal file
@@ -0,0 +1,367 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/header.txt"
|
||||
></script>
|
||||
<title>Documentation</title>
|
||||
</head>
|
||||
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/navbar.txt"
|
||||
></script>
|
||||
|
||||
<body>
|
||||
<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 align-items-center">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
My idea for this website started simply as a way for
|
||||
me to present my professional portfolio. As I
|
||||
started learning HTML and looking at other websites
|
||||
for inspiration, I decided to make it my own and add
|
||||
in the personal page with some of my recommendations
|
||||
and favorite things. Additionally, I noticed that
|
||||
very few people had any documentation on how/where
|
||||
they learned web design. While git repos were
|
||||
generally made public, it was hard for someone to
|
||||
understand what was going on if they weren't already
|
||||
familiar with the framework or language being used.
|
||||
Thus, I decided to create a documentation page which
|
||||
will hopefully help others who are interested in
|
||||
making their own website do so using what I have
|
||||
learned from friends I have talked to. It also helps
|
||||
me save some useful links in a way that others can
|
||||
see and understand the use case for.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This website was originally designed in HTML with
|
||||
some CSS for styling. However, I ran into issues
|
||||
with scalability and mobile browser support. See
|
||||
<a href="#web_design">Web Design</a> below for my
|
||||
current implementation method and some other cool
|
||||
things that I have discovered through my learning
|
||||
process that you may find interesting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
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 for $12 per year.
|
||||
</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 or create a personal site hosted by
|
||||
Google through the
|
||||
<a href="http://google.umich.edu/" target="_blank"
|
||||
>U-M Google collaboration</a
|
||||
>. I have not looked into the Google Sites option,
|
||||
but there is
|
||||
<a
|
||||
href="https://support.google.com/sites/"
|
||||
target="_blank"
|
||||
>documentation</a
|
||||
>
|
||||
available if you are interested. I originally opted
|
||||
to create my own site and host it on U of M Servers.
|
||||
Information on how to do this can be found on the
|
||||
<a
|
||||
href="http://www.umich.edu/~umweb/how-to/homepage.html"
|
||||
target="_blank"
|
||||
>UMICH Information and Technology Services
|
||||
website</a
|
||||
>. Some limitations I found with this were that I
|
||||
would have to manually upload my website files to
|
||||
the afs directory as the SFTP process described did
|
||||
not work for me. Additionally, the domain name for U
|
||||
of M hosted websites take the form
|
||||
<b>http://www-personal.umich.edu/~youruniqname/</b>
|
||||
which is clearly not ideal. You can sort of get
|
||||
around this by enabling
|
||||
<a
|
||||
href="https://support.google.com/domains/answer/4522141?hl=en"
|
||||
target="_blank"
|
||||
>web forwarding</a
|
||||
>
|
||||
on Google Domains. All this does is redirect traffic
|
||||
from your custom domain to the U of M domain. This
|
||||
might be ok for you, but I would prefer to have my
|
||||
website show up at the domain I purchased. Per
|
||||
<a href="https://vesikar.com/" target="_blank"
|
||||
>Yash Vesikar</a
|
||||
>'s recommendation, I looked into
|
||||
<a href="https://pages.github.com/" target="_blank"
|
||||
>GitHub Pages</a
|
||||
>
|
||||
to host my website directly from a GitHub
|
||||
repository. This comes with the added benefit that
|
||||
changes are live as soon as you push them to the
|
||||
<b>master</b> branch of your
|
||||
<b><username>.github.io</b>
|
||||
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 Domains for GitHub pages
|
||||
very useful.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
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>
|
||||
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 <i>responsive</i> classes that
|
||||
can auto adjust the size and placement of elements
|
||||
based on the screen size. It also provides an easy
|
||||
way to implement some cool features like the navbar,
|
||||
accordion-like cards, and a grid layout to easily
|
||||
place images and text around your website's
|
||||
viewport.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Reusing HTML</h2>
|
||||
<p>
|
||||
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>
|
||||
|
||||
<!---------------------------------
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<img
|
||||
class="img-fluid mx-auto d-block"
|
||||
src="./assets/branding/color_palette.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>
|
||||
I used the primary palette colors from
|
||||
<a
|
||||
href="https://brand.umich.edu/design-resources/colors/"
|
||||
target="_blank"
|
||||
>University of Michigan Design Resources</a
|
||||
>
|
||||
and generated a cool color scheme using
|
||||
<a
|
||||
href="https://coolors.co/00274c-ffcb05-30c5ff-e8eef2-343434"
|
||||
target="_blank"
|
||||
>coolors</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Logo</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<img
|
||||
class="img-fluid mx-auto d-block"
|
||||
src="./assets/branding/logo_with_name.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<img
|
||||
class="img-fluid mx-auto d-block"
|
||||
src="./assets/branding/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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
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">
|
||||
Content, design, and implementation were inspired by the
|
||||
following sources
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="http://www-personal.umich.edu/~prakashk/"
|
||||
target="_blank"
|
||||
>Prakash Kumar's Website</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vesikar.com/" target="_blank"
|
||||
>Yash Vesikar's Website</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://umich.edu/" target="_blank"
|
||||
>University of Michigan's Website</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/footer.txt"
|
||||
></script>
|
||||
</footer>
|
||||
</html>
|
||||
50
src/index.html
Normal file
50
src/index.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/header.txt"
|
||||
></script>
|
||||
<title>Sravan Balaji</title>
|
||||
</head>
|
||||
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/navbar.txt"
|
||||
></script>
|
||||
|
||||
<body>
|
||||
<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, please see the
|
||||
<a href="./documentation.html">documentation</a>
|
||||
page.<br /><br />
|
||||
|
||||
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/sravanbalaji.com"
|
||||
target="_blank"
|
||||
>GitHub</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/footer.txt"
|
||||
></script>
|
||||
</footer>
|
||||
</html>
|
||||
1589
src/personal.html
Normal file
1589
src/personal.html
Normal file
File diff suppressed because it is too large
Load Diff
1422
src/portfolio.html
Normal file
1422
src/portfolio.html
Normal file
File diff suppressed because it is too large
Load Diff
118
src/style/styles.css
Normal file
118
src/style/styles.css
Normal file
@@ -0,0 +1,118 @@
|
||||
/***********
|
||||
* General *
|
||||
***********/
|
||||
body {
|
||||
background-color: #e8eef2;
|
||||
padding-top: 65px;
|
||||
font-family: Arial, Verdana, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
/****************
|
||||
* Main Content *
|
||||
****************/
|
||||
.my-nav {
|
||||
background: #00274c;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.my-nav .nav-link {
|
||||
color: #ffcb05;
|
||||
}
|
||||
|
||||
.my-nav .nav-link:hover {
|
||||
color: #30c5ff;
|
||||
}
|
||||
|
||||
.my-nav .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 39, 76, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.my-nav .navbar-toggler {
|
||||
background: #ffcb05; /* pick your color */
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.container-fluid h1 {
|
||||
padding: 10px 10px;
|
||||
background: #00274c;
|
||||
color: #ffcb05;
|
||||
}
|
||||
|
||||
.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: -80px;
|
||||
height: 80px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
/* Side Padding */
|
||||
@media (min-width: 768px) {
|
||||
.px-md-6 {
|
||||
padding-left: 12.5% !important;
|
||||
padding-right: 12.5% !important;
|
||||
}
|
||||
}
|
||||
|
||||
#bio img {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
#contact_me img {
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
#software img {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
#hardware img {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
#video_games img {
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
#podcasts img {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
#resume iframe {
|
||||
width: 100%;
|
||||
height: 750px;
|
||||
}
|
||||
|
||||
#education img {
|
||||
max-height: 225px;
|
||||
}
|
||||
|
||||
#professional_experience img {
|
||||
max-height: 225px;
|
||||
}
|
||||
|
||||
#research img {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
#projects img {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.blog-cover img {
|
||||
max-height: 500px;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script language="javascript" type="text/javascript" src="../common/header.txt"></script>
|
||||
<title>About</title>
|
||||
|
||||
<style>
|
||||
.bio img {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.contact_me img {
|
||||
max-height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<script language="javascript" type="text/javascript" src="../common/navbar.txt"></script>
|
||||
|
||||
<body>
|
||||
<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>
|
||||
</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 will be working at <a href="https://rivian.com" target="_blank">Rivian</a> as an ADAS Controls Intern during the Summer 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="../web_pages/personal.html#video_games">video games</a>, <a href="../web_pages/personal.html#podcasts">podcasts</a>, <a href="../web_pages/personal.html#music">music</a>, and <a href="../web_pages/personal.html#software">software</a> on the <a href="../web_pages/personal.html">Personal</a> page. <br><br>
|
||||
|
||||
My favorite sports teams, in ranked order, are:
|
||||
<ol>
|
||||
<li>University of Michigan Sports</li>
|
||||
<li>Arsenal F.C. (Premier League)</li>
|
||||
<li>Detroit Sports Teams</li>
|
||||
</ol>
|
||||
</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 <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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
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>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script language="javascript" type="text/javascript" src="../common/header.txt"></script>
|
||||
<title>Blog</title>
|
||||
</head>
|
||||
|
||||
<script language="javascript" type="text/javascript" src="../common/navbar.txt"></script>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid px-md-6">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h1>Blog Posts</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="https://cdn.vox-cdn.com/thumbor/fbrTLtxuP2D29o8VJUaE-u3NKfU=/0x0:792x613/1200x800/filters:focal(300x237:426x363)/cdn.vox-cdn.com/uploads/chorus_image/image/59850273/Docker_logo_011.0.png" alt="Docker Whale">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title"><a href="../blog_posts/blog_docker.html">Getting Started with Docker</a></h4>
|
||||
<p class="card-text">A brief introduction to docker, how to use it, and what you can do with it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="" alt="">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title"></h4>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="" alt="">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title"></h4>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="" alt="">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title"></h4>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script language="javascript" type="text/javascript" src="../common/footer.txt"></script>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -1,177 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script language="javascript" type="text/javascript" src="../common/header.txt"></script>
|
||||
<title>Documentation</title>
|
||||
|
||||
<style>
|
||||
table td {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table img {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<script language="javascript" type="text/javascript" src="../common/navbar.txt"></script>
|
||||
|
||||
<body>
|
||||
<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 align-items-center">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
My idea for this website started simply as a way for me to present my professional portfolio. As I started learning HTML and looking at other websites for inspiration, I decided to make it my own and add in the personal page with some of my recommendations and favorite things. Additionally, I noticed that very few people had any documentation on how/where they learned web design. While git repos were generally made public, it was hard for someone to understand what was going on if they weren't already familiar with the framework or language being used. Thus, I decided to create a documentation page which will hopefully help others who are interested in making their own website do so using what I have learned from friends I have talked to. It also helps me save some useful links in a way that others can see and understand the use case for.<br><br>
|
||||
|
||||
This website was originally designed in HTML with some CSS for styling. However, I ran into issues with scalability and mobile browser support. See <a href="#web_design">Web Design</a> below for my current implementation method and some other cool things that I have discovered through my learning process that you may find interesting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
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 for $12 per year.
|
||||
</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 or create a personal site hosted by Google through the <a href="http://google.umich.edu/" target="_blank">U-M Google collaboration</a>. I have not looked into the Google Sites option, but there is <a href="https://support.google.com/sites/" target="_blank">documentation</a> available if you are interested. I originally opted to create my own site and host it on U of M Servers. Information on how to do this can be found on the <a href="http://www.umich.edu/~umweb/how-to/homepage.html" target="_blank">UMICH Information and Technology Services website</a>. Some limitations I found with this were that I would have to manually upload my website files to the afs directory as the SFTP process described did not work for me. Additionally, the domain name for U of M hosted websites take the form <b>http://www-personal.umich.edu/~youruniqname/</b> which is clearly not ideal. You can sort of get around this by enabling <a href="https://support.google.com/domains/answer/4522141?hl=en" target="_blank">web forwarding</a> on Google Domains. All this does is redirect traffic from your custom domain to the U of M domain. This might be ok for you, but I would prefer to have my website show up at the domain I purchased. Per <a href="https://vesikar.com/" target="_blank">Yash Vesikar</a>'s recommendation, I looked into <a href="https://pages.github.com/" target="_blank">GitHub Pages</a> to host my website directly from a GitHub repository. This comes with the added benefit that changes are live as soon as you push them to the <b>master</b> branch of your <b><username>.github.io</b> 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 Domains for GitHub pages very useful.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
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>
|
||||
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 <i>responsive</i> classes that can auto adjust the size and placement of elements based on the screen size. It also provides an easy way to implement some cool features like the navbar, accordion-like cards, and a grid layout to easily place images and text around your website's viewport.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Reusing HTML</h2>
|
||||
<p>
|
||||
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="../web_pages/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>
|
||||
|
||||
<!---------------------------------
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/branding/color_palette.png">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>
|
||||
I used the primary palette colors from <a href="https://brand.umich.edu/design-resources/colors/" target="_blank">University of Michigan Design Resources</a> and generated a cool color scheme using <a href="https://coolors.co/00274c-ffcb05-30c5ff-e8eef2-343434" target="_blank">coolors</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Logo</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/branding/logo_with_name.png">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/branding/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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
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>
|
||||
<li><a href="http://www-personal.umich.edu/~prakashk/" target="_blank">Prakash Kumar's Website</a></li>
|
||||
<li><a href="https://vesikar.com/" target="_blank">Yash Vesikar's Website</a></li>
|
||||
<li><a href="https://umich.edu/" target="_blank">University of Michigan's Website</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script language="javascript" type="text/javascript" src="../common/footer.txt"></script>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script language="javascript" type="text/javascript" src="../common/header.txt"></script>
|
||||
<title>Sravan Balaji</title>
|
||||
</head>
|
||||
|
||||
<script language="javascript" type="text/javascript" src="../common/navbar.txt"></script>
|
||||
|
||||
<body>
|
||||
<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, please see the <a href="../web_pages/documentation.html">documentation</a> page.<br><br>
|
||||
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script language="javascript" type="text/javascript" src="../common/footer.txt"></script>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -1,642 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script language="javascript" type="text/javascript" src="../common/header.txt"></script>
|
||||
<title>Personal</title>
|
||||
|
||||
<style>
|
||||
.software img {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.hardware img {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.video_games img {
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
.podcasts img {
|
||||
max-height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<script language="javascript" type="text/javascript" src="../common/navbar.txt"></script>
|
||||
|
||||
<body>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<a href="https://code.visualstudio.com/" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/programming/visual_studio_code.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<h2><a name="Visual Studio Code" href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a></h2>
|
||||
<h3>Platform: Windows, Linux, Mac</h3>
|
||||
<p>
|
||||
Visual Studio Code is currently my favorite editor for most programming applications I work on. I have previously tried <a href="https://www.sublimetext.com/" target="_blank">Sublime Text</a>, <a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a>, and <a href="https://www.vim.org/" target="_blank">Vim</a> as my primary text editors, but I was never fully satisfied with their functionality. When I first started using VS Code, I wasn't convinced by it either. It looked like just another text editor with no special features. Over time, Microsoft has done a great job of improving stability, speed, and functionality. The feature that finally made the decision for me was the community support for extensions. If you are a die hard Vim user for example, there's a Vim emulation extension that should ease the transition. I just love the overall aesthetic, auto-completion, and sheer number of features available. It runs on every platform you could conceivably develop on and it looks great! Don't plan on switching editors any time soon! Check out some of my favorite extensions and customization options below. If you are using <a href="https://chocolatey.org/packages/vscode" target="_blank">chocolatey</a>, you can install <a href="https://code.visualstudio.com/" target="_blank">VS Code</a> with <code>choco install vscode</code>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<h4>General Extensions</h4>
|
||||
<ul>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" target="_blank">Better Comments</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2" target="_blank">Bracket Pair Colorizer 2</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank">Code Spell Checker</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" target="_blank">GitLens</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank">Live Server</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack" target="_blank">Live Share Extension Pack</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=sdras.night-owl" target="_blank">Night Owl</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock" target="_blank">Peacock</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync" target="_blank">Settings Sync</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree" target="_blank">Todo Tree</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" target="_blank">vscode-icons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h4>Development Specific Extensions</h4>
|
||||
<ul>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=vsciot-vscode.vscode-arduino" target="_blank">Arduino</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools" target="_blank">C/C++</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank">CMake Tools</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker" target="_blank">Docker</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop" target="_blank">LaTeX Workshop</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=tecosaur.latex-utilities" target="_blank">LaTeX Utilities</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" target="_blank">Markdown All in One</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=Gimly81.matlab" target="_blank">Matlab</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-python.python" target="_blank">Python</a></li>
|
||||
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack" target="_blank">Remote Development</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Font</h4>
|
||||
<p>
|
||||
My current favorite font for development and general use is <a href="https://github.com/tonsky/FiraCode" target="_blank">FiraCode</a>. I love the style and ligatures for common character sequences such as comparisons and arrows (e.g. <code>>=, ->, and ==></code>). <br><br>
|
||||
Follow the <a href="https://github.com/tonsky/FiraCode/wiki/Installing" target="_blank">installation instructions</a> for your platform. If you are using <a href="https://chocolatey.org/packages/FiraCode-ttf" target="_blank">chocolatey</a>, you can install <a href="https://github.com/tonsky/FiraCode" target="_blank">FiraCode</a> with <code>choco install firacode-ttf</code>. <br><br>
|
||||
Then follow the <a href="https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions" target="_blank">VS Code instructions</a> to enable the font in the editor.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
This is my current favorite productivity app. I use it to keep track of things like homework, personal tasks, gift ideas, shopping lists, personal wish lists, upcoming video games, etc. I previously used <a href="https://trello.com/en-US" target="_blank">Trello</a> and <a href="https://keep.google.com/" target="_blank">Google Keep</a> to track tasks and random bits of information, but Notion has been a game changer. While the full experience is locked behind a paywall, you can get the paid tier for free if you have a university (.edu) email. If you haven't already, I would suggest giving it a try. Use this <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. If you are using <a href="https://chocolatey.org/packages/notion" target="_blank">chocolatey</a>, you can install <a href="https://www.notion.so/?r=542c7e5df78d4ff0bf5417dd397f26b8" target="_blank">Notion</a> with <code>choco install notion</code>.
|
||||
</p>
|
||||
</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>
|
||||
Have you ever wondered if there was an app to combine all of your messaging apps into 1? Well, Clatter is the answer. I used to keep multiple tabs and programs open so I could see all of my messaging services 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<a href="https://github.com/microsoft/terminal" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/software/logo-windows-terminal.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<h2><a name="Windows Terminal" href="https://github.com/microsoft/terminal" target="_blank">Windows Terminal</a></h2>
|
||||
<h3>Platform: Windows</h3>
|
||||
<p>
|
||||
If you have ever felt that the default windows terminal could use a refresh, you are in luck! Microsoft has been working on an updated version of Windows Terminal that provides tabs for Command Prompt, PowerShell, and WSL. It also offers a faster, better looking, windows terminal experience. At the time of writing, Windows Terminal is still in preview, but hopefully the full version will be released to everyone soon. If you are using <a href="https://chocolatey.org/packages/microsoft-windows-terminal" target="_blank">chocolatey</a>, you can install <a href="https://github.com/microsoft/terminal" target="_blank">Windows Terminal</a> with <code>choco install microsoft-windows-terminal</code>.
|
||||
</p>
|
||||
</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>
|
||||
Chocolatey is Windows's answer to <a href="https://brew.sh/" target="_blank">Homebrew</a>. It is essentially a package manager that allows you to easily track and upgrade/install/uninstall programs on Windows. You can easily install any programs you need via command prompt and avoid the tedious installation wizard. Just search chocolatey's list of packages, run terminal <b>as Administrator</b>, and run <code>choco install <i>package_name</i></code>.
|
||||
</p>
|
||||
</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>
|
||||
Wallpaper Engine is amongst my favorite programs on this list. If you have ever seen live wallpapers on phones and thought <i>can I get that on my PC?</i>, this is the program for you. At a regular price of $3.99, I cannot recommend this enough. Fair warning, this will drain your battery and RAM if you plan on running it at its highest settings with animations and other compute heavy settings. On my laptop, I changed the settings so the wallpaper is static when unplugged, but animated and reactive when plugged in. There are some memory saving options that can pause the program when another program is in full-screen and in-focus to improve battery life and performance.
|
||||
</p>
|
||||
</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>
|
||||
Fences is a desktop management software that allows you to group your desktop icons into <i>fences</i>. These fences can be rolled up so they are tucked away neatly into a corner, allowing you to view your desktop wallpaper while still being able to access your shortcuts when you need to. I really like Fences because it keeps my desktop clutter-free and I get to look at my amazing wallpaper (see <a href="#Wallpaper Engine">Wallpaper Engine</a>). I purchased Fences on <a href="https://store.steampowered.com/app/607380/Fences/" target="_blank">Steam</a>, but you 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>
|
||||
</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>
|
||||
I wasn't actually interested in Start10 when I first got it. I got it in a bundle with <a href="#Fences">Fences</a>. The gist of Start10 is that it allows you to customize the way your taskbar looks and the style of start menu you would like. The options are Windows 7, Windows 10, or Modern. Windows 7 has the classic
|
||||
search bar and list of applications. Windows 10 has the list of programs and start menu <i>tiles</i> introduced in Windows 10. Modern style is a bit of a hybrid. It has the application list from Windows 7, but the theme looks more like Windows 10. I personally prefer Windows 10 style because of the <i>tiles</i> that easily let you launch your favorite apps. I wouldn't necessarily recommend 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>
|
||||
</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>
|
||||
This is my preferred Podcast app. I have it on my Android phone and I use the Windows app on my desktop and laptop. I purchased the web app and android app prior to the new<i>subscription</i> model that Pocket Casts 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>
|
||||
</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>
|
||||
I discovered this on a MEGA PRO TIPS post on <a href="https://www.reddit.com/r/galaxys10/comments/bg2bb2/mega_pro_tips_make_the_most_of_your_s10_settings/?utm_source=share&utm_medium=web2x" target="_blank">r/galaxys10</a> (tip 29). All relevant information on what apps to download and a fix for a login issue can be found in the 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>
|
||||
</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>
|
||||
</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. You should also check out <a href="https://github.com/UWPCommunity/UWP-Companion" target="_blank">UWP Companion</a> so you can redirect YouTube links from your web browser to myTube.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<a href="https://www.microsoft.com/en-us/edge" 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.microsoft.com/en-us/edge" target="_blank">Microsoft Edge</a></h2>
|
||||
<h3>Platform: Windows, macOS, iOS, Android</h3>
|
||||
<p>
|
||||
I have been using the development build of the new Microsoft Edge since around June 2019 and have generally enjoyed it. It will be very familiar for those coming from Chrome since it is also based on <a href="https://www.chromium.org/" target="_blank">Chromium</a>. The main reason I like it is for its speed and reduced RAM usage. I haven't done any official tests comparing performance, but it subjectively seems more responsive. Additionally, most if not all Chrome extensions can be used on the new Edge, so that should help ease the transition for those who can't live without them. One of Microsoft's main selling points for 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 can put up with that for the performance improvement. Finally, you will want to change the default search engine to google unless you plan on using Bing for those <a href="https://www.microsoft.com/en-us/rewards" target="_blank">Microsoft Rewards</a> points. If you are using <a href="https://chocolatey.org/packages/microsoft-edge" target="_blank">chocolatey</a>, you can install <a href="https://www.microsoft.com/en-us/edge" target="_blank">Microsoft Edge</a> with <code>choco install microsoft-edge</code>.
|
||||
</p>
|
||||
</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>
|
||||
Your Phone from Microsoft is the answer to my long-term need for a way to interact with my phone from my PC (not you <a href="https://www.samsung.com/global/galaxy/apps/samsung-dex/" target="_blank">Samsung DeX</a>). At the time of writing, this isn't supported on all android devices, but it works with my Samsung Galaxy S10+. The main feature I use is viewing my phone's notifications on my PC, but they have also implemented Phone Screen which let's you interact with you phone via mouse and keyboard (or touch screen if you have it). If you have a supported PC and phone, you will need to download the <a href="https://play.google.com/store/apps/details?id=com.microsoft.appmanager&hl=en_US" target="_blank">Android App</a> 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>
|
||||
</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>
|
||||
I discovered Remote Fingerprint Unlock recently, but in my short time with it, I absolutely love it. When Google announced the <a href="https://store.google.com/us/product/google_pixelbook" target="_blank">Pixelbook</a> back in 2017, needless to say I was very disappointed to hear that the great hardware would be paired with Chrome OS. One feature I wished I had on Windows + Android was the ability to unlock the Pixelbook with an Android Phone. With this app, you can do just that. You'll need the <a href="https://play.google.com/store/apps/details?id=ro.andreimircius.remotefingerauth&hl=en_US" target="_blank">Android App</a> 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-<abbr title="Local-Area Network">LAN</abbr> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<a href="https://ditto-cp.sourceforge.io/" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/software/logo-ditto.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<h2><a name="Ditto Clipboard Manager" href="https://ditto-cp.sourceforge.io/" target="_blank">Ditto Clipboard Manager</a></h2>
|
||||
<h3>Platform: Windows</h3>
|
||||
<p>
|
||||
I first learned of Ditto from <a href="https://nickjanetakis.com/" target="_blank">Nick Janetakis</a>'s post on <a href="https://nickjanetakis.com/blog/boosting-software-developer-productivity-with-a-clipboard-manager" target="_blank">Boosting Software Developer Productivity with a Clipboard Manager</a>. I used to struggle with the limitation of only having one item copied in my clipboard at a time, but Ditto provides a light and simple solution. You can copy as many things as you want with <code>ctrl+c</code> as usual. When you want to paste, simply open Ditto and select the item you want to paste! If you are using <a href="https://chocolatey.org/packages/ditto" target="_blank">chocolatey</a>, you can install <a href="https://ditto-cp.sourceforge.io/" target="_blank">Ditto</a> with <code>choco install ditto</code>.
|
||||
</p>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
<p>
|
||||
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 <abbr title="Computer Aided Design">CAD</abbr> software and for general programming applications. 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. 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 not great.
|
||||
</p>
|
||||
</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>
|
||||
<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 I will occasionally use. If you do end up going with the Surface Go, make sure you <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>
|
||||
</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 to switch to a Galaxy after the Pixel 3 was a bit of a disappointment and the Pixel 4 wouldn't come out until later in the year. Other phones I considered, but ultimately decided against were the OnePlus 7 Pro and Samsung Galaxy Note 9. In retrospect, 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>
|
||||
</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 Android wear devices, I didn't feel that another compelling watch on the level of the Apple Watch for iPhones existed. Thus, I decided to switch to the Galaxy watch. My primary impressions of Tizen OS vs Android Wear is the lack of supported apps. I have found that this really isn't that big of a deal as it has great media controls for your phone and the amazing rotating bezel interface. This is by far the superior input method for watches and I feel that 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>
|
||||
</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+. My one grip is the battery life. Samsung 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>
|
||||
</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 myself before the XM3's came out, 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>
|
||||
</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>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<p><ul>
|
||||
<li>God of War</li>
|
||||
<li>Marvel's Spider-Man</li>
|
||||
<li>Bloodborne</li>
|
||||
</ul></p>
|
||||
</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">
|
||||
<p><ul>
|
||||
<li>The Witcher III: Wild Hunt</li>
|
||||
<li>The Elder Scrolls V: Skyrim</li>
|
||||
<li>Dark Souls 1 (Remastered) & 3</li>
|
||||
<li>Borderlands 2</li>
|
||||
<li>Star Wars: Jedi Fallen Order</li>
|
||||
<li>Minecraft</li>
|
||||
<li>Red Dead Redemption 2</li>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<a href="https://pca.st/E3n6" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/podcasts/artificial-intelligence.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<h2><a href="https://pca.st/E3n6" target="_blank">AI Podcast (Lex Fridman)</a></h2>
|
||||
<p>
|
||||
As an aspiring roboticist, I'm very interested in the state of the art in artificial intelligence, machine learning, and robotics. The AI podcast, hosted by Lex Fridman, is a series of conversations with prominent members in the field of AI, science, and technology at MIT and in industry.
|
||||
</p>
|
||||
</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. Bill Simmons grew up in the New England area and supports all of the Boston teams, although he currently lives in Los Angeles. 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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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' opinions on world events.
|
||||
</p>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
@@ -1,758 +0,0 @@
|
||||
<!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: 225px;
|
||||
}
|
||||
|
||||
.professional_experience img {
|
||||
max-height: 225px;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<!-- UNIVERSITY OF MICHIGAN -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2><b>University of Michigan</b> (Ann Arbor, MI)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- BSE MECHANICAL ENGINEERING -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<a href="https://me.engin.umich.edu/" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/education/logo-mechanical-engineering.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h3>B.S.E. in Mechanical Engineering</h3>
|
||||
<h5><i>September 2016 - December 2020</i></h5>
|
||||
<p>
|
||||
<b>GPA:</b> 3.757<br>
|
||||
<b>Focus:</b> Controls<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BSE COMPUTER SCIENCE -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<a href="https://cse.engin.umich.edu/" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/education/logo-computer-science.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h3>B.S.E. in Computer Science</h3>
|
||||
<h5><i>September 2016 - December 2020</i></h5>
|
||||
<p>
|
||||
<b>GPA:</b> 3.757<br>
|
||||
<b>Focus:</b> Intelligent Systems<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div id="undergrad_coursework">
|
||||
<div class="card">
|
||||
<!-- 1. FALL 2016 -->
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#fall2016">
|
||||
<b>1. Fall 2016</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="fall2016" class="collapse" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>ALA 105</b> - Digital Research: Critical Concepts & Strategies</li>
|
||||
<li><b>ENGR 151</b> - Accelerated Introduction to Computers and Programming</li>
|
||||
<li><b>MATH 216</b> - Introduction to Differential Equations</li>
|
||||
<li><b>SOC 100</b> - Introduction to Sociology</li>
|
||||
</ul></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. WINTER 2017 -->
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#winter2017">
|
||||
<b>2. Winter 2017</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="winter2017" class="collapse" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>CLCIV 385</b> - Greek Mythology</li>
|
||||
<li><b>EECS 203</b> - Discrete Mathematics</li>
|
||||
<li><b>ENGR 100</b> - Introduction to Engineering: Solar Energy and Self-Powered Wireless Systems</li>
|
||||
<li><b>MECHENG 211</b> - 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">
|
||||
<b>3. Fall 2017</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="fall2017" class="collapse" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>EECS 280</b> - Programming and Introductory Data Structures</li>
|
||||
<li><b>MECHENG 235</b> - Thermodynamics I</li>
|
||||
<li><b>MECHENG 240</b> - Introduction to Dynamics and Vibrations</li>
|
||||
<li><b>MECHENG 250</b> - 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">
|
||||
<b>4. Winter 2018</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="winter2018" class="collapse" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>EECS 281</b> - Data Structures and Algorithms</li>
|
||||
<li><b>EECS 314</b> - Electrical Circuits, Systems, and Applications</li>
|
||||
<li><b>EECS 370</b> - Introduction to Computer Organization</li>
|
||||
<li><b>MECHENG 320</b> - Fluid Mechanics I</li>
|
||||
</ul></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. FALL 2018 -->
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#fall2018">
|
||||
<b>5. Fall 2018</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="fall2018" class="collapse" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>MECHENG 350</b> - Design and Manufacturing II</li>
|
||||
<li><b>MECHENG 360</b> - Modeling, Analysis, and Control of Dynamic Systems</li>
|
||||
<li><b>MECHENG 382</b> - 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">
|
||||
<b>6. Winter 2019</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="winter2019" class="collapse" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>EECS 201</b> - Computer Science Pragmatics</li>
|
||||
<li><b>EECS 376</b> - Foundations of Computer Science</li>
|
||||
<li><b>EECS 442</b> - Computer Vision</li>
|
||||
<li><b>MECHENG 395</b> - Laboratory I</li>
|
||||
<li><b>STATS 412</b> - 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">
|
||||
<b>7. Fall 2019</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="fall2019" class="collapse" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>EECS 492</b> - Introduction to Artificial Intelligence</li>
|
||||
<li><b>MECHENG 335</b> - Heat Transfer</li>
|
||||
<li><b>MECHENG 450</b> - Design and Manufacturing III</li>
|
||||
<li><b>MECHENG 461</b> - Automatic Control</li>
|
||||
</ul></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 8. WINTER 2020 -->
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#winter2020">
|
||||
<b>8. Winter 2020</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="winter2020" class="collapse" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>EECS 467</b> - Autonomous Robotics</li>
|
||||
<li><b>EECS 496</b> - Major Design Experience Professionalism</li>
|
||||
<li><b>MECHENG 561</b> - Design of Digital Control Systems</li>
|
||||
<li><b>ROB 530</b> - 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">
|
||||
<b>9. Fall 2020</b> (Upcoming)
|
||||
</a>
|
||||
</div>
|
||||
<div id="fall2020" class="collapse show" data-parent="#undergrad_coursework">
|
||||
<div class="card-body">
|
||||
<p><ul>
|
||||
<li><b>EECS 445</b> - Introduction to Machine Learning</li>
|
||||
<li><b>EECS 493</b> - User Interface Development</li>
|
||||
<li><b>MECHENG 495</b> - Laboratory II</li>
|
||||
<li><b>ROB 511</b> - Robot Operating Systems</li>
|
||||
</ul></p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- RIVIAN -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2><b>Rivian</b> (Irvine, CA)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<a href="https://rivian.com/" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/professional_experience/logo-rivian.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3>ADAS Controls Intern</h3>
|
||||
<h5><i>June 2020 - August 2020</i></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-6">
|
||||
<div id="rivian_2">
|
||||
<div class="card">
|
||||
BILL OF MATERIALS EXCEL MACRO
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#bill_of_materials_excel_macro">
|
||||
<b>Bill of Materials Excel Macro</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="bill_of_materials_excel_macro" class="collapse" data-parent="#rivian_2">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
INTERNAL WEBSITE
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#internal_website">
|
||||
<b>Internal Website</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="internal_website" class="collapse" data-parent="#rivian_2">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
SERVICE DESK
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#service_desk">
|
||||
<b>Service Desk</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="service_desk" class="collapse" data-parent="#rivian_2">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- HUGHES NETWORK SYSTEMS -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2><b>Hughes Network Systems</b> (San Diego, CA)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<a href="https://www.hughes.com//" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/professional_experience/logo-hughes.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h3>Software Development Intern</h3>
|
||||
<h5><i>May 2019 - August 2019</i></h5>
|
||||
<p>
|
||||
<b>Hard Skills:</b>
|
||||
<ul>
|
||||
<li>Embedded Programming in C</li>
|
||||
<li>C# and .NET Framework</li>
|
||||
<ul>
|
||||
<li>GUI Design</li>
|
||||
<li><abbr title="REpresentational State Transfer">REST</abbr> Requests & <abbr title="File Transfer Protocol">FTP</abbr></li>
|
||||
</ul>
|
||||
<li>Network Communication</li>
|
||||
<ul>
|
||||
<li><abbr title="Transmission Control Protocol">TCP</abbr> and <abbr title="User Datagram Protocol">UDP</abbr></li>
|
||||
<li><a href="http://www.mqtt.org/new/wp-content/uploads/2009/06/MQTT-SN_spec_v1.2.pdf" target="_blank"><abbr title="MQ Telemetry Transport for Sensor Networks">MQTT-SN</abbr></a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<b>Soft Skills:</b>
|
||||
<ul>
|
||||
<li>Public Presentation</li>
|
||||
<li>Design Documentation</li>
|
||||
<li>Professional Communication</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div id="hughes">
|
||||
<div class="card">
|
||||
<!-- MOBILE TERMINAL CONFIGURATION TOOL -->
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#mobile_terminal_configuration_tool">
|
||||
<b>Mobile Terminal Configuration Tool</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="mobile_terminal_configuration_tool" class="collapse" data-parent="#hughes">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
Hughes sells mobile satellite terminals that provide internet and phone service to customers. Some customers who purchased terminals in bulk (~1000) required non-default settings. The configuration process of manually changing settings on each terminal was tedious and error-prone.
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
My job was to develop a Windows 7 / 10 program that would automate the terminal configuration process.
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
I designed and developed a GUI program in C# that detects which terminal model is connected and uses the available interface (<abbr title="REpresentational State Transfer">REST</abbr> <abbr title="Application Programming Interface">API</abbr> or <abbr title="File Transfer Protocol">FTP</abbr>) to copy the configuration of the <i>master</i> terminal. This can then be used to automatically configure subsequent terminals.
|
||||
</p>
|
||||
|
||||
<p><b>Customer Feedback</b></p>
|
||||
<blockquote class="blockquote text-center">
|
||||
<p class="mb-0">"Btw the tool you sent us is helping a lot. Thank you so much."</p>
|
||||
<footer class="blockquote-footer">Hughes Customer</footer>
|
||||
</blockquote>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOCATION BASED SERVICES -->
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#location_based_services">
|
||||
<b>Location Based Services</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="location_based_services" class="collapse" data-parent="#hughes">
|
||||
<div class="card-body">
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
Hughes mobile terminals allow customers to have internet and phone access in remote areas via a satellite connection. Some customers may find value in a GPS feature built into the terminal. In this situation, the terminal would send GPS coordinates to a server at regular intervals of time, distance, and/or velocity as configured by the end-user.
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
My task was to investigate a way to minimize the data packet size of GPS coordinates and to update the terminal's software to send these data packets to a server configured by the end-user.
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
This project was assigned to me after the completion of my previous project, which was intended to last the entire internship. I was able to determine that <a href="http://www.mqtt.org/new/wp-content/uploads/2009/06/MQTT-SN_spec_v1.2.pdf" target="_blank"><abbr title="MQ Telemetry Transport for Sensor Networks">MQTT-SN</abbr></a> was a good option as it simply sends a data packet to a server without checking for acknowledgement and the packet header is sufficiently small. I successfully implemented the packet structure and delivery to the server on the terminal software written in C. However, I was unable to get the server to recognize that it received the packet in my remaining time at Hughes. Using <a href="https://www.wireshark.org" target="_blank">Wireshark</a>, I confirmed the reception of the packet, but none of the open-source <a href="http://www.mqtt.org/new/wp-content/uploads/2009/06/MQTT-SN_spec_v1.2.pdf" target="_blank"><abbr title="MQ Telemetry Transport for Sensor Networks">MQTT-SN</abbr></a> brokers I used worked.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIVIAN -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2><b>Rivian</b> (Plymouth, MI)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<a href="https://rivian.com/" target="_blank">
|
||||
<img class="img-fluid mx-auto d-block" src="../assets/professional_experience/logo-rivian.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3>Business Technology Intern</h3>
|
||||
<h5><i>May 2018 - December 2018</i></h5>
|
||||
<p>
|
||||
<b>Hard Skills:</b>
|
||||
<ul>
|
||||
<li>Python and Django Web Framework</li>
|
||||
<li><abbr title="REpresentational State Transfer">REST</abbr> <abbr title="Application Programming Interface">API</abbr></li>
|
||||
<li>Excel <abbr title="Visual Basic for Applications">VBA</abbr></li>
|
||||
<li><abbr title="Bill of Materials">BOM</abbr> Analysis</li>
|
||||
<li>Atlassian Products - Jira, Confluence, BitBucket</li>
|
||||
</ul>
|
||||
|
||||
<b>Soft Skills:</b>
|
||||
<ul>
|
||||
<li>Stakeholder Interviews</li>
|
||||
<li>Design Documentation</li>
|
||||
<li>Professional Communication</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-6">
|
||||
<div id="rivian_2">
|
||||
<div class="card">
|
||||
BILL OF MATERIALS EXCEL MACRO
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#bill_of_materials_excel_macro">
|
||||
<b>Bill of Materials Excel Macro</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="bill_of_materials_excel_macro" class="collapse" data-parent="#rivian_2">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
INTERNAL WEBSITE
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#internal_website">
|
||||
<b>Internal Website</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="internal_website" class="collapse" data-parent="#rivian_2">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
SERVICE DESK
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#service_desk">
|
||||
<b>Service Desk</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="service_desk" class="collapse" data-parent="#rivian_2">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<!-- Blank Column -->
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3>Vehicle Integration Intern</h3>
|
||||
<h5><i>June 2017 - August 2017</i></h5>
|
||||
<p>
|
||||
<b>Hard Skills:</b>
|
||||
<ul>
|
||||
<li>Java</li>
|
||||
<li>Data Analysis</li>
|
||||
<li>Systems Engineering / Requirements Management</li>
|
||||
<li>IBM Rational DOORS</li>
|
||||
</ul>
|
||||
|
||||
<b>Soft Skills:</b>
|
||||
<ul>
|
||||
<li>Design Documentation</li>
|
||||
<li>Professional Communication</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-6">
|
||||
<div id="rivian_1">
|
||||
<div class="card">
|
||||
SIMULATION DATA Visualizer
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#simulation_data_visualizer">
|
||||
<b>Simulation Data Visualizer</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="simulation_data_visualizer" class="collapse" data-parent="#rivian_1">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Requirements Management
|
||||
<div class="card-header">
|
||||
<a class="card-link" data-toggle="collapse" href="#requirements_management">
|
||||
<b>Requirements Management</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="requirements_management" class="collapse" data-parent="#rivian_1">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<p><b>Problem</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Task</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p><b>Result</b></p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
Reference in New Issue
Block a user