<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Alton Maseko</title>

        <!-- libraries -->
        <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
        <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
        <!-- <script src="js_libraries/masonry.pkgd.min.js"></script> -->
        <!-- <script src="js_libraries/boxicons.js"></script> -->
        <!-- <script src="js_libraries/ScrollToPlugin.min.js"></script> -->
        <!-- <script src="js_libraries/gsap.min.js"></script> -->

        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> -->
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script> -->


        <link rel="stylesheet" href="css/style.css">


        <script defer src="1.js"></script>
        <script defer src="2.js"></script>
        <script defer src="3.js"></script>
        <script defer src="4.js"></script>
        <script defer src="5.js"></script>
        <script defer src="6.js"></script>




</head>

<body>

        <!-- FOR FIREFLIES BACKGROUND -->

        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>
        <div class="firefly"></div>

        <section class="left-body side-line-container">
                <div class="side-line">
                        <div class="side-line-dot home"><box-icon class="side-line-icon side-line-home-icon"
                                        name='home-heart' color="white" size="50"></box-icon></div>
                        <div class="side-line-dot skills"> <box-icon class="side-line-icon side-line-skills-icon"
                                        name='edit-alt' color="white" size="50"></box-icon> </div>
                        <div class="side-line-dot achievements"> <box-icon
                                        class="side-line-icon side-line-achievements-icon" name='medal' color="white"
                                        size="50"></box-icon> </div>
                        <div class="side-line-dot projects"> <box-icon class="side-line-icon side-line-projects-icon"
                                        name='code-alt' color="white" size="50"></box-icon></div>
                        <div class="side-line-dot education-work"> <box-icon
                                        class="side-line-icon side-line-education-work-icon" name='school' type="solid"
                                        color="white" size="50"></box-icon></div>
                </div>

        </section>

        <section class="right-body content-container">


                <section class="home-section">

                        <div class="home-section__name">
                                <div class="flickering-text home-name-text">
                                        <span class="fast-flicker">al</span>ton <br> ma<span class="flicker">se</span>ko
                                </div>

                                <div class="my-traits">


                                        <div class='console-container'><span id='console-text'></span>
                                                <div class='console-underscore' id='console'>&#95;</div>
                                        </div>


                                </div>
                        </div>

                        <div class="home-section__profile-statement">
                                <p class="robot-glitch torch-paragraph slide-in">
                                        Passionate <highlight>Computer Science</highlight> student with
                                        a strong foundation in
                                        mathematics , advanced <highlight>algorithm analysis</highlight> , and
                                        problem-solving.
                                        Equipped with advanced skills in data structures, complex
                                        <highlight>algorithm development</highlight> , and low-level technical
                                        programming. I
                                        have applied these principles to develop <highlight>full-stack</highlight>
                                        software
                                        systems, utilizing cloud technology and databases. A good portion
                                        of this work has been done in a <highlight>team</highlight> environment with
                                        formal
                                        planning, significantly enhancing my team leadership skills to an
                                        exceptional level. My analytical mind and <highlight>technical expertise
                                        </highlight>
                                        enable me to tackle complex challenges across various fields,
                                        efficiently utilizing <highlight>software development</highlight> when needed. I
                                        find great
                                        <highlight>joy</highlight> in all of these pursuits.
                                </p>
                        </div>

                        <div class="home-section__director">
                                <div class="director-container">
                                        <box-icon name='chevron-left' color="white" size="cssSize"></box-icon>
                                        <p class="slide-in">click the <b>dots</b> on the left to view my <u
                                                        class="skills-link">skills</u>, <u
                                                        class="achievements-link">achievements</u>,
                                                <u class="projects-link">projects</u>,
                                                <u class="education-work-link">education and work</u>
                                        </p>
                                </div>
                                <br>
                                <div class="director-container">
                                        <box-icon name='chevron-down' color="white" size="cssSize"></box-icon>
                                        <p class="slide-in">
                                                keep scrolling for my links and contact details.
                                        </p>
                                </div>
                        </div>

                        <div class="home-section__contacts">
                                <ul>
                                        <li>
                                                <box-icon class="slide-in" type='solid' color="white" size="lg"
                                                        name='envelope'></box-icon>
                                                <p class="slide-in">
                                                        <a href="mailto:altonmaseko1000@gmail.com?subject=Lets Colaborate&body=I wanted to reach out!"
                                                                target="_blank">
                                                                altonmaseko1000@gmail.com
                                                        </a>
                                                </p>
                                        </li>
                                        <li>
                                                <box-icon class="slide-in" name='linkedin-square' color="white"
                                                        size="lg" type='logo'></box-icon>
                                                <p class="slide-in">
                                                        <a href="https://www.linkedin.com/in/altonmaseko/"
                                                                target="_blank">LinkedIn</a>
                                                </p>
                                        </li>

                                        <li>
                                                <box-icon class="slide-in" name='github' color="white" size="lg"
                                                        type='logo'></box-icon>
                                                <p class="slide-in">
                                                        <a href="https://github.com/altonmaseko"
                                                                target="_blank">Github</a>
                                                </p>
                                        </li>
                                        <hr>
                                        <li>
                                                <box-icon class="slide-in" name='flag' color="white" size="lg"
                                                        type='solid'></box-icon>
                                                <p class="slide-in">South African</p>
                                        </li>
                                        <li>
                                                <box-icon class="slide-in" name='male-sign' color="white"
                                                        size="lg"></box-icon>
                                                <p class="slide-in"> Straight Male</p>
                                        </li>
                                </ul>

                        </div>




                </section>

                <section class="skills-section">
                        <h1 class="skills-section__header">
                                Skills
                        </h1>

                        <main class="scrollers">
                                <!-- All the ul's must have same number of li's, so match longest, by 
                                duplicating others. This is so that all scrollers can be same width. -->
                                <div class="scroller-container">
                                        <h2 class="scroller-title">Front-End Development</h2>
                                        <div class="scroller" data-direction="left">
                                                <ul class="tag-list scroller__inner">
                                                        <li>Flutter</li>
                                                        <li>HTML</li>
                                                        <li>CSS</li>
                                                        <li>SASS</li>
                                                        <li>JS</li>
                                                        <li>C# Visual Studio</li>
                                                        <li>Flutter</li>
                                                        <li>HTML</li>
                                                        <li>CSS</li>
                                                        <li>SASS</li>
                                                        <li>JS</li>
                                                        <li>C# Visual Studio</li>
                                                </ul>
                                        </div>
                                </div>
                                <div class="scroller-container">
                                        <h2 class="scroller-title">Back-End Development</h2>
                                        <div class="scroller" data-direction="right">
                                                <ul class="tag-list scroller__inner">
                                                        <li>Node.js</li>
                                                        <li>Express.js</li>
                                                        <li>Socket.io</li>
                                                        <li>Passport.js</li>
                                                        <li>MongoDB</li>
                                                        <li>Mongoose</li>
                                                        <li>Node.js</li>
                                                        <li>Express.js</li>
                                                        <li>Socket.io</li>
                                                        <li>Passport.js</li>
                                                        <li>MongoDB</li>
                                                        <li>Mongoose</li>
                                                </ul>
                                        </div>
                                </div>
                                <div class="scroller-container">
                                        <h2 class="scroller-title">Languages I've Used</h2>
                                        <div class="scroller" data-direction="left">
                                                <ul class="tag-list scroller__inner">
                                                        <li>Dart</li>
                                                        <li>C++</li>
                                                        <li>Java</li>
                                                        <li>C#</li>
                                                        <li>Javascript</li>
                                                        <li>C</li>
                                                        <li>Python</li>
                                                        <li>GDScript</li>
                                                        <li>Dart</li>
                                                        <li>C++</li>
                                                        <li>Java</li>
                                                        <li>C#</li>
                                                        <li>Javascript</li>
                                                        <li>C</li>
                                                        <li>Python</li>
                                                        <li>GDScript</li>
                                                </ul>
                                        </div>
                                </div>
                                <div class="scroller-container">
                                        <h2 class="scroller-title">Familiar Tools</h2>
                                        <div class="scroller" data-direction="right">
                                                <ul class="tag-list scroller__inner">
                                                        <li>Github</li>
                                                        <li>Azure Web Apps</li>
                                                        <li>Visual Studio Code</li>
                                                        <li>Postman</li>
                                                        <li>Github</li>
                                                        <li>Azure Web Apps</li>
                                                        <li>Visual Studio Code</li>
                                                        <li>Postman</li>
                                                        <li>Github</li>
                                                        <li>Azure Web Apps</li>
                                                        <li>Visual Studio Code</li>
                                                        <li>Postman</li>
                                                </ul>
                                        </div>
                                </div>
                        </main>


                </section>

                <section class="achievements-section">


                        <header class="achievements-section__header">
                                Achievements
                        </header>

                        <main class="achievements-section__main">
                                <div class="horizontal-line"></div>

                                <ul class="rolldown-list" id="myList">
                                        <li>Golden Key Invite</li>
                                        <li>Google Developer Student Club Core Team Member</li>
                                        <li>Multiple Distinctions [12] in Computer Science Degree</li>
                                        <li>Received award for Best Overall Information Systems 2 Project [C# Tutoring
                                                App] from the Wits School of Business
                                                Science</li>
                                        <li>Received awards for “Best Teamwork and Collaboration”, “Best Team
                                                Presentation” and “Best API Integration” at the Wits AWS Hackathon 2024
                                                [Building an app using cloud services: we used Azure,
                                                Firebase, Flutter]</li>
                                        <li>Gold Medal in the Gauteng Regional Eskom Expo for Young
                                                Scientists Science Fair for a datascience app [2019]</li>
                                        <li>Finalist in the Horizon Mathematics Competition (Top 90)</li>
                                        <li>Top Learner in Grade 10 Nationally in the SACEE Language
                                                challenge</li>
                                </ul>

                        </main>
                </section>

                <section class="projects-section">

                        <h1>Projects I've Worked On</h1>

                        <div class="project-cards">
                                <div class="project-card hexafund-project-card">

                                        <div class="shadow-overlay"></div>


                                        <div class="project-card__header">
                                                <div class="project-card__header-left">
                                                        <div class="project-logo hexafund-project-logo"></div>
                                                        <h2 class="project-title">Hexafund</h2>
                                                </div>
                                                <div class="project-card__header-right">
                                                        <a href="https://github.com/altonmaseko/Hexafund"
                                                                target="_blank">
                                                                <box-icon type='logo' name='github' size="lg"
                                                                        color="white"></box-icon>
                                                        </a>
                                                        <a href="https://hexafund.azurewebsites.net/" target="_blank">
                                                                <box-icon name='link-external' size="lg"
                                                                        color="white"></box-icon>
                                                        </a>

                                                </div>
                                        </div>

                                        <div class="project-card__bottom">
                                                <p class="project-description">
                                                        A central web application allowing organizations to advertise
                                                        funding
                                                        opportunities
                                                        such as bursaries, capital to start a business or to host an
                                                        important
                                                        event. Students
                                                        register and can view and apply for opportunities. View on
                                                        Desktop. This
                                                        specific
                                                        project was made for desktop use. All my other web applications
                                                        are
                                                        responsive.
                                                </p>
                                                <div class="scroller">
                                                        <ul class="tag-list scroller__inner">
                                                                <li>HTML</li>
                                                                <li>CSS</li>
                                                                <li>JS</li>
                                                                <li>Express.js</li>
                                                                <li>MongoDB</li>
                                                        </ul>
                                                </div>
                                        </div>
                                </div>
                                <div class="project-card witsgo-project-card">

                                        <div class="shadow-overlay"></div>

                                        <div class="project-card__header">
                                                <div class="project-card__header-left">
                                                        <div class="project-logo witsgo-project-logo"></div>
                                                        <h2 class="project-title">WitsGo</h2>
                                                </div>
                                                <div class="project-card__header-right">
                                                        <a href="https://github.com/altonmaseko/witsgo" target="_blank">
                                                                <box-icon type='logo' name='github' size="lg"
                                                                        color="white"></box-icon>
                                                        </a>
                                                        <a href="https://witsgo.azurewebsites.net/" target="_blank">
                                                                <box-icon name='link-external' size="lg"
                                                                        color="white"></box-icon>
                                                        </a>
                                                </div>
                                        </div>

                                        <div class="project-card__bottom">
                                                <p class="project-description">
                                                        Aims to solves navigation and transport difficulties faced by
                                                        students.
                                                        Includes live
                                                        tracking of Wits transport services (busses) and a rental system
                                                        allowing users to
                                                        rent a bicycle or skateboard. Map with real time user location
                                                        tracking,
                                                        navigation,
                                                        enhanced interactivity and extra details specific to Wits
                                                        campus. Can be
                                                        modified
                                                        for other campuses. Mobile and Desktop friendly.
                                                </p>
                                                <div class="scroller">
                                                        <ul class="tag-list scroller__inner">
                                                                <li>HTML</li>
                                                                <li>CSS</li>
                                                                <li>JS</li>
                                                                <li>Google MAPS API</li>
                                                                <li>MongoDB</li>
                                                        </ul>
                                                </div>
                                        </div>
                                </div>
                                <div class="project-card akai-project-card">

                                        <div class="shadow-overlay"></div>

                                        <div class="project-card__header">
                                                <div class="project-card__header-left">
                                                        <div class="project-logo akai-project-logo"></div>
                                                        <h2 class="project-title">Akai</h2>
                                                </div>
                                                <div class="project-card__header-right">
                                                        <a href="https://github.com/altonmaseko/AkaiFinal"
                                                                target="_blank">
                                                                <box-icon type='logo' name='github' size="lg"
                                                                        color="white"></box-icon>
                                                        </a>
                                                </div>
                                        </div>

                                        <div class="project-card__bottom">
                                                <p class="project-description">
                                                        Application developed for the Wits Amazon Hackathon 2024.
                                                        Application to enhance the lives of female students. Tracks
                                                        users within a particular
                                                        radius, allowing students to request pads from nearby users.
                                                        Advanced period
                                                        tracking system. Built in restricted Chat-bot for women health
                                                        questions. I've included it here to show
                                                        our design and programming abilities using
                                                        Flutter, Firebase Notifications and Azure Web Services. Check
                                                        our code on the Github page.
                                                </p>
                                                <div class="scroller">
                                                        <ul class="tag-list scroller__inner">
                                                                <li>Flutter</li>
                                                                <li>Express.js</li>
                                                                <li>Firebase</li>
                                                                <li>Azure Web Services</li>
                                                                <li>MongoDB</li>
                                                        </ul>
                                                </div>
                                        </div>
                                </div>
                        </div>

                        <div class="projects-list">
                                <p class="hexafund">Hexafund</p>
                                <p class="witsgo">WitsGo</p>
                                <p class="akai">Akai</p>
                        </div>
                        <br>
                        <i>more projects available on GitHub</i>

                </section>

                <section class="education-work-section">
                        <div class="education  gradient-border">
                                <h1 class="">Education</h1>
                                <main class="description">
                                        <p class="description__university">
                                                <highlight>Final</highlight> year student studying
                                                Bsc<highlight>
                                                        Computer
                                                        Science</highlight> at
                                                the University of the <highlight>Witwatersrand</highlight>.
                                        </p>
                                        <hr>
                                        <p class="description__school">
                                                Highschool: <highlight>Star College Pretoria</highlight>.
                                        </p>
                                </main>

                        </div>

                        <div class="work-experience gradient-border">
                                <h1 class="hover-in-text">Work Experience</h1>
                                <main>
                                        <div class="work">
                                                <h2>TeachMe2 Tutor</h2>
                                                <li class="hover-in-text">Tutoring High School IT, Sciences and
                                                        Mathematics</li>
                                        </div>
                                        <br>
                                        <div class="work">
                                                <h2>Developed Multiple Projects</h2>
                                                <li class="hover-in-text">Please visit the projects section to see the
                                                        various
                                                        projects I have worked on.
                                                </li class="hover-in-text">
                                        </div>
                                </main>
                        </div>


                        <div class="relavent-coursework gradient-border">
                                <h1 class="hover-in-text">Relavent Completed Coursework</h1>
                                <main>
                                        <div class="year">
                                                <h2>1st Year</h2>
                                                <ul>
                                                        <li class="hover-in-text">Introduction to Data Structures and
                                                                Algorithms</li>
                                                        <li class="hover-in-text">Introduction to Algorithms and
                                                                Programming</li>
                                                        <li class="hover-in-text">Basic Computer Organization</li>
                                                        <li class="hover-in-text">Discrete Computation Structures</li>
                                                        <li class="hover-in-text">Information Systems 1</li>
                                                </ul>
                                        </div>
                                        <div class="year">
                                                <br>
                                                <h2>2nd Year</h2>
                                                <ul>
                                                        <li class="hover-in-text">Database Fundamentals</li>
                                                        <li class="hover-in-text">Computer Networks</li>
                                                        <li class="hover-in-text">Mobile Computing</li>
                                                        <li class="hover-in-text">Analysis of Algorithms</li>
                                                        <li class="hover-in-text">Information Systems 2</li>
                                                        <li class="hover-in-text">Statistics</li>
                                                </ul>
                                        </div>
                                        <div class="year">
                                                <br>
                                                <h2>3rd Year</h2>
                                                <ul>
                                                        <li class="hover-in-text">Parallel Computing</li>
                                                        <li class="hover-in-text">Software Design</li>
                                                        <li class="hover-in-text">Advanced Analysis of Algorithms</li>
                                                        <li class="hover-in-text">Computer Graphics and Visualization
                                                        </li>
                                                        <li class="hover-in-text">Operating Systems and System
                                                                Programming</li>
                                                        <li class="hover-in-text">Software Design Project</li>
                                                        <li class="hover-in-text">Formal Languages and Automata</li>
                                                        <li class="hover-in-text">Machine Learning</li>
                                                </ul>
                                        </div>
                                </main>
                        </div>

                        <div class="interests gradient-border">
                                <h1 class="hover-in-text">Interests</h1>
                                <ul>
                                        <li class="hover-in-text">Web Development</li>
                                        <li class="hover-in-text">Mobile Development</li>
                                        <li class="hover-in-text">Fitness</li>
                                        <li class="hover-in-text">Presenting</li>
                                        <li class="hover-in-text">Moral Philosophy</li>
                                        <li class="hover-in-text">Low Level System Programming</li>
                                        <li class="hover-in-text">Artificial Intelligence</li>
                                        <li class="hover-in-text">Game Development</li>
                                </ul>
                        </div>

                        <div class="languages gradient-border">
                                <h1 class="hover-in-text">Languages</h1>
                                <ul>
                                        <li class="hover-in-text">English</li>
                                        <li class="hover-in-text">Sesotho</li>
                                        <li class="hover-in-text">Afrikaans</li>
                                </ul>
                        </div>
                </section>

        </section>





</body>

</html>