Updated Content, Single Stylesheet, Whitespace Changes
- Update whitespace formatting with prettier extension - Reorganize files under src folder - Move html files out of web_pages folder - Move stylesheet into style folder - Change links from old repo to new repo - Clean-up some files - Move all in-line styles to styles.css
This commit is contained in:
Sravan Balaji
367
src/documentation.html
Normal file
367
src/documentation.html
Normal file
@@ -0,0 +1,367 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/header.txt"
|
||||
></script>
|
||||
<title>Documentation</title>
|
||||
</head>
|
||||
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/navbar.txt"
|
||||
></script>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid px-md-6">
|
||||
<!---------------------------------
|
||||
INTRODUCTION
|
||||
----------------------------------->
|
||||
<div class="introduction">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h1><a name="introduction">Introduction</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
My idea for this website started simply as a way for
|
||||
me to present my professional portfolio. As I
|
||||
started learning HTML and looking at other websites
|
||||
for inspiration, I decided to make it my own and add
|
||||
in the personal page with some of my recommendations
|
||||
and favorite things. Additionally, I noticed that
|
||||
very few people had any documentation on how/where
|
||||
they learned web design. While git repos were
|
||||
generally made public, it was hard for someone to
|
||||
understand what was going on if they weren't already
|
||||
familiar with the framework or language being used.
|
||||
Thus, I decided to create a documentation page which
|
||||
will hopefully help others who are interested in
|
||||
making their own website do so using what I have
|
||||
learned from friends I have talked to. It also helps
|
||||
me save some useful links in a way that others can
|
||||
see and understand the use case for.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This website was originally designed in HTML with
|
||||
some CSS for styling. However, I ran into issues
|
||||
with scalability and mobile browser support. See
|
||||
<a href="#web_design">Web Design</a> below for my
|
||||
current implementation method and some other cool
|
||||
things that I have discovered through my learning
|
||||
process that you may find interesting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
WEBSITE HOSTING
|
||||
----------------------------------->
|
||||
<div class="website_hosting">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h1><a name="website_hosting">Website Hosting</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Purchasing a Domain Name</h2>
|
||||
<p>
|
||||
Per
|
||||
<a href="https://vesikar.com/" target="_blank"
|
||||
>Yash Vesikar</a
|
||||
>'s recommendation, I used
|
||||
<a
|
||||
href="https://domains.google.com/"
|
||||
target="_blank"
|
||||
>Google Domains</a
|
||||
>
|
||||
to purchase the
|
||||
<a href="https://sravanbalaji.com/"
|
||||
>sravanbalaji.com</a
|
||||
>
|
||||
domain for $12 per year.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Hosting Website</h2>
|
||||
<p>
|
||||
There are a couple of options I have found for
|
||||
hosting my website (for free). As a U of M student,
|
||||
I am able to create my own UM Web Page hosted on U
|
||||
of M Servers or create a personal site hosted by
|
||||
Google through the
|
||||
<a href="http://google.umich.edu/" target="_blank"
|
||||
>U-M Google collaboration</a
|
||||
>. I have not looked into the Google Sites option,
|
||||
but there is
|
||||
<a
|
||||
href="https://support.google.com/sites/"
|
||||
target="_blank"
|
||||
>documentation</a
|
||||
>
|
||||
available if you are interested. I originally opted
|
||||
to create my own site and host it on U of M Servers.
|
||||
Information on how to do this can be found on the
|
||||
<a
|
||||
href="http://www.umich.edu/~umweb/how-to/homepage.html"
|
||||
target="_blank"
|
||||
>UMICH Information and Technology Services
|
||||
website</a
|
||||
>. Some limitations I found with this were that I
|
||||
would have to manually upload my website files to
|
||||
the afs directory as the SFTP process described did
|
||||
not work for me. Additionally, the domain name for U
|
||||
of M hosted websites take the form
|
||||
<b>http://www-personal.umich.edu/~youruniqname/</b>
|
||||
which is clearly not ideal. You can sort of get
|
||||
around this by enabling
|
||||
<a
|
||||
href="https://support.google.com/domains/answer/4522141?hl=en"
|
||||
target="_blank"
|
||||
>web forwarding</a
|
||||
>
|
||||
on Google Domains. All this does is redirect traffic
|
||||
from your custom domain to the U of M domain. This
|
||||
might be ok for you, but I would prefer to have my
|
||||
website show up at the domain I purchased. Per
|
||||
<a href="https://vesikar.com/" target="_blank"
|
||||
>Yash Vesikar</a
|
||||
>'s recommendation, I looked into
|
||||
<a href="https://pages.github.com/" target="_blank"
|
||||
>GitHub Pages</a
|
||||
>
|
||||
to host my website directly from a GitHub
|
||||
repository. This comes with the added benefit that
|
||||
changes are live as soon as you push them to the
|
||||
<b>master</b> branch of your
|
||||
<b><username>.github.io</b>
|
||||
repository. I found
|
||||
<a
|
||||
href="https://trentyang.com/how-to-setup-google-domain-for-github-pages/"
|
||||
target="_blank"
|
||||
>Trent Yang's post</a
|
||||
>
|
||||
about setting up Google Domains for GitHub pages
|
||||
very useful.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
WEB DESIGN
|
||||
----------------------------------->
|
||||
<div class="web_design">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h1><a name="web_design">Web Design</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Bootstrap Framework</h2>
|
||||
<p>
|
||||
When I first made this website, it was implemented
|
||||
in HTML and CSS without the use of a framework. This
|
||||
gave me a lot of custom control over every aspect,
|
||||
but it made some things unnecessarily tedious and
|
||||
difficult. One example of this is the navigation
|
||||
bar. Trying to implement that without a framework is
|
||||
more difficult than it needs to be. Another issue I
|
||||
ran into was compatibility with mobile browsers. Per
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tianhongwen/"
|
||||
target="_blank"
|
||||
>Tianhong (Sam) Wen</a
|
||||
>'s recommendation, I looked into
|
||||
<a href="https://getbootstrap.com/" target="_blank"
|
||||
>Bootstrap</a
|
||||
>. This has built-in <i>responsive</i> classes that
|
||||
can auto adjust the size and placement of elements
|
||||
based on the screen size. It also provides an easy
|
||||
way to implement some cool features like the navbar,
|
||||
accordion-like cards, and a grid layout to easily
|
||||
place images and text around your website's
|
||||
viewport.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Reusing HTML</h2>
|
||||
<p>
|
||||
The easiest way I found to reuse HTML code is via
|
||||
JavaScript as described in
|
||||
<a
|
||||
href="https://www.uvm.edu/~bnelson/computer/javascript/pageheadersandfooters.html"
|
||||
target="_blank"
|
||||
>Page Headers And Footers</a
|
||||
>. This is by no means the most elegant or
|
||||
automated, but it was the only method I could get to
|
||||
actually work. If you don't want to go through the
|
||||
hassle of manually removing line breaks, you can use
|
||||
this handy online text converter from
|
||||
<a
|
||||
href="https://www.textfixer.com/tools/remove-line-breaks.php"
|
||||
target="_blank"
|
||||
>Text Fixer</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Display Resume PDF in Website using GitHub</h2>
|
||||
<p>
|
||||
I have the latest version of my
|
||||
<a href="./portfolio.html#resume">resume</a> stored
|
||||
in a public
|
||||
<a
|
||||
href="https://github.com/balajsra/resume"
|
||||
target="_blank"
|
||||
>
|
||||
GitHub repository</a
|
||||
>, but I wanted an easy way to share it directly on
|
||||
my website. This led me to look for ways to embed a
|
||||
PDF in HTML. This works great for local files, but
|
||||
not so great for PDFs stored in a repository. The
|
||||
trick is to get the link to the raw PDF file from
|
||||
GitHub and to use Google Drive PDF Viewer. This is
|
||||
outlined in
|
||||
<a
|
||||
href="https://medium.com/@kekayan/display-your-resume-cv-pdf-in-website-using-github-73a088ac961d"
|
||||
target="_blank"
|
||||
>Kekayan's Medium post</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
AESTHETICS
|
||||
----------------------------------->
|
||||
<div class="aesthetics">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h1><a name="aesthetics">Aesthetics</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Color Scheme</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<img
|
||||
class="img-fluid mx-auto d-block"
|
||||
src="./assets/branding/color_palette.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>
|
||||
I used the primary palette colors from
|
||||
<a
|
||||
href="https://brand.umich.edu/design-resources/colors/"
|
||||
target="_blank"
|
||||
>University of Michigan Design Resources</a
|
||||
>
|
||||
and generated a cool color scheme using
|
||||
<a
|
||||
href="https://coolors.co/00274c-ffcb05-30c5ff-e8eef2-343434"
|
||||
target="_blank"
|
||||
>coolors</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Logo</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-2">
|
||||
<img
|
||||
class="img-fluid mx-auto d-block"
|
||||
src="./assets/branding/logo_with_name.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<img
|
||||
class="img-fluid mx-auto d-block"
|
||||
src="./assets/branding/logo.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>
|
||||
I designed my logo for free on
|
||||
<a
|
||||
href="https://hatchful.shopify.com/"
|
||||
target="_blank"
|
||||
>hatchful</a
|
||||
>. My main purpose for this was to have a nice
|
||||
looking favicon for my website on browsers as well
|
||||
as for the home page icon in the navbar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------------------------
|
||||
INSPIRATION
|
||||
----------------------------------->
|
||||
<div class="inspiration">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<h1><a name="inspiration">Inspiration</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
Content, design, and implementation were inspired by the
|
||||
following sources
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="http://www-personal.umich.edu/~prakashk/"
|
||||
target="_blank"
|
||||
>Prakash Kumar's Website</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vesikar.com/" target="_blank"
|
||||
>Yash Vesikar's Website</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://umich.edu/" target="_blank"
|
||||
>University of Michigan's Website</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script
|
||||
language="javascript"
|
||||
type="text/javascript"
|
||||
src="common/footer.txt"
|
||||
></script>
|
||||
</footer>
|
||||
</html>
|
||||
Reference in New Issue
Block a user