From f7275309ad3ec062ebed915a097766daf126813b Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Fri, 21 Jun 2024 00:43:41 +0530 Subject: Basic Home Page Implementation * Moves assets from old website * Basic layout based on old website * Move home page from old website --- public/css/fonts/VGA437.ttf | Bin 0 -> 81192 bytes public/css/styles.css | 258 ++++++++++++++++++++++++++++++++++++++++ public/images/aqua.gif | Bin 0 -> 11608 bytes public/images/indrajith.dev.gif | Bin 0 -> 1385 bytes src/indrajith-dev-crystal.cr | 21 +++- src/views/home.ecr | 23 ++++ src/views/layout.ecr | 53 +++++++++ 7 files changed, 353 insertions(+), 2 deletions(-) create mode 100644 public/css/fonts/VGA437.ttf create mode 100644 public/css/styles.css create mode 100644 public/images/aqua.gif create mode 100644 public/images/indrajith.dev.gif create mode 100644 src/views/home.ecr create mode 100644 src/views/layout.ecr diff --git a/public/css/fonts/VGA437.ttf b/public/css/fonts/VGA437.ttf new file mode 100644 index 0000000..f5cbfc0 Binary files /dev/null and b/public/css/fonts/VGA437.ttf 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 Binary files /dev/null and b/public/images/aqua.gif differ diff --git a/public/images/indrajith.dev.gif b/public/images/indrajith.dev.gif new file mode 100644 index 0000000..f26963d Binary files /dev/null and b/public/images/indrajith.dev.gif 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 @@ +
+
+

+ "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&D's, random thoughts, game development etc. Since you are here why don't you read some posts. +

+
+
+ +
+
+

Books I'm reading now

+
+
+

Recent Posts

+ +
+ + 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 @@ + + + + + + {indrajith.dev} + + + + +
+
+ +
+

(Software is Art)

+ +
+
+
+ <%= content %> +
+ + + + + -- cgit v1.2.3