index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="Patrick, Fidler, Patrick Fidler">
    <meta name="description" content="...">
    <title>Patrick Fidler</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="vertical-line"></div>
    <div class="bg-white height-nav width-nav position-nav fixed z-1">
        <div class="flex flex-column justify-space-between orient-left ypad-nav xpad-nav">
            <p class="font-corner">PATRICK<br>FIDLER</p>
            <a class="normal nav-links font-nav" href="#welcome">WELCOME</a>
            <a class="normal nav-links font-nav" href="#about">ABOUT</a>
            <a class="normal nav-links font-nav" href="#projects">PROJECTS</a>
            <!-- <a class="normal nav-links font-nav" href="#contact">CONTACT ME</a> -->
            <div class="flex flex-row space-between orient-center justify-center bnav-gap">
                <a href="https://github.com/PatrickFidler" target="_blank">
                    <img class="img-icon icon-space" src="images/github.png" alt="Github Logo">
                </a>
                <a href="https://www.linkedin.com/in/patrick-fidler/" target="_blank">
                    <img class="img-icon icon-space" src="images/linkedin.png" alt="LinkedIn Logo">
                </a>
                <a href="mailto: patrick.fidler@mail.utoronto.ca" target="_blank">
                    <img class="img-icon" src="images/email.png" alt="Email Image">
                </a>
            </div>
        </div>
    </div>
    <div id="welcome" class="bg-black width-full absolute anchor-welcome z-2">
        <div class="height-welcome flex flex-column space-between orient-center justify-center">
            <img class="circular img-welcome" src="images/welcome_2.jpg" alt="My Face">
            <p class="font-welcome title">Patrick Fidler</p>
            <div class="flex flex-row space-between orient-center justify-center">
                <a href="https://github.com/PatrickFidler" target="_blank">
                    <img class="img-icon icon-space" src="images/github.png" alt="Github Logo">
                </a>
                <a href="https://www.linkedin.com/in/patrick-fidler/" target="_blank">
                    <img class="img-icon icon-space" src="images/linkedin.png" alt="LinkedIn Logo">
                </a>
                <a href="mailto: patrick.fidler@mail.utoronto.ca" target="_blank">
                    <img class="img-icon icon-space" src="images/email.png" alt="Email Image">
                </a>
                <a href="https://drive.google.com/file/d/1evXjt3FfniyN6FblJCEAbvwfFfGAcgVL/view?usp=drive_link" 
                target="_blank">
                    <img class="img-icon" src="images/resume.png" alt="Resume Image">
                </a>
            </div>
        </div>
    </div>
    <div id="about" class="bg-black width-full absolute anchor-about z-2">
        <div class="flex flex-row space-between orient-center justify-center ypad-about xpad-about">
            <img class="img-about" src="images/about.JPG" alt="Photo of Me">
            <div class="height-about flex flex-column space-between orient-center justify-center">
                <p class="font-about-1">About Me</p>
                <p class="font-about-2">Hello! My name is Patrick.<br><br>I'm a third year
                student at the University of Toronto, currently pursuing a Specialist in Computer Science.
                <br><br>I like to read, run, go climbing, and play video games. I'm always trying new things!
                <br><br>Feel free to reach out to me by 
                <a class="text-link font-about-2" href="https://www.linkedin.com/in/patrick-fidler/"
                target="_blank">LinkedIn</a>
                or 
                <a class="text-link font-about-2" href="mailto: patrick.fidler@mail.utoronto.ca"
                target="_blank">email</a>, 
                I'd love to hear from you!</p>
            </div>
        </div>
    </div>
    <div id="projects" class="bg-black width-full absolute anchor-projects z-2">
        <div class="height-projects flex flex-column space-between orient-center justify-center 
        ypad-projects xpad-projects">
            <div class="flex flex-row space-between orient-center justify-center projects-title-spacing">
                <p class="font-about-1">My Projects</p>
                <p class="font-about-2 projects-text">A few of the things I've worked on in and out of 
                    school.<br>Feel free to look around! All projects link to github repos.</p>
            </div>
            <a class="project-link project-space" href="https://github.com/AlekseyPanas/One-Word-Story" target="_blank">
                <div class="project flex flex-column space-between orient-center justify-center">
                    <p class="project-title">One Word Story</p>
                    <p class="project-desc">
                        A multiplayer game where players take turns submitting words to create a story. 
                        Completed stories are uploaded to the site, where users can suggest and vote on 
                        names, make comments on stories, and like stories they enjoy. We're still working 
                        on adding new features and changing others. Utilizes the Spring java framework.
                    </p>
                    <div class="flex flex-row space-between orient-center justify-center">
                        <img class="project-icon p-i-spacing" src="images/java.png" alt="Java Logo">
                        <img class="project-icon p-i-spacing" src="images/spring.png" alt="Spring Logo">
                        <img class="html-icon p-i-spacing" src="images/html.png" alt="Html-5 Logo">
                        <img class="css-icon p-i-spacing" src="images/css.png" alt="Css-3 Logo">
                        <img class="project-icon" src="images/javascript.png" alt="Javascript Logo">
                    </div>
                </div>
            </a>
            <a class="ows ows-link" href="https://onewordstory.net" target="_blank">
                <p style="font-weight: bold;">Play<br>One Word Story</p>
            </a>
            <!-- <a class="project-link project-space" href="https://github.com/PatrickFidler/patrickfidler.github.io" target="_blank">
                <div class="project flex flex-column space-between orient-center justify-center">
                    <p class="project-title">Portfolio Website</p>
                    <p class="project-desc">
                        The site you're on right now! Created because I wanted to learn web development, 
                        and I needed a place I could showcase my projects and link information.
                    </p>
                    <div class="flex flex-row space-between orient-center justify-center">
                        <img class="html-icon p-i-spacing" src="images/html.png" alt="Html-5 Logo">
                        <img class="css-icon" src="images/css.png" alt="Css-3 Logo">
                    </div>
                </div>
            </a> -->
            <a class="project-link project-space" href="https://github.com/CSC110-Final-Project/CSC110-Final-Project" target="_blank">
                <div class="project flex flex-column space-between orient-center justify-center">
                    <p class="project-title">COVID-19 Worker Data Visualizer</p>
                    <p class="project-desc">
                        An interactable program that compares and visualizes staffing decisions made by 
                        Canadian businesses during the COVID-19 pandemic. Data comes from CSV files 
                        provided by the Canadian government at two times during the pandemic. Users 
                        can choose which data to visualize and how it is shown (either via choropleth 
                        map or double bar graph). Utilizes the Pandas and Plotly python libraries.
                    </p>
                    <div class="flex flex-row space-between orient-center justify-center">
                        <img class="project-icon" src="images/python.png" alt="Python Logo">
                        <!-- <img class="pandas-icon" src="images/pandas.png" alt="Pandas Logo"> -->
                    </div>
                </div>
            </a>
            <a class="project-link project-space" href="https://github.com/PatrickFidler/CL-Social-Network" target="_blank">
                <div class="project flex flex-column space-between orient-center justify-center">
                    <p class="project-title">Miniature Social Network</p>
                    <p class="project-desc">
                        A terminal-based social media application. Users can send friend requests, search for
                        other users, upload ASCII profile pictures, direct message their friends, and view other
                        users' profile pages. 
                    </p>
                    <div class="flex flex-row space-between orient-center justify-center">
                        <img class="c-icon" src="images/c.png" alt="C Logo">
                    </div>
                </div>
            </a>
        </div>
    </div>
    <!-- <div id="contact" class="bg-black width-full absolute anchor-contact z-2">
        <div class="height-contact">

        </div>
    </div> -->
    <!-- <div id="bottom-bar" class="bg-black width-full absolute anchor-bottom z-2">
        <div class="height-bottom flex flex-row space-between orient-center justify-center">

        </div>
    </div> -->
</body>
</html>