From 1d422d90f8d923ea8644a65d37de7d2948f1ddc4 Mon Sep 17 00:00:00 2001
From: Indrajith K L
Date: Fri, 21 Jun 2024 02:42:38 +0530
Subject: * Removes HTMX - Will be covering in the future * Adds 404, about,
 contact, timeline * Updates layout - removes HTMX, cleanup macros * Update
 template renderer macro to accept page title

---
 src/indrajith-dev-crystal.cr | 39 +++++++++++--------
 src/views/404.ecr            |  2 +
 src/views/about.ecr          | 28 ++++++++++++++
 src/views/contact.ecr        | 11 ++++++
 src/views/home.ecr           |  2 +-
 src/views/layout.ecr         | 21 ++++++-----
 src/views/timeline.ecr       | 89 ++++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 166 insertions(+), 26 deletions(-)
 create mode 100644 src/views/404.ecr
 create mode 100644 src/views/about.ecr
 create mode 100644 src/views/contact.ecr
 create mode 100644 src/views/timeline.ecr

diff --git a/src/indrajith-dev-crystal.cr b/src/indrajith-dev-crystal.cr
index 28948cf..ca600f1 100644
--- a/src/indrajith-dev-crystal.cr
+++ b/src/indrajith-dev-crystal.cr
@@ -3,26 +3,35 @@ require "kemal"
 module Indrajith::Dev::Crystal
   VERSION = "0.1.0"
 
-  macro page_renderer(filename)
+  macro page_renderer(filename, title)
+    page_title = {{title}}
     render "src/views/#{{{filename}}}.ecr", "src/views/layout.ecr"
   end
 
-  def self.htmx_request?(context)
-    context.request.headers.has_key?("HX-Request") ||
-    context.request.headers.has_key?("Hx-Request") ||
-    context.request.headers.has_key?("hx-request")
+  get "/" do |context|
+    context.response.content_type = "text/html"
+    page_renderer "home", "Home"
   end
 
-  get "/" do |context|
-    if htmx_request?(context)
-      partial_content = render("src/views/home.ecr")
-      context.response.content_type = "text/html"
-      context.response.print partial_content
-    else
-      context.response.content_type = "text/html"
-      page_renderer "home"
-    end
+  get "/about" do |context|
+    context.response.content_type = "text/html"
+    page_renderer "about", "About "
   end
-  
+
+  get "/timeline" do |context|
+    context.response.content_type = "text/html"
+    page_renderer "timeline", "Timeline"
+  end
+
+  get "/contact" do |context|
+    context.response.content_type = "text/html"
+    page_renderer "contact", "Contact"
+  end
+
+  error 404 do |context|
+    context.response.content_type = "text/html"
+    page_renderer "404", "The VOID"
+  end
+
   Kemal.run
 end
diff --git a/src/views/404.ecr b/src/views/404.ecr
new file mode 100644
index 0000000..4a3cb6d
--- /dev/null
+++ b/src/views/404.ecr
@@ -0,0 +1,2 @@
+<h2 class="four-o-four">404</h2>
+<em class="f-o-f-message">I once asked for overtime compensation. The reply was "You should earn it rather than demand it...."<em>
\ No newline at end of file
diff --git a/src/views/about.ecr b/src/views/about.ecr
new file mode 100644
index 0000000..70fc8b1
--- /dev/null
+++ b/src/views/about.ecr
@@ -0,0 +1,28 @@
+<h2>About Me</h2>
+<div class="article">
+    <div>
+        <img height="100px" src="/images/me.jpg" alt="me"/>
+    </div>
+    <p>
+        My Name is Indrajith K L, a Web Developer currently working as a Technical Architect with 9+ years of experience in various frontend frameworks and libraries like
+        <span class="highlight tags">Angular 2+</span>,
+        <span class="highlight tags">React</span>,
+        <span class="highlight tags">AngularJS (v1.x)</span>,
+        <span class="highlight tags">JQuery</span>,
+        <span class="highlight tags">RequireJS</span> etc.
+    </p>
+
+    <p >
+        Fluent in
+        <span class="highlight tags">ES6</span>,
+        <span class="highlight tags">Typescript</span>,
+        &amp;  <span class="highlight tags">NodeJS</span>. Started out as an Android Developer in 2012, and then switched to Web Development and now focusing on frontend &amp; other web technologies.
+    </p>
+
+    <ul>
+        <li><a title="Twitter" target="_blank" href="https://twitter.com/indrajithKLIS" class="links">Twitter</a></li>
+        <li><a title="Github" target="_blank" href="https://github.com/cooljith91112" class="links">Github</a></li>
+        <li><a title="LinkedIn" target="_blank" href="https://www.linkedin.com/in/indrajithklis/" class="links">LinkedIn</a></li>
+        <li><a title="Ko-Fi" target="_blank" href="https://ko-fi.com/indrajith" class="links">Buy Me a Coffee</a></li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/views/contact.ecr b/src/views/contact.ecr
new file mode 100644
index 0000000..abad87a
--- /dev/null
+++ b/src/views/contact.ecr
@@ -0,0 +1,11 @@
+<h3>Want to talk with me?</h3>
+
+<ul>
+    <li>
+        <b>Email</b>: indrajith(at)indrajith(dot)dev
+    </li>
+    <li>
+        <b>Website</b>: <a href="https://indrajith.dev">https://indrajith.dev</a>
+    </li>
+</ul>
+CAUTION: Please don't send me ads or spam.
\ No newline at end of file
diff --git a/src/views/home.ecr b/src/views/home.ecr
index 5d7eb54..fb4973f 100644
--- a/src/views/home.ecr
+++ b/src/views/home.ecr
@@ -16,7 +16,7 @@
     <ul>
         <!-- 
          li -> posts
