710 lines
26 KiB
Vue
710 lines
26 KiB
Vue
|
<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>
|