Add alien instead of my face

components/AlienHeader.tsx

@@ -0,0 +1,21 @@
+export default function AlienHeader() {
+
+  return (
+    <div className="ufo">
+      <div className="monster" style={{ color: '#7cb342' }} >
+        <div className="body">
+          <div className="ear"></div>
+          <div className="ear"></div>
+          <div className="vampi-mouth">
+            <div className="vampi-tooth"></div>
+          </div>
+        </div>
+        <div className="eye-lid">
+          <div className="eyes">
+            <div className="eye"></div>
+          </div>
+        </div>
+      </div>
+    </div >
+  )
+}

components/alien_styles.css

@@ -0,0 +1,251 @@
+.ufo {
+  font-size: 5rem;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.monster {
+  font-size: 0.7em;
+  width: 1em;
+  height: 1.3em;
+  border-radius: 0.5em 0.5em 0em 0em / 0.6em 0.6em 0em 0em;
+  box-sizing: content-box;
+  border: 0.07em solid transparent;
+  position: relative;
+  user-select: none;
+  cursor: grab;
+}
+
+.monster.small {
+  font-size: 4rem;
+}
+
+.body {
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+  border-radius: inherit;
+  position: relative;
+  transform-origin: bottom center;
+  animation: bouncebody alternate infinite 400ms 40ms ease-in-out;
+}
+
+.eyes,
+.eye-lid {
+  text-align: center;
+  display: flex;
+  font-size: 0.65em;
+  width: 1em;
+  height: 1em;
+  position: absolute;
+  left: 0.05em;
+  top: 0.3em;
+  animation: turn infinite 10s ease-in-out;
+}
+
+
+.eye {
+  position: relative;
+  display: inline-block;
+  border-radius: 50%;
+  width: 75%;
+  height: 75%;
+  background-color: black;
+  border-radius: 50%;
+}
+
+.eye-lid {
+  background-color: white;
+  border-radius: 0.5em 0.5em 0.5em 0.5em / 0.6em 0.6em 0.4em 0.4em;
+  box-shadow: 0.03em 0.14em rgba(0, 0, 0, 0.1);
+  animation: blink forwards turn infinite 10s ease-in-out;
+}
+
+.eye:after {
+  /*white shadow*/
+  --pupil-size: 0.2em;
+  position: absolute;
+  top: 0.05em;
+  left: 0.3em;
+  width: var(--pupil-size);
+  height: var(--pupil-size);
+  background: white;
+  border-radius: 50%;
+  content: " ";
+}
+
+.mouth {
+  font-size: 0.2em;
+  width: 1em;
+  height: 0.3em;
+  background: black;
+  border-radius: 1.5em 1.5em 0.5em 0.5em;
+  position: absolute;
+  bottom: 0.8em;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mouth::before {
+  width: 50%;
+  height: 30%;
+  display: block;
+  content: ' ';
+  background-color: #ff8800;
+  border-radius: 50% / 100% 100% 50% 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-10%) translateX(-50%);
+}
+
+.vampi-mouth {
+  position: absolute;
+  background: black;
+  overflow: hidden;
+  font-size: 0.3em;
+  width: 1em;
+  height: 0.7em;
+  left: 50%;
+  bottom: 0.3em;
+  transform: translateX(-50%);
+  border-radius: 0.7em 0.7em 1.2em 1.2em;
+}
+
+.vampi-mouth::before {
+  content: '';
+  display: block;
+  background: #ff8800;
+  width: 100%;
+  height: 0.2em;
+  position: absolute;
+  bottom: 0;
+  border-radius: 50% 50% 0 0;
+}
+
+.vampi-tooth::before,
+.vampi-tooth::after,
+.vampi-tooth {
+  --teeth-size: 0.25em;
+  display: block;
+  width: 0;
+  height: 0;
+  font-size: inherit;
+  border-left: calc(var(--teeth-size) / 2) solid transparent;
+  border-right: calc(var(--teeth-size) / 2) solid transparent;
+  border-top: var(--teeth-size) solid #fff;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.vampi-tooth:before {
+  content: '';
+  transform: translateX(-150%) translateY(-100%);
+}
+
+.vampi-tooth:after {
+  content: '';
+  transform: translateX(50%) translateY(-100%);
+}
+
+.ear {
+  position: absolute;
+  top: -1.2em;
+  transform-origin: bottom center;
+  font-size: 0.3em;
+  width: .8em;
+  height: 1.5em;
+  left: 18%;
+  transform: rotate(-10deg);
+  animation: antena_e 5s infinite;
+}
+
+.ear+.ear {
+  left: auto;
+  right: 18%;
+  transform: rotate(10deg);
+  animation: antena_d 5s infinite;
+}
+
+.ear:before {
+  content: '';
+  display: block;
+  width: .8em;
+  height: .8em;
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: inset -.1em -.08em rgba(0, 0, 0, .1);
+}
+
+.ear:after {
+  content: '';
+  display: block;
+  width: 0.3em;
+  height: 100%;
+  position: absolute;
+  top: .2em;
+  left: .3em;
+  background: currentColor;
+}
+
+
+@keyframes turn {
+
+  0% {
+    left: 0.05em;
+  }
+
+  25% {
+    left: calc((.05em + .65em)/2);
+  }
+
+  50% {
+    left: .65em
+  }
+}
+
+@keyframes blink {
+
+  0%,
+  2%,
+  60%,
+  62%,
+  100% {
+    transform: scaleX(1) scaleY(1);
+  }
+
+  1%,
+  61% {
+    transform: scaleX(1.3) scaleY(0.1);
+  }
+}
+
+@keyframes bounce {
+  to {
+    transform: translateY(4%);
+  }
+}
+
+@keyframes bouncebody {
+  to {
+    transform: scaleX(1.03) scaleY(0.97);
+  }
+}
+
+@keyframes antena_d {
+  50% {
+    transform: rotate(20deg);
+  }
+}
+
+@keyframes antena_e {
+  50% {
+    transform: rotate(-20deg);
+  }
+}

pages/_app.tsx

@@ -1,5 +1,6 @@
 import '../styles/global.css'
 import '../styles/prism.css'
+import '../components/alien_styles.css'
 import type { AppProps } from 'next/app'
 import type { HomeProps } from './notes'
 import React from 'react'

pages/index.tsx

@@ -5,6 +5,7 @@ import { UsefulLinksList } from '../components/UsefulLinks/index'
 import { SocialLinksList } from '../components/SocialLinks/SocialLinks'
 import type { GetStaticProps } from 'next'
 import Image from 'next/image'
+import AlienHeader from 'components/AlienHeader'
 
 interface LandingProps {
   jobs: JobsType[]
@@ -25,8 +26,8 @@ export default function Landing({ jobs, skills, projects }: LandingProps): React
 
       <header>
         <div className="flex-col gap-05">
-          <Image width={0} height={0} style={{ border: '1px dashed var(--links)' }} className="rounded xl "
+
-            src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="" />
+          <AlienHeader />
           <h1 className='m-0'>Triston Armstrong 🫰</h1>
         </div>
 
@@ -141,7 +142,7 @@ export function getStaticProps(): ReturnType<GetStaticProps<{
           dateTo: 'Nov 2021'
 
         }, {
-          logo: '#',
+          logo: 'images/makers_logo.png',
           name: 'Makers Ladder LLC',
           details: 'Did some thangs',
           dateFrom: 'Dec 2019',