2. HTML

I would have been more than happy only to see the raw functional HTML pop up on my bio, however things changed once I saw the possibilities of HTML combined with CSS and JavaScript and it sparked my curiosity into this rabbit hole. I did not use any pre-built Bootstrap templates for this site, and choose to build it from scratch with vanilla HTML, CSS & JS.

Git: https://github.com/jicoing/git-komlalebu

Structure

index.html

The bio has a simple structure with the two sections marked as
resume_right - has some basic information about me and work.
resume_left - has the website animated logo, the skill and social information, QR and the blog content catalog.

resume_about - has the introduction.
resume_work - has work related information.
resume_education - has education related information

Responsive

After building the basic structure of the webpage, it looked like this.

There was one problem, it is not the 90's anymore. I had to optimize it for todays smartphone and tablet screens. I researched responsive web design and implemented it.

• I added the below meta-tag to the HTML.

HTML

          <meta name="viewport" content="width=device-width, 
          initial-scale=1.0">

CSS

• Everything inside @media only screen and (min-width: 1000px) clause is styling for PC's and everyting outside is for smartphones.
• Below code has the styling information for just the profile picture on the webpage which helps it to adjust according to the browser's screen size. Other elements were styled similarly.

/Mobile view/

           * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              list-style: none;
              font-family: 'Verdana', sans-serif;
              }

              body {
              background: #fff;
              font-size: 14px;
              line-height: 22px;
              color: #555555;
              }
              .resume .resume_left .resume_profile img {
              width: 50%;
              height: 50%;
              margin-top: 0;
              margin-left: 70px;
             }

/PC and tablet view/

           @media only screen and (min-width: 1000px){
           * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              list-style: none;
              font-family: 'Verdana', sans-serif;
              }

              body {
              background: #fff;
              font-size: 14px;
              line-height: 22px;
              color: #555555;
              }

             .resume .resume_left .resume_profile img {
              width: 105%;
              height: 105%;
              margin-top: -5px;
              margin-left: -5px;

              }
              }

• Responsive images and content - The images now scale and the text content auto-wrap based on browser width with the help of CSS width property.

Accordion

However, then was now one more problem, I had to scroll infinitely to get the basic information and the website was looking cluttered on mobile. So I decided to collapse portions of it. (Highlighted in red).

• The div tag acccordion helps to expand and contract the contents of DETAIL and CONTENT sections, that was later styled with CSS.

HTML

            <button class="accordion">Section 1</button>
                <div class="panel">
                  <p>Lorem ipsum...</p>
                     </div>

CSS

                   .accordion {
                       background-color: #ccc;
                       color: #555555;
                       cursor: pointer;
                       padding: 0px;
                       width: 100%;
                       border: 2px solid #e1e1e1;
                       text-align: center;
                       outline: none;
                       font-size: 0px;
                       transition: 0.4s;
                        }

                      .active, .accordion:hover {
                       background-color: #e1e1e1;
                       }

                      .panel {
                       padding: 0 0;
                       background-color: #e1e1e1;
                       max-height: 0;
                       overflow: hidden;
                       transition: max-height 0.2s ease-out;
                       }

Images

All the images have been drawn in MS - Paint and animated into .gif format using iOS Shortcuts app.

QR support

I finally added QR support for the website from https://www.the-qrcode-generator.com and added the QR image to index.html.

S3 image URL

All the object in this website are stored in my AWS S3 bucket blog.komlalebu.com and the S3 object URL is referenced in the index.html

Example -index.html fetches profile image from bucket using S3 URL.

           <div class="resume">
             <div class="resume_left">
               <div class="resume_profile">
                <img id="image"
             src="https://s3.amazonaws.com/blog.komlalebu.com/
              Komlalebu_logo_animated.gif" alt="profile_pic">
           </div>

Visit counter

There is a visitor couter on the left which is a CountAPI JavaScript that gets updated for every visit.

Simultaneously, the visitor count data is stored in a backend dynamoDB table with the combination of AWS services (API Gateway, Lambda and DynamoDB), which we will explore in later sections.

DynamoDB

CountAPI JS

        <script> 
        function cb(response) {
    document.getElementById('visits').innerText = 
        response.value; 

        }
    </script>

       <script async 
        src="https://api.countapi.xyz/hit/
        blog.komlalebu.com/visits?callback=cb"></script> 

HTML Table

I also setup a visitor stats HTML table, combining stats for visitor counter, likes, dislikes. (Read more)

       <table style="width:100%">
          <tr>
              <th>Count</th> <th>Likes</th> <th>Dislikes</th>
                <tr>
                  <td><div id="visits">...</div></td>

                  <td><div id="visitlike">...</div></td>
                  <td><div id="visitdislike">...</div></td>
                </tr>

          </tr>

       </table>

HTML Video

There is a HTML video element which loads the video file hosted in my S3 bucket.

                        <div align="center">
                             <video controls width="240" height="160">
                                  <source src="https://s3.amazonaws.com/blog.komlalebu.com/cicd.mp4" type="video/mp4">
                               </video> 
                           </div>

And the basic structure of the page was done.