<main class="w-full flex-1 relative">
<article class="mx-auto py-6 px-4 max-w-7xl relative lg:px-8">
<div class="hero max-w-xl space-y-8">
<h1 class="text-(gray-900 3xl wrap-balance) font-bold tracking-tight [&>b]:(text-pri-600 font-black dark:text-pri-500) md:(text-4xl leading-tight)">
Craig Erskine is a
<b>designer</b>,
<b>artist</b>,
<b>author</b>,
<b>guitar nerd</b>,
and <b>gamer</b>...
</h1>
<h2 class="text-wrap-balance leading-relaxed opacity-80">I'm passionate about UX design, front-end website engineering, paper & pencil sketching, noodling around on guitars, playing nerdy RPG's... oh, and I co-authored a book about designing in good ol' Macromedia Fireworks.</h2>
<ul class="flex gap-2 lg:(gap-5)">
<li><a href="https://dribbble.com/craigerskine" class="group flex rounded-full" aria-label="Dribbble"><span class="btn-pink w-12 h-12 text-2xl"><iconify-icon icon="mdi:dribbble" class="iconify"></iconify-icon></span></a></li>
<li><a href="https://github.com/craigerskine" class="group flex rounded-full" aria-label="GitHub"><span class="btn-gray w-12 h-12 text-2xl"><iconify-icon icon="mdi:github" class="iconify"></iconify-icon></span></a></li>
<li><a href="https://codepen.io/craigerskine" class="group flex rounded-full" aria-label="CodePen"><span class="btn-red w-12 h-12 text-2xl"><iconify-icon icon="ri:codepen-fill" class="iconify"></iconify-icon></span></a></li>
<li><a href="https://linkedin.com/in/craigerskine/" class="group flex rounded-full" aria-label="LinkedIn"><span class="btn-blue w-12 h-12 text-2xl"><iconify-icon icon="mdi:linkedin" class="iconify"></iconify-icon></span></a></li>
<li><a href="https://behance.net/craigerskine" class="group flex rounded-full" aria-label="Behance"><span class="btn-purple w-12 h-12 text-2xl"><iconify-icon icon="mdi:behance" class="iconify"></iconify-icon></span></a></li>
</ul>
</div>
</article>
<nav class="mx-auto pt-6 px-4 max-w-7xl flex relative lg:px-8" role="navigation" aria-label="Work types">
<ul class="p-1.5 bg-gray-500/10 inline-flex gap-x-1.5 ring-(1 gray-500/25) rounded-full shadow-inner" role="tablist">
<template x-for="(item, index) in workTypes" hidden>
<li role="presentation">
<a href="#" @click.prevent.stop="workActive = index" class="py-3 px-6 text-sm leading-none font-semibold uppercase block rounded-full motion-safe:(transition)" :class="workActive === index ? 'bg-white/90 dark:bg-black/50 dark:ring-1 dark:ring-gray-500/25' : 'hover:text-gray-500'" role="tab" :aria-expanded="workActive === index" x-text="item"></a>
</li>
</template>
</ul>
</nav>
<div class="pb-16 relative">
<section x-show="workActive == 0" id="panel-work-ill" class="py-12 flex justify-center gap-5 overflow-hidden motion-safe:(transition duration-500 ease-in-out) sm:gap-8" role="tabpanel" x-transition:enter="absolute top-0 inset-x-0" x-transition:enter-start="opacity-0 scale-110 blur-lg" x-transition:enter-end="opacity-100 scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-110 blur-lg">
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "PCE 8bitdo", sub: "Controller Illustration", url: "https://dribbble.com/shots/11534393-PC-Engine-Wireless-Controller", tech: ["Sketch","Figma"], type: "png" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl relative [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<b class="bg-(center cover) absolute inset-0" aria-hidden="true" style="background-image: url('/_assets/img/bg-wood.png');"></b>
<div class="w-full h-full flex relative">
<img src="/_assets/img/work-pce-8bitdo.png" alt="PCE 8bitdo illustration" class="w-full h-full object-(cover center) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "Dreamcast", sub: "Controller Illustration", url: "https://dribbble.com/shots/5788344-Dreamcast-Controller-Final", tech: ["Sketch","Figma"], type: "png" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl relative [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<b class="bg-(center cover) absolute inset-0" aria-hidden="true" style="background-image: url('/_assets/img/bg-wood.png');"></b>
<div class="w-full h-full flex relative">
<img src="/_assets/img/work-dreamcast.png" alt="Dreamcast illustration" class="w-full h-full object-(cover center) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "Gamecube", sub: "Controller Illustration", url: "https://dribbble.com/shots/5814093-Gamecube-Controller-Final", tech: ["Sketch","Figma"], type: "png" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl relative [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<b class="bg-(center cover) absolute inset-0" aria-hidden="true" style="background-image: url('/_assets/img/bg-wood.png');"></b>
<div class="w-full h-full flex relative">
<img src="/_assets/img/work-gamecube.png" alt="Gamecube illustration" class="w-full h-full object-(cover center) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "PS Vita", sub: "System Illustration", url: "https://dribbble.com/shots/2460543-PS-Vita", tech: ["Sketch","Figma"], type: "png" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl relative [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<b class="bg-(center cover) absolute inset-0" aria-hidden="true" style="background-image: url('/_assets/img/bg-wood.png');"></b>
<div class="w-full h-full flex relative">
<img src="/_assets/img/work-ps-vita.png" alt="PS Vita illustration" class="w-full h-full object-(cover center) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "Neo Geo Pocket color", sub: "System Illustration", url: "https://dribbble.com/shots/1823003-Neo-Geo-Pocket-Color-Sketch", tech: ["Sketch","Figma"], type: "png" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl relative [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<b class="bg-(center cover) absolute inset-0" aria-hidden="true" style="background-image: url('/_assets/img/bg-wood.png');"></b>
<div class="w-full h-full flex relative">
<img src="/_assets/img/work-neo-geo-pocket-color.png" alt="Neo Geo Pocket color illustration" class="w-full h-full object-(cover center) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
</section>
<section x-show="workActive == 1" id="panel-work-web" class="py-12 flex justify-center gap-5 overflow-hidden motion-safe:(transition duration-500 ease-in-out) sm:gap-8" role="tabpanel" x-transition:enter="absolute top-0 inset-x-0" x-transition:enter-start="opacity-0 scale-90 blur-lg" x-transition:enter-end="opacity-100 scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90 blur-lg">
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "bioplan", sub: "[OFFLINE] Web UX + CMS", url: "https://craigerskine.github.io/bioplan.se/", tech: ["Figma","HTML","CSS","Js"], type: "jpg" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<div class="w-full h-full flex">
<img src="/_assets/img/work-bioplan.jpg" alt="bioplan website" class="w-full h-full object-(cover top) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "Legend of Mana", sub: "Web UX + CMS", url: "https://legendofmana.info/", tech: ["Sketch","HTML","CSS","Alpine","11ty"], type: "jpg" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<div class="w-full h-full flex">
<img src="/_assets/img/work-legend-of-mana.jpg" alt="Legend of Mana website" class="w-full h-full object-(cover top) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "OpenEmu", sub: "Web UX", url: "https://openemu.org/", tech: ["HTML","CSS","Js","Vue"], type: "jpg" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<div class="w-full h-full flex">
<img src="/_assets/img/work-openemu.jpg" alt="OpenEmu website" class="w-full h-full object-(cover top) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "pxl media", sub: "Web UX", url: "https://pxl.media", tech: ["Sketch","HTML","CSS","Alpine","11ty"], type: "jpg" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<div class="w-full h-full flex">
<img src="/_assets/img/work-pxl-media.jpg" alt="pxl media website" class="w-full h-full object-(cover top) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
<a @click.prevent='workModal = !workModal; $dispatch("work-modal", { data: { title: "Wisconsin Music", sub: "Web UX + CMS", url: "https://wisconsinmusic.net/", tech: ["Sketch","HTML","CSS","Vue"], type: "jpg" } })' href="#" class="group relative w-1/3 flex-(& none) first-child:hidden last-child:hidden overflow-hidden rounded-xl [&:nth-child(odd)]:rotate-2 [&:nth-child(even)]:-rotate-2 shadow-xl lg:(w-[calc(20vw)] h-[calc(15vw)] first-child:flex last-child:flex rounded-2xl) motion-safe:(transition) hover:(rotate-0)">
<div class="w-full h-full flex">
<img src="/_assets/img/work-wisconsin-music.jpg" alt="Wisconsin Music website" class="w-full h-full object-(cover top) pointer-events-none transform scale-110 motion-safe:(transition-all) group-hover:(scale-150)" />
</div>
</a>
</section>
</div>
<div x-show="workModal" x-trap.noscroll.inert="workModal" x-on:keydown.window.prevent.escape="workModal = false" class="modal bg-black/80 flex justify-center items-center overflow-y-auto fixed inset-0 z-[9999] motion-safe:(transition duration-300 ease-in-out)" x-transition:enter-start="opacity-0 blur-lg" x-transition:enter-end="opacity-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0 blur-lg">
<div @click.outside="workModal = false" class="relative" role="dialog" aria-modal="true">
<button type="button" @click="workModal = false" class="w-8 h-8 bg-gray-200 font-black flex items-center justify-center absolute top-2 right-2 shadow rounded-full ring-(inset 2 gray-50) lg:(-top-4 -right-4)"><iconify-icon icon="fa6-solid:xmark" inline="false"></iconify-icon> <span class="sr-only">Close</span></button>
<template x-if="workModal" hidden>
<div class="w-screen max-w-xl bg-gray-200 overflow-hidden rounded-2xl shadow-2xl">
<img @click.prevent.stop @touchstart.prevent.stop :src="'/_assets/img/work-' + slugify(workData.title) +'.'+ workData.type" :alt="workData.title" class="w-full h-96 bg-(cover center) object-(center cover) pointer-events-none" :style="workData.type == 'png' ? 'background-image: url(\'/_assets/img/bg-wood.png\')' : ''" />
<div class="py-6 px-8 relative">
<div class="flex-(& col) gap-1">
<p x-text="workData.title" class="text-2xl font-black flex-1 lg:(text-4xl tracking-tight)"></p>
<p x-text="workData.sub" class="text-(sm gray-500) flex-none"></p>
</div>
<ul class="text-xl leading-none flex -space-x-2 absolute -top-5 right-5">
<template x-for="(t, index) in workData.tech" hidden>
<li class="w-10 h-10 text-pri-50 dark:(text-pri-50) bg-pri-500 flex ring-(2 inset white) rounded-full shadow-lg">
<template x-if="t == 'Fireworks'" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" role="img" class="m-auto w-6 fill-current">
<title x-text="t"></title>
<path x-show="t == 'Fireworks'" d="m40 16.64c0 9.7043815-6.0494604 18.3063356-14.8524047 18.4774042l-.2675953.0025958v-6.0342857c5.0241209 0 8.9919496-5.5077194 9.0708038-12.2412957l.0011962-.2044186zm-12.4 0c0 9.7043815-6.0494604 18.3063356-14.8524047 18.4774042l-.2675953.0025958v-6.0342857c5.0241209 0 8.9919496-5.5077194 9.0708038-12.2412957l.0011962-.2044186zm-3.44-11.68v6c-5.3504 0-7.231488 4.677376-9.173289 9.9160371l-.2654988.7174554c-2.3988442 6.4814515-5.1308122 13.5265075-14.7212122 13.5265075v-6c3.46826668-.0092181 6.00160001-2.0358848 7.6-6.08h-4.56v-6h6.96c2.6666666-8.05333336 7.3866666-12.08 14.16-12.08z" />
</svg>
</template>
<template x-if="t == 'CSS' || t == 'Figma' || t == 'HTML' || t == 'Js' || t == '11ty' || t == 'Alpine' || t == 'Sketch' || t == 'Vue'" hidden>
<iconify-icon :icon="[t == 'CSS' ? 'fa6-brands:css3-alt' :
(t == 'Figma') ? 'fa6-brands:figma' :
(t == 'HTML') ? 'fa6-brands:html5' :
(t == 'Js') ? 'fa6-brands:js' :
(t == '11ty') ? 'simple-icons:eleventy' :
(t == 'Alpine') ? 'simple-icons:alpinedotjs' :
(t == 'Sketch') ? 'fa6-brands:sketch' : 'fa6-brands:vuejs'
]" inline="false" class="m-auto" :title="t"></iconify-icon>
</template>
</li>
</template>
</ul>
<a :href="workData.url" class="p-1 w-20 h-20 bg-pri-500 text-(xl white) flex items-end justify-end absolute bottom-0 right-0 [clip-path:polygon(100%_0%,100%_100%,100%_100%,0%_100%)] motion-safe:(transition) hover:(bg-white text-black) focus:(bg-white text-black)">
<iconify-icon icon="fa6-solid:arrow-right" class="m-2"></iconify-icon>
<span class="sr-only">Learn More</span>
</a>
</div>
</div>
</template>
</div>
</div>
</main>
