* 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
This commit is contained in:
2024-06-21 02:42:38 +05:30
parent bb6528e4cf
commit 1d422d90f8
7 changed files with 166 additions and 26 deletions

View File

@@ -3,25 +3,34 @@ require "kemal"
module Indrajith::Dev::Crystal module Indrajith::Dev::Crystal
VERSION = "0.1.0" 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" render "src/views/#{{{filename}}}.ecr", "src/views/layout.ecr"
end end
def self.htmx_request?(context) get "/" do |context|
context.request.headers.has_key?("HX-Request") || context.response.content_type = "text/html"
context.request.headers.has_key?("Hx-Request") || page_renderer "home", "Home"
context.request.headers.has_key?("hx-request")
end end
get "/" do |context| get "/about" do |context|
if htmx_request?(context)
partial_content = render("src/views/home.ecr")
context.response.content_type = "text/html" context.response.content_type = "text/html"
context.response.print partial_content page_renderer "about", "About "
else
context.response.content_type = "text/html"
page_renderer "home"
end 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 end
Kemal.run Kemal.run

2
src/views/404.ecr Normal file
View File

@@ -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>

28
src/views/about.ecr Normal file
View File

@@ -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>

11
src/views/contact.ecr Normal file
View File

@@ -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.

View File

@@ -3,9 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{indrajith.dev}</title> <title> <%= page_title %> | {indrajith.dev}</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<link rel="icon" href="/favicon.ico">
</head> </head>
<body> <body>
<header class="header"> <header class="header">
@@ -15,20 +15,22 @@
<h4 class="slogan">(Software is Art)</h4> <h4 class="slogan">(Software is Art)</h4>
<nav> <nav>
<ul> <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="/" id="home" class="hvr-underline-reveal 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="/posts" class="hvr-underline-reveal links" id="posts">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="/timeline" class="hvr-underline-reveal links" id="cv">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="/about" class="hvr-underline-reveal links" id="about">about</a></li>
<li><a href="https://git.indrajith.dev" class="hvr-underline-reveal" id="cv" class="links">git</a></li> <li><a href="https://git.indrajith.dev" class="hvr-underline-reveal links" id="cv">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="/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> <li><a href="/feed.xml" id="cv" class="links hvr-underline-reveal">feed</a></li>
</ul> </ul>
</nav> </nav>
<hr> <hr>
</header> </header>
<main id="content">
<main id="content" hx-ext="response-targets">
<%= content %> <%= content %>
</main> </main>
<footer> <footer>
<hr> <hr>
<ul> <ul>
@@ -38,7 +40,6 @@
</ul> </ul>
<img src="/images/indrajith.dev.gif" class="etyone" alt=""> <img src="/images/indrajith.dev.gif" class="etyone" alt="">
</footer> </footer>
<script>htmx.config.getCacheBusterParam = true</script>
<script> <script>
(function(){ (function(){
const currentLocation = location.pathname; const currentLocation = location.pathname;

89
src/views/timeline.ecr Normal file
View File

@@ -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>