Basic Home Page Implementation
* Moves assets from old website * Basic layout based on old website * Move home page from old website
This commit is contained in:
BIN
public/css/fonts/VGA437.ttf
Normal file
BIN
public/css/fonts/VGA437.ttf
Normal file
Binary file not shown.
258
public/css/styles.css
Normal file
258
public/css/styles.css
Normal file
@@ -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;
|
||||
}
|
||||
BIN
public/images/aqua.gif
Normal file
BIN
public/images/aqua.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/images/indrajith.dev.gif
Normal file
BIN
public/images/indrajith.dev.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -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
|
||||
|
||||
23
src/views/home.ecr
Normal file
23
src/views/home.ecr
Normal file
@@ -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>
|
||||
|
||||
53
src/views/layout.ecr
Normal file
53
src/views/layout.ecr
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user