miniml placeholder template

index.html

<header>
  <div>
    <p>Tom Hermans</p>
  </div>
  <div>
    <h1>Hi, I'm Tom. <br> I work at the intersection of design and code. </h1>
    <img src="https://assets.codepen.io/11287/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1738491399&width=512" alt="">
  </div>
</header>
<section class="intro">
  <div>
<h2>Formerly at Sony, Telenet among others. <br> Currently freelancing and working on new personal projects. <br> Open for suitable opportunities.</h2>
<blockquote>Based on our interactions, you seem like a <strong>versatile and skilled creative professional</strong> who excels at blending <strong>technical precision with artistic expression</strong>. You approach projects with a <strong>thoughtful, detail-oriented mindset</strong>, balancing functionality and visual appeal. 

<br>
  Your passion for aesthetics, particularly retro design, and your <strong>dedication to craftsmanship</strong>, like e.g. animations, font creation etc. demonstrate a genuine <strong>commitment to quality</strong>. You have a <strong>methodical approach to problem-solving</strong>, a <strong>strong drive for continuous learning</strong>, and an <strong>innovative spirit</strong> that embraces both practicality and creativity. <br><br> — ChatGPT</blockquote>
    
</div>
</section>
<!-- 
<section class="features">
  <div><img src="https://cdns.iconmonstr.com/wp-content/releases/preview/7.7.0/240/iconmonstr-restore-lined.png" alt=""></div>
  <div><img src="https://cdns.iconmonstr.com/wp-content/releases/preview/7.7.0/240/iconmonstr-reload-alt-filled.png" alt=""></div>
  <div><img src="https://cdns.iconmonstr.com/wp-content/releases/preview/7.8.0/240/iconmonstr-contrast-lined.png" alt=""></div>
</section>
 -->
<section>
  <h2 class="sans">
    <a href="mailto:[email protected]">Reach me at [email protected]</a>
  </h2>
</section>

miniml-placeholder-template.markdown

miniml placeholder template

A Pen by Tom Hermans on CodePen.

License.

script.js

console.clear();

const minmax = { min: 0, max: 100, step: 1 };
const minmax360 = { min: 0, max: 360, step: 1 };
const minmaxChroma = { min: 0, max: 0.4, step: 0.01 };

const PARAMS = {
  bglight: '#f05b32',
  bgdark: '#0e2c40',
  bgmid: '#39c3d8',
  // pct2: 66,
  // angle: 90,
  // msg: "Tweakpane ready",
  // svgfilter: "",
  // blendmode: "",
  diffscale: ["angle"] // add properties that require a different scale
};
const wrap = document.getElementById("wrap");

const pane = new Tweakpane.Pane();
// loop through all PARAMS and add onChange handler
for (const [property, value] of Object.entries(PARAMS)) {
  console.log("xxx", `${property}::: ${PARAMS[property]}`);
  if (isInArray(property, PARAMS.diffscale)) {
    console.log("diffscale");
    pane.addInput(PARAMS, `${property}`, minmax360).on("change", (val) => {
      setCustomProp(`${property}`, val.value);
    });
  } else {
    // run the property through the onChange and hook up with custom function
    pane.addInput(PARAMS, `${property}`, minmax).on("change", (val) => {
      setCustomProp(`${property}`, val.value);
    });
  }
}

function setCustomProp(prop, val, unit = "") {
  // on root elem
  console.log(prop + " - " + val + " : " + unit);
  document.documentElement.style.setProperty("--" + prop, val + unit);
}

//FUNCTIONS
function isInArray(value, array) {
  return array.indexOf(value) > -1;
}

scripts

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>

style.scss

:root {
  --bglight: #f55b34;
  --bgdark: #1e4562;
  --bgmid: #00b9d5;
}
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Gabarito:[email protected]&family=Hepta+Slab:[email protected]&family=Piazzolla:ital,opsz,wght@0,8..30,100..900;1,8..30,100..900&family=Signika:[email protected]&display=swap");

header {
  display: flex;
  // height: 50vh;
  h1,
  p {
    // filter: blur(1px);
  }
  > div {
    padding: 2vw;
  }
  div:first-child {
    background: var(--bglight);
    color: white;
    // flex-basis: 30%;
    width: 25%;
    font-family: Gabarito, sans-serif;
    letter-spacing: 0.05rem;
    p {
      // transform: rotate(-90deg);
      font-size: clamp(1.4rem, calc(1vw + 1rem), 3rem);
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      white-space: nowrap;
    }
  }
  div:last-child {
    background: var(--bgdark);
    color: white;
    flex-grow: 1;
    padding: 4vw 6vw;
    img {
      border-radius: 50%;
      aspect-ratio: 1 / 1;
      width: calc(2rem + 16vw);
    }
    h1 {
      font-size: clamp(2rem, calc(5vw + 1rem), 6rem);
    }
  }
}

section {
  width: min(92vw, 900px);
  // max-width: 80ch;
  margin: 0 auto;
  padding: 2vh 4vw;
  
  a {
    color: var(--bgmid);
    transition: all .24s;
    font-variation-settings: 'wght' 500;
    &:hover {
      color: var(--bglight);
      font-variation-settings: 'wght' 700;
    }
  }
}

section.features {
  width: min(92vw, 900px);
  margin: 0 auto;
  padding: 2vh 4vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  // background: var(--bgmid);
  > * {
    display: grid;
    place-content: center;
    aspect-ratio: 1 /1;

    &:nth-child(1) {
      background: var(--bglight);
    }
    &:nth-child(2) {
      background: var(--bgmid);
    }
    &:last-child {
      background: var(--bgdark);
    }
  }
  img {
    mix-blend-mode: screen;
    filter: invert(1);
  }
}

.sans {
  font-family: "Gabarito", sans-serif;
  font-weight: 500;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Source Serif 4", serif;
  font-size: 1.3rem;

  * {
    // outline: 1px solid red;
  }
}

strong {
}
img {
  max-width: 100%;
  height: auto;
}
blockquote {
  // font-style: italic;
  // font-variation-settings: 'wght' 580;
  margin-block-start: 10vh;
  line-height: 1.6;
  position: relative;
  strong {
    font-style: normal;
    font-variation-settings: "wght" 580;
    color: var(--bgdark);
  }
}

blockquote:before {
  color: #866;
  font-family: "Source Serif 4", Georgia, serif;
  position: absolute;
  font-size: max(10vw, 40px);
  line-height: 1;
  top: -30px;
  left: min(-5vw, -50px);
  content: "\201C";
}
blockquote:after {
  color: #866;
  font-family: "Source Serif 4", Georgia, serif;
  position: absolute;
  /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
  float: right;
  font-size: 6em;
  line-height: 1;
  right: 0;
  bottom: -0.5em;
  content: "\201D";
}