Engineering Portfolio Website


Project Information: The Engineering Portfolio Website was developed using the
Hyper-Text Mark-Up Language – HTML, the Cascading StyleSheet Language – CSS,
& the programming language – JavaScript. Responsive layouts, navigation systems,
interactive cards, modal contact elements, & section-specific styling were designed
and implemented to improve the usability and visual consistency across the site.
Integrated project documentation, source-code references, technical screenshots,
certificates, GitHub links, & downloadable resources to create a centralized platform
for presenting engineering accomplishments in a unqiue and professional manner.

index.html


                <!--Engineering Portfolio Website - index.html-->
                <!--Bryan Martinez-->

                <!DOCTYPE html>
                <html>
                
                


                <!--******************HTML FILE HEADER**********************-->   
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM ENGR Portfolio Website</title>

                    <link rel="stylesheet" href="styles.css">
                </head>
                

             
                <body>
                    
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">              
                        
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>       
                        </div>


                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">          
                            <nav class="navbar">
                            <a href="index.html" class="active">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav>
                        </div> 
                    </header>


                    
                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="second-nav">       
                        <button class="contact-button" id="contactButton">
                            <b>Contact Information</b>
                        </button>    
                    </nav>
                    


                    <!--*****CONTACT INFO BUTTON*****-->
                    <div class="contact-modal" id="contactModal">
                        <div class="contact-box">
                            <button class="contact-close" id="contactClose">
                                ×
                            </button>

                            <h2>Contact Information</h2>

                            <p>
                                <b>Phone:</b> (210) 291-2638 
                            </p>

                            <p>
                                <b>Email:</b> BryanEmc2@gmail.com           
                            </p>

                            <p>
                                <b>GitHub:</b>
                                <a href="https://github.com/BM-CPE" target="_blank">
                                    GitHub.com/BM-CPE
                                </a>
                            </p>
                        </div>
                    </div>


                    
                    <!--***************HOME MAIN LANDING PAGE***************-->
                    <main class="home-main">
                        <section class="home-hero">
                            <img src="images/Profile/Bryan-Professional.png"
                                alt="Bryan Martinez"
                                class="home-profile-pic">

                            <div class="home-hero-text">
                                <h1>Bryan Martinez</h1>
                                <p class="home-subtitle">COMPUTER ENGINEER</p>
                            </div>
                        </section>
                    </main>


                    
                    <!--***************INTRODUCTION SECTION***************-->
                    <section class="intro-section">
                        <div class="intro-content">

                            <div class="intro-text">
                                <p>
                                    <h2>Engineering Introduction</h2> My passion for engineering began to develop at an early age. 
                                    Before reaching 1st grade, not only was I introduced 
                                    to the concept of time and multiplaction, but I also understood  
                                    and enjoyed it. Since then, mathematics became my strongest and 
                                    favorite subject throughout my academic studies.
                                    During my senior year at high school, as I approached graduation,
                                    I decided to pursue a degree in Computer Engineering, mainly due to my 
                                    strength in mathematics, followed by my interest in computers, 
                                    and my interest in learning how technology is fundamentally designed.
                                </p>

                                <p>
                                    During college, I developed an impactful passion for science. 
                                    This newly-found passion motivated me to enroll into a university,
                                    helped me complete my degree courses successfully,
                                    and led me to develop a new goal in life:<br> 
                                    <b><i>to pursue a career in SPACE ENGINEERING.</i></b>

                                </p>
                            </div>

                            <div class="intro-image">
                                <img src="images/Homepage/engr2.JPG" alt="Intro image">
                            </div>

                        </div>
                    </section>



                    <!--******************EXPERIENCE SECTION**********************-->   
                    <section class="experience-section">

                        <h2>Engineering Experience</h2>

                        <!--*****OPTUM*****-->
                        <div class="experience-item">
                            <a href="details-optum.html">
                            <div class="experience-card"> 
                                <img src="Images/Homepage/optum-logo.png">
                            </div>
                            </a>

                            <div class="experience-info">
                                <h3><i><u>NETWORK ENGINEER</u></i> - Mergers & Acquisitions</h3>
                                -Design, manage, and integrate enterprise healthcare networks
                                <p>
                                    Dates: <b>2/13/23 - PRESENT</b><br>
                                    Location: <b>San Antonio, TX</b><br>
                                    <a href="details-optum.html"><b>View Role Description Details</b></a>
                                </p>            
                            </div>
                        </div>

                        <!--*****CISCO*****-->
                        <div class="experience-item">
                            <a href="details-cisco.html">
                            <div class="experience-card">
                                <img src="Images/Homepage/cisco2.png"> 
                            </div>
                            </a>

                            <div class="experience-info">
                                <h3><i><u>NETWORK ENGINEER</u></i> - Home Depot Non-Store Network Refresh</h3>
                                -Configure, deploy, and upgrade network infrastructure for Home Depot distribution centers and data centers
                                <p>
                                    Dates: <b>3/3/25 - 3/6/26</b><br>
                                    Location: <b>San Antonio, TX</b><br>
                                    <a href="details-cisco.html"><b>View Role Description Details</b></a>
                                </p>                    
                            </div>
                        </div>

                    </section>



                    <!--*************ENGINEERING PROJECTS SECTION*****************-->   
                    <section class="engineering-projects">
                        
                        <h2>Engineering Projects</h2> 
                            
                        <div class="homepage-cards">

                            <div class="home-card">
                                <a href="projects_software.html">
                                    <img src="images/software-icon.png"
                                        alt="Software Development"
                                        class="card-icon">

                                    <h2>Software Development<br>&<br>Computer Programming</h2>
                                </a>
                            </div>

                            <!--<div class="home-card">
                                <a href="projects_avionics.html">
                                    <img src="images/rocket-icon.png"
                                        alt="Avionics"
                                        class="card-icon">

                                    <h2>Avionics<br>Controls &<br>Instrumentation</h2>
                                </a>
                            </div>-->
                                
                            </div>
                    </section>  

                    

                    <!--******************RESOURCE CARD SECTION**********************-->   
                    <section class="resource-section"><br>

                        <!--*****CERTIFICATIONS*****-->
                        <div class="resource-card">
                            <a href="certifications.html">
                                <div class="icon-container">
                                    <img src="images/cert.png" alt="Certifications" class="resource-icon">
                                </div>
                                
                                <h3>Certifications</h3>
                            </a>    
                        </div>
                        
                        <!--*****ENGINEERING PORTFOLIO PDF*****-->
                        <div class="resource-card">
                            <a href="BM-Portfolio.pdf" target="_blank">
                                <div class="icon-container">
                                    <img src="images/portfolioIMG.png" alt="Engineering Portfolio" class="resource-icon">
                                </div>
                                
                                <h3>Engineering Portfolio</h3>
                            </a>
                        </div>
                        
                        <!--*****RESUME PDF*****-->
                        <div class="resource-card">
                            <a href="BM-Resume.pdf" target="_blank">
                                <div class="icon-container">
                                    <img src="images/resume-icon.png" alt="Resume" class="resource-icon">
                                </div>
                                
                                <h3>Resume</h3>
                            </a>
                        </div>
                        
                        <!--*****ABOUT ME*****-->
                        <div class="resource-card">
                            <a href="aboutME.html">
                                <div class="icon-container">
                                    <img src="images/infoIMG.png" alt="About" class="resource-icon">
                                </div>
                                
                                <h3>About</h3>
                            </a>
                        </div><br>

                    </section>
                    


                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO BUTTON*****-->
                    <script>
                        const contactButton = document.getElementById("contactButton");
                        const contactModal = document.getElementById("contactModal");
                        const contactClose = document.getElementById("contactClose");

                        contactButton.addEventListener("click", function () {
                            contactModal.style.display = "flex";
                        });

                        contactClose.addEventListener("click", function () {
                            contactModal.style.display = "none";
                        });
                    </script>
                    <!--**********************************************************-->



                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">

                            <div class="footer-contact-item">
                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">
                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">
                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>GitHub:</b> 
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>
                        </div>
                        


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">
                            <p>Engineering Portfolio Website</p>
                            <p><strong>© 2026 Bryan Martinez</strong></p>
                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>
                    <!--**********************************************************-->
                    
                </body>

                </html>
                            
            

