1150 lines
48 KiB
Vue
1150 lines
48 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-8/12 flex flex-col fade-in px-6 pt-2">
|
|
<div class="w-full border-b">
|
|
<p class="text-5xl">Max Gialanella</p>
|
|
</div>
|
|
<div class="w-full flex flex-row flex-wrap pt-3">
|
|
<div class="w-full md:w-8/12 text-sm">
|
|
<p class="subtle">
|
|
<span v-if="frontEndView">
|
|
<b>Front End Engineer</b> experienced in UI/UX
|
|
</span>
|
|
<span v-if="generalView">
|
|
<b>Full Stack Engineer</b> with over a decade
|
|
building professional web software.
|
|
</span>
|
|
<span v-if="verboseView">
|
|
Effective and Driven,
|
|
<b>Full Stack Engineer</b> with over a decade
|
|
building professional web software.
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="w-6/12 md:w-4/12 flex flex-col justify-center pl-4 text-sm"
|
|
>
|
|
<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>
|
|
<span class="subtle">(UTC-7)</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-6/12 sm:visible md:hidden 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>
|
|
|
|
<div
|
|
class="hidden md:flex w-4/12 pt-2 flex-row justify-start items-center 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 md:w-7/12 fade-in d1 py-2">
|
|
<h1 class="p-1 pl-6 subtle md:hidden">Work Experience</h1>
|
|
|
|
<!-- ravenwulf -->
|
|
<div class="p-6 py-2">
|
|
<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 text-sm py-2">
|
|
Full Stack Web Developer
|
|
</p>
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Designed logo, corporate identity, built & launched
|
|
<a
|
|
href="http://ravenwulfconsulting.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>www.ravenwulfconsulting.com</a
|
|
>, using Tailwind & Nuxt
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Independently engineered
|
|
<a
|
|
href="http://ravenwulfconsulting.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Ravenwulf Consulting.</a
|
|
>
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Designed Ravenwulf logo and corporate identity.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- astound -->
|
|
<div class="p-6 py-2">
|
|
<div
|
|
class="w-full flex justify-between items-center border-b"
|
|
>
|
|
<div class="accent">Astound Commerce</div>
|
|
<div class="text-s text-zinc-600">2021-2023</div>
|
|
</div>
|
|
|
|
<p class="font-bold text-sm py-2">
|
|
Software Engineer - Salesforce Commerce Cloud
|
|
</p>
|
|
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />Joined
|
|
a team of four, that redesigned storefront UI for
|
|
fashion brand Rag & Bone
|
|
</p>
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon
|
|
class="w-3 h-3 accent inline"
|
|
/>Streamlined, Apple pay, domestic and international
|
|
payments for Rag & Bone, before a major sale, which
|
|
facilitated millions in new revenue
|
|
</p>
|
|
<!-- verbose -->
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Achieved Salesforce Javascript & B2C Commerce Developer
|
|
Certifications.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Joined a team, of four, that launched a redesigned,
|
|
electronic storefront for major fashion brand,
|
|
<a href="https://www.rag-bone.com" target="_blank"
|
|
>Rag & Bone</a
|
|
>.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Debugged & streamlined, domestic and international
|
|
payments for Rag & Bone, before a major sale, which
|
|
facilitated millions in new revenue.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- rws -->
|
|
<div class="p-6 py-2">
|
|
<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 text-sm py-2">
|
|
Senior Software Engineer
|
|
</p>
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Build a large suite of in house business tools with
|
|
custom front ends, databases and servers
|
|
</p>
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Lead a team of five developers. Set team goals for
|
|
improved standards in communication & quality
|
|
</p>
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Single handedly replaced nine legacy applications.
|
|
Rewrote frontend and backend code
|
|
</p>
|
|
<p
|
|
class="font-bold text-sm pt-2"
|
|
v-if="generalView || frontEndView"
|
|
>
|
|
Lead Software Engineer
|
|
</p>
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Conducted interviews, hired and mentored five new
|
|
developers
|
|
</p>
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Built a release management platform leveraging Azure
|
|
Pipelines and Bash
|
|
</p>
|
|
<p v-if="frontEndView || generalView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Created node.js microservices for file management,
|
|
processing long jobs and authentication. Effectively
|
|
offloading system resources and increasing application
|
|
speed
|
|
</p>
|
|
|
|
<!-- verbose -->
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Collaborated with partners and managers to build a suite
|
|
of custom business tools. Facilitating major
|
|
improvements in efficiency and reliability to clients.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Led project to create a sophisticated form building
|
|
system. Which removed the need for Marketing and
|
|
Administrative interaction with clients.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Single handedly replaced nine legacy applications by
|
|
writing scalable, modern replacements in Vue.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Lead a team of five developers in system design and
|
|
architecture. Set team goals for improved standards in
|
|
communication & quality.
|
|
</p>
|
|
|
|
<div class="pagebreak"></div>
|
|
|
|
<p class="font-bold text-sm pt-2" v-if="verboseView">
|
|
Lead Software Engineer
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Collaborated with managers to conduct interviews. Then
|
|
hired and mentored new developers.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Leveraged Azure Pipelines to fully automate releases.
|
|
Minimizing down time and ensuring consistent updates.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Created a browser-based PDF annotation application.
|
|
Allowed for cataloguing and searching of highlights
|
|
across thousands of documents.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Created an email invite tool to automate the sending of
|
|
thousands of custom emails. Which resulted in increased
|
|
product engagement.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- article one -->
|
|
<div class="p-6 py-2">
|
|
<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 text-sm pt-2">Software Engineer</p>
|
|
<p v-if="generalView || frontEndView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Rewrote outdated jQueryUI front end in React, migrated
|
|
entire software stack from PHP 5 to 7
|
|
</p>
|
|
<p v-if="generalView || frontEndView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Updated and maintained custom, enterprise, software
|
|
platform using PHP, Zend, Node.js and Solr
|
|
</p>
|
|
<p
|
|
class="font-bold text-sm pt-2"
|
|
v-if="generalView || frontEndView"
|
|
>
|
|
Jr Software Engineer
|
|
</p>
|
|
<p v-if="generalView || frontEndView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Updated front-end with new CSS styles and libraries for
|
|
modern and responsive web
|
|
</p>
|
|
<p v-if="generalView || frontEndView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Learned to be Agile. Learned to apply Git, Bash and
|
|
modern web standards to my workflow
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Rewrote outdated jQuery UI font end in React.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Modernized entire software stack from PHP 5 to 7.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Migrated legacy file system from local files to Azure
|
|
cloud.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Updated systems to be GDPR compliant with intelligent
|
|
data purging.
|
|
</p>
|
|
<p class="font-bold text-sm pt-2" v-if="verboseView">
|
|
JR Software Engineer
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Removed Stored procedures from database and integrated
|
|
ORM. Improving application speed and reducing overhead.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Integrated system with external APIs.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Updated front-end with new CSS styles and libraries for
|
|
modern and responsive web.
|
|
</p>
|
|
<p v-if="verboseView">
|
|
<ChevronRightIcon class="w-3 h-3 accent inline" />
|
|
Learned to be Agile. Learned to apply Git, Bash and
|
|
modern web standards to my workflow.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- skills column -->
|
|
|
|
<div class="w-full md:w-5/12 skills p-6 pt-4 fade-in d2">
|
|
<p class="w-full border-b accent">Key Skills</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 Skills</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 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
|
|
>
|
|
</p>
|
|
<p>A zero-access encrypted, secure, note taking application.</p>
|
|
<p>
|
|
Leverages applied cryptography and web-sockets with a modern
|
|
responsive design.
|
|
</p>
|
|
<p>
|
|
Review my work:
|
|
<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>
|
|
|
|
<p class="w-full border-b accent">Social</p>
|
|
<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>
|
|
|
|
<!-- Additional Meta -->
|
|
<div v-if="false" class="w-full do-not-print">
|
|
<h1 class="py-2 font-bold">Additional Data - Resume SEO</h1>
|
|
<p>
|
|
<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>
|
|
<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>
|
|
<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 text-sm 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 verboseView = ref(false);
|
|
|
|
function toggleResumeView() {
|
|
console.log(generalView.value);
|
|
if (generalView.value) {
|
|
generalView.value = false;
|
|
frontEndView.value = true;
|
|
verboseView.value = false;
|
|
return;
|
|
}
|
|
if (frontEndView.value) {
|
|
generalView.value = false;
|
|
frontEndView.value = false;
|
|
verboseView.value = true;
|
|
return;
|
|
}
|
|
if (verboseView.value) {
|
|
generalView.value = true;
|
|
frontEndView.value = false;
|
|
verboseView.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);
|
|
}
|
|
}
|
|
|
|
p + p {
|
|
@apply pt-2;
|
|
}
|
|
|
|
.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>
|