<% var projects = [{"name":"Polyglotist","description":"An application for intermediate language learners to improve reading fluency and vocabulary. Users can read foreign language newspapers, as well as look up words and phrases  and save them. Looking up and saving can be done in a total of 3 clicks, a drastic speed from  leaving the app or window to look up and document a word. This helps learners improve fluency with increasing focus on the text at hand instead of abruptly switching contexts.","links":{"Github":"https://github.com/sartoriusrex/polyglotist","Live":"https://www.dennismai.dev/404.html"},"images":["imgs/polyglotist-1.png","imgs/polyglotist-2.png","imgs/polyglotist-3.png"],"built":"Node, Express, PostgresQl, React, Typescript, Docker, Webpack, SCSS, Puppeteer, Jest, React-Testing-Library, Google Cloud API, JWT"},{"name":"Jiu Jitsu Distilled","description":"A web app for users to document and share Brazilian Jiu Jitsu techniques and flows. Users can make notes on techniques and add videos from external sources, link techniques in sequences, like them, and share them in-app with other users or by e-mail. There are hundreds of grappling techniques and variations. Understanding how they connect with one another is the essence of Jiu Jitsu. This application helps users drill techniques and how to flow from one to another given different scenarios.","links":{"Github Front-end":"https://github.com/sartoriusrex/jjd-client","Github Back-end":"https://github.com/sartoriusrex/jjd-server-public","Live":"https://jjd-client-v1.herokuapp.com/"},"images":["imgs/jjd-sm.png"],"built":"Node, Express, Mongo, Mongoose, React, SCSS, Bootstrap, Jest, JWT, React-Form, Mailgun, Heroku, AdobeXD"},{"name":"US Department of Truth","description":"A simple server-side website satirizing the the US's current relationship with misinformation and disinformation. It was designed to both educate and poke fun at the news, media and US government. Read everything with 2 grains of salt, some lime, and a bit of tequila.","links":{"Github":"https://github.com/sartoriusrex/USDT","Live":"https://usdt-satire.herokuapp.com/"},"images":["imgs/usdt-sm.png"],"built":"Node, Express, ejs, Mongo, Mongoose, Passport.js, Nodemailer, SendGrid, SCSS, gulp, Heroku"},{"name":"This Portfolio!","description":"This very website! For more information, you can read the post provided in the link below.","links":{"Github":"https://github.com/sartoriusrex/portfolio-v2","About This Blog":"/how-i-made-this-blog.html","Live":"https://www.dennismai.dev/"},"images":["imgs/fam.png"],"built":"ejs, SCSS, Vanilla JS, Webpack, gsap"}] %>
<% var skills = {"Style & Markup":["CSS / SCSS + BEM","Styled-Components","CSS-in-JS","CSS-in-CSS","HTML","ejs"],"Scripting Languages, Frameworks & Libraries":["Javascript","Typescript","Node","Python","Express","React + Redux","Angular2+","Electron","Apollo GraphQL","Bootstrap","Tailwind"],"Devops & Testing":["Docker","Webpack","Babel","Gulp","Jest","Enzyme","Jasmine","React-Testing-Library","TravisCI","GitlabCI","Heroku","Netlify"],"Design":["Figma","Zeplin","Gimp","Inkscape","Adobe XD"],"Databases":["PostgresQL","mySQL","GraphQL","MongoDB","NeDB","Redis"],"Collaboration & Productivity":["Git","Github, Bitbucket, Gitlab","Windows, Mac OSX, Linux","Jira & Friends","Google & Microsoft Productivity Suites","Slack, Mattermost, etc.","Agile Philosophies and various flavors"]} %>

<% include ../components/head %>
<% include ../components/header %>
<main>

    <section class="container--projects">
        <h1>My Work!</h1>

        <p>I use a relatively modern tech stack, but am genuinely curious and eager to learn ALL THINGS PROGRAMMING. Given the opportunity, I would happily learn Rust, Go, Haskell, C, F#, C#, COBOL, and any other language and framework, just for the sake of learning.</p>

        <p id="skillz">Below is a short list of projects I have or am currently working on. Feel free to step through
            the code, make
            some pull requests, or visit the live sites.</p>

        <p>Be patient, some of them are asleep on a Heroku Dyno.</p>

        <details class="container--skills">
            <summary>
                <p>Oh, and here's a list of technologies I'm comfortable enough to confidently add to my
                    <em>Skillz</em>
                </p>
            </summary>

            <div class="skills-grid-container">
                <button class="left-skill">&lt&lt&lt</button>
                <button class="right-skill">&gt&gt&gt</button>
                <% Object.keys(skills).forEach( function(cat) { %>
                <div data-cat="<%= cat%>" class="skill-category">
                    <h2><%= cat %></h2>
                    <ul>
                        <% skills[cat].forEach( function(skill) { %>
                        <li><%= skill %></li>
                        <% }) %>
                    </ul>
                </div>
                <% }) %>
            </div>

        </details>

        <ul class="project-list">
            <% projects.forEach( function(project) { %>
            <li class="project-item hidden">
                <div class="container--details">
                    <a href="<%= project.links.Live %>" target="_blank" rel="noopener noreferrer">
                        <h3><%= project.name %></h3>
                    </a>

                    <div class="container--project-img">
                        <img src="<%=project.images[0] %>" width="200" height="150" alt="project image">
                    </div>

                    <details>
                        <summary>Description</summary>
                        <p><%= project.description %></p>
                    </details>

                    <details>
                        <summary>Links</summary>
                        <ul>
                            <% Object.keys(project.links).forEach( function(key){ %>
                            <li>
                                <a href="<%=project.links[key]%>" target="_blank" rel="noopener noreferrer">
                                    <%= key %>
                                </a>
                            </li>
                            <% }) %>
                        </ul>
                    </details>

                    <details>
                        <summary>Tech Used</summary>
                        <p><%= project.built %></p>
                    </details>

                </div>

            </li>
            <% }) %>
        </ul>
    </section>

</main>
<% include ../components/footer %>

</html>