details-optum.html


                <!--Engineering Portfolio Website - details-optum.html-->

                <!DOCTYPE html>
                <html>



                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM Optum</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                        
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav> 
                        </div>

                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="software-nav">
                        <a href="details-optum.html" class="active">Optum</a>
                        <a href="details-cisco.html">Cisco</a>
                    </nav>

                    <br>

                    <!--***************************OPTUM***************************-->
                    <img src="Images/Homepage/optum-logo.png" alt="Optum Logo" class="education-logo">
                    <br>
                    <h2>Network Engineer - Mergers and Acquisitions</h2>
                    <br>
                    


                    <!--************************OPTUM TABLE************************-->
                    <section class="cert-table-section">
                        <table class="cert-table">
                           
                            <!--*****TABLE HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Engineering Experience & Responsibilities</th>
                                </tr>
                            </thead>

                            <!--*****TABLE BODY*****-->
                            <tbody>

                                <!--*****TABLE ROW 1*****-->
                                <tr>
                                    <td>Analyze healthcare network infrastructure to securely integrate within Optum enterprise network</td>
                                </tr>

                                <!--*****TABLE ROW 2*****-->

                                <!--*****TABLE ROW 3*****-->

                                <!--*****TABLE ROW 4*****-->

                                <!--*****TABLE ROW 5*****-->

                                <!--*****TABLE ROW 6*****-->

                                <!--*****TABLE ROW 7*****-->

                                <!--*****TABLE ROW 8*****-->

                                <!--*****TABLE ROW 9*****-->

                                <!--*****TABLE ROW 10*****-->

                                <!--*****TABLE ROW 11*****-->

                                <!--*****TABLE ROW 12*****-->

                                <!--*****TABLE ROW 13*****-->

                                <!--*****TABLE ROW 14*****-->
                                
                            </tbody>
                        
                        </table>
                    
                    </section>
                    


                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">

                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>
                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>
                    


                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>

                </body>

                </html>
            

details-cisco.html


                <!--Engineering Portfolio Website - details-cisco.html-->

                <!DOCTYPE html>
                <html>



                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM Cisco</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                        
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav> 
                        </div>

                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="software-nav">
                        <a href="details-optum.html">Optum</a>
                        <a href="details-cisco.html" class="active">Cisco</a>
                    </nav>

                    <br>
                    <br>

                    <!--***************************CISCO***************************-->
                    <img src="Images/Homepage/cisco-logo.png" alt="Cisco Logo" class="education-logo">
                    <br>
                    <h2>Network Engineer - Home Depot Non-Store Network Refresh</h2>
                    <br>



                    <!--************************CISCO TABLE************************-->
                    <section class="cert-table-section">

                        <table class="cert-table">

                            <!--*****TABLE HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Engineering Experience & Responsibilities</th>
                                </tr>
                            </thead>

                            <!--*****TABLE BODY*****-->
                            <tbody>

                                <!--*****TABLE ROW 1*****-->
                                <tr>
                                    <td>Analyze Home Depot enterprise network infrastructure, to perform network migrations
                                        and upgrade devices
                                    </td>
                                </tr>

                                <!--*****TABLE ROW 2*****-->

                                <!--*****TABLE ROW 3*****-->

                                <!--*****TABLE ROW 4*****-->

                                <!--*****TABLE ROW 5*****-->

                                <!--*****TABLE ROW 6*****-->

                                <!--*****TABLE ROW 7*****-->

                                <!--*****TABLE ROW 8*****-->

                                <!--*****TABLE ROW 9*****-->

                                <!--*****TABLE ROW 10*****-->

                                <!--*****TABLE ROW 11*****-->

                                <!--*****TABLE ROW 12*****-->

                                <!--*****TABLE ROW 13*****-->

                                <!--*****TABLE ROW 14*****-->

                            </tbody>

                        </table>

                    </section>

                    

                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">
                            
                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>

                </body>

                </html>
            

projects_software.html


                <!--Engineering Portfolio Website - projects-software.html-->

                <!DOCTYPE html>
                <html>
                


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM Software Projects</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>

                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                        
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html" class="active">SOFTWARE</a> 
                            <a href="certifications.html">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav> 
                        </div>

                    </header>

                    

                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="software-nav">
                        <a href="ps_NPMAT.html">Port-Matrix Automation</a>
                        <a href="ps_EDAF.html">Data Acquisition Framework</a>
                        <a href="ps_EPWeb.html">Engineering Portfolio Website</a>
                    </nav>
                    
                    
                    
                    <!--************SOFTWARE PROJECTS - LANDING PAGE************-->
                    <br><h1>Projects - Software Engineering</h1><br>


                    
                    <!--*****NETWORK PORT-MATRIX AUTOMATION TOOL*****-->
                    <section class="project-card">

                        <a href="ps_NPMAT.html">
                            
                            <div class="project-info">
                                <h2>Network Port-Matrix Automation Tool</h2>
                                <p>
                                    <b>Programming Language:</b> Python<br>
                                    <b>Description:</b> Automate Network Port Assignments
                                </p>
                            </div>
                            
                            <div class="project-image">
                                <img src="Images/Icons/npmat-icon.png" alt="NPMAT Icon">
                            </div>
                        </a>

                    </section>
                    
                    
                    <!--*****ENGINEERING DATA ACQUISITION FRAMEWORK*****-->
                    <section class="project-card">

                        <a href="ps_EDAF.html">
                            
                            <div class="project-info">
                                <h2>Engineering Data Acquisition Framework</h2>

                                <p>
                                    <b>Programming Language:</b> Python<br>
                                    <b>Description:</b> Engineering DAQ System Analyzer
                                </p>
                            </div>

                            <div class="project-image">
                                <img src="Images/Icons/edaf-icon.png" alt="EDAF Icon">
                            </div>
                        </a>  

                    </section>


                    <!--*****ENGINEERING PORTFOLIO WEBSITE*****-->
                    <section class="project-card">

                        <a href="ps_EPWeb.html">

                            <div class="project-info">
                                <h2>Engineering Portfolio Website</h2>
                                <p>
                                    <b>Web Development Languages:</b> HTML, CSS, Javascript<br>
                                    <b>Description:</b> Engineering Portfolio Responsive Website
                                </p>
                            </div>

                            <div class="project-image">
                                <img src="Images/Icons/epweb-icon.png" alt="EP-Website Icon">
                            </div>           
                        </a>
                
                    </section>

                    <br><br>



                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">
                            
                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>
                    
                    
                </body>

                </html>
            

ps_NPMAT.html


                <!--Engineering Portfolio Website - ps_NPMAT.html-->

                <!DOCTYPE html>
                <html>
                


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM NPMAT Project</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                        
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html" class="active">SOFTWARE</a> 
                            <a href="certifications.html">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav>
                        </div>
                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="software-nav">
                        <a href="ps_NPMAT.html" class="active">Port-Matrix Automation</a>
                        <a href="ps_EDAF.html">Data Acquisition Framework</a>
                        <a href="ps_EPWeb.html">Engineering Portfolio Website</a>
                    </nav>



                    <!--***********NETWORK PORT MATRIX AUTOMATION TOOL***********-->
                    <br><h1>Network Port-Matrix Automation Tool</h1><br>

                    <p><b>Project Information</b> The Network Port-Matrix Automation Tool was developed using Python,<br>
                    to replace a manual network switch-port allocation process. This tool was specifically designed<br>
                    for wireless access point (WAP) devices that connect to network switches, to provide wireless<br>
                    connectivity. Standard connection requirements include: WAPs must be connected to the final <br>
                    ports of each switch, WAPs must be distributed evenly across switch stacks for load-balancing<br>
                    and redundancy purposes (minimize risk), WAP hostnames must be configured according to<br>
                    their corresponding switch hostname and MDF/IDF designation. The final output is a port-matrix <br>
                    consisting of all WAP names paired with the switch-port they will be connected to for each site.
                    </p>


                        <!--<p class="project-description">
                        <b>Programming Language:</b> Python<br>
                        <b>Software Development Start Date: </b>7/5/26<br>
                        <b>Software Completion Date: </b>7/8/26<br>
                        <b>Project Presentation 1 Date: </b>7/20/26<br>
                        <b>Project Presentation 2 Date: </b>7/23/26<br>-->
                
                        

                    <!--*********************SOURCE CODE*********************-->    

                    <!--*****main.py*****-->
                    <details>
                        <summary>main.py</summary>
                        <p>
                            <pre><code>
                                #Source Code - main.py             
                            </code></pre>
                        </p>
                    </details>
                    
                    <!--*****getSiteData.py*****-->
                    
                    <!--*****getStackData.py*****-->

                    <!--*****getWAPcount.py*****-->

                    <!--*****distributeWAPs.py*****-->

                    <!--*****getWAPnames.py*****-->

                    <!--*****reservePorts.py*****-->

                    <!--*****getRedundancy.py*****-->

                    <!--*****assignWAPports.py*****-->

                    <!--*****displayMatrix.py*****-->

                    <!--*****exportMatrix.py*****-->
                        



                    <!--*******************PROJECT DEMO SECTION*******************-->
                    
                    <!--*****INPUT SECTION*****-->
                    <section class="project-input-section">

                        <h2>Project Demo</h2>
                        
                        <div class="project-input-content">
                            
                            <div class="project-input-info">
                                <p>
                                <b><u>INPUT:</u></b><br>
                                The Network Port-Matrix Automation Tool 
                                collects the required site and switch-stack
                                information before generating the port matrix.
                                </p>

                                <ul>
                                    <li>Site Code: <b>DC105</b></li>
                                    <li>Total Stack Count: <b>15</b></li>
                                    <li>Total Switch Count: <b>46</b></li>
                                    <li>Total WAP Count: <b>292</b></li>
                                </ul>
                            </div>

                            <div class="project-input-image">
                                <img src="Images/NP-MAT/input1.png"
                                alt="NP-MAT project input1"> <br>

                                <img src="Images/NP-MAT/input2.png"
                                alt="NP-MAT project input2"> <br>

                                <img src="Images/NP-MAT/input3.png"
                                alt="NP-MAT project input3"> <br>

                                <img src="Images/NP-MAT/input4.png"
                                alt="NP-MAT project input4"> <br>

                                <img src="Images/NP-MAT/in-out.png"
                                alt="NP-MAT project in-out">
                            </div>

                        </div>

                    </section>


                    <!--*****OUTPUT SECTION*****-->
                    <section class="project-output-section">
                        
                        <div class="project-output-content">
                            
                            <div class="project-output-info">
                                <p>
                                <b><u>OUTPUT:</u></b><br>
                                The Network Port-Matrix Automation Tool 
                                can display the formatted matrices to the
                                terminal or can generate a port-matrix CSV file
                                </p>

                                <ul>
                                    <li>Prints the formatted port-matrix to the terminal</li>
                                    <li>Prints the CSV file download confirmation</li>
                                    <li>Concatenates every WAP with its reserved port to generate the port-matrix CSV file</li>
                                </ul> 
                            </div>
                            
                            <div class="project-output-image">
                                <br><br>
                                <br>
                                <img src="Images/NP-MAT/output1.png"
                                alt="NP-MAT project output1">
                            </div>

                        </div>

                    </section>

                    <div class="matrix-display">
                        <img src="Images/NP-MAT/output2.png">
                        <img src="Images/NP-MAT/output3.png">
                        <img src="Images/NP-MAT/output4.png">
                    </div>
                    
                    <br><br>    



                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">

                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">

                            <p><a href="projects_software.html"><u>Return to Software Projects</u></a></p>
                            
                            <p><a href="index.html"><u>Home</u></a></p>

                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>
                    
                </body>

                </html>
           

