diff options
| -rw-r--r-- | public/css/fonts/VGA437.ttf | bin | 0 -> 81192 bytes | |||
| -rw-r--r-- | public/css/styles.css | 258 | ||||
| -rw-r--r-- | public/images/aqua.gif | bin | 0 -> 11608 bytes | |||
| -rw-r--r-- | public/images/indrajith.dev.gif | bin | 0 -> 1385 bytes | |||
| -rw-r--r-- | src/indrajith-dev-crystal.cr | 21 | ||||
| -rw-r--r-- | src/views/home.ecr | 23 | ||||
| -rw-r--r-- | src/views/layout.ecr | 53 |
7 files changed, 353 insertions, 2 deletions
diff --git a/public/css/fonts/VGA437.ttf b/public/css/fonts/VGA437.ttf Binary files differnew file mode 100644 index 0000000..f5cbfc0 --- /dev/null +++ b/public/css/fonts/VGA437.ttf 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 Binary files differnew file mode 100644 index 0000000..731ba11 --- /dev/null +++ b/public/images/aqua.gif diff --git a/public/images/indrajith.dev.gif b/public/images/indrajith.dev.gif Binary files differnew file mode 100644 index 0000000..f26963d --- /dev/null +++ b/public/images/indrajith.dev.gif 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&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>© 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> |
