Basic Home Page Implementation

* Moves assets from old website
* Basic layout based on old website
* Move home page from old website

public/css/styles.css

@@ -0,0 +1,258 @@
+@font-face {
+	font-family: "VGA437";
+	src: url("/fonts/VGA437.ttf");
+}
+
+:root {
+	--body-bg-image: url("/images/aqua.gif");
+}
+
+* {
+	image-rendering: pixelated;
+	box-sizing: border-box;
+}
+
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: Verdana;
+	font-size: 15px;
+	max-width: 900px;
+	margin: auto;
+	background: #ffffd6;
+	background-image: var(--body-bg-image);
+}
+
+p {
+	text-align: justify;
+}
+
+footer {
+	bottom: 0px;
+	left: 0;
+	text-align: center;
+	width: 100%;
+}
+
+.header {
+	text-align: center;
+}
+
+.header nav {
+	display: block;
+}
+
+.header ul,
+footer ul {
+	padding: 0px;
+}
+
+.header ul>li {
+	display: inline-block;
+	text-align: center;
+}
+
+.header ul>li:not(:last-child):after {
+	content: " | ";
+}
+
+.header ul>li a {
+	text-decoration: none;
+	font-size: 15px;
+	color: #000000;
+	font-weight: bold;
+}
+
+.text-center {
+	/* text-align: center; */
+}
+
+footer ul>li {
+	display: inline-block;
+}
+
+footer ul>li>p {
+	margin-block-end: unset;
+	margin-block-start: unset;
+}
+
+.logo-container {
+	padding-top: 10px;
+}
+
+.logo {
+	text-decoration: none;
+	font-family: "VGA437", sans-serif;
+	font-size: 220%;
+	color: #000000;
+}
+
+h4.slogan {
+	margin: 0px;
+}
+
+.mt-10 {
+	margin-top: 10px;
+}
+
+.font-bold {
+	font-weight: bold;
+}
+
+.font-italics {
+	font-style: italic;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+th,
+tr,
+td {
+	border: 1px solid;
+}
+
+table tr {
+	padding-bottom: 10px;
+}
+
+table th {
+	padding-right: 20px;
+}
+
+table td {
+	padding: 10px;
+}
+
+.post-date {
+	font-size: 15px;
+	font-style: italic;
+}
+
+.post-lists li {
+	list-style-type: "◆  ";
+	margin-bottom: 5px;
+}
+
+@media (max-width: 1000px) {
+	body {
+		font-size: 80%;
+		padding: 3%;
+	}
+
+	#blog img {
+		max-width: 80%;
+	}
+}
+
+/* Underline Reveal */
+.hvr-underline-reveal {
+	display: inline-block;
+	vertical-align: middle;
+	-webkit-transform: perspective(1px) translateZ(0);
+	transform: perspective(1px) translateZ(0);
+	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+	position: relative;
+	overflow: hidden;
+}
+
+.hvr-underline-reveal:before {
+	content: "";
+	position: absolute;
+	z-index: -1;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #000000;
+	height: 2px;
+	-webkit-transform: translateY(4px);
+	transform: translateY(4px);
+	-webkit-transition-property: transform;
+	transition-property: transform;
+	-webkit-transition-duration: 0.3s;
+	transition-duration: 0.3s;
+	-webkit-transition-timing-function: ease-out;
+	transition-timing-function: ease-out;
+}
+
+.hvr-underline-reveal:hover:before,
+.hvr-underline-reveal:focus:before,
+.hvr-underline-reveal:active:before {
+	-webkit-transform: translateY(0);
+	transform: translateY(0);
+}
+
+.tools-container {
+	--auto-grid-min-size: 16rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fill,
+			minmax(var(--auto-grid-min-size), 1fr));
+	grid-gap: 1rem;
+}
+
+.tool {
+	border: 1px solid #000000;
+	width: 252px;
+	margin: 10px;
+	padding: 10px;
+	box-shadow: 2px 6px;
+	background: linen;
+}
+
+img {
+	max-width: 100%;
+}
+
+.tools-container .tool-name * {
+	font-weight: bold;
+	color: #000000;
+}
+
+.tools-container label {
+	font-weight: bold;
+}
+
+p.first-letter::first-letter {
+	font-size: 150%;
+}
+
+.highlight {
+	background: #000000;
+	padding: 2px 5px 2px 5px;
+	color: #ffffff;
+}
+
+.highlight.tags {
+	border-radius: 8px;
+}
+
+.article {
+	line-height: 25px;
+}
+
+.etyone {
+	margin-bottom: 5px;
+}
+
+.gr_grid_container {
+	/* customize grid container div here. eg: width: 500px; */
+}
+
+.gr_grid_book_container {
+	/* customize book cover container div here */
+	float: left;
+	width: 98px;
+	height: 160px;
+	padding: 0;
+	overflow: hidden;
+}
+
+.four-o-four {
+	text-align: center;
+}

src/indrajith-dev-crystal.cr

@@ -3,8 +3,25 @@ require "kemal"
 module Indrajith::Dev::Crystal
   VERSION = "0.1.0"
 
-  get "/" do
+  macro page_renderer(filename)
-    "Hello World!"
+    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")
+  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
   end
   
   Kemal.run

src/views/home.ecr

@@ -0,0 +1,23 @@
+<div class="text-center">
+    <div>
+        <p class="first-letter">
+            "Hello Friend!! My name is Indrajith K L." I'm a web developer, hobbyist game developer from India, working as a front-end developer.
+            This site is where I write about my fun side projects, R&amp;D's, random thoughts, game development etc. Since you are here why don't you read some <a href="/posts" class="text-main-cardheading font-bold">posts</a>.
+        </p>
+    </div>
+</div>
+
+<div>
+    <div>
+        <h4>Books I'm reading now</h4>
+        <div id="gr_grid_widget_1676363812"></div>
+    </div>
+    <h4>Recent Posts</h4>
+    <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>
+

src/views/layout.ecr

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<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>
+    <link rel="stylesheet" href="/css/styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="logo-container">
+            <a class="logo" href="/">{indrajith.dev}</a>
+        </div>
+        <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="/feed.xml" id="cv" class="links hvr-underline-reveal">feed</a></li>
+            </ul>
+        </nav>
+        <hr>
+    </header>
+    <main id="content">
+        <%= content %>
+    </main>
+    <footer>
+        <hr>
+        <ul>
+            <li>
+                <p>&copy; 2024 Indrajith K L </p>
+            </li>
+        </ul>
+        <img src="/images/indrajith.dev.gif" class="etyone" alt="">
+    </footer>
+    <script>htmx.config.getCacheBusterParam = true</script>    
+    <script>
+    (function(){
+        const currentLocation = location.pathname;
+        const navs = ["about","posts","cv"];
+        const currentNav = navs.find(nav=>currentLocation.includes(nav));
+        if (currentNav) {
+            document.getElementById(currentNav).parentElement.classList.add("text-lightish-50");
+        }
+    })();
+    </script>
+</body>
+</html>