ps_EDAF.html


                <!--Engineering Portfolio Website - ps_EDAF.html-->

                <!DOCTYPE html>
                <html>
                


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM EDAF Project</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                        
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html" class="active">SOFTWARE</a>
                            <a href="certifications.html">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav>
                        </div>
                        
                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="software-nav">
                        <a href="ps_NPMAT.html">Port-Matrix Automation</a>
                        <a href="ps_EDAF.html" class="active">Data Acquisition Framework</a>
                        <a href="ps_EPWeb.html">Engineering Portfolio Website</a>
                    </nav>



                    <!--********ENGINEERING DATA ACQUISITION FRAMEWORK********-->
                    <br><h1>Engineering Data Aqcuisition Framework</h1><br>
                    
                    <p><b>Project Information </b>The Engineering Data Acquisition Framework<br> 
                    was developed using Python, to collect, validate and store sensor data<br>
                    such as temperature, pressure, and flow rate. The implemented sensor<br>
                    validation logic can detect and flag measurements that are out of range.<br>
                    The generated CSV file reports are timestamped, formatted, and can be<br>
                    used for further engineering analysis. The modular designed workflow<br>
                    separates input handling, sensor validation, logging, & display functions<br>
                    for improved readability and scalability to the engineer or programmer.
                    </p>
                    
                    

                    <!--*********************SOURCE CODE*********************-->
                    
                    <!--*****main.py*****-->
                    <details>
                        <summary>main.py</summary>
                        <p>
                            <pre><code>
                                #Source CODE - main.py      
                            </code></pre>
                        </p>
                    </details>

                    <!--*****utils.py*****-->

                    <!--*****validation.py*****-->

                    <!--*****display_data.py*****-->

                    <!--*****sensor_logger.py*****-->
                    



                    <!--*******************PROJECT DEMO SECTION*******************-->
                    
                    <!--*****INPUT SECTION*****-->
                    <section class="project-input-section">

                        <h2>Project Demo</h2>
                        
                        <div class="project-input-content">
                            
                            <div class="project-input-info">
                                <p>
                                <b><u>INPUT:</u></b><br>
                                The Engineering Data Acquisition Framewrok collects the 
                                recorded pressure, temperature, and flow rate values.
                                The data is then validated, formatted, and logged. 
                                </p>

                                <ul>
                                    <li>Pressure: <b>124.1, 124.2, 301.0</b> (psi)</li>
                                    <li>Temperature: <b>81.1, 81.2, 201.0</b> (°C)</li>
                                    <li>Flow Rate: <b>8.1, 8.2, 11.0</b> (kg/s)</li>
                                </ul>
                            </div>

                            <div class="project-input-image">
                                <img src="Images/EDAF/input1.png"
                                alt="EDAF project input">
                            </div>

                        </div>

                    </section>


                    <!--*****OUTPUT SECTION*****-->
                    <section class="project-output-section">
                        
                        <div class="project-output-content">
                            
                            <div class="project-output-info">
                                <p>
                                <b><u>OUTPUT:</u></b><br>
                                The Engineering Data Acquisition Framework 
                                can display the formatted reports to the
                                terminal and can generate a sensor data CSV file
                                </p>

                                <ul>
                                    <li>Prints a formatted sensor data report to the terminal</li>
                                    <li>Prints the CSV file download or update confirmation</li>
                                    <li>Validates every data entry to generate the CSV file</li>
                                </ul> 
                            </div>
                            
                            <div class="project-output-image">
                                <br>
                                <img src="Images/EDAF/output1.png"
                                alt="EDAF project output1">
                            </div>

                        </div>

                    </section>

                    <br><br>



                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">

                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>
                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">

                            <p><a href="projects_software.html"><u>Return to Software Projects</u></a></p>
                            
                            <p><a href="index.html"><u>Home</u></a></p>

                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>
                    
                </body>

                </html>
            

ps_EPWeb.html


                <!--Engineering Portfolio Website - ps_EPWeb.html-->

                <!DOCTYPE html>
                <html>



                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM Website Development</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">

                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html" class="active">SOFTWARE</a> 
                            <a href="certifications.html">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav>
                        </div>
                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="software-nav">
                        <a href="ps_NPMAT.html">Port-Matrix Automation</a>
                        <a href="ps_EDAF.html">Data Acquisition Framework</a>
                        <a href="ps_EPWeb.html" class="active">Engineering Portfolio Website</a>
                    </nav>
                    


                    <!--**************ENGINEERING PORTFOLIO WEBSITE**************-->
                    <br><h1>Engineering Portfolio Website</h1><br>

                    <p><b>Project Information</b> The Engineering Portfolio Website was developed using the<br>
                    Hyper-Text Mark-Up Language – HTML, the Cascading StyleSheet Language – CSS,<br>
                    & the programming language – JavaScript. Responsive layouts, navigation systems,<br>
                    interactive cards, modal contact elements, & section-specific styling were designed<br>
                    and implemented to improve the usability and visual consistency across the site.<br>
                    Integrated project documentation, source-code references, technical screenshots,<br>
                    certificates, GitHub links, & downloadable resources to create a centralized platform<br>
                    for presenting engineering accomplishments in a unqiue and professional manner.
                    </p>

                    

                    <!--*********************SOURCE CODE*********************-->
                    
                    <!--*****styles.css*****-->
                    <details>
                        <summary>styles.css</summary>
                        <p>
                            <pre><code>
                                <!--*****Source Code - styles.css*****-->                 
                            </code></pre>
                        
                            </p>
                    </details>


                    <!--*****index.html*****-->

                    <!--*****details-optum.html*****-->

                    <!--*****details-cisco.html*****-->

                    <!--*****projects_software.html*****-->

                    <!--*****ps_NPMAT.html*****-->

                    <!--*****ps_EDAF.html*****-->   

                    <!--*****ps_EPWeb.html*****-->
                        
                    <!--*****certifications.html*****-->
                        
                    <!--*****details-utsa.html*****-->

                    <!--*****details-pcep.html*****-->
                        
                    <!--*****details-psu.html*****-->
                        
                    <!--*****details-ucla.html*****-->
                        
                    <!--*****aboutME.html*****-->

                    <br><br>



                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">
                            
                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">

                            <p><a href="projects_software.html"><u>Return to Software Projects</u></a></p>
                            
                            <p><a href="index.html"><u>Home</u></a></p>

                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>
                    
                </body>
                
                </html>
            

