0eab7a5df1
- Add paragraph on namecheap - Split text into separate paragraphs - Add paragraph on netlify web hosting
407 lines
13 KiB
HTML
407 lines
13 KiB
HTML
<!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>
|
|
<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><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>
|
|
<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
|
|
----------------------------------->
|
|
<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>
|