diff options
author | indrajith | 2022-10-01 14:07:36 +0000 |
---|---|---|
committer | indrajith | 2022-10-01 14:07:36 +0000 |
commit | 9665f6dcf69b2c4ad15503db638bb2b82e78893a (patch) | |
tree | b8e926cc11720710d62ddc0d2ff2e0a8860171ee | |
parent | 98e0a1608cee0ae07da475aee3436846b2b109d9 (diff) | |
parent | bb50c7e11835154576c6f7a2a40cf2aaee6f4c60 (diff) | |
download | indrajith-dev-9665f6dcf69b2c4ad15503db638bb2b82e78893a.tar.gz indrajith-dev-9665f6dcf69b2c4ad15503db638bb2b82e78893a.tar.bz2 indrajith-dev-9665f6dcf69b2c4ad15503db638bb2b82e78893a.zip |
Merge pull request 'Theming & Page Changes' (#1) from feature/theming into master
Reviewed-on: https://git.indrajith.dev/indrajith/indrajith.dev/pulls/1
-rw-r--r-- | .eleventy.js | 6 | ||||
-rw-r--r-- | src/_includes/assets/css/styles.css | 279 | ||||
-rw-r--r-- | src/_includes/base.njk | 2 | ||||
-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 | 26 | ||||
-rw-r--r-- | src/_includes/posts.njk | 14 | ||||
-rw-r--r-- | src/about.njk | 6 | ||||
-rw-r--r-- | src/cv.njk | 71 | ||||
-rw-r--r-- | src/index.njk | 18 | ||||
-rw-r--r-- | src/posts/index.njk | 11 | ||||
-rw-r--r-- | src/posts/posts.json | 1 | ||||
-rw-r--r-- | src/tags.njk | 36 | ||||
-rw-r--r-- | tailwind.config.js | 22 |
15 files changed, 421 insertions, 91 deletions
diff --git a/.eleventy.js b/.eleventy.js index 2a2b255..3089f6c 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -32,6 +32,12 @@ module.exports = function (config) { return dayjs(date).format("DD MMM YYYY"); }); + function filterTagList(tags) { + return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1); + } + + config.addFilter("filterTagList", filterTagList) + return { dir: { input: "src", diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css index dd962cc..d67f983 100644 --- a/src/_includes/assets/css/styles.css +++ b/src/_includes/assets/css/styles.css @@ -851,6 +851,10 @@ select { margin-bottom: 1.25rem; } +.mt-5 { + margin-top: 1.25rem; +} + .mt-auto { margin-top: auto; } @@ -859,10 +863,6 @@ select { margin-left: auto; } -.mt-5 { - margin-top: 1.25rem; -} - .mt-1 { margin-top: 0.25rem; } @@ -871,18 +871,50 @@ 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; +} + +.ml-0 { + margin-left: 0px; +} + +.mr-0 { + margin-right: 0px; +} + .mt-8 { margin-top: 2rem; } @@ -927,6 +959,10 @@ select { height: 12rem; } +.h-2 { + height: 0.5rem; +} + .h-12 { height: 3rem; } @@ -939,6 +975,10 @@ select { width: 100%; } +.w-2 { + width: 0.5rem; +} + .w-12 { width: 3rem; } @@ -1031,20 +1071,20 @@ select { gap: 0.75rem; } -.gap-10 { - gap: 2.5rem; +.gap-2 { + gap: 0.5rem; } .gap-5 { gap: 1.25rem; } -.gap-6 { - gap: 1.5rem; +.gap-10 { + gap: 2.5rem; } -.gap-2 { - gap: 0.5rem; +.gap-6 { + gap: 1.5rem; } .gap-4 { @@ -1073,6 +1113,10 @@ select { overflow: hidden; } +.rounded-lg { + border-radius: 0.5rem; +} + .rounded-full { border-radius: 9999px; } @@ -1085,10 +1129,6 @@ select { border-radius: 0px; } -.rounded-lg { - border-radius: 0.5rem; -} - .rounded-l-md { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; @@ -1107,6 +1147,10 @@ select { border-width: 2px; } +.border-l { + border-left-width: 1px; +} + .border-r-0 { border-right-width: 0px; } @@ -1124,24 +1168,34 @@ select { border-color: transparent; } -.bg-black { +.bg-main-dark-brown-2 { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(51 39 42 / var(--tw-bg-opacity)); } -.bg-yellow-500 { +.bg-main-normal-brown { --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); + background-color: rgb(89 74 78 / var(--tw-bg-opacity)); } -.bg-purple-500 { +.bg-main-dark-brown { --tw-bg-opacity: 1; - background-color: rgb(168 85 247 / var(--tw-bg-opacity)); + background-color: rgb(51 39 42 / var(--tw-bg-opacity)); } -.bg-sky-700 { +.bg-darkish-50 { --tw-bg-opacity: 1; - background-color: rgb(3 105 161 / var(--tw-bg-opacity)); + background-color: rgb(141 105 122 / var(--tw-bg-opacity)); +} + +.bg-darkish-300 { + --tw-bg-opacity: 1; + background-color: rgb(13 43 69 / var(--tw-bg-opacity)); +} + +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); } .bg-white { @@ -1159,6 +1213,36 @@ 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-darkish-100 { + --tw-bg-opacity: 1; + background-color: rgb(84 78 104 / 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-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)); @@ -1179,6 +1263,21 @@ select { background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } +.bg-main-cream-white-1 { + --tw-bg-opacity: 1; + background-color: rgb(255 255 254 / var(--tw-bg-opacity)); +} + +.bg-main-red { + --tw-bg-opacity: 1; + background-color: rgb(255 139 167 / var(--tw-bg-opacity)); +} + +.bg-main-cream-white-2 { + --tw-bg-opacity: 1; + background-color: rgb(250 238 231 / var(--tw-bg-opacity)); +} + .object-cover { -o-object-fit: cover; object-fit: cover; @@ -1244,14 +1343,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; } @@ -1284,6 +1391,10 @@ select { font-family: supplyLight, sans-serif; } +.font-mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -1299,16 +1410,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; @@ -1327,10 +1438,18 @@ select { font-weight: 800; } +.font-semibold { + font-weight: 600; +} + .font-medium { font-weight: 500; } +.font-thin { + font-weight: 100; +} + .italic { font-style: italic; } @@ -1339,14 +1458,34 @@ select { line-height: 1rem; } -.text-yellow-500 { +.text-main-cream-white-1 { --tw-text-opacity: 1; - color: rgb(234 179 8 / var(--tw-text-opacity)); + color: rgb(255 255 254 / 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-lightish-200 { + --tw-text-opacity: 1; + color: rgb(255 170 94 / 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 { @@ -1359,9 +1498,29 @@ 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-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity)); } .text-red-600 { @@ -1399,6 +1558,31 @@ select { color: rgb(21 94 117 / var(--tw-text-opacity)); } +.text-main-normal-brown { + --tw-text-opacity: 1; + color: rgb(89 74 78 / var(--tw-text-opacity)); +} + +.text-main-cream-white-2 { + --tw-text-opacity: 1; + color: rgb(250 238 231 / var(--tw-text-opacity)); +} + +.text-main-red { + --tw-text-opacity: 1; + color: rgb(255 139 167 / var(--tw-text-opacity)); +} + +.text-main-dark-brown-2 { + --tw-text-opacity: 1; + color: rgb(51 39 42 / var(--tw-text-opacity)); +} + +.text-main-dark-brown { + --tw-text-opacity: 1; + color: rgb(51 39 42 / var(--tw-text-opacity)); +} + .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline; @@ -1426,6 +1610,10 @@ select { 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); +} + .line-clamp-1 { overflow: hidden; display: -webkit-box; @@ -1587,14 +1775,19 @@ 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)); +} + +.hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } .focus\:border-indigo-500:focus { diff --git a/src/_includes/base.njk b/src/_includes/base.njk index c96f9f2..8aa77c8 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -3,7 +3,7 @@ <head> {% include "./partials/head.njk" %} </head> -<body class="flex h-screen flex-col font-supply-regular"> +<body class="flex h-screen flex-col font-supply-regular bg-main-cream-white-2"> {% 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"> diff --git a/src/_includes/intro.njk b/src/_includes/intro.njk index 19938e9..5112d97 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-cream-white-2"> {% 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 b34ef59..8a1a660 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-main-dark-brown-2 text-main-cream-white-2"> <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="GIT - Personal" target="_blank" href="https://git.indrajith.dev/" class="links">{% feather "git-branch" %}</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 30fdc77..ed5aac2 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-main-normal-brown text-main-cream-white-1 font-bold 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> + <a href="/" class="text-lg md:text-3xl text-main-red">{ 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-3 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="GIT - Personal" target="_blank" href="https://git.indrajith.dev/" class="links">{% feather "git-branch" %}</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 font-bold 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..0245970 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 bg-main-cream-white-2"> {% 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..7da7c2f 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-main-dark-brown-2 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-main-dark-brown"> 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-main-dark-brown"> 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,73 @@ layout: base.njk title: CV --- -CV
\ No newline at end of file +<div class="flex flex-start justify-center items-center underline text-2xl mb-10"><h1>Curriculum Vitae</h1></div> + +<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"></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"></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"></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"></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"></p> + </div> + </li> +</ol>
\ No newline at end of file diff --git a/src/index.njk b/src/index.njk index 9bf43ca..751d15d 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"> - <p class="text-lg md:text-2xl font-bold">{{alternatetitle}}</p> - <p class="mt-3 text-justify"> + <div class="bg-main-normal-brown text-md md:text-xl text-main-cream-white-1 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-thin">{{alternatetitle}}</p> + <p class="mt-3 text-justify font-thin"> 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-main-dark-brown 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-main-normal-brown 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-main-normal-brown 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/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 diff --git a/tailwind.config.js b/tailwind.config.js index cbcfb75..416c76e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,6 +12,28 @@ module.exports = { "supply-regular": ["supplyRegular", "sans-serif"], "supply-light": ["supplyLight", "sans-serif"], }, + colors: { + darkish: { + 50: '#8d697a', + 100: '#544e68', + 200: '#203c56', + 300: '#0d2b45' + }, + lightish: { + 50: '#ffecd6', + 100: '#ffd4a3', + 200: '#ffaa5e', + 300: '#d08159' + }, + main: { + 'cream-white-1': "#fffffe", + 'dark-brown': "#33272a", + 'normal-brown': "#594a4e", + 'cream-white-2': "#faeee7", + 'dark-brown-2': "#33272a", + 'red': "#ff8ba7" + } + } }, }, plugins: [ |