-         -->
+         --> 
     </ul>
 </div>
 <script src="https://www.goodreads.com/review/grid_widget/162656738.Indrajith's%20currently-reading%20book%20montage?cover_size=medium&hide_link=&hide_title=true&num_books=20&order=a&shelf=currently-reading&sort=date_added&widget_id=1676363812" type="text/javascript" charset="utf-8"></script>
diff --git a/src/views/layout.ecr b/src/views/layout.ecr
index f16eefc..2a537ea 100644
--- a/src/views/layout.ecr
+++ b/src/views/layout.ecr
@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{indrajith.dev}</title>
-    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+    <title> <%= page_title %> | {indrajith.dev}</title>
     <link rel="stylesheet" href="/css/styles.css">
+    <link rel="icon" href="/favicon.ico">
 </head>
 <body>
     <header class="header">
@@ -15,20 +15,22 @@
         <h4 class="slogan">(Software is Art)</h4>
         <nav>
             <ul>
-                <li><a href="/" hx-get="/" hx-target="#content" hx-push-url="true" class="hvr-underline-reveal" id="home" class="links">home</a></li>
-                <li><a href="/posts" hx-get="/post" hx-target="#content" hx-push-url="true" class="hvr-underline-reveal" id="posts" class="links">posts</a></li>
-                <li><a href="/timeline" hx-get="/timeline" hx-target="#content" hx-push-url="true" class="hvr-underline-reveal" id="cv" class="links">timeline</a></li>
-                <li><a href="/about" hx-get="/about" hx-target="#content" hx-push-url="true" class="hvr-underline-reveal" id="about" class="links">about</a></li>
-                <li><a href="https://git.indrajith.dev" class="hvr-underline-reveal" id="cv" class="links">git</a></li>
-                <li><a href="/contact" hx-get="/contact" hx-target="#content" hx-push-url="true" id="cv" class="links hvr-underline-reveal">contact</a></li>
+                <li><a href="/" id="home" class="hvr-underline-reveal links">home</a></li>
+                <li><a href="/posts" class="hvr-underline-reveal links" id="posts">posts</a></li>
+                <li><a href="/timeline" class="hvr-underline-reveal links" id="cv">timeline</a></li>
+                <li><a href="/about"  class="hvr-underline-reveal links" id="about">about</a></li>
+                <li><a href="https://git.indrajith.dev" class="hvr-underline-reveal links" id="cv">git</a></li>
+                <li><a href="/contact" id="cv" class="links hvr-underline-reveal">contact</a></li>
                 <li><a href="/feed.xml" id="cv" class="links hvr-underline-reveal">feed</a></li>
             </ul>
         </nav>
         <hr>
     </header>
-    <main id="content">
+
+    <main id="content" hx-ext="response-targets">
         <%= content %>
     </main>
+
     <footer>
         <hr>
         <ul>
@@ -38,7 +40,6 @@
         </ul>
         <img src="/images/indrajith.dev.gif" class="etyone" alt="">
     </footer>
-    <script>htmx.config.getCacheBusterParam = true</script>    
     <script>
     (function(){
         const currentLocation = location.pathname;
diff --git a/src/views/timeline.ecr b/src/views/timeline.ecr
new file mode 100644
index 0000000..62ef123
--- /dev/null
+++ b/src/views/timeline.ecr
@@ -0,0 +1,89 @@
+<div><h1>Career Timeline</h1></div>
+
+<ol>
+    <li>
+        <div>
+            <div></div>
+            <p>March 2023 - Present</p>
+        </div>
+        <div>
+            <h4>Technical Architect</h4>
+            <h5>[InApp Information Technologies]</h5>
+        </div>
+    </li>
+    <li>
+        <div>
+            <div></div>
+            <p>Jan 2023 - Feb 2023</p>
+        </div>
+        <div>
+            <h4>Senior Systems Analyst</h4>
+            <h5>[InApp Information Technologies]</h5>
+        </div>
+    </li>
+    <li>
+        <div>
+            <div></div>
+            <p>Jan 2020 - Dec 2022</p>
+        </div>
+        <div>
+            <h4>Systems Analyst</h4>
+            <h5>[InApp Information Technologies]</h5>
+        </div>
+    </li>
+    <li>
+        <div>
+            <div></div>
+            <p>Jul 2017 - Jan 2020</p>
+        </div>
+        <div>
+            <h4>Senior Software Engineer</h4>
+            <h5>[InApp Information Technologies]</h5>
+            <p></p>
+        </div>
+    </li>
+    <li>
+        <div>
+            <div></div>
+            <p>Jan 2016 - Jul 2017</p>
+        </div>
+        <div>
+            <h4>Software Engineer</h4>
+            <h5>[InApp Information Technologies]</h5>
+            <p></p>
+        </div>
+    </li>
+    <li>
+        <div>
+            <div></div>
+            <p>Jun 2014 - Jan 2016</p>
+        </div>
+        <div>
+            <h4>Software Engineer</h4>
+            <h5>[Naga Info Solutions]</h5>
+            <p></p>
+        </div>
+    </li>
+    <li>
+        <div>
+            <div></div>
+            <p>Nov 2013 - Jun 2014</p>
+        </div>
+        <div>
+            <h4>Software Engineer</h4>
+            <h5>[SQube]</h5>
+            <p></p>
+        </div>
+    </li>
+    <li>
+        <div>
+            <div></div>
+            <p>Oct 2012 - Nov 2013</p>
+        </div>
+        <div>
+            <h4>Freelance Developer</h4>
+            <h5>[Simple Graphics]</h5>
+            <p></p>
+        </div>
+    </li>
+</ol>
\ No newline at end of file
-- 
cgit v1.2.3