Fullstack Developer

Code editor mockups n stuff

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://webfonts.flourd.workers.dev/api/MonoLisa.css">
<script src="https://unpkg.com/windicss-runtime-dom"></script>
<script
  src="https://esm.sh/@github/tab-container-element@3/dist/index.js"
  type="module"
></script>

<style></style>
<div class="min-h-screen min-w-screen py-4">
  <article>
    <section aria-label="Nicholas Berlette: Fullstack Developer">
      <div class="container-xl mx-auto p-responsive pb-12 lg:py-24">
        <div>
          <div>
            <div class="text-center">
              <h1
                aria-hidden="true"
                hidden="hidden"
                visibility="sr-only"
                style="opacity: 0"
              >
                Nicholas Berlette
              </h1>
              <strong
                class="relative mt-4 mb-4 mx-auto gloss-u-typescale-800 font-sans"
                style="
                  font-size: 8vw !important;
                  font-weight: 900;
                  font-size: 1.2em;
                  -webkit-text-decoration: dotted underline #0003;
                  text-decoration-thickness: 3px;
                  text-decoration-skip: edges;
                  padding: 0 0 0.2em 0;
                  text-shadow:
                    0 0.04em 0.03em #0003,
                    0.25em 0.33em 0.33em #0001,
                    -0.25em 0.33em 0.33em #0001;
                  letter-spacing: -0.03em;
                "
                >N. Berlette</strong
              >
              <h2
                id="tagline"
                class="tagline relative mt-8 mb-8 gloss-u-typescale-800 tracking-[-0.03em]"
                style="
                  font-size: 5vw !important;
                  color: #345;
                  font-family:
                    IBM Plex Mono,
                    MonoLisa,
                    Dank Mono,
                    Operator Mono,
                    monospace !important;
                "
              >
                <span
        ...

CSS

@import "https://unpkg.com/open-props";
:root {
	--font-mono: 'MonoLisa', 'Operator Mono', 'OperatorMono Nerd Font', 'Fira Code', 'Dank Mono', monospace !important;
}
.font-mono {
	font-family: var(--font-mono);
	font-weight: 600;
	letter-spacing: -0.03em;
}
h1 .font-mono, h2.font-mono, h2 .font-mono {
	letter-spacing: -0.075em;
}
footer a[href] {
	font-family: sans-serif;
	font-weight: 200;
}

h2.tagline:before {
	opacity: 0.5;
	margin-right: 1rem;
}

.focus-nextjs {
	font-weight: 600;
	text-decoration: underline;
	color: #234;
	text-decoration-color: #2349;
}
.dark .focus-nextjs {
	color: white;
	text-decoration-color: #fff9;
}
.focus-remix {
	font-weight: 600;
	text-decoration: underline;
	color: rgba(107, 217, 104, var(--tw-text-opacity));
	text-decoration-color: rgba(107, 217, 104, 0.5);
}
.dark .focus-remix {
	color: rgba(107, 217, 104, var(--tw-text-opacity));
	text-decoration-color: rgba(107, 217, 104, 0.5);
}
.spellcheck {
	text-decoration-thickness: 2px;
	text-decoration-style: wavy;
	text-decoration-color: #f006;
	text-decoration-line: underline;
}
.focus-typescript {
	text-decoration: underline;
	font-weight: 600;
	color: #7cccee;
	text-decoration-color: #7cccee99;
}
.dark .focus-typescript {
	color: #8dddff;
	text-decoration-color: #8dddff99;
}
.focus-svelte {
	text-decoration: underline;
	font-weight: 600;
	color: #ff5f00;
	text-decoration-color: #ff5f0099;
}
.dark .focus-svelte {
	color: #ff6c22;
	text-decoration-color: #ff6c2299;
}
.focus-cfw {
	font-weight: 600;
	text-decoration: underline;
	color: #ffaf00;
	text-decoration-color: #ffaf0099;
}

.cursor-default { cursor:default }
.vscode-window-dark {
	
}
[role="tablist"] {
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
	overflow-x: scroll;
	box-shadow: inset 0 -4px 0 #00000009;
}
[role="tab"] {
	border-left-color: transparent !important;
	border-right: 1px solid var(--border) !important;
	transition: all 0.3s...