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

MITRE Internship Description & Bio Update

Browse Source 
- Prettier (emacs) formatting of html files
- Update bio for post-summer 2021
- Add full-time job at MITRE for 2022 in bio
- Change Fall 2021 semester to current in portfolio
- Add description of MITRE Graduate Navigation Internship to portfolio
This commit is contained in:
Sravan Balaji
2021-09-16 22:35:04 -04:00
parent f9f6b9331c
commit bcca7464c3
9 changed files with 4324 additions and 4699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
src/about.html
View File

@@ -1,184 +1,175 @@
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>About</title>
</head>
<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>
<script
language="javascript"
type="text/javascript"
src="common/navbar.txt"
></script>
<body>
<div class="container-fluid px-md-6">
<!---------------------------------
<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 graduated from the
<a href="https://umich.edu" target="_blank"
>University of Michigan</a
>
with 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
>
in December 2020. He was admitted to the
<a href="https://umich.edu" target="_blank"
>University of Michigan</a
>
<a
href="https://robotics.umich.edu/"
target="_blank"
>Robotics Institute</a
>
for the Winter 2021 semester where he is currently
pursuing an M.S. in Robotics with an expected
graduation of December 2021.
</p>
<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 graduated from the
<a href="https://umich.edu" target="_blank"
>University of Michigan</a
>
with 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
>
in December 2020. He was admitted to the
<a href="https://umich.edu" target="_blank"
>University of Michigan</a
>
<a href="https://robotics.umich.edu/" target="_blank"
>Robotics Institute</a
>
for the Winter 2021 semester where he is currently pursuing an
M.S. in Robotics with an expected graduation of December 2021.
</p>
<p>
Sravan is currently working as a Graduate Navigation Intern at
<a href="https://www.mitre.org/" target="_blank"
>MITRE</a
>
for summer 2021. 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.
</p>
<p>
Sravan worked as a Graduate Navigation Intern at
<a href="https://www.mitre.org/" target="_blank">MITRE</a>
during summer 2021. 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. He will be
returning to
<a href="https://www.mitre.org/" target="_blank">MITRE</a>
as an Associate Autonomous Systems Engineer in late January 2022.
</p>
<p>
Sravan's professional and academic interests are in
controls, motion planning, robotic perception &
manipulation, autonomous & connected vehicles,
software development, 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. Finally, check
out my YouTube channel if you are interested in some
of the projects I have worked on.
</p>
</div>
</div>
</div>
<p>
Sravan's professional and academic interests are in controls,
motion planning, robotic perception & manipulation, autonomous &
connected vehicles, software development, 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. Finally, check out my YouTube channel if you are
interested in some of the projects I have worked on.
</p>
</div>
</div>
</div>
<!---------------------------------
<!---------------------------------
CONTACT ME
----------------------------------->
<div id="contact_me">
<div class="row align-items-center">
<div class="col-md-3 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><br /><b>Email:</b> balajsra@umich.edu</p>
</div>
<div class="col-md-3 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><br /><b>LinkedIn:</b> sravan-balaji</p>
</div>
<div class="col-md-3 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><br /><b>GitHub:</b> balajsra</p>
</div>
<div class="col-md-3 text-center">
<a
href="https://www.youtube.com/channel/UC-xFJ4IKdogbpoQdQf2mgaA"
target="_blank"
>
<img
class="img-fluid mx-auto d-block"
alt="YouTube"
src="./assets/about/youtube.png"
/>
</a>
<p><br /><b>YouTube:</b> Sravan Balaji</p>
</div>
</div>
</div>
</div>
</body>
<div id="contact_me">
<div class="row align-items-center">
<div class="col-md-3 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><br /><b>Email:</b> balajsra@umich.edu</p>
</div>
<div class="col-md-3 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><br /><b>LinkedIn:</b> sravan-balaji</p>
</div>
<div class="col-md-3 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><br /><b>GitHub:</b> balajsra</p>
</div>
<div class="col-md-3 text-center">
<a
href="https://www.youtube.com/channel/UC-xFJ4IKdogbpoQdQf2mgaA"
target="_blank"
>
<img
class="img-fluid mx-auto d-block"
alt="YouTube"
src="./assets/about/youtube.png"
/>
</a>
<p><br /><b>YouTube:</b> Sravan Balaji</p>
</div>
</div>
</div>
</div>
</body>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
</html>

175
src/blog.html
View File

@@ -1,96 +1,91 @@
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>Blog</title>
</head>
<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>
<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="./assets/hardware/oryx-pro-7.png"
alt="System76 Oryx Pro"
/>
<div class="card-body">
<h4 class="card-title">
<a href="blog_oryx_pro_review.html"
>System76 Oryx Pro 7 Review</a
>
</h4>
<p class="card-text">
My review of the System76 Oryx Pro 7.
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img
class="card-img-top"
src="./assets/blog_posts/windows_to_linux/cover_windows_to_linux.jpeg"
alt="Windows to Linux"
/>
<div class="card-body">
<h4 class="card-title">
<a href="blog_windows_to_linux.html"
>Switching from Windows to Linux</a
>
</h4>
<p class="card-text">
A reflection on my journey from Windows to
Linux.
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img
class="card-img-top"
src="./assets/blog_posts/Docker/cover_docker.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>
</div>
</body>
<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="./assets/hardware/oryx-pro-7.png"
alt="System76 Oryx Pro"
/>
<div class="card-body">
<h4 class="card-title">
<a href="blog_oryx_pro_review.html"
>System76 Oryx Pro 7 Review</a
>
</h4>
<p class="card-text">My review of the System76 Oryx Pro 7.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img
class="card-img-top"
src="./assets/blog_posts/windows_to_linux/cover_windows_to_linux.jpeg"
alt="Windows to Linux"
/>
<div class="card-body">
<h4 class="card-title">
<a href="blog_windows_to_linux.html"
>Switching from Windows to Linux</a
>
</h4>
<p class="card-text">
A reflection on my journey from Windows to Linux.
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img
class="card-img-top"
src="./assets/blog_posts/Docker/cover_docker.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>
</div>
</body>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
</html>

683
src/blog_docker.html
View File

@@ -1,345 +1,321 @@
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>Docker</title>
</head>
<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>
<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>
<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>
<!-- Author & Date/Time -->
<p class="lead">Updated on March 18, 2020</p>
<!-- Preview Image -->
<div class="blog-cover">
<img
class="img-fluid rounded"
src="./assets/blog_posts/Docker/cover_docker.png"
alt=""
/>
</div>
<!-- Preview Image -->
<div class="blog-cover">
<img
class="img-fluid rounded"
src="./assets/blog_posts/Docker/cover_docker.png"
alt=""
/>
</div>
<hr />
<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. When I previously used
Windows 10 as my daily driver, 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>
<!-- 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. When I previously used Windows 10 as my daily driver, 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>
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item"
src="https://www.youtube-nocookie.com/embed/YFl2mCHdv24"
allowfullscreen
></iframe>
</div>
<hr />
<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. For a computer
with Windows 10 Home, you would 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>
<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. For a computer with Windows 10 Home, you would
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>
<li>Windows</li>
<ul>
<li>
<a
href="https://docs.docker.com/docker-for-windows/install/"
target="_blank"
>Docker Desktop for Windows</a
>
</li>
<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://docs.docker.com/toolbox/toolbox_install_windows/"
target="_blank"
>Docker Toolbox for Windows</a
>
(Legacy)
</li>
</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>
<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>
<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>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>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>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>
<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 />
<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>
<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 />
<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
>.
</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>
<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
>.
</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 class="yml">
# docker-compose.yml
version: "2"
@@ -359,44 +335,43 @@ ros-demo:
</code>
</pre>
<hr />
<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>
<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 />
<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>
<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>
<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>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
</html>