certifications.html


                <!--Engineering Portfolio Website - certifications.html-->

                <!DOCTYPE html>
                <html>
                


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM Certifications</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">

                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html" class="active">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav>
                        </div>

                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="certs-nav">
                        <a href="details-utsa.html">UTSA</a>
                        <a href="details-pcep.html">Python Institue</a>
                        <a href="details-psu.html">Penn State</a>
                        <a href="details-ucla.html">UCLA</a>
                    </nav>




                    <!--*************CERTIFICATIONS - LANDING PAGE*************-->
                    <br>
                    <h1>CERTIFICATIONS</h1>
                    <br>


                    
                    <!--*****UTSA*****-->
                    <section>
                    
                        <div class="certification">
                            
                            <div class="certification-image">

                                <a href="details-utsa.html">
                                <img src="Images/Certificates/cpe-diploma.jpg" alt="CPE Degree">
                                </a>

                            </div>

                            <div class="certification-info">
                                <p>
                                    <h2><b>Degree</b>
                                    <br>Bachelor of Science - Computer Engineering<br></h2>
                                    <b>Institution:</b> Uinversity of Texas - San Antonio<br>
                                    <b>Graduation Date:</b> 12/10/2021<br>
                                    <a href="details-utsa.html" class="certs-link"><b>View Degree Transcripts</b></a>
                                </p>
                            </div>

                        </div>
                        
                    </section>

                    <br>
                    
                    <!--*****PYTHON INSTITUTE*****-->
                    <section>
                        
                        <div class="certification">
                            
                            <div class="certification-image">

                                <a href="details-pcep.html">
                                <img src="Images/Certificates/pcep-cert2.png" alt="PCEP Certificate">
                                </a>

                            </div>
                            
                            <div class="certification-info">
                                <p>
                                    <h2><b>Certification</b>
                                    <br>PCEP - Certified Entry-Level Python Programmer<br></h2>
                                    <b>Institution:</b> Python Institute<br>
                                    <b>Completion Date:</b> 10/05/2026<br>
                                    <a href="details-pcep.html" class="certs-link"><b>View Certification Details</b></a>
                                </p>
                            </div>

                        </div>

                    </section>

                    <br>

                    <!--*****PENN STATE*****-->
                    <section>
                        
                        <div class="certification">
                            
                            <div class="certification-image">

                                <a href="details-psu.html">
                                <img src="Images/Certificates/penn-state.png" alt="Penn State Certificate">
                                </a>

                            </div>

                            <div class="certification-info">
                                <p>
                                    <h2><b>Certification - In Progress</b>
                                    <br>Process Controls and Instrumentation<br></h2>
                                    <b>Institution:</b> Pennsylvania State Uinversity<br>
                                    <b>Start Date:</b> 9/15/26 <b>Completion Date:</b> 3/12/27<br>
                                    <a href="details-psu.html" class="certs-link"><b>View Certification Details</b></a>
                                </p>
                            </div>
                            
                        </div>
                    
                    </section>
                    
                    <br>

                    <!--*****UCLA*****-->
                    <section>
                        
                        <div class="certification">
                            
                            <div class="certification-image">
                                
                                <a href="details-ucla.html">
                                <img src="Images/Certificates/ucla.png" alt="PCEP Certificate">
                                </a>
                            
                            </div>

                            <div class="certification-info">
                                <p>
                                    <h2><b>Certification - In Progress</b>
                                    <br>Software Development<br></h2>
                                    <b>Institution:</b> Uinversity of California - Los Angeles<br>
                                    <b>Start Date:</b> 9/21/26 <b>Completion Date:</b> 6/13/27<br>
                                    <a href="details-ucla.html" class="certs-link"><b>View Certification Details</b></a>
                                </p>
                            </div>
                            
                        </div>
                        
                    </section>

                    <br>
                    <br>
                    <br>
                    


                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">

                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>
                    


                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>
                    
                </body>

                </html>
            

details-utsa.html


                <!--Engineering Portfolio Website - details-utsa.html-->

                <!DOCTYPE html>
                <html>
                    


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM UTSA</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                        
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html" class="active">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav> 
                        </div>

                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="certs-nav">
                        <a href="details-utsa.html" class="active">UTSA</a>
                        <a href="details-pcep.html">Python Institue</a>
                        <a href="details-psu.html">Penn State</a>
                        <a href="details-ucla.html">UCLA</a>
                    </nav>




                    <!--*************COMPUTER ENGINEERING DEGREE*************-->
                    <br>
                    <img src="Images/Certificates/utsa-logo.png" alt="UTSA Logo" class="education-logo">
                    <br>
                    <h2>UTSA - Bachelor of Science Degree - Computer Engineering</h2>
                    <br>



                    <!--*****************ALAMO COLLEGES TABLE*****************-->
                    <section class="grades-section">

                    <table class="grades-table">

                        <!--*****TABLE HEADER*****-->
                        <thead>
                            <tr>
                                <th>Alamo Colleges - Transferred Credit Courses</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>

                        <!--*****TABLE BODY*****-->
                        <tbody>

                            <!--*****TABLE ROW 1*****-->
                            <tr>
                                <td>2011 - FALL</td>
                                <td>Introduction to Computing</td>
                                <td>A</td>
                            </tr>

                            <!--*****TABLE ROW 2*****-->
                            <!--*****TABLE ROW 3*****-->
                            <!--*****TABLE ROW 4*****-->
                            <!--*****TABLE ROW 5*****-->
                            <!--*****TABLE ROW 6*****-->
                            <!--*****TABLE ROW 7*****-->
                            <!--*****TABLE ROW 8*****-->
                            <!--*****TABLE ROW 9*****-->
                            <!--*****TABLE ROW 10*****-->
                            <!--*****TABLE ROW 11*****-->
                            <!--*****TABLE ROW 12*****-->
                            <!--*****TABLE ROW 13*****-->
                            <!--*****TABLE ROW 14*****-->
                            <!--*****TABLE ROW 15*****-->
                            <!--*****TABLE ROW 16*****-->
                            <!--*****TABLE ROW 17*****-->
                            <!--*****TABLE ROW 18*****-->
                            <!--*****TABLE ROW 19*****-->

                        </tbody>

                    </table>
                    <br>
                    <br>
                    <br>
                    

                    <!--**********************UTSA TABLE**********************-->
                    <table class="grades-table">

                        <!--*****TABLE HEADER*****-->
                        <thead>
                            <tr>
                                <th>UTSA - Degree Courses</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>

                        <!--*****TABLE BODY*****-->
                        <tbody>

                            <!--*****TABLE ROW 1*****-->
                            <tr>
                                <td>2018 - FALL</td>
                                <td>Introduction to Literature</td>
                                <td>A</td>
                            </tr>

                            <!--*****TABLE ROW 2*****-->
                            <!--*****TABLE ROW 3*****-->
                            <!--*****TABLE ROW 4*****-->
                            <!--*****TABLE ROW 5*****-->
                            <!--*****TABLE ROW 6*****-->
                            <!--*****TABLE ROW 7*****-->
                            <!--*****TABLE ROW 8*****-->
                            <!--*****TABLE ROW 9*****-->
                            <!--*****TABLE ROW 10*****-->
                            <!--*****TABLE ROW 11*****-->
                            <!--*****TABLE ROW 12*****-->
                            <!--*****TABLE ROW 13*****-->
                            <!--*****TABLE ROW 14*****-->
                            <!--*****TABLE ROW 15*****-->
                            <!--*****TABLE ROW 16*****-->
                            <!--*****TABLE ROW 17*****-->
                            <!--*****TABLE ROW 18*****-->
                            <!--*****TABLE ROW 19*****-->
                            <!--*****TABLE ROW 20*****-->
                            <!--*****TABLE ROW 21*****-->
                            <!--*****TABLE ROW 22*****-->
                            <!--*****TABLE ROW 23*****-->
                            <!--*****TABLE ROW 24*****-->
                            <!--*****TABLE ROW 25*****-->
                            <!--*****TABLE ROW 26*****-->
                            <!--*****TABLE ROW 27*****-->
                            <!--*****TABLE ROW 28*****-->
                            <!--*****TABLE ROW 29*****-->
                            <!--*****TABLE ROW 30*****-->
                            <!--*****TABLE ROW 31*****-->
                            <!--*****TABLE ROW 32*****-->                          
                            

                        </tbody>  

                    </table>

                    </section>


                    
                    <!--*****DIPLOMA IMAGE*****-->
                    <img src="Images/Certificates/cpe-diploma.jpg" alt="UTSA Certificate" class="certificate-display">




                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">
                            
                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="certifications.html"><u>Return to Certifications</u></a></p>
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>

                </body>

                </html>
            

details-pcep.html


                <!--Engineering Portfolio Website - details-pcep.html-->

                <!DOCTYPE html>
                <html>
                


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM Python Institute</title>

                    <link rel="stylesheet" href="styles.css">
                </head>


                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                    
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html" class="active">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav> 
                        </div>

                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="certs-nav">
                        <a href="details-utsa.html">UTSA</a>
                        <a href="details-pcep.html" class="active">Python Institute</a>
                        <a href="details-psu.html">Penn State</a>
                        <a href="details-ucla.html">UCLA</a>
                    </nav>




                    <!--*************PYTHON PROGRAMMING CERTIFICATION*************-->
                    <br>
                    <img src="Images/Certificates/python-logo.png" alt="Python Institute" class="education-logo">
                    <br>
                    <h2>Python Institute - Certified Entry-Level Python Programmer</h2>
                    <br>



                    <!--*****************PYTHON ESSENTIALS I TABLE*****************-->
                    <section class="cert-table-section">

                    <table class="cert-table">

                        <!--*****TABLE HEADER*****-->
                        <thead>
                            <tr>
                                <th>Python Essentials I</th>
                                <th></th>
                            </tr>
                        </thead>

                        <!--*****TABLE BODY*****-->
                        <tbody>

                            <!--*****TABLE ROW 1*****-->
                            <tr>
                                <td>Module 1</td>
                                <td>Python Introduction</td>
                            </tr>

                            <!--*****TABLE ROW 2*****-->
                            <!--*****TABLE ROW 3*****-->
                            <!--*****TABLE ROW 4*****-->
                            <!--*****TABLE ROW 5*****-->
                            <!--*****TABLE ROW 6*****-->
                            <!--*****TABLE ROW 7*****-->
                            <!--*****TABLE ROW 8*****-->
                            <!--*****TABLE ROW 9*****-->
                            <!--*****TABLE ROW 10*****-->
                            <!--*****TABLE ROW 11*****-->
                            <!--*****TABLE ROW 12*****-->
                            <!--*****TABLE ROW 13*****-->
                            <!--*****TABLE ROW 14*****-->
                            <!--*****TABLE ROW 15*****-->
                            <!--*****TABLE ROW 16*****-->
                            <!--*****TABLE ROW 17*****-->
                            <!--*****TABLE ROW 18*****-->
                            <!--*****TABLE ROW 19*****-->
                            <!--*****TABLE ROW 20*****-->
                            <!--*****TABLE ROW 21*****-->
                            <!--*****TABLE ROW 22*****-->
                            <!--*****TABLE ROW 23*****-->
                            <!--*****TABLE ROW 24*****-->
                            
                        </tbody>

                    </table>

                    </section>
                    <br>
                    <br>



                    <!--*****CERTIFICATE IMAGE*****-->
                    <img src="Images/Certificates/pcep-cert1.png" alt="PCEP Certificate" class="certificate-display">



                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">
                            
                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="certifications.html"><u>Return to Certifications</u></a></p>
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>

                </body>

                </html>
            

