diff options
author | Indrajith K L | 2022-09-30 18:19:17 +0530 |
---|---|---|
committer | Indrajith K L | 2022-09-30 18:19:17 +0530 |
commit | aaa2da4e22be420891a00bb1b33bdfc431db80bd (patch) | |
tree | 11ce3f8da6d0307ee3be8c41a3579a60a0c608d5 /src | |
parent | 0664c2c30cb90da2156e83cf18526438e2e5ff57 (diff) | |
download | indrajith-dev-aaa2da4e22be420891a00bb1b33bdfc431db80bd.tar.gz indrajith-dev-aaa2da4e22be420891a00bb1b33bdfc431db80bd.tar.bz2 indrajith-dev-aaa2da4e22be420891a00bb1b33bdfc431db80bd.zip |
Theming: IN-PROGRESS
Diffstat (limited to 'src')
-rw-r--r-- | src/_includes/assets/css/styles.css | 440 | ||||
-rw-r--r-- | src/_includes/intro.njk | 2 | ||||
-rw-r--r-- | src/_includes/partials/footer.njk | 15 | ||||
-rw-r--r-- | src/_includes/partials/head.njk | 3 | ||||
-rw-r--r-- | src/_includes/partials/header.njk | 24 | ||||
-rw-r--r-- | src/_includes/posts.njk | 14 | ||||
-rw-r--r-- | src/about.njk | 6 | ||||
-rw-r--r-- | src/cv.njk | 69 | ||||
-rw-r--r-- | src/index.njk | 14 | ||||
-rw-r--r-- | src/posts/bulk_watermark_images_nodejs.njk | 7 | ||||
-rw-r--r-- | src/posts/index.njk | 11 | ||||
-rw-r--r-- | src/posts/posts.json | 1 | ||||
-rw-r--r-- | src/tags.njk | 36 |
13 files changed, 563 insertions, 79 deletions
diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css index 3598a25..cb44d57 100644 --- a/src/_includes/assets/css/styles.css +++ b/src/_includes/assets/css/styles.css @@ -770,6 +770,14 @@ select { visibility: visible; } +.invisible { + visibility: hidden; +} + +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -782,6 +790,22 @@ select { right: 0px; } +.bottom-0 { + bottom: 0px; +} + +.top-0 { + top: 0px; +} + +.left-0 { + left: 0px; +} + +.z-50 { + z-index: 50; +} + .col-span-3 { grid-column: span 3 / span 3; } @@ -794,10 +818,18 @@ select { float: right; } +.float-left { + float: left; +} + .m-4 { margin: 1rem; } +.m-0 { + margin: 0px; +} + .-my-8 { margin-top: -2rem; margin-bottom: -2rem; @@ -823,6 +855,11 @@ select { margin-bottom: 1rem; } +.-my-5 { + margin-top: -1.25rem; + margin-bottom: -1.25rem; +} + .mt-10 { margin-top: 2.5rem; } @@ -851,6 +888,10 @@ select { margin-bottom: 1.25rem; } +.mt-5 { + margin-top: 1.25rem; +} + .mt-auto { margin-top: auto; } @@ -859,10 +900,6 @@ select { margin-left: auto; } -.mt-5 { - margin-top: 1.25rem; -} - .mt-1 { margin-top: 0.25rem; } @@ -871,22 +908,78 @@ select { margin-top: 0.5rem; } -.ml-0 { - margin-left: 0px; +.-ml-1 { + margin-left: -0.25rem; } -.mr-0 { - margin-right: 0px; +.mr-3 { + margin-right: 0.75rem; +} + +.mt-0\.5 { + margin-top: 0.125rem; +} + +.ml-4 { + margin-left: 1rem; +} + +.mb-6 { + margin-bottom: 1.5rem; } .mt-0 { margin-top: 0px; } +.mb-1\.5 { + margin-bottom: 0.375rem; +} + +.mb-1 { + margin-bottom: 0.25rem; +} + +.mb-3 { + margin-bottom: 0.75rem; +} + +.mr-1 { + margin-right: 0.25rem; +} + +.mb-0 { + margin-bottom: 0px; +} + +.-mr-2 { + margin-right: -0.5rem; +} + +.mt-4 { + margin-top: 1rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.ml-0 { + margin-left: 0px; +} + +.mr-0 { + margin-right: 0px; +} + .mt-8 { margin-top: 2rem; } +.box-content { + box-sizing: content-box; +} + .block { display: block; } @@ -927,6 +1020,14 @@ select { height: 12rem; } +.h-2 { + height: 0.5rem; +} + +.h-4 { + height: 1rem; +} + .h-12 { height: 3rem; } @@ -935,18 +1036,48 @@ select { height: 100%; } +.h-1 { + height: 0.25rem; +} + +.max-h-full { + max-height: 100%; +} + .w-full { width: 100%; } +.w-2 { + width: 0.5rem; +} + +.w-96 { + width: 24rem; +} + +.w-4 { + width: 1rem; +} + .w-12 { width: 3rem; } +.min-w-max { + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; +} + .max-w-5xl { max-width: 64rem; } +.max-w-full { + max-width: 100%; +} + .max-w-md { max-width: 28rem; } @@ -971,6 +1102,10 @@ select { flex-shrink: 1; } +.flex-grow { + flex-grow: 1; +} + .border-collapse { border-collapse: collapse; } @@ -991,6 +1126,10 @@ select { resize: both; } +.list-none { + list-style-type: none; +} + .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1031,14 +1170,18 @@ select { gap: 0.75rem; } -.gap-10 { - gap: 2.5rem; +.gap-2 { + gap: 0.5rem; } .gap-5 { gap: 1.25rem; } +.gap-10 { + gap: 2.5rem; +} + .gap-6 { gap: 1.5rem; } @@ -1053,6 +1196,12 @@ select { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); @@ -1069,6 +1218,18 @@ select { overflow: hidden; } +.overflow-y-auto { + overflow-y: auto; +} + +.whitespace-nowrap { + white-space: nowrap; +} + +.rounded-lg { + border-radius: 0.5rem; +} + .rounded-full { border-radius: 9999px; } @@ -1081,6 +1242,14 @@ select { border-radius: 0px; } +.rounded { + border-radius: 0.25rem; +} + +.rounded-sm { + border-radius: 0.125rem; +} + .rounded-l-md { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; @@ -1099,6 +1268,10 @@ select { border-width: 2px; } +.border-l { + border-left-width: 1px; +} + .border-r-0 { border-right-width: 0px; } @@ -1107,6 +1280,10 @@ select { border-style: dashed; } +.border-none { + border-style: none; +} + .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); @@ -1116,24 +1293,34 @@ select { border-color: transparent; } -.bg-black { +.bg-main-background { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(255 255 254 / var(--tw-bg-opacity)); } -.bg-yellow-500 { +.bg-darkish-300 { --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); + background-color: rgb(13 43 69 / var(--tw-bg-opacity)); } -.bg-purple-500 { +.bg-main-cardbackground { --tw-bg-opacity: 1; - background-color: rgb(168 85 247 / var(--tw-bg-opacity)); + background-color: rgb(250 238 231 / var(--tw-bg-opacity)); } -.bg-sky-700 { +.bg-darkish-100 { --tw-bg-opacity: 1; - background-color: rgb(3 105 161 / var(--tw-bg-opacity)); + background-color: rgb(84 78 104 / var(--tw-bg-opacity)); +} + +.bg-darkish-50 { + --tw-bg-opacity: 1; + background-color: rgb(141 105 122 / var(--tw-bg-opacity)); +} + +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); } .bg-white { @@ -1151,6 +1338,35 @@ select { background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } +.bg-darkish-200 { + --tw-bg-opacity: 1; + background-color: rgb(32 60 86 / var(--tw-bg-opacity)); +} + +.bg-main-cardheading { + --tw-bg-opacity: 1; + background-color: rgb(51 39 42 / var(--tw-bg-opacity)); +} + +.bg-lightish-200 { + --tw-bg-opacity: 1; + background-color: rgb(255 170 94 / var(--tw-bg-opacity)); +} + +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + +.bg-transparent { + background-color: transparent; +} + +.bg-sky-700 { + --tw-bg-opacity: 1; + background-color: rgb(3 105 161 / var(--tw-bg-opacity)); +} + .bg-violet-700 { --tw-bg-opacity: 1; background-color: rgb(109 40 217 / var(--tw-bg-opacity)); @@ -1161,6 +1377,21 @@ select { background-color: rgb(126 34 206 / var(--tw-bg-opacity)); } +.bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.bg-yellow-500 { + --tw-bg-opacity: 1; + background-color: rgb(234 179 8 / var(--tw-bg-opacity)); +} + +.bg-purple-500 { + --tw-bg-opacity: 1; + background-color: rgb(168 85 247 / var(--tw-bg-opacity)); +} + .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -1171,6 +1402,10 @@ select { background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } +.bg-clip-padding { + background-clip: padding-box; +} + .object-cover { -o-object-fit: cover; object-fit: cover; @@ -1192,6 +1427,10 @@ select { padding: 2rem; } +.p-4 { + padding: 1rem; +} + .p-10 { padding: 2.5rem; } @@ -1236,14 +1475,22 @@ select { padding-bottom: 3rem; } -.pl-2 { - padding-left: 0.5rem; +.pt-3 { + padding-top: 0.75rem; } .pt-2 { padding-top: 0.5rem; } +.pb-5 { + padding-bottom: 1.25rem; +} + +.pl-2 { + padding-left: 0.5rem; +} + .pt-5 { padding-top: 1.25rem; } @@ -1256,6 +1503,10 @@ select { padding-left: 0.25rem; } +.text-left { + text-align: left; +} + .text-center { text-align: center; } @@ -1272,6 +1523,10 @@ select { font-family: supplyRegular, sans-serif; } +.font-supply-light { + font-family: supplyLight, sans-serif; +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -1287,16 +1542,16 @@ select { line-height: 1.25rem; } -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - .text-xl { font-size: 1.25rem; line-height: 1.75rem; } +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + .text-xs { font-size: 0.75rem; line-height: 1rem; @@ -1315,26 +1570,66 @@ select { font-weight: 800; } +.font-semibold { + font-weight: 600; +} + .font-medium { font-weight: 500; } +.font-normal { + font-weight: 400; +} + +.uppercase { + text-transform: uppercase; +} + .italic { font-style: italic; } +.leading-tight { + line-height: 1.25; +} + +.leading-normal { + line-height: 1.5; +} + .leading-4 { line-height: 1rem; } -.text-yellow-500 { +.text-lightish-200 { --tw-text-opacity: 1; - color: rgb(234 179 8 / var(--tw-text-opacity)); + color: rgb(255 170 94 / var(--tw-text-opacity)); } -.text-white { +.text-lightish-50 { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 236 214 / var(--tw-text-opacity)); +} + +.text-main-cardheading { + --tw-text-opacity: 1; + color: rgb(51 39 42 / var(--tw-text-opacity)); +} + +.text-darkish-300 { + --tw-text-opacity: 1; + color: rgb(13 43 69 / var(--tw-text-opacity)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); } .text-black { @@ -1347,9 +1642,24 @@ select { color: rgb(55 65 81 / var(--tw-text-opacity)); } -.text-gray-500 { +.text-white { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.text-lightish-300 { + --tw-text-opacity: 1; + color: rgb(208 129 89 / var(--tw-text-opacity)); +} + +.text-darkish-200 { + --tw-text-opacity: 1; + color: rgb(32 60 86 / var(--tw-text-opacity)); +} + +.text-darkish-100 { + --tw-text-opacity: 1; + color: rgb(84 78 104 / var(--tw-text-opacity)); } .text-red-600 { @@ -1357,6 +1667,11 @@ select { color: rgb(220 38 38 / var(--tw-text-opacity)); } +.text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity)); +} + .text-red-700 { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity)); @@ -1387,11 +1702,25 @@ select { color: rgb(21 94 117 / var(--tw-text-opacity)); } +.text-lightish-100 { + --tw-text-opacity: 1; + color: rgb(255 212 163 / var(--tw-text-opacity)); +} + +.text-main-cardparagraph { + --tw-text-opacity: 1; + color: rgb(89 74 78 / var(--tw-text-opacity)); +} + .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline; } +.opacity-50 { + opacity: 0.5; +} + .shadow-\[5px_5px_0px_0px_rgba\(0\2c 0\2c 0\2c 255\)\] { --tw-shadow: 5px 5px 0px 0px rgba(0,0,0,255); --tw-shadow-colored: 5px 5px 0px 0px var(--tw-shadow-color); @@ -1410,10 +1739,51 @@ select { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + .outline { outline-style: solid; } +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.transition { + transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-150 { + transition-duration: 150ms; +} + +.duration-300 { + transition-duration: 300ms; +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + .line-clamp-1 { overflow: hidden; display: -webkit-box; @@ -1575,14 +1945,14 @@ pre[class*="language-"] { background-color: rgb(67 56 202 / var(--tw-bg-opacity)); } -.hover\:text-white:hover { +.hover\:text-lightish-50:hover { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 236 214 / var(--tw-text-opacity)); } -.hover\:text-black:hover { +.hover\:text-darkish-300:hover { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(13 43 69 / var(--tw-text-opacity)); } .focus\:border-indigo-500:focus { diff --git a/src/_includes/intro.njk b/src/_includes/intro.njk index 19938e9..03a866d 100644 --- a/src/_includes/intro.njk +++ b/src/_includes/intro.njk @@ -3,7 +3,7 @@ <head> {% include "./partials/head.njk" %} </head> -<body class="flex h-screen flex-col"> +<body class="flex h-screen flex-col bg-main-background"> {% include "./partials/header.njk" %} <main class="container mx-auto"> <article > diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk index c4ccae1..b187151 100644 --- a/src/_includes/partials/footer.njk +++ b/src/_includes/partials/footer.njk @@ -1,15 +1,16 @@ -<footer class="items-center px-6 py-2 mt-auto bg-black text-white"> +<footer class="items-center px-6 py-2 mt-auto bg-darkish-300 text-lightish-200"> <ul class="w-full flex md:hidden gap-5 font-supply-regular ml-auto justify-center mt-5 md:mt-0"> - <li class="hover:text-white inline-block"><a title="Twitter" target="_blank" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li> - <li class="hover:text-white inline-block"><a title="Github" target="_blank" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li> - <li class="hover:text-white inline-block"><a title="Sourcehut" target="_blank" href="https://sr.ht/~cooljith91112/" class="links">{% feather "circle" %}</a></li> - <li class="hover:text-white inline-block"><a title="LinkedIn" target="_blank" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li> - <li class="hover:text-white inline-block"><a title="Ko-Fi" target="_blank" href="https://ko-fi.com/indrajith" class="links">{% feather "coffee" %}</a></li> - <li class="hover:text-white inline-block"><a title="RSS" target="_blank" href="/feed.xml" class="links">{% feather "rss" %}</a></li> + <li class="hover:text-lightish-50 inline-block"><a title="Twitter" target="_blank" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li> + <li class="hover:text-lightish-50 inline-block"><a title="Github" target="_blank" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li> + <li class="hover:text-lightish-50 inline-block"><a title="Sourcehut" target="_blank" href="https://sr.ht/~cooljith91112/" class="links">{% feather "circle" %}</a></li> + <li class="hover:text-lightish-50 inline-block"><a title="LinkedIn" target="_blank" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li> + <li class="hover:text-lightish-50 inline-block"><a title="Ko-Fi" target="_blank" href="https://ko-fi.com/indrajith" class="links">{% feather "coffee" %}</a></li> + <li class="hover:text-lightish-50 inline-block"><a title="RSS" target="_blank" href="/feed.xml" class="links">{% feather "rss" %}</a></li> </ul> <ul class="flex w-full gap-10 font-supply-regular justify-center mt-5 md:mt-auto"> <li class="mt-1"> <p>© 2022 Indrajith K L </p> </li> </ul> + <div id="wcb" class="carbonbadge wcb-d"></div> </footer>
\ No newline at end of file diff --git a/src/_includes/partials/head.njk b/src/_includes/partials/head.njk index ed4e5ec..97690fb 100644 --- a/src/_includes/partials/head.njk +++ b/src/_includes/partials/head.njk @@ -17,4 +17,5 @@ <meta property="og:image" content="https://indrajith.dev/images/me.png"> <link rel="stylesheet" href="/global.css"> {% favicon './favicon.svg' %} -<title>{{title}} | { indrajith.dev } </title>
\ No newline at end of file +<title>{{title}} | { indrajith.dev } </title> +<script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
\ No newline at end of file diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk index bf91705..7b83d77 100644 --- a/src/_includes/partials/header.njk +++ b/src/_includes/partials/header.njk @@ -1,20 +1,20 @@ -<header class="w-full bg-black text-yellow-500 flex flex-row md:flex-col justify-between items-center px-6 py-4"> +<header class="w-full bg-darkish-300 text-lightish-200 flex flex-row md:flex-col justify-between items-center px-6 py-4"> <nav class="w-full"> <ul class="flex flex-col md:flex-row gap-3 md:gap-10 font-supply-regular w-full items-center text-lg md:text-xl"> <li> <a href="/" class="text-lg md:text-3xl">{ indrajith.dev } </a> </li> - <li class="hover:text-white"><a href="/about" id="about" class="links">About</a></li> - <li class="hover:text-white"><a href="/posts" id="posts" class="links">Posts</a></li> - <li class="hover:text-white"><a href="/cv" id="cv" class="links">CV</a></li> + <li class="hover:text-lightish-50"><a href="/about" id="about" class="links">About</a></li> + <li class="hover:text-lightish-50"><a href="/posts" id="posts" class="links">Posts</a></li> + <li class="hover:text-lightish-50"><a href="/cv" id="cv" class="links">CV</a></li> </ul> - <ul class="hidden md:flex flex-row gap-10 font-supply-regular right-0 -my-8 mx-6 absolute"> - <li class="hover:text-white"><a title="Twitter" target="_blank" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li> - <li class="hover:text-white"><a title="Github" target="_blank" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li> - <li class="hover:text-white"><a title="Sourcehut" target="_blank" href="https://sr.ht/~cooljith91112/" class="links">{% feather "circle" %}</a></li> - <li class="hover:text-white"><a title="LinkedIn" target="_blank" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li> - <li class="hover:text-white"><a title="Ko-Fi" target="_blank" href="https://ko-fi.com/indrajith" class="links">{% feather "coffee" %}</a></li> - <li class="hover:text-white"><a title="RSS" target="_blank" href="/feed.xml" class="links">{% feather "rss" %}</a></li> + <ul class="hidden md:flex flex-row gap-2 font-supply-regular right-0 -my-8 mx-6 absolute"> + <li class="hover:text-lightish-50"><a title="Twitter" target="_blank" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li> + <li class="hover:text-lightish-50"><a title="Github" target="_blank" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li> + <li class="hover:text-lightish-50"><a title="Sourcehut" target="_blank" href="https://sr.ht/~cooljith91112/" class="links">{% feather "circle" %}</a></li> + <li class="hover:text-lightish-50"><a title="LinkedIn" target="_blank" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li> + <li class="hover:text-lightish-50"><a title="Ko-Fi" target="_blank" href="https://ko-fi.com/indrajith" class="links">{% feather "coffee" %}</a></li> + <li class="hover:text-lightish-50"><a title="RSS" target="_blank" href="/feed.xml" class="links">{% feather "rss" %}</a></li> </ul> </nav> </header> @@ -25,7 +25,7 @@ const navs = ["about","posts","cv"]; const currentNav = navs.find(nav=>currentLocation.includes(nav)); if (currentNav) { - document.getElementById(currentNav).parentElement.classList.add("text-white"); + document.getElementById(currentNav).parentElement.classList.add("text-lightish-50"); } })(); </script>
\ No newline at end of file diff --git a/src/_includes/posts.njk b/src/_includes/posts.njk index 47cbbb6..3cdfa2a 100644 --- a/src/_includes/posts.njk +++ b/src/_includes/posts.njk @@ -3,23 +3,27 @@ <head> {% include "./partials/head.njk" %} </head> -<body> +<body class="flex h-screen flex-col font-supply-regular"> {% include "./partials/header.njk" %} <main class="container mx-auto max-w-5xl p-8"> <section class="w-full flex flex-col items-center px-3"> <article class="flex flex-col my-4"> <div class="flex flex-col justify-start p-6 "> <div> - <p class="text-3xl bg-rose font-medium text-center">{{title}}</p> - <p class="text-lg text-gray-500 text-center">{{date | dateFilter}}</p> + <p class="text-3xl bg-rose font-medium text-center text-darkish-200">{{title}}</p> + <p class="text-lg text-darkish-100 text-center">{{date | dateFilter}}</p> </div> - <div class="mt-10 text-xl font-supply-regular text-justify"> + <div class="mt-10 text-xl font-supply-regular text-justify text-darkish-300"> {{content | safe}} </div> </div> </article> + <div class="flex flex-col my-4"> + <a class="flex flex-col justify-start" href="/posts">back to posts</a> + </div> </section> - <a href="/posts">back to posts</a> + + </main> {% include "./partials/footer.njk" %} </body> diff --git a/src/about.njk b/src/about.njk index 90d8da2..39fa995 100644 --- a/src/about.njk +++ b/src/about.njk @@ -2,17 +2,17 @@ layout: base.njk title: About --- -<h2 class="text-2xl font-bold text-black p-2 text-center">About Me</h2> +<h2 class="text-2xl font-bold text-darkish-300 p-2 text-center">About Me</h2> <div class="mt-2 text-justify"> <div class="flex justify-center items-center"> <img class="object-cover h-48 rounded-full" src="/images/me.jpg" alt="me"/> </div> - <p class="mt-3"> + <p class="mt-3 text-darkish-300"> My Name is Indrajith K L, a Web Developer currently working as a Systems Analyst with 9+ years of experience with various frontend frameworks and libraries like Angular 2+, React, AngularJS (v1.x), JQuery, RequireJS etc. </p> - <p class="mt-2"> + <p class="mt-2 text-darkish-300"> I'm fluent in ES6, Typescript & NodeJS. I started out as a Android Developer in 2012 and then switched to Web Development and focused on frontend & other web technologies. </p> @@ -2,4 +2,71 @@ layout: base.njk title: CV --- -CV
\ No newline at end of file +<ol class="border-l border-gray-300"> + <li> + <div class="flex flex-start items-center pt-3"> + <div class="bg-gray-300 w-2 h-2 rounded-full -ml-1 mr-3"></div> + <p class="text-gray-500 text-sm">Jan 2020 - Present</p> + </div> + <div class="mt-0.5 ml-4 mb-6"> + <h4 class="text-gray-800 font-semibold text-xl mb-1.5">Systems Analyst</h4> + <h2 class="text-gray-500 font-semibold text-xl mb-1.5">InApp</h2> + {# <p class="text-gray-500 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.</p> #} + </div> + </li> + <li> + <div class="flex flex-start items-center pt-2"> + <div class="bg-gray-300 w-2 h-2 rounded-full -ml-1 mr-3"></div> + <p class="text-gray-500 text-sm">Jul 2017 - Jan 2020</p> + </div> + <div class="mt-0.5 ml-4 mb-6"> + <h4 class="text-gray-800 font-semibold text-xl mb-1.5">Senior Software Engineer</h4> + <h2 class="text-gray-500 font-semibold text-xl mb-1.5">InApp</h2> + <p class="text-gray-500 mb-3">Libero expedita explicabo eius fugiat quia aspernatur autem laudantium error architecto recusandae natus sapiente sit nam eaque, consectetur porro molestiae ipsam an deleniti.</p> + </div> + </li> + <li> + <div class="flex flex-start items-center pt-2"> + <div class="bg-gray-300 w-2 h-2 rounded-full -ml-1 mr-3"></div> + <p class="text-gray-500 text-sm">Jan 2016 - Jul 2017</p> + </div> + <div class="mt-0.5 ml-4 pb-5"> + <h4 class="text-gray-800 font-semibold text-xl mb-1.5">Software Engineer</h4> + <h2 class="text-gray-500 font-semibold text-xl mb-1.5">InApp</h2> + <p class="text-gray-500 mb-3">Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.</p> + </div> + </li> + <li> + <div class="flex flex-start items-center pt-2"> + <div class="bg-gray-300 w-2 h-2 rounded-full -ml-1 mr-3"></div> + <p class="text-gray-500 text-sm">Jun 2014 - Jan 2016</p> + </div> + <div class="mt-0.5 ml-4 pb-5"> + <h4 class="text-gray-800 font-semibold text-xl mb-1.5">Software Engineer</h4> + <h2 class="text-gray-500 font-semibold text-xl mb-1.5">Naga Info Solutions</h2> + <p class="text-gray-500 mb-3">Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.</p> + </div> + </li> + <li> + <div class="flex flex-start items-center pt-2"> + <div class="bg-gray-300 w-2 h-2 rounded-full -ml-1 mr-3"></div> + <p class="text-gray-500 text-sm">Nov 2013 - Jun 2014</p> + </div> + <div class="mt-0.5 ml-4 pb-5"> + <h4 class="text-gray-800 font-semibold text-xl mb-1.5">Software Engineer</h4> + <h2 class="text-gray-500 font-semibold text-xl mb-1.5">SQube</h2> + <p class="text-gray-500 mb-3">Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.</p> + </div> + </li> + <li> + <div class="flex flex-start items-center pt-2"> + <div class="bg-gray-300 w-2 h-2 rounded-full -ml-1 mr-3"></div> + <p class="text-gray-500 text-sm">Oct 2012 - Nov 2013</p> + </div> + <div class="mt-0.5 ml-4 pb-5"> + <h4 class="text-gray-800 font-semibold text-xl mb-1.5">Freelance Developer</h4> + <h2 class="text-gray-500 font-semibold text-xl mb-1.5">Simple Graphics</h2> + <p class="text-gray-500 mb-3">Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.</p> + </div> + </li> +</ol>
\ No newline at end of file diff --git a/src/index.njk b/src/index.njk index 9bf43ca..b4650d6 100644 --- a/src/index.njk +++ b/src/index.njk @@ -4,27 +4,27 @@ title: Home alternatetitle: "Hello Friend!! My name is Indrajith K L." --- <div class="flex w-full"> - <div class="bg-yellow-500 text-md md:text-xl text-black font-supply-regular shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] p-3 mt-10 ml-5 mr-5 md:p-10 md:ml-0 md:mr-0"> + <div class="bg-main-cardbackground text-md md:text-xl text-main-cardheading font-supply-regular shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] p-3 mt-10 ml-5 mr-5 md:p-10 md:ml-0 md:mr-0 rounded-lg"> <p class="text-lg md:text-2xl font-bold">{{alternatetitle}}</p> <p class="mt-3 text-justify"> I'm a web developer, hobbyist game developer from Kerala, 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 here why don't you read some <a href="/posts" class="text-black font-bold">posts</a>. + This site is where I write about my fun side projects, R&D's, random thoughts, game development etc. Since you here why don't you read some <a href="/posts" class="text-main-cardheading font-bold">posts</a>. </p> </div> </div> -<div class="mt-10 mb-10"> - <h2 class="text-lg font-bold bg-purple-500 text-black p-2 shadow-[5px_5px_0px_0px_rgba(0,0,0,255)]">Recent Posts</h2> +<div class="mt-10 mb-10 font-supply-light"> + <h2 class="text-lg font-bold bg-darkish-100 text-lightish-50 p-2 shadow-[5px_5px_0px_0px_rgba(0,0,0,255)]">Recent Posts</h2> <div class="posts flex flex-col mt-10 md:flex-row"> {% for post in collections.posts | reverse %} {% if (loop.index <= 4) %} - <div class="p-6 bg-violet-700 text-white shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] mr-10 mb-5"> + <div class="p-6 bg-darkish-50 text-lightish-50 shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] mr-10 mb-5"> <p class="text-md font-extrabold line-clamp-1">{{post.data.title}}</p> - <div class="justify-end float-right mt-5"><a href="{{post.url}}">{% feather "arrow-right" %}</a></div> + <div class="justify-end float-right mt-5 underline font-supply-light"><a href="{{post.url}}">Read more</span></a></div> </div> {% endif %} {% else %} - <div class="p-6 bg-sky-700 text-white shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] mr-10 mb-5"> + <div class="p-6 bg-darkish-200 text-lightish-50 shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] mr-10 mb-5"> <p class="text-md font-extrabold line-clamp-1">No Posts</p> </div> {% endfor %} diff --git a/src/posts/bulk_watermark_images_nodejs.njk b/src/posts/bulk_watermark_images_nodejs.njk new file mode 100644 index 0000000..a86eb14 --- /dev/null +++ b/src/posts/bulk_watermark_images_nodejs.njk @@ -0,0 +1,7 @@ +--- +layout: posts.njk +title: Bulk apply Watermark on images using Node.JS +tags: ['nodejs', 'javascript'] +--- + +Draft
\ No newline at end of file diff --git a/src/posts/index.njk b/src/posts/index.njk index 9392ce6..1525a26 100644 --- a/src/posts/index.njk +++ b/src/posts/index.njk @@ -3,23 +3,22 @@ layout: base.njk eleventyExcludeFromCollections: true title: Posts --- -<h2 class="text-2xl font-bold text-black p-2">Published Posts</h2> +<h2 class="text-2xl font-bold text-darkish-300 p-2">Published Posts</h2> <div class="post-lists mt-2"> {% for post in collections.posts | reverse %} <div class="post-data"> - <div class="post-date p-2 bg-purple-700 text-white shadow-[5px_5px_0px_0px_rgba(0,0,0,255)]"> + <div class="post-date p-2 bg-darkish-100 text-lightish-50 shadow-[5px_5px_0px_0px_rgba(0,0,0,255)]"> {{post.date | dateFilter}} </div> - <div class="post-title m-4 text-red-600 hover:text-black"> + <div class="post-title m-4 text-lightish-300 hover:text-darkish-300"> <a href="{{post.url}}"> {{post.data.title}}</a> </div> </div> {% else %} - <div class="text-center flex justify-center text-red-600"> + <div class="text-center flex justify-center text-lightish-300"> <span>No Posts </span> <span class="pl-2">¯\_(ツ)_/¯</span> </div> {% endfor %} -</div> - +</div>
\ No newline at end of file diff --git a/src/posts/posts.json b/src/posts/posts.json index 0cb18be..6f7f019 100644 --- a/src/posts/posts.json +++ b/src/posts/posts.json @@ -1,5 +1,4 @@ { "layout": "posts", "tags": "posts" - }
\ No newline at end of file diff --git a/src/tags.njk b/src/tags.njk new file mode 100644 index 0000000..6eff101 --- /dev/null +++ b/src/tags.njk @@ -0,0 +1,36 @@ +--- +layout: base.njk +eleventyComputed: + title: Tagged “{{ tag }}” +pagination: + data: collections + size: 1 + alias: tag + filter: + - all + - post + - posts + - tagList +permalink: /tags/{{tag}}/ +--- + +<h1>Tagged “{{ tag }}”</h1> + +<ol> +{% set postslist = collections[ tag ] %} + + + + +<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}"> +{% for post in postslist | reverse %} + <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}"> + <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a> + + {% for tag in post.data.tags | filterTagList %} + {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} + <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a> + {% endfor %} + </li> +{% endfor %} +</ol>
\ No newline at end of file |