aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIndrajith K L2024-06-21 00:43:41 +0530
committerIndrajith K L2024-06-21 02:38:36 +0530
commitf7275309ad3ec062ebed915a097766daf126813b (patch)
tree12fa7deedd4e6332b28e2c0b7dc1b8b17fc1cde4
parent11c92db4208efb6381a2fd65bcc4de427d1f21f6 (diff)
downloadindrajith-dev-crystal-f7275309ad3ec062ebed915a097766daf126813b.tar.gz
indrajith-dev-crystal-f7275309ad3ec062ebed915a097766daf126813b.tar.bz2
indrajith-dev-crystal-f7275309ad3ec062ebed915a097766daf126813b.zip
Basic Home Page Implementation
* Moves assets from old website * Basic layout based on old website * Move home page from old website
-rw-r--r--public/css/fonts/VGA437.ttfbin0 -> 81192 bytes
-rw-r--r--public/css/styles.css258
-rw-r--r--public/images/aqua.gifbin0 -> 11608 bytes
-rw-r--r--public/images/indrajith.dev.gifbin0 -> 1385 bytes
-rw-r--r--src/indrajith-dev-crystal.cr21
-rw-r--r--src/views/home.ecr23
-rw-r--r--src/views/layout.ecr53
7 files changed, 353 insertions, 2 deletions
diff --git a/public/css/fonts/VGA437.ttf b/public/css/fonts/VGA437.ttf
new file mode 100644
index 0000000..f5cbfc0
--- /dev/null
+++ b/public/css/fonts/VGA437.ttf
Binary files differ
diff --git a/public/css/styles.css b/public/css/styles.css
new file mode 100644
index 0000000..58a7bd4
--- /dev/null
+++ b/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;
+} \ No newline at end of file
diff --git a/public/images/aqua.gif b/public/images/aqua.gif
new file mode 100644
index 0000000..731ba11
--- /dev/null
+++ b/public/images/aqua.gif
Binary files differ
diff --git a/public/images/indrajith.dev.gif b/public/images/indrajith.dev.gif
new file mode 100644
index 0000000..f26963d
--- /dev/null
+++ b/public/images/indrajith.dev.gif
Binary files differ
diff --git a/src/indrajith-dev-crystal.cr b/src/indrajith-dev-crystal.cr
index a7a08b6..28948cf 100644
--- a/src/indrajith-dev-crystal.cr
+++ b/src/indrajith-dev-crystal.cr
@@ -3,8 +3,25 @@ require "kemal"
module Indrajith::Dev::Crystal
VERSION = "0.1.0"
- get "/" do
- "Hello World!"
+ macro page_renderer(filename)
+ 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
diff --git a/src/views/home.ecr b/src/views/home.ecr
new file mode 100644
index 0000000..5d7eb54
--- /dev/null
+++ b/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>
+
diff --git a/src/views/layout.ecr b/src/views/layout.ecr
new file mode 100644
index 0000000..f16eefc
--- /dev/null
+++ b/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>