details-psu.html


                <!--Engineering Portfolio Website - details-psu.html-->

                <!DOCTYPE html>
                <html>
                


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM Penn State</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                        
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html" class="active">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav> 
                        </div>

                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="certs-nav">
                        <a href="details-utsa.html">UTSA</a>
                        <a href="details-pcep.html">Python Institue</a>
                        <a href="details-psu.html" class="active">Penn State</a>
                        <a href="details-ucla.html">UCLA</a>
                    </nav>




                    <!--*********CONTROLS & INSTRUMENTATION CERTIFICATE*********-->
                    <br>
                    <img src="Images/Certificates/penn-state-logo.png" alt="Penn State Logo" class="education-logo">
                    <br>
                    <h2>Penn State - Process Controls & Instrumentation Certification</h2>
                    <br>



                    <section class="cert-table-section">

                        <!--*****TABLE 1*****-->
                        <table class="cert-table">

                            <!--*****TABLE 1 HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Sensors and Symbology</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>

                            <!--*****TABLE 1 - ROW 1*****-->
                            <tr>
                                <td></td>
                                <td>Introduction to Instrumentation and Controls</td>
                            </tr>

                            <!--*****TABLE 1 - ROW 2*****-->
                            <!--*****TABLE 1 - ROW 3*****-->
                            <!--*****TABLE 1 - ROW 4*****-->
                            <!--*****TABLE 1 - ROW 5*****-->
                            <!--*****TABLE 1 - ROW 6*****-->

                            </tbody>

                        </table>

                        <!--*****TABLE 2*****-->
                        <table class="cert-table">

                            <!--*****TABLE 2 HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Control Functions</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>

                            <!--*****TABLE 2 - ROW 1*****-->
                            <tr>
                                <td></td>
                                <td>Control Loops</td>
                            </tr>

                            <!--*****TABLE 2 - ROW 2*****-->
                            <!--*****TABLE 2 - ROW 3*****-->
                            <!--*****TABLE 2 - ROW 4*****-->
                            <!--*****TABLE 2 - ROW 5*****-->

                            </tbody>

                        </table>

                        <!--*****TABLE 3*****-->
                        <table class="cert-table">

                            <!--*****TABLE 3 HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Installation and Engineering Functions</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>

                            <!--*****TABLE 3 - ROW 1*****-->
                            <tr>
                                <td></td>
                                <td>Engineering Design and Documentation - Part 1</td>
                            </tr>

                            <!--*****TABLE 3 - ROW 2*****-->
                            <!--*****TABLE 3 - ROW 3*****-->
                            <!--*****TABLE 3 - ROW 4*****-->
                            <!--*****TABLE 3 - ROW 5*****-->

                            </tbody>

                        </table>

                    </section>




                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">
                            
                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>

                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="certifications.html"><u>Return to Certifications</u></a></p>
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>

                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>




                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>

                </body>

                </html>
            

details-ucla.html


                <!--Engineering Portfolio Website - details-ucla.html-->

                <!DOCTYPE html>
                <html>
                


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM UCLA</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">
                    
                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html" class="active">CERTIFICATIONS</a>
                            <a href="aboutME.html">ABOUT</a>
                            </nav> 
                        </div>

                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="certs-nav">
                        <a href="details-utsa.html">UTSA</a>
                        <a href="details-pcep.html">Python Institue</a>
                        <a href="details-psu.html">Penn State</a>
                        <a href="details-ucla.html" class="active">UCLA</a>
                    </nav>




                    <!--************SOFTWARE DEVELOPMENT CERTIFICATE************-->
                    <br>
                    <img src="Images/Certificates/ucla-logo.png" alt="UCLA Logo" class="education-logo">
                    <br>
                    <h2>UCLA - Software Development Certification</h2>
                    <br>



                    <section class="cert-table-section">

                        <!--*****TABLE 1*****-->
                        <table class="cert-table">

                            <!--*****TABLE 1 HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Python Programming I</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>

                            <!--*****TABLE 1 - ROW 1*****-->
                            <tr>
                                <td></td>
                                <td>Python Basics</td>
                            </tr>

                            <!--*****TABLE 1 - ROW 2*****-->
                            <!--*****TABLE 1 - ROW 3*****-->
                            <!--*****TABLE 1 - ROW 4*****-->
                            <!--*****TABLE 1 - ROW 5*****-->
                            <!--*****TABLE 1 - ROW 6*****-->
                            <!--*****TABLE 1 - ROW 7*****-->
                            <!--*****TABLE 1 - ROW 8*****-->
                            <!--*****TABLE 1 - ROW 9*****-->

                            </tbody>

                        </table>

                        <!--*****TABLE 2*****-->
                        <table class="cert-table">

                            <!--*****TABLE 2 HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Data Structures and Algorithms</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>

                            <!--*****TABLE 2 - ROW 1*****-->
                            <tr>
                                <td></td>
                                <td>Arrays and Linked Lists</td>
                            </tr>

                            <!--*****TABLE 2 - ROW 2*****-->
                            <!--*****TABLE 2 - ROW 3*****-->
                            <!--*****TABLE 2 - ROW 4*****-->
                            <!--*****TABLE 2 - ROW 5*****-->
                            <!--*****TABLE 2 - ROW 6*****-->
                            <!--*****TABLE 2 - ROW 7*****-->

                            </tbody>

                        </table>

                        <!--*****TABLE 3*****-->
                        <table class="cert-table">

                            <!--*****TABLE 3 HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Python Programming II - Exploratory Statistics</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>

                            <!--*****TABLE 3 - ROW 1*****-->
                            <tr>
                                <td></td>
                                <td>Probability and Statistical Concepts</td>
                            </tr>

                            <!--*****TABLE 3 - ROW 2*****-->
                            <!--*****TABLE 3 - ROW 3*****-->
                            <!--*****TABLE 3 - ROW 4*****-->          

                            </tbody>

                        </table>

                        <!--*****TABLE 4*****-->
                        <table class="cert-table">

                            <!--*****TABLE 4 HEADER*****-->
                            <thead>
                                <tr>
                                    <th>Introduction to SQL</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>

                            <!--*****TABLE 4 - ROW 1*****-->
                            <tr>
                                <td></td>
                                <td>SQL Syntax</td>
                            </tr>

                            <!--*****TABLE 4 - ROW 2*****-->
                            <!--*****TABLE 4 - ROW 3*****-->
                            <!--*****TABLE 4 - ROW 4*****-->
                            <!--*****TABLE 4 - ROW 5*****-->
                            <!--*****TABLE 4 - ROW 6*****-->
                            <!--*****TABLE 4 - ROW 7*****-->
                            <!--*****TABLE 4 - ROW 8*****-->
                            <!--*****TABLE 4 - ROW 9*****-->
                            <!--*****TABLE 4 - ROW 10*****-->
                            
                            </tbody>

                        </table>

                    </section>




                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">
                            
                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="certifications.html"><u>Return to Certifications</u></a></p>
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>




                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>

                </body>

                </html>
            

