MartelVasquez.github.io/index.html at main · MartelV/MartelVasquez.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Martel Vasquez | Portfolio</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="images/MV_transparent-.png" type="image/png">
</head>
<body>

    <!-- Intro Section: Initial landing page with animated circle and hero header -->
    <div class="intro">
        <div class="outline"></div>
        <div class="intro-circle"></div>
        <img src="images/downarrow.png" alt="Down Arrow" class="down-arrow">
    </div>

    <!-- Navigation Bar -->
    <nav class="navbar">
        <ul>
            <li>
                <img src="images/MV_transparent-.png" alt="MV Logo" class="logo">
            </li>
            <li><a href="#about">About Me</a></li>
            <li class="separator">|</li>
            <li><a href="#projects">Projects</a></li>
            <li class="separator">|</li>
            <li><a href="#contact">Contact Me</a></li>
        </ul>
    </nav>

    <!-- Header Image Section -->
    <header class="hero-header">
        <div class="hero-content">
            <div class="first-name">Martel</div>
            <div class="last-name">Vasquez</div>
        </div>
    </header>

    <!-- About Me Section: Overview of background, education, and experience -->
    <section id="about" class="section blue-ribbon">
        <div class="about-container">
            <div class="about-text">
                <h2>About Me</h2>
                <p>
                    I live in Fairfax, Virginia and I am 22 years old. I was born on March 31, 2003, in Houston, Texas. I went to Fairfax High School, where I started my CS journey with Python in my freshman year. I took another two Computer Science classes, one being an AP, where I learned Java. After graduating, I pursued Computer Science at Northern Virginia Community College. After two years, I transferred to George Mason University in 2023. I am finishing my Bachelor's degree this summer and currently have a 3.70 GPA. My skills include Java, Python, and C, but I also enjoy doing edits, making websites, like this, and building computers for fun. My hobbies are playing video games, basketball, and coding.
                </p>
            </div>
            <div class="about-media">
                <a href="https://fairfaxhs.fcps.edu/" target="_blank">
                    <img src="images/FHSlogo.png" alt="Fairfax High School Logo" />
                    <span class="image-title">Fairfax High School</span>
                    <div class="date-info">Started: August 2017 | Graduation: May 2021</div>
                </a>
                <a href="https://www.nvcc.edu/" target="_blank">
                    <img src="images/NOVAlogo.png" alt="Northern Virginia Community College Logo" />
                    <span class="image-title">Northern Virginia Community College</span>
                    <div class="date-info">Started: August 2021 | Graduation: May 2023</div>
                </a>
                <a href="https://www.gmu.edu/" target="_blank">
                    <img src="images/MasonLogo.png" alt="Mason Logo" />
                    <span class="image-title">George Mason University</span>
                    <div class="date-info">Started: August 2023 | Expected Graduation: August 2025</div>
                </a>
            </div>
        </div>
    </section>

<!-- Projects Section: Showcase of technical projects and accomplishments -->
<section id="projects" class="project-section pinkpurple">
    <div class="projects-container">
        <h2>Projects</h2>
        <div class="project-boxes">
            <!-- Java Projects -->
            <div class="project-box">
                <h3>Java</h3>
                <p><strong>Tetris Game:</strong> Developed a Tetris game using a 2-D dynamic array to manage game elements efficiently, increasing game performance by 25%.</p>
                <p><strong>Cache Simulator:</strong> Created a cache simulator utilizing linked lists and HashMap to model FIFO, LFU, and LRU cache strategies, reducing cache retrieval times by 20%.</p>
                <p><strong>Image Processor:</strong> Implemented an image processor that uses the Quadtree data structure to efficiently process and manipulate images, including converting PGB images and exporting them after alterations.</p>
                <p><strong>Bellman-Ford Algorithm Simulator:</strong> Developed a simulator to compute the shortest path in a weighted directed graph, showcasing proficiency in algorithm implementation and graph theory.</p>
            </div>

            <!-- C Projects -->
            <div class="project-box">
                <h3>C</h3>
                <p><strong>Otur CPU Scheduler:</strong> Developed a pivotal CPU scheduler component within the StrawHat Virtual Machine. This included process initialization, insertion, removal, and state management, managing three linked list queues to effectively prioritize and handle processes. Improved scheduling efficiency by 15%.</p>
                <p><strong>Shell and Buffer Management System:</strong> Created an interactive command-line interpreter that emulated a shell, utilizing programming concepts such as forking child processes, executing programs, signal handling, file redirection, and pipes.</p>
                <p><strong>OS/161 Synchronization & Traffic Management:</strong> Designed a three-way stop traffic simulation using lock-based synchronization in the OS/161 kernel. Utilized <code>thread_sleep()</code> and <code>thread_wakeup()</code> to prevent deadlocks and boost system efficiency by 30%.</p>
            </div>

            <!-- Python Projects -->
            <div class="project-box">
                <h3>Python</h3>
                <p><strong>Student Profile Management System:</strong> Developed a system that implements functionalities for reading, creating, updating, and deleting student profiles using file I/O operations and dictionaries.</p>
                <p><strong>Django Note API:</strong> Built a RESTful API using Django and TastyPie for a note-taking backend. Implemented models, routing, and CRUD operations; tested endpoints using Postman.</p>
                <p><strong>Pacman Maze Search:</strong> Created DFS, BFS, UCS, and A* search algorithms for a Pacman agent. Built custom heuristics to efficiently solve multiple maze types, demonstrating AI and pathfinding skills.</p>
            </div>
        </div>
    </div>
</section>

<!-- Resume Section -->
<section id="resume" class="resume-background">
    <div class="resume-content">
        <h2>Check Out My Resume</h2>
        <a href="Martel_Vasquez_Resume_2025.pdf" download="Martel_Vasquez_Resume_2025.pdf" class="resume-button">Resume</a>
    </div>
</section>

<!-- Contact Section: Methods to get in touch and connect with me -->
<section id="contact" class="section ghost-color">
    <div class="header">
        <h2>Contact Me</h2>
    </div>
    <!-- Contact Information with Icons as Buttons -->
    <div class="contact-buttons">
        <a href="mailto:martelvasquez31@gmail.com" class="contact-button">
            <img src="images/email.png" alt="Email">
        </a>
        <a href="tel:+1-703-649-1479" class="contact-button">
            <img src="images/phone.png" alt="Phone">
        </a>
        <a href="https://www.linkedin.com/in/martelvasquez" target="_blank" class="contact-button">
            <img src="images/linkin.png" alt="LinkedIn">
        </a>
        <a href="https://github.com/MartelV" target="_blank" class="contact-button">
            <img src="images/github.png" alt="GitHub">
        </a>
    </div>
</section>


    <!-- Footer Section -->
    <footer class="section gray-bottom">
        <p>© 2025 Martel Vasquez. All Rights Reserved.</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>