Built out a marketing site, working on blog posts
This commit is contained in:
Max
64
pages/blog/[post].vue
Normal file
64
pages/blog/[post].vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="sticky top-0 py-2 px-4 bg-white opacity-90 shadow-md">
|
||||
<div
|
||||
class="m-auto w-full max-w-3xl flex items-center justify-between"
|
||||
>
|
||||
<NuxtLink class="text-2xl text-zinc-600" to="/blog"
|
||||
>Project Overview</NuxtLink
|
||||
>
|
||||
<NuxtLink to="/">Back to Resume</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4"></div>
|
||||
<div class="mx-auto max-w-3xl px-4 blog">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<h2 class="text-zinc-500 pb-3">Posted on: {{ page.date }}</h2>
|
||||
<!-- <ContentDoc /> -->
|
||||
<ContentRenderer :key="page._id" :value="page" />
|
||||
</div>
|
||||
<div class="w-full h-2 bg-blue-400 my-4"></div>
|
||||
<div v-if="data && page" class="mx-auto max-w-3xl px-4">
|
||||
<p>Other Projects</p>
|
||||
<a
|
||||
v-for="post in data"
|
||||
:href="post._path"
|
||||
class="text-blue-700 w-full px-2"
|
||||
>
|
||||
<h3 class="text-xl">{{ post.title }}</h3>
|
||||
<p class="text-zinc-500">{{ post.description }}</p>
|
||||
<!-- <p>{{ post }}</p> -->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Find other pages and list them
|
||||
const { data } = await useAsyncData("blog", () => queryContent("/").find());
|
||||
// Find current page content
|
||||
const { page } = useContent();
|
||||
// console.log(page.value);
|
||||
// console.log(data.value);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.blog {
|
||||
@apply leading-9 text-base;
|
||||
}
|
||||
.blog a {
|
||||
@apply text-blue-700;
|
||||
}
|
||||
.blog h1 {
|
||||
@apply pt-5 text-3xl border-zinc-300;
|
||||
}
|
||||
.blog h3 {
|
||||
@apply pt-5 mb-2 text-xl border-b border-zinc-300;
|
||||
}
|
||||
.blog img {
|
||||
@apply my-3 shadow-sm;
|
||||
}
|
||||
.blog p + P {
|
||||
@apply pt-4;
|
||||
}
|
||||
</style>
|
||||
50
pages/blog/index.vue
Normal file
50
pages/blog/index.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="sticky top-0 py-2 bg-white opacity-90 shadow-md">
|
||||
<div
|
||||
class="m-auto w-full max-w-3xl flex items-center justify-between"
|
||||
>
|
||||
<NuxtLink class="text-xl" to="/blog">Max's Blog</NuxtLink>
|
||||
<NuxtLink class="" to="/">Home</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-blue-400"></div>
|
||||
<div v-if="data" class="mx-auto max-w-3xl">
|
||||
<a
|
||||
v-for="post in data"
|
||||
:href="post._path"
|
||||
class="text-blue-700 w-full px-2"
|
||||
>
|
||||
<h3>{{ post.title }}</h3>
|
||||
<p class="text-zinc-500">{{ post.description }}</p>
|
||||
<!-- <p>{{ post }}</p> -->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Find other pages and list them
|
||||
const { data } = await useAsyncData("blog", () => queryContent("/").find());
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.blog {
|
||||
@apply leading-9 text-base;
|
||||
}
|
||||
.blog a {
|
||||
@apply text-blue-700;
|
||||
}
|
||||
.blog h1 {
|
||||
@apply pt-5 text-3xl border-zinc-300;
|
||||
}
|
||||
.blog h3 {
|
||||
@apply pt-5 mb-2 text-xl border-b border-zinc-300;
|
||||
}
|
||||
.blog img {
|
||||
@apply my-3 shadow-sm;
|
||||
}
|
||||
.blog p + P {
|
||||
@apply pt-4;
|
||||
}
|
||||
</style>
|
||||
709
pages/index.vue
Normal file
709
pages/index.vue
Normal file
@@ -0,0 +1,709 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- resume box -->
|
||||
<div
|
||||
class="container mx-auto flex flex-row flex-wrap max-w-none md:max-w-5xl bg-white paper my-5"
|
||||
>
|
||||
<div
|
||||
class="w-full md:w-7/12 flex flex-col items-center justify-center fade-in"
|
||||
>
|
||||
<div class="p-6 pb-1 md:text-center text-sm md:text-base">
|
||||
<p class="text-5xl md:text-6xl">Max Gialanella</p>
|
||||
<p class="py-3">
|
||||
Full stack engineer with a decade of professional
|
||||
experience.
|
||||
<br />Passionate about web technologies & creative
|
||||
problem solving.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full md:w-5/12 flex flex-row justify-around items-center pt-6 fade-in"
|
||||
>
|
||||
<div class="pl-1 pr-3 bg-zinc-50 rounded-md shadow-sm">
|
||||
<img
|
||||
src="maxhead.png"
|
||||
alt="Max head photo"
|
||||
class="object-cover h-auto w-[150px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col justify-start gap-2 text-sm md:text-base"
|
||||
>
|
||||
<div>
|
||||
<EnvelopeIcon class="h-4 w-4 inline subtle" />
|
||||
<a target="_blank" href="mailto:maxjobhunt@pm.me">
|
||||
MaxJobHunt@pm.me
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<PhoneIcon class="h-4 w-4 inline subtle" />
|
||||
<a target="_blank" href="tel:480-788-5217">
|
||||
(480) 788-5217
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<MapPinIcon class="h-4 w-4 inline subtle" />
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://goo.gl/maps/smMV1RZ3pZrS6C1y7"
|
||||
>
|
||||
Flagstaff, AZ
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-7/12 fade-in d1">
|
||||
<!-- astound -->
|
||||
<div class="p-6 pb-1">
|
||||
<div class="w-full flex justify-between border-b accent">
|
||||
<div>Astound Commerce</div>
|
||||
<div class="text-s text-zinc-600">2021-2023</div>
|
||||
</div>
|
||||
<p class="font-bold py-2">
|
||||
Software Engineer - Salesforce Commerce Cloud
|
||||
</p>
|
||||
<p>
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Launched a new SFCC, online storefront for
|
||||
<a href="https://www.rag-bone.com" target="_blank"
|
||||
>Rag & Bone</a
|
||||
>
|
||||
using Typescript, Node.JS and other JS technologies.
|
||||
Updated & streamlined, domestic and international
|
||||
payments before a big sale which facilitated millions in
|
||||
new revenue.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- rws -->
|
||||
<div class="p-6 pb-1">
|
||||
<div class="w-full flex justify-between border-b accent">
|
||||
<div>RWS - IP Services</div>
|
||||
<div class="text-s text-zinc-600">2018 - 2021</div>
|
||||
</div>
|
||||
<p class="font-bold pt-2">Senior Software Engineer</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />Worked
|
||||
with partners to build a suite of internal tools.
|
||||
Including custom systems for time tracking, invoicing, a
|
||||
live cardwall, dashboards, forms with intelligent
|
||||
validation, extensive reporting and tools allowing for
|
||||
mass data import and export.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Worked with managers to create a sophisticated, dynamic
|
||||
form-building system that enabled clients to input
|
||||
custom data with intelligent auto-complete rules per
|
||||
client, removing the need for Marketing and
|
||||
Administrative interaction.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Fully rebuilt nine legacy, Single Page Applications.
|
||||
Worked directly with managers and QA to scope out all
|
||||
existing functionality, then wrote scalable
|
||||
replacements.
|
||||
</p>
|
||||
|
||||
<p class="font-bold pt-2">Lead Software Engineer</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Lead a team of developers in system design and releases.
|
||||
Pushed for improved standards in communication &
|
||||
quality.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Leveraged Azure Pipelines and Bash to stand up a DevOps
|
||||
suite that automated builds, package management, version
|
||||
control, source compression and dev, stage & prod
|
||||
releases.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Created a highly performant, browser-based PDF
|
||||
annotation & highlighting system with Vue. Annotations
|
||||
were converted to images and OCR'd for searching,
|
||||
allowing for cataloging of highlighted data across
|
||||
thousands of documents.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Created an email invite tool to orchestrate sending
|
||||
thousands of emails, inviting specific users based on
|
||||
various attributes, reporting stats, tracking user
|
||||
engagement and managing email queues. Which resulted in
|
||||
increased product engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- article one -->
|
||||
<div class="p-6 pb-1">
|
||||
<div class="w-full flex justify-between border-b accent">
|
||||
<div>Article One Partners</div>
|
||||
<div class="text-s text-zinc-600">2013 - 2018</div>
|
||||
</div>
|
||||
<p class="font-bold pt-2">Software Engineer</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Rewrote outdated jQuery UI font end in Vue.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Worked to migrate system from PHP 5 to 7.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Migrated legacy file system to Azure cloud. Integrated
|
||||
new packages from PHP to Node.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Updated systems to be GDPR compliant with intelligent
|
||||
data purging and greater respect for user privacy and
|
||||
control.
|
||||
</p>
|
||||
<p class="font-bold pt-2">JR Software Engineer</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Update old system to use dynamic template engine and
|
||||
Doctrine ORM.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Integrated system with external APIs.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Updated front-end with new CSS styles and libraries for
|
||||
modern and responsive web.
|
||||
</p>
|
||||
<p class="py-2">
|
||||
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||||
Learned to apply GIT, Agile, bash, and modern web
|
||||
standards.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- skills column -->
|
||||
<div class="w-full md:w-5/12 skills p-6 fade-in d2">
|
||||
<p class="w-full border-b accent">Primary Skills</p>
|
||||
<p>
|
||||
Javascript ES6, Node.js, NPM
|
||||
<span class="years">10</span>
|
||||
</p>
|
||||
<p>
|
||||
Vue, UI, UX
|
||||
<span class="years">14</span>
|
||||
</p>
|
||||
<p>
|
||||
HTML5, CCS3
|
||||
<span class="years">15</span>
|
||||
</p>
|
||||
<p>
|
||||
Linux, Bash
|
||||
<span class="years">10</span>
|
||||
</p>
|
||||
<p>
|
||||
GIT, SVN
|
||||
<span class="years">8</span>
|
||||
</p>
|
||||
<p>
|
||||
MySQL
|
||||
<span class="years">10</span>
|
||||
</p>
|
||||
<p>
|
||||
Agile, SCRUM
|
||||
<span class="years">8</span>
|
||||
</p>
|
||||
<p>
|
||||
OO Design, Architecture, MVC
|
||||
<span class="years">10</span>
|
||||
</p>
|
||||
<p>
|
||||
RESTful, SOAP APIs, SaaS
|
||||
<span class="years">8</span>
|
||||
</p>
|
||||
<p>
|
||||
Azure DevOps, CI/CD
|
||||
<span class="years">4</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
PHP, Zend 2, Composer
|
||||
<span class="years">6</span>
|
||||
</p>
|
||||
|
||||
<p class="w-full border-b accent">Secondary Skills</p>
|
||||
<p>
|
||||
Python, Java
|
||||
<span class="years">8</span>
|
||||
</p>
|
||||
<p>
|
||||
React, Angular, jQuery
|
||||
<span class="years">7</span>
|
||||
</p>
|
||||
<p>Salesforce Commerce Cloud</p>
|
||||
|
||||
<p class="w-full border-b accent">Certifications</p>
|
||||
<p>Salesforce Javascript Developer</p>
|
||||
<p>Salesforce B2C Commerce Developer</p>
|
||||
<!-- <a href="https://trailblazer.me/id/mgialanella" target="_blank">View Certifications</a> -->
|
||||
|
||||
<p class="w-full border-b accent">Education</p>
|
||||
<p>
|
||||
BS - Computer Science<br />University of Massachusets
|
||||
Amherset
|
||||
</p>
|
||||
|
||||
<p class="w-full border-b accent">Passions</p>
|
||||
<p>
|
||||
Building
|
||||
<a
|
||||
href="http://blog.maxg.cc/2023/02/22/pc-builds/"
|
||||
target="_blank"
|
||||
>PCs</a
|
||||
>
|
||||
&
|
||||
<a
|
||||
href="http://blog.maxg.cc/2023/01/11/Build-a-Keyboard-Links/#My-Builds"
|
||||
>Keyboards</a
|
||||
>
|
||||
</p>
|
||||
<p>Cooking, Diet, Nutrition</p>
|
||||
<p>Brazilian Jiu-Jitsu, Ultimate Frisbee</p>
|
||||
<p>Coffee Snobbery</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- pagebreak for pdf -->
|
||||
<div class="pagebreak"></div>
|
||||
|
||||
<div class="w-fill p-4 pb-10 flex justify-center">
|
||||
<a
|
||||
href="/resume.pdf"
|
||||
class="flex flex-row border border-zinc-200 shadow-lg rounded-md px-4 py-2 bg-white"
|
||||
>
|
||||
<div class="flex items-center pr-4">
|
||||
<FolderArrowDownIcon class="w-8 h-8 accent inline" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-base">Download Resume</p>
|
||||
<p class="text-zinc-500 text-xs">.PDF Format</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="false">
|
||||
TODO
|
||||
<p>Change Resume Mode - General, Frontend, Backend</p>
|
||||
<p>Finish Blog Articles</p>
|
||||
<p>Optimize for mobile</p>
|
||||
<p>Dark Mode</p>
|
||||
</div>
|
||||
|
||||
<!-- headshot and overview -->
|
||||
<div class="w-full bg-gradient-to-tr from-slate-100 to-teal-50">
|
||||
<div class="w-full md:max-w-5xl m-auto flex flex-row flex-wrap">
|
||||
<!-- info and downloads -->
|
||||
<div class="w-6/12 flex flex-col justify-center">
|
||||
<div class="border-l-4 border-l-zinc-400">
|
||||
<h1 class="text-2xl md:text-4xl pl-5">
|
||||
Software is a
|
||||
<span class="text-blue-600">passion</span>.
|
||||
</h1>
|
||||
<h2 class="text-2xl md:text-3xl pl-5">
|
||||
I'll never stop building cool things.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="p-4"></div>
|
||||
|
||||
<div class="pl-4">
|
||||
<p>Dig Deeper</p>
|
||||
<p>
|
||||
Connect with me on Linkedin
|
||||
<a
|
||||
href="https://www.linkedin.com/in/max-g-856a2555"
|
||||
>
|
||||
<CursorArrowRippleIcon
|
||||
class="w-8 h-8 accent inline"
|
||||
/>
|
||||
Linkedin
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<!-- <p>Learn More about my Frontend work</p>
|
||||
<p>Link to frontend</p>
|
||||
<p>Learn More about my backed work</p>
|
||||
<p>Link to backend</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- headshot -->
|
||||
<div class="w-6/12 flex justify-center">
|
||||
<div class="imgcropper">
|
||||
<img
|
||||
src="/maxheadcolor.png"
|
||||
alt="Max Gialanella"
|
||||
class="object-cover max-w-[300px] h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- marketing box -->
|
||||
<div class="w-full bg-slate-200">
|
||||
<div class="p-4 w-full md:max-w-5xl m-auto pt-10">
|
||||
<h1 class="text-3xl">Personal Projects</h1>
|
||||
<p class="text-zinc-500">
|
||||
Recent Examples of Professional software and passion
|
||||
projects.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<div class="w-full bg-slate-200 pb-10">
|
||||
<div
|
||||
class="flex flex-row flex-wrap items-stretch justify-around max-w-none md:max-w-5xl m-auto"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="(p, index) in projects"
|
||||
class="w-full md:w-4/12 p-4 cursor-pointer"
|
||||
:to="p[3]"
|
||||
>
|
||||
<div
|
||||
class="border border-zinc-200 rounded-lg overflow-hidden shadow-md bg-slate-100"
|
||||
>
|
||||
<!-- {{ p[2] }} -->
|
||||
<div
|
||||
class="min-h-[80px] overflow-hidden flex justify-center items-center"
|
||||
:class="`bg${index + 1}`"
|
||||
>
|
||||
<img
|
||||
:src="p[2]"
|
||||
alt="cover"
|
||||
class="object-cover w-auto h-[150px] bigskew"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-zinc-900 text-lg">{{ p[0] }}</p>
|
||||
<p
|
||||
class="pt-2 text-sm min-h-[80px] text-zinc-600"
|
||||
>
|
||||
<ChevronRightIcon
|
||||
class="w-3 h-3 accent inline"
|
||||
/>
|
||||
{{ p[1] }}
|
||||
</p>
|
||||
<p
|
||||
class="text-sm w-full text-right accent pt-2"
|
||||
>
|
||||
Explore
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden relative bg-black">
|
||||
<div
|
||||
class="w-full md:max-w-5xl m-auto flex flex-row flex-wrap z-20"
|
||||
>
|
||||
<!-- info and downloads -->
|
||||
<div
|
||||
class="w-4/12 md:w-6/12 flex justify-center items-end overflow-hidden h-[280px]"
|
||||
>
|
||||
<img
|
||||
src="callme.png"
|
||||
alt="Max head photo"
|
||||
class="object-cover w-auto h-[340px] imgcropper-right"
|
||||
/>
|
||||
</div>
|
||||
<!-- headshot -->
|
||||
<div
|
||||
class="w-8/12 md:w-6/12 flex flex-col justify-center items-start text-white pl-5"
|
||||
>
|
||||
<p class="text-xl md:text-3xl font-bold pb-5">
|
||||
Lets Chat. Anytime. Anywhere.
|
||||
</p>
|
||||
<div class="border-l-4 border-l-zinc-600 pl-4">
|
||||
<p>Call me</p>
|
||||
<PhoneIcon class="h-4 w-4 inline" />
|
||||
<a
|
||||
target="_blank"
|
||||
href="tel:480-788-5217"
|
||||
class="text-white"
|
||||
>
|
||||
(480) 788-5217
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-4"></div>
|
||||
<div class="border-l-4 border-l-zinc-600 pl-4">
|
||||
<p>Email me and schedule a meeting</p>
|
||||
<EnvelopeIcon class="h-4 w-4 inline" />
|
||||
<a
|
||||
target="_blank"
|
||||
href="mailto:maxjobhunt@pm.me"
|
||||
class="text-white"
|
||||
>
|
||||
MaxJobHunt@pm.me
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space1"></div>
|
||||
<div class="space2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
BeakerIcon,
|
||||
MapPinIcon,
|
||||
EnvelopeIcon,
|
||||
PhoneIcon,
|
||||
PaperClipIcon,
|
||||
ChevronRightIcon,
|
||||
FolderArrowDownIcon,
|
||||
CursorArrowRippleIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
|
||||
const projects = [
|
||||
[
|
||||
"Ravenwulf Consulting",
|
||||
"Marketing site I built for a consulting firm. I designed the logo and identity. Built using Tailwind, Nuxt.js and hosted on Cloudflare.",
|
||||
"covers/ravenwulficon.png",
|
||||
"/blog/creation-of-ravenwulf",
|
||||
],
|
||||
[
|
||||
"Solid Scribe",
|
||||
"Encrypted note taking application I designed and built. Uses applied cryptography and web-sockets for a convenient and secure experience.",
|
||||
"covers/solidscribeicon.svg",
|
||||
"/blog/building-solid-scribe",
|
||||
],
|
||||
[
|
||||
"Chat GPT Autocomplete",
|
||||
"Scripts to access chatGPT for instantly generated code snippets. Allowing for rapid prototyping and development.",
|
||||
"covers/gpticon.png",
|
||||
"https://git.maxg.cc/max/ChatGPTAutocomplete",
|
||||
],
|
||||
[
|
||||
"Atreyu Custom Keyboard",
|
||||
"Affordable and sleek ergonomic keyboard with custom firmware",
|
||||
"covers/atreyuicon.png",
|
||||
"/blog/atreyu-keyboard",
|
||||
],
|
||||
[
|
||||
"Personal Git Repo",
|
||||
"Examine more of my work on my self hosted git repository.",
|
||||
"covers/giticon.png",
|
||||
"https://git.maxg.cc/max",
|
||||
],
|
||||
[
|
||||
"Personal Blog",
|
||||
"Personal Blog where I post about tech topics.",
|
||||
"covers/blogicon.png",
|
||||
"https://blog.maxg.cc/",
|
||||
],
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
// generate stars
|
||||
function randomNumber(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
const STAR_COUNT = 180;
|
||||
const shades = ["#e0e0e0", "#e0e0e0", "#bdbdbd", "#bdbdbd", "#484848"];
|
||||
|
||||
for (var j = 1; j < 3; j++) {
|
||||
let result = "";
|
||||
for (let i = 0; i < STAR_COUNT; i++) {
|
||||
const shade = shades[Math.floor(Math.random() * shades.length)];
|
||||
result += `${randomNumber(-50, 50)}vw ${randomNumber(
|
||||
-50,
|
||||
50
|
||||
)}vh ${randomNumber(0, 1)}px ${randomNumber(0, 1)}px ${shade},`;
|
||||
}
|
||||
document.documentElement.style.setProperty(
|
||||
"--random-stars" + j,
|
||||
result.substring(0, result.length - 1)
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #d0b24d;
|
||||
--color-hint: #515151;
|
||||
--border: #ccc;
|
||||
|
||||
--duration: 30;
|
||||
--rp1: 20;
|
||||
--rp2: 72;
|
||||
--rp3: 1;
|
||||
--rp4: 2;
|
||||
--rp5: 3;
|
||||
--rp6: 4;
|
||||
|
||||
--ray-rotate: 26deg;
|
||||
|
||||
--shift: 3;
|
||||
--x: 0;
|
||||
--y: 0;
|
||||
--random-stars1: 0;
|
||||
--random-stars2: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-blue-600 border-zinc-300;
|
||||
}
|
||||
.accent {
|
||||
@apply text-blue-600 border-zinc-300;
|
||||
}
|
||||
.subtle {
|
||||
@apply text-zinc-600;
|
||||
}
|
||||
.years {
|
||||
display: none;
|
||||
}
|
||||
.skills p + p {
|
||||
padding: 7px 0 0 0;
|
||||
}
|
||||
.space1,
|
||||
.space2 {
|
||||
/* position: fixed; */
|
||||
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
z-index: 1;
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
border-radius: 100%;
|
||||
|
||||
--shift: -2;
|
||||
--shift-px: calc(var(--shift) * 1px);
|
||||
transform: translateX(calc((100vw - var(--x) * var(--shift-px)) / 90))
|
||||
translateY(calc((100vh - var(--y) * var(--shift-px)) / 90));
|
||||
|
||||
/* background: radial-gradient(circle, rgba(0,0,0,1) 20%, rgba(47,47,47,1) 100%);*/
|
||||
box-shadow: var(--random-stars1);
|
||||
}
|
||||
.space2 {
|
||||
box-shadow: var(--random-stars2);
|
||||
animation: zoom 50s alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
0% {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.bg1 {
|
||||
@apply bg-gradient-to-tr from-slate-900 to-teal-500;
|
||||
}
|
||||
.bg2 {
|
||||
@apply bg-gradient-to-tr from-slate-900 to-cyan-500;
|
||||
}
|
||||
.bg3 {
|
||||
@apply bg-gradient-to-tr from-slate-900 to-blue-500;
|
||||
}
|
||||
.bg4 {
|
||||
@apply bg-gradient-to-tr from-slate-900 to-violet-500;
|
||||
}
|
||||
.bg5 {
|
||||
@apply bg-gradient-to-tr from-slate-900 to-fuchsia-500;
|
||||
}
|
||||
.bg6 {
|
||||
@apply bg-gradient-to-tr from-slate-900 to-pink-500;
|
||||
}
|
||||
|
||||
.bigskew {
|
||||
transform: scale(0.85);
|
||||
transition: all 1s ease;
|
||||
|
||||
filter: drop-shadow(1px 1px 0.2px rgba(255, 255, 255, 0.503))
|
||||
drop-shadow(-1px 1px 0.2px rgba(255, 255, 255, 0.503))
|
||||
drop-shadow(1px -1px 0.2px rgba(255, 255, 255, 0.503))
|
||||
drop-shadow(-1px -1px 0.2px rgba(255, 255, 255, 0.503));
|
||||
}
|
||||
a:hover .bigskew {
|
||||
transform: scale(1);
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.paper {
|
||||
background: #fff;
|
||||
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15), 0 -10px 0 -5px #eee,
|
||||
0 -10px 1px -4px rgba(0, 0, 0, 0.15), 0 -20px 0 -10px #eee,
|
||||
0 -20px 1px -9px rgba(0, 0, 0, 0.15);
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
.imgcropper {
|
||||
overflow: hidden;
|
||||
border-radius: 20px 0 100px;
|
||||
}
|
||||
.imgcropper-right {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation-duration: 0.6s;
|
||||
animation-name: fadeIn;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.d1 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.d2 {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
/* styles for printing as pdf */
|
||||
@media print {
|
||||
.pagebreak {
|
||||
page-break-before: always;
|
||||
}
|
||||
.paper {
|
||||
box-shadow: none;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user