aboutME.html


                <!--Engineering Portfolio Website - aboutME.html-->

                <!DOCTYPE html>
                <html>
                


                <!--******************HTML FILE HEADER**********************-->
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>BM About-ME/Info</title>

                    <link rel="stylesheet" href="styles.css">
                </head>



                <body>
                    <!--***************TOP BANNER/HEADER SECTION***************-->
                    <header class="top-banner">

                        <!--*****HEADER-LEFT/LOGO*****-->
                        <div class="header-left">
                            <a href="index.html">
                            <img src="Images/Profile/bm-logo.png" alt="BM Logo" class="bm-logo">
                            </a>
                        </div>

                        <!--*****HEADER-RIGHT/NAVIGATION BAR*****-->
                        <div class="header-right">
                            <nav class="navbar">
                            <a href="index.html">HOME</a>
                            <a href="projects_software.html">SOFTWARE</a> 
                            <a href="certifications.html">CERTIFICATIONS</a>
                            <a href="aboutME.html" class="active">ABOUT</a>
                            </nav>
                        </div>

                    </header>



                    <!--*****SUB-NAVIGATION BAR*****-->
                    <nav class="second-nav">
                        <button class="contact-button" id="contactButton">
                            <b>Contact Information</b>
                        </button>  
                    </nav>



                    <!--*****CONTACT INFO BUTTON*****-->
                    <div class="contact-modal" id="contactModal">
                        <div class="contact-box">
                            <button class="contact-close" id="contactClose">
                                ×
                            </button>

                            <h2>Contact Information</h2>

                            <p>
                                <b>Phone:</b> (210) 291-2638
                            </p>

                            <p>
                                <b>Email:</b> BryanEmc2@gmail.com
                            </p>

                            <p>
                                <b>GitHub:</b>
                                <a href="https://github.com/BM-CPE" target="_blank">
                                    GitHub.com/BM-CPE
                                </a>
                            </p>
                        </div>
                    </div>




                    <!--********************ABOUT ME SECTION********************-->


                    <!--*****FEATURED IMAGES*****-->
                    <section class="about-hero">

                        <div class="about-panel about-panel-left"></div>

                        <div class="about-panel about-panel-center"></div>

                        <div class="about-panel about-panel-right"></div>

                    </section>

                    <hr>

                    <section>
                        <h2>About Me</h2> For this section, I designed and developed the timeline below, which highlights 
                        the most significant moments that have helped shape my engineering career.
                    </section>

                    <br><hr>



                    <!--********************TIMELINE SECTION********************-->
                    <section class="timeline-section">
                        
                        <h2>BM Timeline</h2>

                        <div class="timeline">

                            <!--*****TIMELINE ITEM 1 - LEFT SIDE*****-->
                            <div class="timeline-item left">
                                <div class="timeline-content">
                                    
                                    <h3>Introduction to Computers</h3>
                                    <p class="timeline-date">1997</p>
                                    <img src="Images/About/miles.png" alt="Achievement">
                                    <p>
                                    At the age of 4, during my first year of school, I was introduced to computers. 
                                    I recall playing educational computer games and even using MS Paint to design
                                    a robot by using basic shapes. My introduction to computers at such an early age,
                                    was a fundamental factor towards the development of my computer engineering career.
                                    </p>
                                </div>
                            </div>

                            <!--*****TIMELINE ITEM 2 - RIGHT SIDE*****-->
                            <div class="timeline-item right">
                                <div class="timeline-content">
                                    
                                    <h3>Introduction to Time & Multplication</h3>
                                    <p class="timeline-date">1999</p>
                                    <img src="Images/About/multiplication.png" alt="Achievement">
                                    <p>
                                    At the age of 6, I was introduced to the concepts of
                                    time and multiplaction. I believe this was one of the most significant key moments,
                                    that not only helped me succeed in school, but defined and originated my 
                                    mathematical career, which eventually influenced my decision to become an engineer. 
                                    </p>
                                </div>
                            </div>

                            <!--*****TIMELINE ITEM 3 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 4 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 5 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 6 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 7 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 8 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 9 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 10 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 11 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 12 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 13 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 14 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 15 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 16 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 17 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 18 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 19 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 20 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 21 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 22 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 23 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 24 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 25 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 26 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 27 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 28 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 29 - LEFT SIDE*****-->
                            <!--*****TIMELINE ITEM 30 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 31 - LEFT SIDE*****-->            
                            <!--*****TIMELINE ITEM 32 - RIGHT SIDE*****-->
                            <!--*****TIMELINE ITEM 33 - LEFT SIDE*****-->

                        </div>

                    </section>


                    
                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO BUTTON*****-->
                    <script>
                        const contactButton = document.getElementById("contactButton");
                        const contactModal = document.getElementById("contactModal");
                        const contactClose = document.getElementById("contactClose");

                        contactButton.addEventListener("click", function () {
                            contactModal.style.display = "flex";
                        });

                        contactClose.addEventListener("click", function () {
                            contactModal.style.display = "none";
                        });
                    </script>
                    <!--**********************************************************-->
                    
                    

                    <!--************************FOOTER****************************-->
                    <footer class="footer">

                        <!--*****FOOTER - LEFT*****-->
                        <div class="footer-left">
                            
                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="phoneButton">
                                    <img src="Images/Icons/phone-icon.png"
                                        alt="Phone"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="phonePopover">
                                    <b>Phone:</b> (210) 291-2638
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="emailButton">
                                    <img src="Images/Icons/email-icon.png"
                                        alt="Email"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="emailPopover">
                                    <b>Email:</b> BryanEmc2@gmail.com
                                </div>
                            </div>


                            <div class="footer-contact-item">

                                <button class="footer-icon-button" id="githubButton">
                                    <img src="Images/Icons/github-icon.jpg"
                                        alt="GitHub"
                                        class="footer-icon">
                                </button>

                                <div class="contact-popover" id="githubPopover">
                                    <b>Github:</b>
                                    <a href="https://github.com/BM-CPE" target="_blank">
                                        GitHub.com/BM-CPE
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!--*****FOOTER - CENTER*****-->
                        <div class="footer-center">
                            <p><a href="index.html"><u>Home</u></a></p><br>
                        </div>


                        <!--*****FOOTER - RIGHT*****-->
                        <div class="footer-right">

                            <p>Engineering Portfolio Website</p>

                            <p><strong>© 2026 Bryan Martinez</strong></p>

                        </div>

                    </footer>



                    <!--*****JAVASCRIPT IMPLEMENTATION - CONTACT INFO ICONS*****-->
                    <script>
                        const phoneButton = document.getElementById("phoneButton");
                        const phonePopover = document.getElementById("phonePopover");

                        const emailButton = document.getElementById("emailButton");
                        const emailPopover = document.getElementById("emailPopover");

                        const githubButton = document.getElementById("githubButton");
                        const githubPopover = document.getElementById("githubPopover");

                        phoneButton.addEventListener("click", function () {
                            phonePopover.style.display =
                                phonePopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        emailButton.addEventListener("click", function () {
                            emailPopover.style.display =
                                emailPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });

                        githubButton.addEventListener("click", function () {
                            githubPopover.style.display =
                                githubPopover.style.display === "block"
                                    ? "none"
                                    : "block";
                        });
                    </script>

                </body>

                </html>
            

styles.css


                /* Engineering Portfolio Website - styles.css */




                /* ==================== GLOBAL SETTINGS ==================== */

                body {
                    background-color: #d2e6f8;
                    font-family: "Segoe UI", Arial, sans-serif;
                    margin: 0;
                    text-align: center;
                    color: #333;
                }

                img {
                    width: 100px;
                    border-radius: 15px;
                }

                /* ===== HEADINGS ===== */

                h1 {
                    font-size: 34px;
                    color: #1e3a5f;
                    margin-bottom: 5px;
                }


                h2 {
                    color: #1e3a5f;
                    margin-top: 40px;
                }

                h3 {
                    color: #4f81bd;
                    text-decoration: underline;
                }

                h4 {
                    color: #1e3a5f;
                    text-decoration: underline;
                }

                hr {
                    border: none;
                    height: 2px;
                    background-color: #4f81bd;
                    width: 85%;
                    margin: 30px auto;
                }


                /* =============== GLOBAL BANNER/HEADER SETTINGS =============== */
                .top-banner {
                    background-color: white;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 7px 20px;

                }

                .header-left{
                    width: 330px;
                }
                .header-right {
                    width: 330px;
                }

                .header-center {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    text-align: center;
                }

                .subtitle {
                    margin-top: 0;
                    margin-bottom: 0;
                    font-size: 18px;
                    color: #4f81bd;
                    font-weight: 300;
                }

                .bm-logo {
                    width: 60px;
                    border-radius: 50%;
                    margin-left: -150px;
                }

                .profile-pic {
                    width: 100px;
                    border-radius: 50%;
                }

                .hero {
                    background-color: white;
                    width: 60%;
                    margin: 30px auto;
                    padding: 20px;

                    border-radius: 15px;
                    box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
                }
                .hero h1 {
                    font-size: 36px;
                    margin-bottom: 5px;
                    color: navy;
                }

                /* ================ GLOBAL NAVIGATION BAR SETTINGS ================ */

                .navbar {
                    display: flex;
                    gap: 7px;
                }

                .navbar a {
                    text-decoration: none;
                    color: #1e3a5f;
                    font-weight: 600;
                    border-top: 2px solid transparent;

                    transition: border-color 0.3s ease,
                    color 0.3s ease;
                }

                .navbar a:hover {
                    color: #4f81bd;
                    border-top-color: #4f81bd;
                }

                .navbar a.active {
                    border-top: 2px solid #4f81bd;
                }

                /* ================= GLOBAL FOOTER SETTINGS ================== */

                .footer {
                    background-color: #1e3a5f;
                    color: white;
                    display: flex;
                    align-items: center;
                    padding: 10px 30px;
                    justify-content: space-between; 
                }

                .footer-left{
                    width: 300px;
                }
                .footer-right {
                    width: 300px;
                }

                .footer-center {
                    text-align: center;
                }

                .footer p {
                    margin: 8px 0;
                }

                .footer a {
                    color: white;
                    text-decoration: none;
                }

                .footer a:hover {
                    color: #c8e4ff;
                    text-decoration: none;
                }

                .footer-left img {
                    width: 35px;
                    border-radius: 50%;
                    border: 2px solid white;
                }

                .footer-left a {
                    padding: 5px;
                }

                .footer-left img:hover {
                border: 2px solid #c8e4ff;

                }

                .footer-center img {
                    width: 35px;
                    border-radius: 50%;
                    border: 2px solid white;
                }

                /* ======== ICONS ======== */

                .footer-contact-item {
                    position: relative;
                    display: inline-block;
                }

                .footer-icon-button {
                    border: none;
                    background: none;
                    padding: 0;

                    cursor: pointer;
                }

                .contact-popover {
                    display: none;
                    position: absolute;
                    bottom: 45px;
                    left: 50%;
                    transform: translateX(-50%);
                    background-color: white;
                    color: #1e3a5f;
                    padding: 10px 16px;
                    border-radius: 8px;
                    white-space: nowrap;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                    z-index: 100;
                }

                .contact-popover a {
                    color: #1e3a5f;
                }

                .contact-popover a:hover {
                    color: #021022;
                }

                /* ======== POPOVER ARROW ======== */

                .contact-popover::after {
                    content: "";
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                    border-width: 8px;
                    border-style: solid;
                    border-color:
                        white
                        transparent
                        transparent
                        transparent;
                }




                /* ======================= HOMEPAGE ======================= */

                /* ======== SUB-NAVIGATION BAR ======== */

                .second-nav {
                    background-color: #1e3a5f;
                    display: flex;
                    justify-content: right;
                    padding: 12px 20px;
                }

                .second-nav a {
                    color: white;
                    text-decoration: none;
                    font-weight: 500;
                    border-top: 2px solid transparent;
                    transition: border-color 0.3s ease,
                    color 0.3s ease;
                    margin-right: 10px;
                }

                .second-nav a:hover {
                    color: #c8e4ff;
                    border-top-color: #c8e4ff;
                }

                .second-nav a.active {
                    border-top: 2px solid white;
                }

                .contact-info a {
                    border: 2px solid white;
                    padding: 1px 1px;
                }

                .contact-info a:hover {
                    color: #c8e4ff;
                    border: 2px solid #c8e4ff;
                }

                /* ======== CONTACT-INFO BUTTON ======== */

                .contact-button {
                    color: #1e3a5f;
                    text-decoration: none;
                    font-weight: 500;
                    transition: border-color 0.3s ease,
                    color 0.3s ease;
                    margin-right: 10px;
                }

                .contact-button {
                    border: 2px solid black;
                    padding: 1px 1px;
                }

                .contact-button:hover {
                    color: #4f81bd;
                    border: 2px solid #c8e4ff;
                }

                /* ======== BUTTON TEXT-BOX ======== */

                .contact-modal {
                    display: none;
                    position: fixed;
                    inset: 0;
                    background-color: rgba(0, 0, 0, 0.45);
                    justify-content: center;
                    align-items: center;
                    z-index: 1000;
                }

                .contact-box {
                    position: relative;
                    width: 350px;
                    padding: 35px;
                    background-color: white;
                    border-radius: 12px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
                    text-align: center;
                }

                .contact-box h2 {
                    color: #1e3a5f;
                }

                .contact-box a {
                    color: #1e3a5f;
                    text-decoration: none;
                    transition: color 0.3s ease;
                }

                .contact-box a:hover {
                    color: #4f81bd;
                }

                .contact-close {
                    position: absolute;
                    top: 10px;
                    right: 15px;
                    border: none;
                    background: none;
                    font-size: 28px;
                    cursor: pointer;
                }

                /* ======== HOMEPAGE MAIN SECTION ======== */

                main {
                    margin: 0px;
                }

                .home-main {
                    min-height: calc(100vh - 100px);
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    background:
                        linear-gradient(
                            rgba(0, 0, 0, 0.30),
                            rgba(0, 0, 0, 0.30)
                        ),
                        url("Images/Homepage/nasa.png");
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }

                .home-hero {
                    display: flex;
                    align-items: center;
                    gap: 30px;
                }

                .home-profile-pic {
                    width: 130px;
                    border-radius: 50%;
                }

                .home-hero-text {
                    text-align: left;
                }

                .home-hero-text h1 {
                    margin: 0;
                    font-size: 48px;
                    color: white
                }

                .home-subtitle {
                    margin-top: 6px;
                    margin-bottom: 0;

                    font-size: 20px;
                    color: white;
                    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
                    letter-spacing: 2px;
                }

                /* ======== INTRO SECTION ======== */

                .intro-section {
                    padding: 60px 8%;
                }

                .intro-section h2 {
                    color: #1e3a5f;
                    font-size: 32px;
                    margin-bottom: 0px;
                    margin-top: 0px;
                }

                .intro-content {
                    display: grid;
                    grid-template-columns: 3fr 4fr;
                    gap: 100px;
                    align-items: center;
                }

                .intro-text {
                    font-size: 14px;
                    line-height: 1.7;
                }

                .intro-image img {
                    width: 100%;
                    height: auto;
                    display: block;

                    border-radius: 0px;
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
                }

                /* ======== EXPERIENCE SECTION ======== */

                .experience-section {
                    background-color: white;
                    padding: 60px 8%;
                }

                .experience-section img {
                    width: 50%;
                }

                .experience-section a {
                    text-decoration: none;
                    color: #4f81bd;
                }

                .experience-section a:hover {
                    color: #88c2f4;
                }

                .experience-section h2 {
                    color: #1e3a5f;
                    font-size: 32px;
                }

                .experience-item {
                    display: grid;
                    grid-template-columns: 1fr 2fr;
                    gap: 50px;
                    align-items: center;
                    margin-bottom: 40px;
                }

                .experience-card {
                    min-height: 160px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 30px 20px;
                    background-color: #fafafa;
                    border-radius: 12px;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                    transition: transform 0.3s ease,
                                box-shadow 0.3s ease;
                }

                .experience-card h3 {
                    color: #1e3a5f;
                    font-size: 26px;
                }

                .experience-info h3 {
                    color: #1e3a5f;
                    margin-bottom: 5px;
                    text-decoration: none;
                    text-underline-offset: 5px;
                }

                .experience-info p {
                    line-height: 1.7;
                }

                .experience-card:hover {
                    transform: translateY(-6px);
                    box-shadow: 0px 10px 22px rgba(0,0,0,0.15);
                }

                .details {
                    text-align: center;
                }

                .details ul {
                    display: inline-block;
                    text-align: left;
                }

                /* ======== HOMEPAGE - PROJECTS SECTION ======== */

                .engineering-projects {
                    padding: 60px 8% 105px;
                }

                .engineering-projects h2 {
                    color: #1e3a5f;
                    font-size: 32px;
                }

                .homepage-cards {
                    display: flex;
                    justify-content: center;
                    gap: 30px;
                }
                .home-card {
                    width: 350px;
                    text-align: center;
                    background-color: #fafafa;
                    padding: 30px;
                    border-radius: 15px;
                    box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
                    transition: transform 0.3s ease,
                                box-shadow 0.3s ease;
                }

                .home-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
                }
                .home-card a {
                    display: block;
                    text-decoration: none;
                    color: #1e3a5f;
                }

                .home-card a:hover {
                    color: #4f81bd;
                }

                .home-card h2 {
                    font-size: 20px;
                    margin: 10px 0 0 0;
                }
                .home-card:hover h2 {
                    color: #4f81bd;
                }

                .card-icon {
                    width: 130px;
                    height: 110px;
                    margin-bottom: 1px;
                    border-radius: 0;
                }

                /* ======== RESOURCE SECTION ======== */

                .resource-section {
                    background-color: white;
                    padding: 10px 0;
                }

                .resource-card {
                    width: 350px;
                    text-align: center;
                    margin: 0 auto 30px auto;
                    padding: 15px 30px;
                    background-color: #c8e4ff;
                    border-radius: 12px;
                    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
                    transition: transform 0.3s ease,
                                box-shadow 0.3s ease;
                }

                .resource-card:hover {
                    transform: translateY(-3px);
                    box-shadow: 0px 8px 18px rgba(0,0,0,0.15);
                }

                .resource-card:hover h3 {
                color: #4f81bd;
                }

                .resource-card a {
                    display: block;
                    text-decoration: none;
                    color: navy;
                    font-size: 22px;
                    font-weight: bold;
                }

                .resource-icon {
                    width: 60px;
                    height: auto;
                    margin-bottom: 10px;
                    border-radius: 0;
                }

                .resource-card h3 {
                    margin: 0;
                    font-size: 22px;
                    text-decoration: none;
                    color: #1e3a5f;
                }

                .icon-container {
                    height: 70px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }




                /* ======================== SOFTWARE PROJECTS PAGE ========================*/

                /* ======== SUB-NAVIGATION BAR ======== */

                .software-nav {
                    background-color: #1e3a5f;
                    display: flex;
                    justify-content: right;
                    padding: 12px 20px;
                    gap: 20px;
                }

                .software-nav a {
                    color: white;
                    text-decoration: none;
                    font-weight: 500;
                    border-top: 2px solid transparent;
                    transition: border-color 0.3s ease,
                    color 0.3s ease;
                    margin-right: 10px;
                }

                .software-nav a:hover {
                    color: #c8e4ff;
                    border-top-color: #c8e4ff;
                }
                .software-nav a.active {
                    border-top: 2px solid white;
                }

                /* ===== SOFTWARE PROJECTS CARDS ===== */

                details {
                    text-align: left;
                }

                summary {
                    font-size: 20px;
                    font-weight: bold;
                    cursor: pointer;
                    color: #1e3a5f;
                }

                .project-description {
                    text-align: left;
                    font-size: 18px;
                }

                details,
                .certification {
                    background-color: white;
                    padding: 20px;
                    margin: 20px auto;
                    border-radius: 12px;
                    box-shadow: 0px 3px 10px rgba(0,0,0,0.08);
                    width: 85%;
                }

                details:hover {
                    transform: translateY(-3px);
                    transition: 0.3s;
                }

                .project-card {
                    background-color: white;
                    width: 85%;
                    margin: 30px auto;
                    padding: 25px; 
                    border-radius: 15px;
                    box-shadow: 0px 4px 12px rgba(0,0,0,0.10);
                    text-align: left;
                    transition: transform 0.3s ease,
                                box-shadow 0.3s ease;
                }

                .project-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
                }
                .project-card a {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;  
                }

                .project-card:hover h2 {
                    color: #4f81bd;
                } 

                .project-card p {
                    font-size: 18px;
                    line-height: 1.7;
                }

                .project-info {
                    width: 70%;
                    text-align: left;
                }

                .project-image {
                    width: 60%;
                    text-align: center;
                }

                .project-image img {
                    width: 180px;
                    border-radius: 10px;
                }

                /*============ SOFTWARE PROJECTS - INPUT/OUTPUT ===========*/

                /* ======== INPUT ======== */

                .project-input-section {
                    padding: 60px 8%;
                }

                .project-input-section h2 {
                    color: #1e3a5f;
                    margin-bottom: 30px;
                }

                .project-input-content {
                    display: grid;
                    grid-template-columns: 1fr 2fr;

                    gap: 50px;
                    align-items: start;
                }

                .project-input-info {
                    text-align: left;
                    line-height: 1.7;
                }

                .project-input-image img {
                    width: 100%;
                    height: auto;

                    display: block;

                    border-radius: 10px;

                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
                }

                /* ======== OUTPUT ======== */

                .project-output-section {
                    padding: 60px 8%;
                }

                .project-output-section h2 {
                    color: #1e3a5f;
                    margin-bottom: 30px;
                }

                .project-output-content {
                    display: grid;
                    grid-template-columns: 1fr 2fr;

                    gap: 50px;
                    align-items: start;
                }

                .project-output-info {
                    text-align: left;
                    line-height: 1.7;
                }

                .project-output-image img {
                    width: 100%;
                    height: auto;

                    display: block;

                    border-radius: 10px;

                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
                }

                .matrix-display img{
                    width: 70%;
                    max-width: 1000px;
                    height: auto;

                    display: block;
                    margin: 30px auto;
                }




                /* ========================== CERTIFICATIONS PAGE ========================== */

                /* ======== SUB-NAVIGATION BAR ======== */
                .certs-nav {
                    background-color: #1e3a5f;
                    display: flex;
                    justify-content: right;
                    padding: 12px 20px;
                    gap: 18px;
                }

                .certs-nav a {
                    color: white;
                    text-decoration: none;
                    font-weight: 500;
                    border-top: 2px solid transparent;
                    transition: border-color 0.3s ease,
                    color 0.3s ease;
                    margin-right: 10px;
                }

                .certs-nav a:hover {
                    color: #c8e4ff;
                    border-top-color: #c8e4ff;
                }
                .certs-nav a.active {
                    border-top: 2px solid white;
                }

                /* ========================== CERTIFICATIONS SECTION ========================== */

                .certification {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .certification-info {
                    width: 60%;
                    text-align: left;
                }

                .certification-image {
                    width: 40%;
                    text-align: center;
                }

                .certification-image img {
                    width: 300px;
                    transition: all 0.3s ease;
                    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
                }

                .certification-image img:hover {
                    transform: translateY(-5px) scale(1.15);
                    box-shadow: 0px 8px 20px rgba(0,0,0,0.2);
                }

                .certs-link {
                    color: #4f81bd;
                    text-decoration: none;
                    transition: color 0.3s ease,
                                text-shadow 0.3s ease;
                }

                .certs-link:hover {
                    color: #88c2f4;
                }

                .education-logo {
                    width: 220px;
                    height: auto;
                }

                /* ======================== GRADES TABLE ======================== */

                .grades-section {
                    padding: 60px 8%;
                }

                .grades-section h2 {
                    color: #1e3a5f;
                    margin-bottom: 30px;
                }

                .grades-table {
                    width: 100%;
                    border-collapse: collapse;
                    background-color: white;
                }

                .grades-table th,
                .grades-table td {
                    padding: 14px 20px;
                    text-align: left;
                    border-bottom: 1px solid #dbeeff;
                }

                .grades-table th {
                    background-color: #1e3a5f;
                    color: white;
                }

                .grades-table tr:hover {
                    background-color: #f4f9ff;
                }

                .grades-table th:nth-child(1) {
                    width: 35%;
                }

                .grades-table th:nth-child(2) {
                    width: 45%;
                }

                .grades-table th:nth-child(3) {
                    width: 20%;
                }

                /* ===================== CERTIFICATIONS TABLE ===================== */

                .cert-table-section {
                    padding: 60px 8%;
                }

                .cert-table {
                    width: 100%;
                    border-collapse: collapse;
                    background-color: white;
                }

                .cert-table th,
                .cert-table td {
                    padding: 14px 20px;
                    text-align: left;
                    border-bottom: 1px solid #dbeeff;
                }

                .cert-table th {
                    background-color: #1e3a5f;
                    color: white;
                }

                .cert-table tr:hover {
                    background-color: #f4f9ff;
                }

                .cert-table th:nth-child(1) {
                    width: 40%;
                }

                .cert-table th:nth-child(2) {
                    width: 60%;
                }

                /* ======== CERTIFICATE DISPLAY ======== */

                .certificate-display {
                    width: 70%;
                    max-width: 1000px;
                    height: auto;

                    display: block;
                    margin: 30px auto;
                }




                /* ======================= ABOUT ME SECTION ======================= */

                .about-hero {
                    width: 100%;
                    min-height: 80vh;

                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                }

                .about-panel {
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }

                .about-panel-left {
                    background-image: url("Images/About/pic-telescope.jpg");
                }

                .about-panel-center {
                    background-image: url("Images/About/pic-rocket.jpg");
                }

                .about-panel-right {
                    background-image: url("Images/About/pic-swri.jpg");
                }

                /* ======== TIMELINE SECTION ======== */

                .timeline-section {
                    padding: 70px 8%;
                    background-color: white;
                }

                .timeline-section h2 {
                    text-align: center;
                    color: #1e3a5f;
                    font-size: 34px;
                    margin-bottom: 50px;
                }

                .timeline {
                    position: relative;
                    max-width: 1100px;
                    margin: 0 auto;
                }

                /* ======== VERTICAL CENTER LINE ======== */

                .timeline::after {
                    content: "";
                    position: absolute;
                    width: 3px;
                    background-color: #1e3a5f;
                    top: 0;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .timeline-item {
                    position: relative;
                    width: 50%;
                    padding: 20px 45px;
                    box-sizing: border-box;
                }

                .timeline-item.left {
                    left: 0;
                }

                .timeline-item.right {
                    left: 50%;
                }

                /* ======== TIMELINE DOTS ======== */

                .timeline-item::after {
                    content: "";
                    position: absolute;
                    top: 40px;
                    width: 16px;
                    height: 16px;
                    background-color: white;
                    border: 3px solid #1e3a5f;
                    border-radius: 50%;
                    z-index: 2;
                }

                .timeline-item.left::after {
                    right: -11px;
                }

                .timeline-item.right::after {
                    left: -11px;
                }

                /* ======== TIMELINE CARDS/CONTENT ======== */

                .timeline-content {
                    background-color: #fafafa;
                    padding: 25px;
                    border-radius: 12px;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.10);
                    transition:
                        transform 0.3s ease,
                        box-shadow 0.3s ease;
                }

                .timeline-content:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
                }

                /* ======== TIMELINE IMAGES/COLOR ======== */

                .timeline-content img {
                    width: 100%;
                    margin-top: 15px;
                    margin-bottom: 15px;
                    border-radius: 8px;
                }

                .timeline-content h3 {
                    color: #1e3a5f;
                    margin-top: 0;
                }

                .timeline-date {
                    color: #4f81bd;
                    font-weight: 600;
                }