912
src/blog_oryx_pro_review.html
View File

@@ -1,511 +1,457 @@
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>System76 Oryx Pro 7 Review</title>
</head>
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>System76 Oryx Pro 7 Review</title>
</head>
<script
language="javascript"
type="text/javascript"
src="common/navbar.txt"
></script>
<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>System76 Oryx Pro 7 Review</h1>
<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>System76 Oryx Pro 7 Review</h1>
<!-- Author & Date/Time -->
<p class="lead">Updated on August 27, 2021</p>
<!-- Author & Date/Time -->
<p class="lead">Updated on August 27, 2021</p>
<!-- Preview Image -->
<div class="blog-cover">
<img
class="img-fluid rounded"
src="./assets/hardware/oryx-pro-7.png"
alt="System76 Oryx Pro"
/>
</div>
<!-- Preview Image -->
<div class="blog-cover">
<img
class="img-fluid rounded"
src="./assets/hardware/oryx-pro-7.png"
alt="System76 Oryx Pro"
/>
</div>
<hr />
<hr />
<!-- Post Content -->
<h2>
<a name="system-specifications"
>System Specifications</a
>
</h2>
<!-- Post Content -->
<h2>
<a name="system-specifications">System Specifications</a>
</h2>
<h3>Oryx Pro 7 Configuration</h3>
<p>
See the
<a
href="https://tech-docs.system76.com/models/oryp7/README.html"
target="_blank"
>System76 Technical Documentation</a
>
for more information.
</p>
<ul>
<li>
<b>OS</b>: Pop!_OS 20.10 (64-bit) with full
disk-encryption
</li>
<li>
<b>CPU</b>: 5 GHz i7-10870H (2.2 up to 5.0 GHz -
16MB Cache - 8 Cores -16 Threads)
</li>
<li><b>GPU</b>: 8 GB RTX 3070 w/ 5888 CUDA Cores</li>
<li>
<b>Memory</b>: 8 GB Single Channel DDR4 at 2933 MHz
</li>
<li>
<b>Storage</b>: 240 GB Seq Read: 540 MB/s, Seq
Write: 465 MB/s
</li>
<li><b>Display</b>: 15.6" 1920x1080@144Hz LCD</li>
<li>
<b>Warranty</b>: 2 Year Limited Parts and Labor
Warranty
</li>
<li>
<b>Link</b>:
<a
href="https://system76.com/laptops/oryx"
target="_blank"
>System76 Website</a
>
</li>
<li><b>Price</b>: $2,209.47</li>
</ul>
<h3>Oryx Pro 7 Configuration</h3>
<p>
See the
<a
href="https://tech-docs.system76.com/models/oryp7/README.html"
target="_blank"
>System76 Technical Documentation</a
>
for more information.
</p>
<ul>
<li><b>OS</b>: Pop!_OS 20.10 (64-bit) with full disk-encryption</li>
<li>
<b>CPU</b>: 5 GHz i7-10870H (2.2 up to 5.0 GHz - 16MB Cache - 8
Cores -16 Threads)
</li>
<li><b>GPU</b>: 8 GB RTX 3070 w/ 5888 CUDA Cores</li>
<li><b>Memory</b>: 8 GB Single Channel DDR4 at 2933 MHz</li>
<li>
<b>Storage</b>: 240 GB Seq Read: 540 MB/s, Seq Write: 465 MB/s
</li>
<li><b>Display</b>: 15.6" 1920x1080@144Hz LCD</li>
<li><b>Warranty</b>: 2 Year Limited Parts and Labor Warranty</li>
<li>
<b>Link</b>:
<a href="https://system76.com/laptops/oryx" target="_blank"
>System76 Website</a
>
</li>
<li><b>Price</b>: $2,209.47</li>
</ul>
<h3>Additional Parts</h3>
<h3>Additional Parts</h3>
<h4>Storage</h4>
<ul>
<li><b>Model</b>: Samsung 970 EVO Plus M.2 NVMe SSD</li>
<li><b>Size</b>: 2TB</li>
<li>
<b>Link</b>:
<a
href="https://www.amazon.com/gp/product/B07MFZXR1B/ref=ppx_od_dt_b_asin_title_s01?ie=UTF8&psc=1"
target="_blank"
>Amazon</a
>
</li>
<li><b>Price</b>: $319.99</li>
</ul>
<h4>Storage</h4>
<ul>
<li><b>Model</b>: Samsung 970 EVO Plus M.2 NVMe SSD</li>
<li><b>Size</b>: 2TB</li>
<li>
<b>Link</b>:
<a
href="https://www.amazon.com/gp/product/B07MFZXR1B/ref=ppx_od_dt_b_asin_title_s01?ie=UTF8&psc=1"
target="_blank"
>Amazon</a
>
</li>
<li><b>Price</b>: $319.99</li>
</ul>
<h4>RAM</h4>
<ul>
<li>
<b>Model</b>: HyperX Impact DDR4 CL17 SODIMM Memory
(Kit of 2)
</li>
<li><b>Size</b>: 32GB</li>
<li><b>Speed</b>: 2933MHz</li>
<li>
<b>Link</b>:
<a
href="https://www.amazon.com/gp/product/B07BGLBZBK/ref=ppx_od_dt_b_asin_title_s00?ie=UTF8&psc=1"
target="_blank"
>Amazon</a
>
</li>
<li><b>Price</b>: $219.00</li>
</ul>
<h4>RAM</h4>
<ul>
<li>
<b>Model</b>: HyperX Impact DDR4 CL17 SODIMM Memory (Kit of 2)
</li>
<li><b>Size</b>: 32GB</li>
<li><b>Speed</b>: 2933MHz</li>
<li>
<b>Link</b>:
<a
href="https://www.amazon.com/gp/product/B07BGLBZBK/ref=ppx_od_dt_b_asin_title_s00?ie=UTF8&psc=1"
target="_blank"
>Amazon</a
>
</li>
<li><b>Price</b>: $219.00</li>
</ul>
<hr />
<hr />
<h2><a name="upgradeability">Upgradeability</a></h2>
<p>
I ended up purchasing the Oryx Pro 7 with base memory
and storage, then upgraded these components with parts I
bought from Amazon. The upgrade experience was pretty
good. Removing the bottom cover just involves removing a
bunch of screws, nothing too difficult. I had a little
trouble with this because one of the screws seemed to
get stuck, but I eventually got it out. The
<a
href="https://tech-docs.system76.com/models/oryp7/repairs.html"
target="_blank"
>Parts & Repairs guide</a
>
was very clear and helpful in this regard.
</p>
<h2><a name="upgradeability">Upgradeability</a></h2>
<p>
I ended up purchasing the Oryx Pro 7 with base memory and storage,
then upgraded these components with parts I bought from Amazon. The
upgrade experience was pretty good. Removing the bottom cover just
involves removing a bunch of screws, nothing too difficult. I had a
little trouble with this because one of the screws seemed to get
stuck, but I eventually got it out. The
<a
href="https://tech-docs.system76.com/models/oryp7/repairs.html"
target="_blank"
>Parts & Repairs guide</a
>
was very clear and helpful in this regard.
</p>
<hr />
<hr />
<h2>
<a name="experimenting-with-linux-distros"
>Experimenting with Linux Distros</a
>
</h2>
<p>
Regarding OS, I initially tried to install Arch Linux
with dwm like I had on my desktop, but found that
switching between the graphics modes (i.e. Integrated,
Hybrid, and Discrete) was just a nightmare. I tried
installing
<a
href="https://aur.archlinux.org/packages/system76-power/"
target="_blank"
>System76 software through the AUR</a
>, but could never get it working reliably.
Additionally, the laptop speakers did not seem to work
out of the box. I eventually got the audio working
thanks to the
<a
href="https://wiki.archlinux.org/title/System76_Oryx_Pro#Audio"
target="_blank"
>solution in the ArchWiki</a
>, but I ultimately decided to switch to Pop!_OS because
of the graphics switching issue. The main change I made
to the default Pop!_OS install process was to use
<a
href="https://btrfs.wiki.kernel.org/index.php/Main_Page"
target="_blank"
>btrfs</a
>
rather than the default (ext4 I think) so I could take
snapshots and backup my data with
<a
href="https://github.com/teejee2008/timeshift"
target="_blank"
>Timeshift</a
>.
</p>
<p>
My experience with Pop!_OS was very positive. I'm really
happy that System76 and Pop!_OS have come up with a good
solution for switchable graphics. Being able to just
click on the option in the GNOME menu is so useful. The
window management in Pop!_OS's
<a
href="https://github.com/pop-os/cosmic"
target="_blank"
>COSMIC</a
>
desktop environment is very good too. Coming from a
standalone tiling window manager like dwm, this provides
a pretty good balance between convenience and usability.
</p>
<p>
After some more time with Pop!_OS, I realized that I
really missed the package management, customizability,
and rolling release of Arch. Since I couldn't get Arch
working before, I decided to try some other Arch based
distros like
<a href="https://manjaro.org/" target="_blank"
>Manjaro</a
>
and
<a href="https://garudalinux.org/" target="_blank"
>Garuda</a
>. With both of these, I found that switchable graphics
(via the
<a
href="https://aur.archlinux.org/packages/system76-power/"
target="_blank"
>system76-power AUR package</a
>, now works. I eventually decided on Garuda because it
implements a lot of the customizations I usually do in
my vanilla Arch installs anyways (e.g. btrfs, zen
kernel, chaotic-aur, backups w/ timeshift, easy options
to enable gaming tweaks, etc.). The
<a href="https://www.gnome.org/" target="_blank"
>GNOME</a
>
edition immediately ran into crashing and system break
issues, so I tried the KDE Dragonized edition. It looks
pretty nice and uses
<a
href="https://kde.org/plasma-desktop/"
target="_blank"
>KDE plasma</a
>
instead of GNOME. After still encountered freezing
issues, I switched to the
<a href="https://i3wm.org/" target="_blank">i3</a>
edition, but replaced i3 with
<a href="https://xmonad.org/" target="_blank">Xmonad</a>
because I was experimenting with it at the time. After
realizing that Xmonad would not really fit my needs
(mainly gaming), I replaced it with
<a
href="https://github.com/bakkeby/dwm-flexipatch"
target="_blank"
>dwm-flexipatch</a
>. Now, performance is amazing and I haven't encountered
the major freezing issues that I had with GNOME and KDE.
</p>
<h2>
<a name="experimenting-with-linux-distros"
>Experimenting with Linux Distros</a
>
</h2>
<p>
Regarding OS, I initially tried to install Arch Linux with dwm like
I had on my desktop, but found that switching between the graphics
modes (i.e. Integrated, Hybrid, and Discrete) was just a nightmare.
I tried installing
<a
href="https://aur.archlinux.org/packages/system76-power/"
target="_blank"
>System76 software through the AUR</a
>, but could never get it working reliably. Additionally, the laptop
speakers did not seem to work out of the box. I eventually got the
audio working thanks to the
<a
href="https://wiki.archlinux.org/title/System76_Oryx_Pro#Audio"
target="_blank"
>solution in the ArchWiki</a
>, but I ultimately decided to switch to Pop!_OS because of the
graphics switching issue. The main change I made to the default
Pop!_OS install process was to use
<a
href="https://btrfs.wiki.kernel.org/index.php/Main_Page"
target="_blank"
>btrfs</a
>
rather than the default (ext4 I think) so I could take snapshots and
backup my data with
<a href="https://github.com/teejee2008/timeshift" target="_blank"
>Timeshift</a
>.
</p>
<p>
My experience with Pop!_OS was very positive. I'm really happy that
System76 and Pop!_OS have come up with a good solution for
switchable graphics. Being able to just click on the option in the
GNOME menu is so useful. The window management in Pop!_OS's
<a href="https://github.com/pop-os/cosmic" target="_blank"
>COSMIC</a
>
desktop environment is very good too. Coming from a standalone
tiling window manager like dwm, this provides a pretty good balance
between convenience and usability.
</p>
<p>
After some more time with Pop!_OS, I realized that I really missed
the package management, customizability, and rolling release of
Arch. Since I couldn't get Arch working before, I decided to try
some other Arch based distros like
<a href="https://manjaro.org/" target="_blank">Manjaro</a>
and
<a href="https://garudalinux.org/" target="_blank">Garuda</a>. With
both of these, I found that switchable graphics (via the
<a
href="https://aur.archlinux.org/packages/system76-power/"
target="_blank"
>system76-power AUR package</a
>, now works. I eventually decided on Garuda because it implements a
lot of the customizations I usually do in my vanilla Arch installs
anyways (e.g. btrfs, zen kernel, chaotic-aur, backups w/ timeshift,
easy options to enable gaming tweaks, etc.). The
<a href="https://www.gnome.org/" target="_blank">GNOME</a>
edition immediately ran into crashing and system break issues, so I
tried the KDE Dragonized edition. It looks pretty nice and uses
<a href="https://kde.org/plasma-desktop/" target="_blank"
>KDE plasma</a
>
instead of GNOME. After still encountered freezing issues, I
switched to the
<a href="https://i3wm.org/" target="_blank">i3</a>
edition, but replaced i3 with
<a href="https://xmonad.org/" target="_blank">Xmonad</a>
because I was experimenting with it at the time. After realizing
that Xmonad would not really fit my needs (mainly gaming), I
replaced it with
<a href="https://github.com/bakkeby/dwm-flexipatch" target="_blank"
>dwm-flexipatch</a
>. Now, performance is amazing and I haven't encountered the major
freezing issues that I had with GNOME and KDE.
</p>
<hr />
<hr />
<h2><a name="pros-and-cons">Pros and Cons</a></h2>
<h2><a name="pros-and-cons">Pros and Cons</a></h2>
<h3>Pros</h3>
<ul>
<li>
The display is really good, I am highly satisfied
with it. Everything is just so much smoother in
144Hz.
</li>
<li>
Keyboard is not bad at all, but it definitely
doesn't match up in terms of quality and
satisfaction to the excellent HP Spectre x360
keyboard that I used previously. I really don't mind
it though and love that it includes a full sized
number pad. The layout doesn't feel cramped and it
has plenty of keys that can be customized via the
<a
href="https://github.com/pop-os/keyboard-configurator"
target="_blank"
>keyboard configurator</a
>.
</li>
<li>
Gaming performance is amazing! Recently got Yakuza:
Like a Dragon on Steam. It runs at around 70 to 80
fps with all the settings turned up to the max. I
love that I can use my favorite operating system
without having to compromise too much on gaming
performance.
</li>
<li>
Love the keyboard backlighting and color changing on
the fly. Would love to be able to customize this
further in software though.
</li>
<li>
When I need a mouse, I tend to use an external one,
but the trackpad feels excellent to me. My finger
just glides across the super smooth surface. I think
the overall trackpad size is good as well. Not as
large as one you would find on a Macbook, but
definitely good enough for my use cases.
</li>
<li>
It was a bit more difficult than I expected to
remove the bottom plate when upgrading the RAM and
storage, but overall a very easy process. Really
appreciate the focus on upgradeability in the
hardware design.
</li>
<li>
I absolutely love the port selection. No need to
live the dongle life when the laptop has so many
built-in already.
</li>
<li>
The build quality is pretty solid. It definitely
feels like a premium device.
</li>
</ul>
<h3>Pros</h3>
<ul>
<li>
The display is really good, I am highly satisfied with it.
Everything is just so much smoother in 144Hz.
</li>
<li>
Keyboard is not bad at all, but it definitely doesn't match up in
terms of quality and satisfaction to the excellent HP Spectre x360
keyboard that I used previously. I really don't mind it though and
love that it includes a full sized number pad. The layout doesn't
feel cramped and it has plenty of keys that can be customized via
the
<a
href="https://github.com/pop-os/keyboard-configurator"
target="_blank"
>keyboard configurator</a
>.
</li>
<li>
Gaming performance is amazing! Recently got Yakuza: Like a Dragon
on Steam. It runs at around 70 to 80 fps with all the settings
turned up to the max. I love that I can use my favorite operating
system without having to compromise too much on gaming
performance.
</li>
<li>
Love the keyboard backlighting and color changing on the fly.
Would love to be able to customize this further in software
though.
</li>
<li>
When I need a mouse, I tend to use an external one, but the
trackpad feels excellent to me. My finger just glides across the
super smooth surface. I think the overall trackpad size is good as
well. Not as large as one you would find on a Macbook, but
definitely good enough for my use cases.
</li>
<li>
It was a bit more difficult than I expected to remove the bottom
plate when upgrading the RAM and storage, but overall a very easy
process. Really appreciate the focus on upgradeability in the
hardware design.
</li>
<li>
I absolutely love the port selection. No need to live the dongle
life when the laptop has so many built-in already.
</li>
<li>
The build quality is pretty solid. It definitely feels like a
premium device.
</li>
</ul>
<h3>Cons</h3>
<ul>
<li>
Speakers are really sub-par. I understand that
System76 doesn't design the hardware, but this was
my main disappointment. I have bluetooth bookshelf
speakers and bluetooth headphones I can use, so this
isn't an unsolvable problem, but just generally
annoying.
</li>
<li>
Webcam is functional, but not good at all.
Definitely need to use an external webcam for video
calls.
</li>
<li>
The microphone has a strange oscillatory behavior
where there is some buzzing sound that increases and
decreases regularly. Additionally, you can really
hear the fans ramping up and down in the mic, makes
it difficult to have a meeting if you use the
integrated mic and the fans suddenly turn on.
Definitely need an external mic.
</li>
<li>
Battery life is really bad when the discrete
graphics card is on (as expected). Maybe a little
more than an hour a time, sometimes more depending
on how willing I am to lower CPU frequency and
stuff. As a desktop replacement, that is to be
expected through.
</li>
<li>
Mouse click buttons are not great. Regularly left
click on something in GNOME and nothing happens.
"Tapping" with the mousepad works very reliably
though.
</li>
<li>
Fans can get really loud at times, especially when
gaming. I often have to turn up my speakers or wear
noise cancelling headphones. This is an
understandable limitation with gaming laptops
though. Using a custom kernel solved a lot of my
complaints with the thermals and fan noise though.
Now the fans don't turn on as often. When they do,
they don't ramp up to the maximum speed, so noise is
kept to a reasonable level.
</li>
<li>
Random freezing is kind of an issue, but is
generally resolved by using a custom kernel.
</li>
<li>
While the display itself is great, I really wish the
hinge would rotate farther back. It looks like the
screen can only rotate about 120 degrees from fully
closed, so getting a good viewing angle (especially
when the laptop is propped up or really low) can be
difficult.
</li>
</ul>
<h3>Cons</h3>
<ul>
<li>
Speakers are really sub-par. I understand that System76 doesn't
design the hardware, but this was my main disappointment. I have
bluetooth bookshelf speakers and bluetooth headphones I can use,
so this isn't an unsolvable problem, but just generally annoying.
</li>
<li>
Webcam is functional, but not good at all. Definitely need to use
an external webcam for video calls.
</li>
<li>
The microphone has a strange oscillatory behavior where there is
some buzzing sound that increases and decreases regularly.
Additionally, you can really hear the fans ramping up and down in
the mic, makes it difficult to have a meeting if you use the
integrated mic and the fans suddenly turn on. Definitely need an
external mic.
</li>
<li>
Battery life is really bad when the discrete graphics card is on
(as expected). Maybe a little more than an hour a time, sometimes
more depending on how willing I am to lower CPU frequency and
stuff. As a desktop replacement, that is to be expected through.
</li>
<li>
Mouse click buttons are not great. Regularly left click on
something in GNOME and nothing happens. "Tapping" with the
mousepad works very reliably though.
</li>
<li>
Fans can get really loud at times, especially when gaming. I often
have to turn up my speakers or wear noise cancelling headphones.
This is an understandable limitation with gaming laptops though.
Using a custom kernel solved a lot of my complaints with the
thermals and fan noise though. Now the fans don't turn on as
often. When they do, they don't ramp up to the maximum speed, so
noise is kept to a reasonable level.
</li>
<li>
Random freezing is kind of an issue, but is generally resolved by
using a custom kernel.
</li>
<li>
While the display itself is great, I really wish the hinge would
rotate farther back. It looks like the screen can only rotate
about 120 degrees from fully closed, so getting a good viewing
angle (especially when the laptop is propped up or really low) can
be difficult.
</li>
</ul>
<hr />
<hr />
<h2><a name="conclusions">Conclusions</a></h2>
<p>
It may seem that the cons outweigh the pros, but this is
only in number and because I am really nitpicking. The
things this laptop get right (e.g. gaming, refresh rate,
switchable graphics, general performance) are much more
important to me than the other things. Regarding price,
you are definitely paying a premium for first-class
linux support, but it is well worth it in my opinion. I
do not want to use Windows anymore and I am happy to pay
extra if it means supporting a company that promotes and
sells Linux computers and having a device that can be
easily upgraded down the line. Overall, I am very happy
with my purchase.
</p>
<h2><a name="conclusions">Conclusions</a></h2>
<p>
It may seem that the cons outweigh the pros, but this is only in
number and because I am really nitpicking. The things this laptop
get right (e.g. gaming, refresh rate, switchable graphics, general
performance) are much more important to me than the other things.
Regarding price, you are definitely paying a premium for first-class
linux support, but it is well worth it in my opinion. I do not want
to use Windows anymore and I am happy to pay extra if it means
supporting a company that promotes and sells Linux computers and
having a device that can be easily upgraded down the line. Overall,
I am very happy with my purchase.
</p>
<hr />
<hr />
<h2><a name="images">Images</a></h2>
<p>
These are some images from when I unboxed the laptop,
installed the RAM & SSD, and customized my setup a
little.
</p>
<h2><a name="images">Images</a></h2>
<p>
These are some images from when I unboxed the laptop, installed the
RAM & SSD, and customized my setup a little.
</p>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/01_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/02_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/03_oryp7.jpg"
alt=""
/>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/04_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/05_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/06_oryp7.jpg"
alt=""
/>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/07_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/08_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/09_oryp7.jpg"
alt=""
/>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/10_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-6">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/11_oryp7.jpg"
alt=""
/>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/01_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/02_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/03_oryp7.jpg"
alt=""
/>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/04_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/05_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/06_oryp7.jpg"
alt=""
/>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/07_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/08_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-4">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/09_oryp7.jpg"
alt=""
/>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/10_oryp7.jpg"
alt=""
/>
</div>
<div class="col-md-6">
<img
class="img-fluid rounded"
src="./assets/blog_posts/oryx_pro_review/11_oryp7.jpg"
alt=""
/>
</div>
</div>
</div>
<hr />
</div>
<div class="col-md-2">
<!-- Nothing -->
</div>
</div>
</div>
</body>
<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>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
</html>

701
src/blog_windows_to_linux.html
View File

@@ -1,404 +1,341 @@
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>Switching from Windows to Linux</title>
</head>
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>Switching from Windows to Linux</title>
</head>
<script
language="javascript"
type="text/javascript"
src="common/navbar.txt"
></script>
<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>Switching from Windows to Linux</h1>
<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>Switching from Windows to Linux</h1>
<!-- Author & Date/Time -->
<p class="lead">Updated on August 27, 2021</p>
<!-- Author & Date/Time -->
<p class="lead">Updated on August 27, 2021</p>
<!-- Preview Image -->
<div class="blog-cover">
<img
class="img-fluid rounded"
src="./assets/blog_posts/windows_to_linux/cover_windows_to_linux.jpeg"
alt="Windows to Linux"
/>
</div>
<!-- Preview Image -->
<div class="blog-cover">
<img
class="img-fluid rounded"
src="./assets/blog_posts/windows_to_linux/cover_windows_to_linux.jpeg"
alt="Windows to Linux"
/>
</div>
<hr />
<hr />
<!-- Post Content -->
<h2><a name="introduction">Introduction</a></h2>
<p>
Around the summer of 2020, I started experimenting with
Linux to see if it could replace Windows as my daily
driver operating system. I had a little bit of
experience with
<a
href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux"
target="_blank"
>Red Hat Enterprise Linux</a
>
and
<a href="https://ubuntu.com" target="_blank">Ubuntu</a>
through my Computer Science course work, but I had never
really used it as my daily driver desktop / laptop
operating system. I really wanted to see if it could
handle development, general productivity, and gaming.
</p>
<!-- Post Content -->
<h2><a name="introduction">Introduction</a></h2>
<p>
Around the summer of 2020, I started experimenting with Linux to see
if it could replace Windows as my daily driver operating system. I
had a little bit of experience with
<a
href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux"
target="_blank"
>Red Hat Enterprise Linux</a
>
and
<a href="https://ubuntu.com" target="_blank">Ubuntu</a>
through my Computer Science course work, but I had never really used
it as my daily driver desktop / laptop operating system. I really
wanted to see if it could handle development, general productivity,
and gaming.
</p>
<h3>Development</h3>
<p>
Development is definitely where Linux shines because of
its superior package management. For example, Ubuntu
(and its derivatives) use the apt package manager which
allows you to easily install most development packages
like Python, gcc, Git, etc. On Windows, you have to go
to a website, click on a download link, run an
executable, and walk through the steps in an installer.
On Linux, it is as simple as a couple terminal commands.
There's a reason even Microsoft felt it needed to
improve the developer experience on Windows via the
<a
href="https://docs.microsoft.com/en-us/windows/wsl/install-win10"
target="_blank"
>Windows Subsystem for Linux</a
>.
</p>
<h3>Development</h3>
<p>
Development is definitely where Linux shines because of its superior
package management. For example, Ubuntu (and its derivatives) use
the apt package manager which allows you to easily install most
development packages like Python, gcc, Git, etc. On Windows, you
have to go to a website, click on a download link, run an
executable, and walk through the steps in an installer. On Linux, it
is as simple as a couple terminal commands. There's a reason even
Microsoft felt it needed to improve the developer experience on
Windows via the
<a
href="https://docs.microsoft.com/en-us/windows/wsl/install-win10"
target="_blank"
>Windows Subsystem for Linux</a
>.
</p>
<h3>Productivity</h3>
<p>
General productivity is no different on Linux than
Windows, other than the lack of Microsoft Office and
some proprietary software like Adobe's products. This
wasn't a big deal for me because there are plenty of
free and open-source alternatives as well as web-based
options if I ever needed to write documents, create
presentations, edit pictures, etc. If you rely on
software that only works on Windows for daily
productivity work, you might want to look into free and
open-source alternatives before switching to Linux.
</p>
<h3>Productivity</h3>
<p>
General productivity is no different on Linux than Windows, other
than the lack of Microsoft Office and some proprietary software like
Adobe's products. This wasn't a big deal for me because there are
plenty of free and open-source alternatives as well as web-based
options if I ever needed to write documents, create presentations,
edit pictures, etc. If you rely on software that only works on
Windows for daily productivity work, you might want to look into
free and open-source alternatives before switching to Linux.
</p>
<h3>Gaming</h3>
<p>
Gaming was really the main concern I had when thinking
about moving away from Windows. Luckily, there has been
a lot of progress on this front in recent years. Per
<a href="https://www.protondb.com" target="_blank"
>ProtonDB</a
>:
</p>
<blockquote cite="https://www.protondb.com">
"Proton is a new tool released by Valve Software that
has been integrated with Steam Play to make playing
Windows games on Linux as simple as hitting the Play
button within Steam. Underneath the hood, Proton
comprises other popular tools like Wine and DXVK among
others that a gamer would otherwise have to install and
maintain themselves. This greatly eases the burden for
users to switch to Linux without having to learn the
underlying systems or losing access to a large part of
their library of games. Proton is still in its infancy
so support is inconsistent, but regularly improving."
</blockquote>
<p>
Looking at ProtonDB, a lot of the games I play (mostly
single-player) have gold or above ratings, meaning they
generally work by just pressing the play button,
possibly with a few tweaks. After trying this out
myself, I have come to the same conclusion. Gaming on
Linux is as good as it has ever been and will only get
better, especially after the announcement and release of
the Linux powered
<a
href="https://store.steampowered.com/steamdeck"
target="_blank"
>Steam Deck</a
>
from Valve. If you play a lot of online multiplayer
games, you may need to wait as popular anti-cheat
software doesn't currently work through Proton.
</p>
<h3>Gaming</h3>
<p>
Gaming was really the main concern I had when thinking about moving
away from Windows. Luckily, there has been a lot of progress on this
front in recent years. Per
<a href="https://www.protondb.com" target="_blank">ProtonDB</a>:
</p>
<blockquote cite="https://www.protondb.com">
"Proton is a new tool released by Valve Software that has been
integrated with Steam Play to make playing Windows games on Linux as
simple as hitting the Play button within Steam. Underneath the hood,
Proton comprises other popular tools like Wine and DXVK among others
that a gamer would otherwise have to install and maintain
themselves. This greatly eases the burden for users to switch to
Linux without having to learn the underlying systems or losing
access to a large part of their library of games. Proton is still in
its infancy so support is inconsistent, but regularly improving."
</blockquote>
<p>
Looking at ProtonDB, a lot of the games I play (mostly
single-player) have gold or above ratings, meaning they generally
work by just pressing the play button, possibly with a few tweaks.
After trying this out myself, I have come to the same conclusion.
Gaming on Linux is as good as it has ever been and will only get
better, especially after the announcement and release of the Linux
powered
<a href="https://store.steampowered.com/steamdeck" target="_blank"
>Steam Deck</a
>
from Valve. If you play a lot of online multiplayer games, you may
need to wait as popular anti-cheat software doesn't currently work
through Proton.
</p>
<hr />
<hr />
<h2><a name="distro-hopping">Distro Hopping</a></h2>
<p>
After trying out a bunch of distros like
<a href="https://ubuntu.com" target="_blank">Ubuntu</a>,
<a href="https://pop.system76.com" target="_blank"
>Pop!_OS</a
>, and
<a href="https://getfedora.org" target="_blank"
>Fedora</a
>, I eventually landed on
<a href="https://archlinux.org" target="_blank"
>Arch Linux</a
>. As someone who likes to tinker with their computer a
lot, Arch felt like the best option because I could
literally build my OS from the ground up. I essentially
have complete control over which packages get installed
on my system. This means there is a steep learning curve
and things can break if you are not careful, but the
<a href="https://wiki.archlinux.org" target="_blank"
>ArchWiki</a
>
is possibly the greatest Linux resource I have ever
seen. The main reasons I decided on Arch are:
</p>
<ul>
<li>
<b>Rolling Release</b>: I don't have to re-install
my OS every 6 months. My system and the kernel get
updated through my package manager.
</li>
<li>
<b>Package Management</b>: Pacman and AUR helpers
(e.g.
<a
href="https://github.com/Morganamilo/paru"
target="_blank"
>paru</a
>) are by far the best package management solution I
have seen in Linux. Pretty much any piece of
software you might want to use is available in
either the
<a
href="https://archlinux.org/packages/"
target="_blank"
>main Arch repos</a
>
or the
<a href="https://aur.archlinux.org" target="_blank"
>AUR</a
>. I wanted my packages to be up to date without
relying on universal package formats like
<a href="https://snapcraft.io" target="_blank"
>snap</a
>, <a href="flathub" target="_blank">flatpak</a>, or
<a href="https://appimage.org" target="_blank"
>AppImage</a
>. While these are great in that they can run on any
Linux distro, they don't integrate into the system
as well as I would like. AppImages have to be
updated manually and don't integrate well with the
desktop experience by default. Flatpaks are
sandboxed applications, which means they require
manual intervention to access certain parts of the
OS. The main issue I found here was with theming.
For lots of open source applications, they may not
have a snap, flatpak, or AppImage package, but they
almost always have an AUR package. This means it is
extremely rare to have to manually install any
application or program on my system.
</li>
<li>
<b>Customizability</b>: Everything on my system was
either installed by me or a dependency for something
I installed. There is little to no bloatware.
</li>
</ul>
<p>
After running Arch on my gaming desktop and ultrabook
laptop for around a year, I decided to buy a Linux
gaming laptop. I wanted to have one system that I could
get work done and play games on. After doing some
research, I landed on the
<a
href="https://system76.com/laptops/oryx"
target="_blank"
>System76 Oryx Pro 7</a
>
because it is made by a U.S. based company with
excellent customer service and has first-class Linux
support. System76 also makes Pop!_OS, which I tried for
a couple of weeks, but I just had to go back to Arch for
the reasons mentioned above. Luckily, the ArchWiki has a
<a
href="https://wiki.archlinux.org/title/System76_Oryx_Pro"
target="_blank"
>page for the System76 Oryx Pro</a
>. Unfortunately, I had some issue with NVIDIA's Linux
drivers and
<a
href="https://github.com/pop-os/system76-power"
target="_blank"
>System76's graphics switching tool</a
>
on Arch. I was able to resolve the issue by switching to
<a href="https://garudalinux.org" target="_blank"
>Garuda Linux</a
>, which is based on Arch, but provides an easy to use
installer and some nice GUI tools for configuring your
system. As of the time of writing, I don't see myself
switching from Garuda because it provides all the
benefits of Arch without the initial hassle of
installing the system from scratch.
</p>
<h2><a name="distro-hopping">Distro Hopping</a></h2>
<p>
After trying out a bunch of distros like
<a href="https://ubuntu.com" target="_blank">Ubuntu</a>,
<a href="https://pop.system76.com" target="_blank">Pop!_OS</a>, and
<a href="https://getfedora.org" target="_blank">Fedora</a>, I
eventually landed on
<a href="https://archlinux.org" target="_blank">Arch Linux</a>. As
someone who likes to tinker with their computer a lot, Arch felt
like the best option because I could literally build my OS from the
ground up. I essentially have complete control over which packages
get installed on my system. This means there is a steep learning
curve and things can break if you are not careful, but the
<a href="https://wiki.archlinux.org" target="_blank">ArchWiki</a>
is possibly the greatest Linux resource I have ever seen. The main
reasons I decided on Arch are:
</p>
<ul>
<li>
<b>Rolling Release</b>: I don't have to re-install my OS every 6
months. My system and the kernel get updated through my package
manager.
</li>
<li>
<b>Package Management</b>: Pacman and AUR helpers (e.g.
<a href="https://github.com/Morganamilo/paru" target="_blank"
>paru</a
>) are by far the best package management solution I have seen in
Linux. Pretty much any piece of software you might want to use is
available in either the
<a href="https://archlinux.org/packages/" target="_blank"
>main Arch repos</a
>
or the
<a href="https://aur.archlinux.org" target="_blank">AUR</a>. I
wanted my packages to be up to date without relying on universal
package formats like
<a href="https://snapcraft.io" target="_blank">snap</a>,
<a href="flathub" target="_blank">flatpak</a>, or
<a href="https://appimage.org" target="_blank">AppImage</a>. While
these are great in that they can run on any Linux distro, they
don't integrate into the system as well as I would like. AppImages
have to be updated manually and don't integrate well with the
desktop experience by default. Flatpaks are sandboxed
applications, which means they require manual intervention to
access certain parts of the OS. The main issue I found here was
with theming. For lots of open source applications, they may not
have a snap, flatpak, or AppImage package, but they almost always
have an AUR package. This means it is extremely rare to have to
manually install any application or program on my system.
</li>
<li>
<b>Customizability</b>: Everything on my system was either
installed by me or a dependency for something I installed. There
is little to no bloatware.
</li>
</ul>
<p>
After running Arch on my gaming desktop and ultrabook laptop for
around a year, I decided to buy a Linux gaming laptop. I wanted to
have one system that I could get work done and play games on. After
doing some research, I landed on the
<a href="https://system76.com/laptops/oryx" target="_blank"
>System76 Oryx Pro 7</a
>
because it is made by a U.S. based company with excellent customer
service and has first-class Linux support. System76 also makes
Pop!_OS, which I tried for a couple of weeks, but I just had to go
back to Arch for the reasons mentioned above. Luckily, the ArchWiki
has a
<a
href="https://wiki.archlinux.org/title/System76_Oryx_Pro"
target="_blank"
>page for the System76 Oryx Pro</a
>. Unfortunately, I had some issue with NVIDIA's Linux drivers and
<a href="https://github.com/pop-os/system76-power" target="_blank"
>System76's graphics switching tool</a
>
on Arch. I was able to resolve the issue by switching to
<a href="https://garudalinux.org" target="_blank">Garuda Linux</a>,
which is based on Arch, but provides an easy to use installer and
some nice GUI tools for configuring your system. As of the time of
writing, I don't see myself switching from Garuda because it
provides all the benefits of Arch without the initial hassle of
installing the system from scratch.
</p>
<hr />
<hr />
<h2>
<a name="desktop-environments">Desktop Environments</a>
</h2>
<p>
While I was in the process of switching between Linux
distros, I was also switching between desktop
environments. I was most familiar with
<a href="https://www.gnome.org" target="_blank"
>GNOME</a
>
from Ubuntu and Red Hat Enterprise Linux (RHEL), but it
felt kind of slow and lacked customizability. This is
when I discovered
<a href="https://kde.org" target="_blank">KDE Plasma</a
>. Coming from Windows, I was much more comfortable with
the look and feel of KDE Plasma. Additionally, it has
many (perhaps too many) customizability options. After
using this for a while, I eventually ran into some
system freezing issues that I didn't expect to see given
my hardware and felt that I could go for something a bit
more minimal.
</p>
<h2>
<a name="desktop-environments">Desktop Environments</a>
</h2>
<p>
While I was in the process of switching between Linux distros, I was
also switching between desktop environments. I was most familiar
with
<a href="https://www.gnome.org" target="_blank">GNOME</a>
from Ubuntu and Red Hat Enterprise Linux (RHEL), but it felt kind of
slow and lacked customizability. This is when I discovered
<a href="https://kde.org" target="_blank">KDE Plasma</a>. Coming
from Windows, I was much more comfortable with the look and feel of
KDE Plasma. Additionally, it has many (perhaps too many)
customizability options. After using this for a while, I eventually
ran into some system freezing issues that I didn't expect to see
given my hardware and felt that I could go for something a bit more
minimal.
</p>
<hr />
<hr />
<h2><a name="window-managers">Window Managers</a></h2>
<p>
This is when I learned about window managers from
YouTubers like
<a
href="https://www.youtube.com/channel/UCVls1GmFKf6WlTraIb_IaJg"
target="_blank"
>DistroTube</a
>. Desktop environments are generally a combination of a
window manager and a bunch of utility programs and
pre-installed apps. A standalone window manager just
controls where windows show up on your screen and the
decorations that appear around them. The most suggested
window manager for beginners is generally
<a href="https://i3wm.org" target="_blank">i3</a>. This
is a tiling window manager with a configuration file
that is written in an easy to use syntax. I tried i3 for
a while, but it never really stuck, so I went back to
KDE Plasma. After doing some more research, I eventually
landed on
<a href="https://dwm.suckless.org" target="_blank"
>dwm</a
>. Given my experience with C/C++, this seemed like a
better window manager for my needs. One of the main
downsides of dwm is that it is meant to be super minimal
where features you might expect to see need to be added
through patches. The process of patching can be slow,
annoying, and prone to error. One solution, that I ended
up going with, is to use
<a
href="https://github.com/bakkeby/dwm-flexipatch"
target="_blank"
>dwm-flexipatch</a
>. This includes a bunch of commonly used patches that
can be enabled or disabled very easily. You can see my
configuration of dwm-flexipatch on
<a
href="https://github.com/balajsra/dwm-flexipatch"
target="_blank"
>GitHub</a
>.
</p>
<h2><a name="window-managers">Window Managers</a></h2>
<p>
This is when I learned about window managers from YouTubers like
<a
href="https://www.youtube.com/channel/UCVls1GmFKf6WlTraIb_IaJg"
target="_blank"
>DistroTube</a
>. Desktop environments are generally a combination of a window
manager and a bunch of utility programs and pre-installed apps. A
standalone window manager just controls where windows show up on
your screen and the decorations that appear around them. The most
suggested window manager for beginners is generally
<a href="https://i3wm.org" target="_blank">i3</a>. This is a tiling
window manager with a configuration file that is written in an easy
to use syntax. I tried i3 for a while, but it never really stuck, so
I went back to KDE Plasma. After doing some more research, I
eventually landed on
<a href="https://dwm.suckless.org" target="_blank">dwm</a>. Given my
experience with C/C++, this seemed like a better window manager for
my needs. One of the main downsides of dwm is that it is meant to be
super minimal where features you might expect to see need to be
added through patches. The process of patching can be slow,
annoying, and prone to error. One solution, that I ended up going
with, is to use
<a href="https://github.com/bakkeby/dwm-flexipatch" target="_blank"
>dwm-flexipatch</a
>. This includes a bunch of commonly used patches that can be
enabled or disabled very easily. You can see my configuration of
dwm-flexipatch on
<a href="https://github.com/balajsra/dwm-flexipatch" target="_blank"
>GitHub</a
>.
</p>
<hr />
<hr />
<h2><a name="current-setup">Current Setup</a></h2>
<p>
My
<a
href="https://github.com/balajsra/dotfiles"
target="_blank"
>current setup</a
>
involves these main components:
</p>
<ul>
<li>
<b>Window Manager</b>:
<a
href="https://github.com/bakkeby/dwm-flexipatch"
target="_blank"
>dwm-flexipatch</a
>
</li>
<li>
<b>Status Bar</b>:
<a
href="https://github.com/polybar/polybar"
target="_blank"
>polybar</a
>
</li>
<li>
<b>Terminal</b>:
<a
href="https://sw.kovidgoyal.net/kitty/"
target="_blank"
>kitty</a
>
</li>
<li>
<b>Color Theme</b>:
<a href="https://draculatheme.com" target="_blank"
>Dracula</a
>
/
<a
href="https://draculatheme.com/pro"
target="_blank"
>Dracula Pro</a
>
</li>
<li>
<b>Application Launcher</b>:
<a
href="https://github.com/davatorium/rofi"
target="_blank"
>Rofi</a
>
</li>
</ul>
<p>
<img
class="img-fluid rounded"
src="./assets/blog_posts/windows_to_linux/dwm_flexipatch_screenshot.png"
alt="dwm flexipatch desktop setup"
/>
</p>
<h2><a name="current-setup">Current Setup</a></h2>
<p>
My
<a href="https://github.com/balajsra/dotfiles" target="_blank"
>current setup</a
>
involves these main components:
</p>
<ul>
<li>
<b>Window Manager</b>:
<a
href="https://github.com/bakkeby/dwm-flexipatch"
target="_blank"
>dwm-flexipatch</a
>
</li>
<li>
<b>Status Bar</b>:
<a href="https://github.com/polybar/polybar" target="_blank"
>polybar</a
>
</li>
<li>
<b>Terminal</b>:
<a href="https://sw.kovidgoyal.net/kitty/" target="_blank"
>kitty</a
>
</li>
<li>
<b>Color Theme</b>:
<a href="https://draculatheme.com" target="_blank">Dracula</a>
/
<a href="https://draculatheme.com/pro" target="_blank"
>Dracula Pro</a
>
</li>
<li>
<b>Application Launcher</b>:
<a href="https://github.com/davatorium/rofi" target="_blank"
>Rofi</a
>
</li>
</ul>
<p>
<img
class="img-fluid rounded"
src="./assets/blog_posts/windows_to_linux/dwm_flexipatch_screenshot.png"
alt="dwm flexipatch desktop setup"
/>
</p>
<hr />
</div>
<div class="col-md-2">
<!-- Nothing -->
</div>
</div>
</div>
</body>
<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>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
</html>

780
src/documentation.html
View File

@@ -1,427 +1,387 @@
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>Documentation</title>
</head>
<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>
<script
language="javascript"
type="text/javascript"
src="common/navbar.txt"
></script>
<body>
<div class="container-fluid px-md-6">
<!---------------------------------
INTRODUCTION
<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>
<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>
<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
<!---------------------------------
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>
<p>
More recently, I found that
<a href="https://www.namecheap.com/" target="_blank"
>namecheap</a
>, as the name implies, is cheaper. I was able to
transfer the domain to their service for about $8
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.
</p>
<p>
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>&lt;username&gt;.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>
<p>
After watching
<a href="https://christitus.com/" target="_blank"
>Chris Titus</a
>'s
<a
href="https://www.youtube.com/watch?v=Nz0c4d1lbMk"
target="_blank"
>video</a
>
on website hosting, I decided to give
<a href="https://www.netlify.com/" target="_blank"
>netlify</a
>
a chance. You get the same benefit as GitHub pages
with automated deployment of the website upon pushes
to the git repo. A summary of the differences can be
found
<a
href="https://www.netlify.com/github-pages-vs-netlify/"
target="_blank"
>here</a
>. For me, having the ability to preview deployments
on development branches and rollback the site if I
ever need to made this the obvious choice.
Especially when considering that netlify also offers
a generous free tier.
</p>
</div>
</div>
</div>
<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>
<p>
More recently, I found that
<a href="https://www.namecheap.com/" target="_blank">namecheap</a
>, as the name implies, is cheaper. I was able to transfer the
domain to their service for about $8 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.
</p>
<p>
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>&lt;username&gt;.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>
<p>
After watching
<a href="https://christitus.com/" target="_blank">Chris Titus</a
>'s
<a
href="https://www.youtube.com/watch?v=Nz0c4d1lbMk"
target="_blank"
>video</a
>
on website hosting, I decided to give
<a href="https://www.netlify.com/" target="_blank">netlify</a>
a chance. You get the same benefit as GitHub pages with automated
deployment of the website upon pushes to the git repo. A summary
of the differences can be found
<a
href="https://www.netlify.com/github-pages-vs-netlify/"
target="_blank"
>here</a
>. For me, having the ability to preview deployments on
development branches and rollback the site if I ever need to made
this the obvious choice. Especially when considering that netlify
also offers a generous free tier.
</p>
</div>
</div>
</div>
<!---------------------------------
WEB DESIGN
<!---------------------------------
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>
<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
<!---------------------------------
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>
Light mode uses the primary palette colors from
<a
href="https://brand.umich.edu/design-resources/colors/"
target="_blank"
>University of Michigan Design Resources</a
>
and some generated colors from
<a
href="https://coolors.co/00274c-ffcb05-007bff-e8eef2-343434"
target="_blank"
>coolors</a
>
(shown in the image).
</p>
<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>
Light mode uses the primary palette colors from
<a
href="https://brand.umich.edu/design-resources/colors/"
target="_blank"
>University of Michigan Design Resources</a
>
and some generated colors from
<a
href="https://coolors.co/00274c-ffcb05-007bff-e8eef2-343434"
target="_blank"
>coolors</a
>
(shown in the image).
</p>
<p>
Dark mode uses the
<a
href="https://spec.draculatheme.com/#sec-Standard"
target="_blank"
>color palette</a
>
specified by
<a href="https://draculatheme.com/" target="_blank"
>Dracula theme</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
>. The 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>
<p>
Dark mode uses the
<a
href="https://spec.draculatheme.com/#sec-Standard"
target="_blank"
>color palette</a
>
specified by
<a href="https://draculatheme.com/" target="_blank"
>Dracula theme</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
>. The 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
<!---------------------------------
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>
<li>
<a
href="https://draculatheme.com/"
target="_blank"
>Dracula Theme</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<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>
<li>
<a href="https://draculatheme.com/" target="_blank"
>Dracula Theme</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
</html>

114
src/index.html
View File

@@ -1,68 +1,66 @@
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<script
language="javascript"
type="text/javascript"
src="common/header.txt"
></script>
<title>Sravan Balaji</title>
</head>
<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>
<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! This started out as a
side project to learn about web development and UI
design, but it has since expanded into a professional
portfolio and blog (sort of). If you are a fan of dark
mode, try out the toggle button in the upper right
corner!
<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! This started out as a side project
to learn about web development and UI design, but it has since
expanded into a professional portfolio and blog (sort of). If you
are a fan of dark mode, try out the toggle button in the upper right
corner!
<br /><br />
<br /><br />
On this website, you can find information about my
<a href="./portfolio.html#education">educational</a> and
<a href="./portfolio.html#professional_experience"
>professional career</a
>
as well as some of my
<a href="./personal.html">personal interests</a>. If you
are looking to create your own website and are curious
about how I created and hosted this one, please see the
<a href="./documentation.html">documentation</a>
page.
On this website, you can find information about my
<a href="./portfolio.html#education">educational</a> and
<a href="./portfolio.html#professional_experience"
>professional career</a
>
as well as some of my
<a href="./personal.html">personal interests</a>. If you are looking
to create your own website and are curious about how I created and
hosted this one, please see the
<a href="./documentation.html">documentation</a>
page.
<br /><br />
<br /><br />
This website is a constant 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>
This website is a constant 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>
<footer>
<script
language="javascript"
type="text/javascript"
src="common/footer.txt"
></script>
</footer>
</html>

2422
src/personal.html
View File

File diff suppressed because it is too large Load Diff

2903
src/portfolio.html
View File

File diff suppressed because it is too large Load Diff