MarketingMax/pages/index.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>