update: contact — modulate and revamp the style

.eleventy.js

@@ -12,7 +12,7 @@ module.exports = function (eleventyConfig) {
       if (lang && hljs.getLanguage(lang))
         try {
           return hljs.highlight(str, { language: lang }).value
-        } catch (__) {}
+        } catch (__) { }
 
       return ''
     },
@@ -79,6 +79,10 @@ module.exports = function (eleventyConfig) {
     return markdownIt.render(text)
   })
 
+  eleventyConfig.addFilter('renderMarkdownInline', (text) => {
+    return markdownIt.renderInline(text)
+  })
+
   eleventyConfig.addFilter('featuredDate', (string) => {
     let date = new Date(string)
     return date.toLocaleDateString('en-us', {

src/_data/contact.json

@@ -0,0 +1,54 @@
+{
+  "title": "Contacts",
+  "desc": "Get in touch with me",
+  "summary": "**Hi There! how is your day?** I hope you have ==a fantastic=={.highlight} one. **If you are a recruiter**, please check my resume [in here](/assets/Curriculum%20Vitae.pdf){lang=en target=_blank}<sup>[EN]</sup> / [or here](/assets/Curriculum%20Vitae%20-%20ID.pdf){lang=id target=_blank}<sup>[ID]</sup> otherwise you can contact me via these methods",
+  "mainSocials": [
+    {
+      "name": "via. e-mail",
+      "desc": "mailto:contact@emptywork.my.id",
+      "action": "mailto:contact@emptywork.my.id",
+      "target": "_blank",
+      "svg": "email.njk"
+    },
+    {
+      "name": "via. chat",
+      "target": "_blank",
+      "svg": "chat.njk"
+    }
+  ],
+  "socials": [
+    {
+      "name": "x / twitter",
+      "action": "",
+      "target": ""
+    },
+    {
+      "name": "linkedin",
+      "action": "https://linkedin.com/in/stevarth-hoke/",
+      "target": "_blank"
+    },
+    {
+      "name": "youtube",
+      "action": "",
+      "target": "",
+      "hidden": true
+    },
+    {
+      "name": "odysee",
+      "action": "",
+      "target": "",
+      "hidden": true
+    },
+    {
+      "name": "reddit",
+      "action": "",
+      "target": "",
+      "hidden": true
+    },
+    {
+      "name": "discord",
+      "action": "",
+      "target": ""
+    }
+  ]
+}

src/_includes/components/snippets/social-items.njk

@@ -0,0 +1,14 @@
+<a class="social-item" {% if social.action %} {% if social.target %} target="{{ social.target }}" {% endif %}
+    href="{{ social.action }}" {% else %} disabled aria-disabled="true" {% endif %}>
+    <div class="social-item-text">
+        <h2>
+            {{ social.name }}
+        </h2>
+        {% if social.desc %}
+        <span>{{ social.desc }}</span>
+        {% endif %}
+    </div>
+    {% if social.svg %}
+    {% include 'components/svg/' + social.svg %}
+    {% endif %}
+</a>

src/_includes/components/svg/chat.njk

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {% if
+    loop.index %} data-delay="{{ loop.index }}" data-animation="fade-in" {% endif %}>
+    <path stroke-linecap="round" stroke-linejoin="round"
+        d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+</svg>

src/_includes/components/svg/email.njk

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {% if
+    loop.index %} data-delay="{{ loop.index }}" data-animation="fade-in" {% endif %}>
+    <path stroke-linecap="round"
+        d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
+</svg>

src/_includes/sections/about.njk

@@ -49,11 +49,11 @@
         <div class="text-area">
           <header>
             <h3 class="extra">
-              {{ about.bioHeader | renderMarkdown | safe }}
+              {{ about.bioHeader | renderMarkdownInline | safe }}
             </h3>
           </header>
           {% for bio in about.bio %}
-          {{ bio | renderMarkdown | safe }}
+            {{ bio | renderMarkdownInline | safe }}
           {% endfor %}
         </div>
       </section>
@@ -70,24 +70,23 @@
       </header>
       <article class="lists">
         {% for proficient in about.languagesProficient %}
-        <ul>
-          <li>
-            {{ proficient.level | safe}}
-          </li>
-          {% for language in proficient.languages %}
-          <li>
-            {{ language | renderMarkdown | safe}}
-          </li>
-          {% endfor %}
-        </ul>
+          <ul>
+            <li>
+              {{ proficient.level | safe}}
+            </li>
+            {% for language in proficient.languages %}
+              <li>
+                {{ language | renderMarkdownInline | safe}}
+              </li>
+            {% endfor %}
+          </ul>
         {% endfor %}
       </article>
     </section>
     <ul class="adds">
       {% for info in about.languagesExtraInfo %}
-      <li{% if info.type=="info" %} class="new-line" {% endif %} data-animation="right-show"
-        data-delay="{{ loop.index }}">
-        {{ info.details | renderMarkdown | safe }}
+        <li{% if info.type == "info" %} class="new-line" {% endif %} data-animation="right-show" data-delay="{{ loop.index }}">
+          {{ info.details | renderMarkdownInline | safe }}
         </li>
         {% endfor %}
     </ul>

src/_includes/sections/footer.njk

@@ -1,7 +1,7 @@
 <footer class="footer t-all">
   <div class="footer-container">
     <div class="footer-top">
-      {{ footer.quote | renderMarkdown | safe }}
+      {{ footer.quote | renderMarkdownInline | safe }}
     </div>
     <div class="footer-bottom">
       <a class="brand" href="/">

src/assets/scss/modules/component/_contact.scss

@@ -0,0 +1,182 @@
+.contact {
+  .form-input {
+    display: flex;
+    flex-direction: column;
+
+    &__captcha {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    label {
+      margin: 2em 0 0.5em 0;
+    }
+
+    input,
+    textarea {
+      width: 100%;
+      padding: 1rem;
+      border: none;
+      background-color: var(--clr-background);
+      color: var(--clr-foreground-900);
+      resize: none;
+    }
+
+    input[type='submit'] {
+      border: none;
+      color: var(--clr-white);
+      background-color: var(--clr-accent);
+    }
+  }
+
+  &-container {
+    --_main-color: var(--clr-background);
+    --_transparent-limit: 30%;
+
+    display: grid;
+    gap: 0.5rem;
+
+    .contact-summary {
+      background-color: var(--_main-color);
+      padding: 2rem;
+      // border: 0.0625rem solid var(--clr-background-800);
+      border-radius: 0.5em;
+      margin-top: 2em;
+
+      sup {
+        font-size: 0.6em;
+      }
+
+      a {
+        color: var(--clr-accent);
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+        font-weight: 500;
+        transition: text-underline-offset 100ms ease-in-out;
+
+        &:is(:hover, :focus) {
+          text-underline-offset: 0.3em;
+        }
+      }
+    }
+
+    .social {
+      &-container {
+        --_size: 20em;
+        --_minGridSize: min(var(--_size), calc(100% - 4rem + 0.5rem));
+        --_minMax: minmax(var(--_minGridSize), 1fr);
+        --_gridSize: repeat(auto-fit, var(--_minMax));
+        display: grid;
+        grid-template-columns: var(--_gridSize);
+        gap: 0.5rem;
+
+        &__small {
+          --_size: 18em;
+
+          .social-item {
+            aspect-ratio: unset;
+            padding: 1em;
+
+            &-text {
+
+              h2 {
+                font-size: 0.9em;
+              }
+            }
+          }
+        }
+
+        li:nth-of-type(odd) {
+          .social-item {
+            grid-template-areas: "text text";
+          }
+        }
+
+      }
+
+      &-item {
+        --_disabledColor: var(--clr-background-800);
+        aspect-ratio: 3/1;
+        border: 0.0625rem solid var(--_disabledColor);
+        border-radius: 0.5em;
+        overflow: hidden;
+        color: var(--_disabledColor);
+        cursor: not-allowed;
+
+        &[href] {
+          border: 0.0625rem solid var(--_main-color);
+          cursor: pointer;
+          color: var(--clr-foreground);
+        }
+
+        user-select: none;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-areas: "text text";
+        align-items: center;
+        justify-content: space-around;
+        position: relative;
+        padding: 2em;
+
+        &-text {
+          font-variant: all-small-caps;
+          font-weight: 700;
+          font-size: 1.2rem;
+          grid-area: text;
+          text-align: center;
+          z-index: 99;
+
+          h2 {
+            font-size: inherit;
+            line-height: 1;
+          }
+
+          span {
+            font-size: 0.8rem;
+            font-style: italic;
+            color: var(--clr-foreground-700);
+            font-weight: 500;
+            font-variant: normal;
+            text-transform: lowercase;
+          }
+        }
+
+        svg {
+          position: absolute;
+          color: var(--clr-background-800);
+          z-index: 0;
+          bottom: -80%;
+          left: -20%;
+          height: 160%;
+        }
+
+        * {
+          z-index: 4;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        &[href]::after {
+          content: "";
+          position: absolute;
+          background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--_main-color));
+          width: 300%;
+          aspect-ratio: 1/1;
+          z-index: 1;
+          transition: width 250ms ease-in-out;
+        }
+
+        &[href]:is(:hover, :focus) {
+          color: inherit;
+
+          outline-offset: 0.1em;
+
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

src/assets/scss/style.scss

@@ -20,5 +20,6 @@
 @import './modules/component/article';
 @import './modules/component/clients';
 @import './modules/component/animation';
+@import './modules/component/contact';
 
 @import './modules/component/error';

src/contact.njk

@@ -9,19 +9,34 @@ layout: 'layouts/secondary.njk'
       <header class="section-header" data-animation="fade-in">
         <span>
           <a class="breadcrumb" href="/">Home</a> ›
-          <a class="breadcrumb" href="/contact">Contact</a>
+          <a class="breadcrumb" href="/contact">{{ contact.title }}</a>
         </span>
         <h1 id="contact" class="header-title">
           <a class="header-link__access" href="#contact">
             <span aria-hidden="true">#</span>
             <span class="sr-only">Link to heading "contact"</span>
           </a>
-          Get in touch with me
+          {{ contact.desc }}
         </h1>
       </header>
-      <div data-animation="fade-in" data-delay="2">
-        <p>This page is currently being re-develop</p>
-        <p>Check back on few weeks, or in the next couple of months</p>
+      <div class="contact-container" data-animation="fade-in" data-delay="2">
+        <p class="contact-summary">{{ contact.summary | renderMarkdownInline | safe }}</p>
+        <ul class=social-container>
+          {% for social in contact.mainSocials %}
+          <li data-animation="fade-in" data-delay="{{ loop.index }}">
+            {% include 'components/snippets/social-items.njk' %}
+          </li>
+          {% endfor %}
+        </ul>
+        <ul class="social-container social-container__small">
+          {% for social in contact.socials %}
+          {% if social.hidden !== true %}
+          <li data-animation="fade-in" data-delay="{{ loop.index }}">
+            {% include 'components/snippets/social-items.njk' %}
+          </li>
+          {% endif %}
+          {% endfor %}
+        </ul>
       </div>
     </div>
   </section>