1047 lines
45 KiB
Vue
1047 lines
45 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- resume box -->
|
||
|
|
<!-- dark:bg-slate-900 dark:text-white -->
|
||
|
|
<div
|
||
|
|
class="container mx-auto flex flex-row flex-wrap max-w-none md:max-w-5xl my-5 bg-white paper"
|
||
|
|
>
|
||
|
|
<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-3xl md:text-6xl">Max Gialanella</p>
|
||
|
|
<p class="pt-3 subtle">
|
||
|
|
<span v-if="frontEndView">
|
||
|
|
I am a front-end expert specializing in the design
|
||
|
|
of brilliant, intuitive user experiences. I build
|
||
|
|
user friendly, front-end solutions, resulting in
|
||
|
|
high levels of user engagement and satisfaction.
|
||
|
|
</span>
|
||
|
|
<span v-if="generalView">
|
||
|
|
Full stack engineer with a decade of professional
|
||
|
|
experience.
|
||
|
|
<br />Passionate about web technologies, teamwork, &
|
||
|
|
creative problem solving.
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="w-full md:w-5/12 flex flex-row justify-start items-center pt-6 fade-in"
|
||
|
|
>
|
||
|
|
<div class="pl-1 pr-2 ml-5 bg-zinc-50 rounded-md shadow-sm">
|
||
|
|
<img
|
||
|
|
v-on:click="toggleResumeView()"
|
||
|
|
src="/maxhead.png"
|
||
|
|
alt="Max head photo"
|
||
|
|
class="object-cover h-auto w-[150px]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="w-full flex flex-row justify-start gap-5 text-sm md:text-base pl-6 py-2 border-b border-t bg-zinc-100"
|
||
|
|
>
|
||
|
|
<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>
|
||
|
|
<a
|
||
|
|
href="https://www.linkedin.com/in/max-g-856a2555"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
class="h-4 w-4 inline subtle"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M18.72 3.99997H5.37C5.19793 3.99191 5.02595 4.01786 4.86392 4.07635C4.70189 4.13484 4.55299 4.22471 4.42573 4.34081C4.29848 4.45692 4.19537 4.59699 4.12232 4.75299C4.04927 4.909 4.0077 5.07788 4 5.24997V18.63C4.01008 18.9901 4.15766 19.3328 4.41243 19.5875C4.6672 19.8423 5.00984 19.9899 5.37 20H18.72C19.0701 19.9844 19.4002 19.8322 19.6395 19.5761C19.8788 19.32 20.0082 18.9804 20 18.63V5.24997C20.0029 5.08247 19.9715 4.91616 19.9078 4.76122C19.8441 4.60629 19.7494 4.466 19.6295 4.34895C19.5097 4.23191 19.3672 4.14059 19.2108 4.08058C19.0544 4.02057 18.8874 3.99314 18.72 3.99997ZM9 17.34H6.67V10.21H9V17.34ZM7.89 9.12997C7.72741 9.13564 7.5654 9.10762 7.41416 9.04768C7.26291 8.98774 7.12569 8.89717 7.01113 8.78166C6.89656 8.66615 6.80711 8.5282 6.74841 8.37647C6.6897 8.22474 6.66301 8.06251 6.67 7.89997C6.66281 7.73567 6.69004 7.57169 6.74995 7.41854C6.80986 7.26538 6.90112 7.12644 7.01787 7.01063C7.13463 6.89481 7.2743 6.80468 7.42793 6.74602C7.58157 6.68735 7.74577 6.66145 7.91 6.66997C8.07259 6.66431 8.2346 6.69232 8.38584 6.75226C8.53709 6.8122 8.67431 6.90277 8.78887 7.01828C8.90344 7.13379 8.99289 7.27174 9.05159 7.42347C9.1103 7.5752 9.13699 7.73743 9.13 7.89997C9.13719 8.06427 9.10996 8.22825 9.05005 8.3814C8.99014 8.53456 8.89888 8.6735 8.78213 8.78931C8.66537 8.90513 8.5257 8.99526 8.37207 9.05392C8.21843 9.11259 8.05423 9.13849 7.89 9.12997ZM17.34 17.34H15V13.44C15 12.51 14.67 11.87 13.84 11.87C13.5822 11.8722 13.3313 11.9541 13.1219 12.1045C12.9124 12.2549 12.7546 12.4664 12.67 12.71C12.605 12.8926 12.5778 13.0865 12.59 13.28V17.34H10.29V10.21H12.59V11.21C12.7945 10.8343 13.0988 10.5225 13.4694 10.3089C13.84 10.0954 14.2624 9.98848 14.69 9.99997C16.2 9.99997 17.34 11 17.34 13.13V17.34Z"
|
||
|
|
fill="#52525b"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
LinkedIn
|
||
|
|
</a>
|
||
|
|
<a
|
||
|
|
href="https://github.com/stimularity"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
class="h-4 w-4 inline subtle"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
version="1.1"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
|
|
>
|
||
|
|
<defs></defs>
|
||
|
|
<g
|
||
|
|
id="Page-1"
|
||
|
|
stroke="none"
|
||
|
|
stroke-width="1"
|
||
|
|
fill="none"
|
||
|
|
fill-rule="evenodd"
|
||
|
|
>
|
||
|
|
<g
|
||
|
|
id="Dribbble-Light-Preview"
|
||
|
|
transform="translate(-140.000000, -7559.000000)"
|
||
|
|
fill="#52525b"
|
||
|
|
>
|
||
|
|
<g
|
||
|
|
id="icons"
|
||
|
|
transform="translate(56.000000, 160.000000)"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399"
|
||
|
|
id="github-[#142]"
|
||
|
|
></path>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
GitHub
|
||
|
|
</a>
|
||
|
|
<a
|
||
|
|
href="http://www.maxg.cc"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
<IdentificationIcon class="h-4 w-4 inline subtle" />
|
||
|
|
Personal
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w-full md:w-7/12 fade-in d1">
|
||
|
|
<h1 class="p-1 pl-6 subtle">Work Experience</h1>
|
||
|
|
|
||
|
|
<!-- astound -->
|
||
|
|
<div class="p-6 pb-1 pt-1">
|
||
|
|
<div class="w-full flex justify-between border-b accent">
|
||
|
|
<div>Ravenwulf Consulting</div>
|
||
|
|
<div class="text-s text-zinc-600">2023 - 2024</div>
|
||
|
|
</div>
|
||
|
|
<p class="font-bold py-2">Full Stack Web Developer</p>
|
||
|
|
<p>
|
||
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||
|
|
Built
|
||
|
|
<a
|
||
|
|
href="http://ravenwulfconsulting.com"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>Ravenwulf Consulting.</a
|
||
|
|
>
|
||
|
|
Designed logo and corporate identity. Engineered from
|
||
|
|
scratch using TailwindCSS. Hosted on Cloudflare's edge
|
||
|
|
network.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 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 (SFCC)
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||
|
|
Launched a new SFCC, electronic 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"
|
||
|
|
/>Collaborated with partners to build a suite of
|
||
|
|
internal business tools. Including custom systems for
|
||
|
|
time tracking, invoicing, a live card-wall, 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" />
|
||
|
|
Led project 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" />
|
||
|
|
Single handedly rebuilt nine legacy, Single Page
|
||
|
|
Applications. Worked directly with managers and QA to
|
||
|
|
scope out all existing functionality, then wrote
|
||
|
|
scalable, maintainable 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 browser-based PDF annotation & highlighting
|
||
|
|
system. Annotations were converted to images and OCR'd
|
||
|
|
(Object content recognition) 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>
|
||
|
|
|
||
|
|
<div class="pagebreak"></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 entire software stack from PHP 5 to 7.
|
||
|
|
</p>
|
||
|
|
<p class="py-2">
|
||
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||
|
|
Migrated legacy file system from local files 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 pt-1 fade-in d2">
|
||
|
|
<h1 class="subtle">Skills</h1>
|
||
|
|
|
||
|
|
<p class="w-full border-b accent">Programming Languages</p>
|
||
|
|
<p>
|
||
|
|
Javascript ES6, Node.js, NPM
|
||
|
|
<span class="years">10</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Vue, Nuxt, Tailwind, 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>
|
||
|
|
MySQL, PostgreSQL
|
||
|
|
<span class="years">10</span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
PHP, Zend 2, Composer
|
||
|
|
<span class="years">6</span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="w-full border-b accent mt-2">DevOps</p>
|
||
|
|
<p>
|
||
|
|
Agile, SCRUM
|
||
|
|
<span class="years">8</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
GIT, SVN
|
||
|
|
<span class="years">8</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Azure, CI/CD
|
||
|
|
<span class="years">4</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>Apache, NGINX, DNS</p>
|
||
|
|
|
||
|
|
<p class="w-full border-b accent mt-2">
|
||
|
|
Secondary Software 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 mt-2">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 mt-2">Education</p>
|
||
|
|
<p>
|
||
|
|
BS - Computer Science<br />University of Massachusets
|
||
|
|
Amherset
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="w-full border-b accent mt-2">Personal Project</p>
|
||
|
|
<p>
|
||
|
|
<a
|
||
|
|
href="http://www.solidscribe.com"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
data-v-5eee1041=""
|
||
|
|
data-v-3f0f7299=""
|
||
|
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||
|
|
xmlns:cc="http://creativecommons.org/ns#"
|
||
|
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||
|
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
id="svg8"
|
||
|
|
version="1.1"
|
||
|
|
viewBox="0 0 132.29166 132.29167"
|
||
|
|
height="500"
|
||
|
|
width="500"
|
||
|
|
class="w-4 h-4 accent inline"
|
||
|
|
>
|
||
|
|
<defs data-v-5eee1041="" id="defs2"></defs>
|
||
|
|
<metadata data-v-5eee1041="" id="metadata5">
|
||
|
|
<RDF data-v-5eee1041="">
|
||
|
|
<Work data-v-5eee1041="" rdf:about="">
|
||
|
|
<format data-v-5eee1041="">
|
||
|
|
image/svg+xml
|
||
|
|
</format>
|
||
|
|
<type
|
||
|
|
data-v-5eee1041=""
|
||
|
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
|
||
|
|
></type>
|
||
|
|
<title data-v-5eee1041=""></title>
|
||
|
|
</Work>
|
||
|
|
</RDF>
|
||
|
|
</metadata>
|
||
|
|
<g
|
||
|
|
data-v-5eee1041=""
|
||
|
|
transform="translate(0,-164.70832)"
|
||
|
|
id="layer1"
|
||
|
|
style="display: inline"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
data-v-5eee1041=""
|
||
|
|
id="path3813-4"
|
||
|
|
d="m 56.22733,165.36641 -55.56249926,15.875 8e-7,63.5 47.62499846,11.90625 v 27.78125 l -47.76066333,-13.9757 0.13566407,10.00695 55.56249926,15.875 v -47.625 l -47.6249985,-11.90625 -8e-7,-47.625 47.7606633,-13.94121 c 0.135664,-2.30629 -0.135664,-9.87129 -0.135664,-9.87129 z"
|
||
|
|
class="darken-accent"
|
||
|
|
style="
|
||
|
|
fill: var(--main-accent);
|
||
|
|
fill-opacity: 1;
|
||
|
|
stroke-linecap: butt;
|
||
|
|
stroke-linejoin: miter;
|
||
|
|
stroke-miterlimit: 4;
|
||
|
|
stroke-dasharray: none;
|
||
|
|
stroke-opacity: 1;
|
||
|
|
"
|
||
|
|
></path>
|
||
|
|
<path
|
||
|
|
data-v-5eee1041=""
|
||
|
|
id="path4563"
|
||
|
|
d="m 20.508581,220.92891 c 15.265814,-14.23899 27.809717,-7.68002 39.687499,3.96875 v -7.9375 C 51.75093,200.8366 37.512584,206.01499 20.508581,205.05391 Z"
|
||
|
|
class="brighten-accent"
|
||
|
|
style="
|
||
|
|
fill: var(--main-accent);
|
||
|
|
fill-opacity: 1;
|
||
|
|
stroke-width: 0.4px;
|
||
|
|
stroke-linecap: butt;
|
||
|
|
stroke-linejoin: miter;
|
||
|
|
stroke-opacity: 1;
|
||
|
|
"
|
||
|
|
></path>
|
||
|
|
<path
|
||
|
|
data-v-5eee1041=""
|
||
|
|
id="path4563-6"
|
||
|
|
d="m 111.78985,220.92891 c -15.265834,-14.23899 -27.809737,-7.68002 -39.68752,3.96875 v -7.9375 c 8.445151,-16.12356 22.683497,-10.94517 39.68752,-11.90625 z"
|
||
|
|
class="brighten-accent"
|
||
|
|
style="
|
||
|
|
display: inline;
|
||
|
|
fill: var(--main-accent);
|
||
|
|
fill-opacity: 1;
|
||
|
|
stroke-linecap: butt;
|
||
|
|
stroke-linejoin: miter;
|
||
|
|
stroke-opacity: 1;
|
||
|
|
"
|
||
|
|
></path>
|
||
|
|
<path
|
||
|
|
data-v-5eee1041=""
|
||
|
|
id="path3813-4-2"
|
||
|
|
d="m 76.07108,165.36641 55.5625,15.875 v 63.5 l -47.625,11.90625 v 27.78125 l 47.76067,-13.9757 -0.13567,10.00695 -55.5625,15.875 v -47.625 l 47.625,-11.90626 V 189.17891 L 75.93542,175.2377 c -0.13567,-2.30629 0.13566,-9.87129 0.13566,-9.87129 z"
|
||
|
|
class="brighten-accent"
|
||
|
|
style="
|
||
|
|
display: inline;
|
||
|
|
fill: var(--main-accent);
|
||
|
|
fill-opacity: 1;
|
||
|
|
stroke-linecap: butt;
|
||
|
|
stroke-linejoin: miter;
|
||
|
|
stroke-miterlimit: 4;
|
||
|
|
stroke-dasharray: none;
|
||
|
|
stroke-opacity: 1;
|
||
|
|
"
|
||
|
|
></path>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
Solid Scribe</a
|
||
|
|
>
|
||
|
|
is a zero-access encrypted, secure, note taking, progressive
|
||
|
|
web application. It leverages applied cryptography and
|
||
|
|
web-sockets for a secure and convenient experience.
|
||
|
|
<br /><a
|
||
|
|
target="_blank"
|
||
|
|
href="https://git.maxg.cc/Max/SolidScribe"
|
||
|
|
>Solid Scribe Source Code</a
|
||
|
|
>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="w-full border-b accent mt-2">Passions</p>
|
||
|
|
<p>
|
||
|
|
Building
|
||
|
|
<a href="https://maxg.cc/blog/pc-builds/" target="_blank"
|
||
|
|
>PCs</a
|
||
|
|
>
|
||
|
|
&
|
||
|
|
<a
|
||
|
|
href="https://maxg.cc/blog/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>
|
||
|
|
|
||
|
|
<!-- Additional Meta -->
|
||
|
|
<div class="w-full do-not-print">
|
||
|
|
<h1 class="py-2 font-bold">Additional Data - Resume SEO</h1>
|
||
|
|
<p class="py-2">
|
||
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||
|
|
I'm a Front End, Web Developer, Full Stack, Backend,
|
||
|
|
Coding, Maintaining, Optimizing, Marketing web
|
||
|
|
properties, High-visibility projects, Autonomy, Exciting
|
||
|
|
new tools, Technologies, Collaboration, Creative team,
|
||
|
|
Novel solutions, Web development problems, Latest
|
||
|
|
techniques, Web standards, Accessibility, Best
|
||
|
|
practices, Experimenting, Self-starter, Optimistic,
|
||
|
|
Resourceful, Flexible, Creative team, Challenging, Up to
|
||
|
|
date, A/B testing, Analytics integration, WordPress,
|
||
|
|
Plug-ins, Usability, Salesforce, Product Marketing,
|
||
|
|
SEO/SEM best practices, Corporate marketing sites,
|
||
|
|
Content management systems, Problem-Solver, Innovative,
|
||
|
|
Team Player, Collaborative, Analytical, Detail-Oriented,
|
||
|
|
Results-Driven, Adaptable, Self-Motivated, Continuous
|
||
|
|
Learner, Proactive, Efficient, Communicative, Critical
|
||
|
|
Thinker, Technical Proficiency, Creative Thinker,
|
||
|
|
Resourceful, Quality-Focused, ChatGPT to write code,
|
||
|
|
Large language model using, type of person.
|
||
|
|
</p>
|
||
|
|
<p class="py-2">
|
||
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||
|
|
I use Large Language Models and Artificial Intelligence
|
||
|
|
to increase my productivity and correctness when writing
|
||
|
|
code. Acronym Expansions: Hyper Text Markup Language,
|
||
|
|
Javascript, User Interface, User Experience, Cascading
|
||
|
|
Style Sheets, MySQL Database, Version Control Git,
|
||
|
|
Continuous integration, Continuous development, Object
|
||
|
|
Oriented Design, Model View Controller, Application
|
||
|
|
Program Interface, Software as a Service, Business to
|
||
|
|
Business, Bachelors Degree, General Data Protection
|
||
|
|
Regulation, Object Relational Mapper
|
||
|
|
</p>
|
||
|
|
<p class="py-2">
|
||
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
||
|
|
Resume Generated from
|
||
|
|
<a href="https://www.maxg.cc">www.maxg.cc</a>
|
||
|
|
Which was built using Vue3, Nuxt hosted locally on my
|
||
|
|
dev server, using PM2 and Nitro. Accessed via Cloudflare
|
||
|
|
Zero-Trust Tunnels.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- pagebreak for pdf -->
|
||
|
|
<div v-if="false" class="pagebreak"></div>
|
||
|
|
|
||
|
|
<div class="w-fill py-12 flex justify-center items-center no-print">
|
||
|
|
<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>
|
||
|
|
<p class="text-zinc-500 p-4">or (CTRL + P)</p>
|
||
|
|
</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 no-print"
|
||
|
|
>
|
||
|
|
<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 class="text-zinc-500">Dig a little Deeper</p>
|
||
|
|
<p class="py-4 pl-1">
|
||
|
|
<NuxtLink
|
||
|
|
to="/blog/proudest-software-engineering-achievements"
|
||
|
|
>
|
||
|
|
<CursorArrowRippleIcon
|
||
|
|
class="w-6 h-6 accent inline"
|
||
|
|
/>
|
||
|
|
A few of my proudest engineering achievements
|
||
|
|
</NuxtLink>
|
||
|
|
</p>
|
||
|
|
<p class="pl-1">
|
||
|
|
<a
|
||
|
|
href="https://www.linkedin.com/in/max-g-856a2555"
|
||
|
|
>
|
||
|
|
<CursorArrowRippleIcon
|
||
|
|
class="w-6 h-6 accent inline"
|
||
|
|
/>
|
||
|
|
Connect with me on 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 no-print">
|
||
|
|
<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 no-print">
|
||
|
|
<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 no-print">
|
||
|
|
<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-6">
|
||
|
|
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-5"></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 { ref } from "vue";
|
||
|
|
|
||
|
|
import {
|
||
|
|
BeakerIcon,
|
||
|
|
MapPinIcon,
|
||
|
|
EnvelopeIcon,
|
||
|
|
PhoneIcon,
|
||
|
|
PaperClipIcon,
|
||
|
|
ChevronRightIcon,
|
||
|
|
FolderArrowDownIcon,
|
||
|
|
CursorArrowRippleIcon,
|
||
|
|
IdentificationIcon,
|
||
|
|
} 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/",
|
||
|
|
],
|
||
|
|
];
|
||
|
|
|
||
|
|
let generalView = ref(true);
|
||
|
|
let frontEndView = ref(false);
|
||
|
|
let backendView = ref(false);
|
||
|
|
|
||
|
|
function toggleResumeView() {
|
||
|
|
console.log(generalView.value);
|
||
|
|
if (generalView.value) {
|
||
|
|
generalView.value = false;
|
||
|
|
frontEndView.value = true;
|
||
|
|
backendView.value = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (frontEndView.value) {
|
||
|
|
generalView.value = false;
|
||
|
|
frontEndView.value = false;
|
||
|
|
backendView.value = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (backendView.value) {
|
||
|
|
generalView.value = true;
|
||
|
|
frontEndView.value = false;
|
||
|
|
backendView.value = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// Set Page title
|
||
|
|
document.title = "Max Gialanella | Resume";
|
||
|
|
|
||
|
|
// 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;
|
||
|
|
--main-accent: rgb(82, 82, 91);
|
||
|
|
|
||
|
|
--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 {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.do-not-print {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* styles for printing as pdf */
|
||
|
|
@media print {
|
||
|
|
.main-body {
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
.pagebreak {
|
||
|
|
page-break-before: always;
|
||
|
|
}
|
||
|
|
.paper {
|
||
|
|
box-shadow: none;
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
.no-print {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
.do-not-print,
|
||
|
|
.do-not-print p,
|
||
|
|
.do-not-print a,
|
||
|
|
.do-not-print .accent {
|
||
|
|
font-size: 9px;
|
||
|
|
opacity: 1;
|
||
|
|
display: inline-block;
|
||
|
|
color: white !important;
|
||
|
|
background-color: white !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|