<!DOCTYPE html>
<html>
<head>
    <%- include("../_includes/global_head.ejs") -%>
	<title>Portfolio - XZANSite</title>
	<link rel="stylesheet" href="/css/portfolio.css">
    <script src="/js/portfolio.js" defer></script>
</head>

<body class="body-dark">
	<%- include("../_includes/navbar.ejs") %>

    <main class="container" id="sec1-sec">
        <br>

        <section class="row row-stretch gy-3">
            <p style="text-align: justify; text-align-last: center;">
                <%= resume %>
            </p>

            <div class="col-xs-12 col-lg-6">
                <hr>
                <h3>Work Experience</h3>
                <div class="box">
                    <% for (let wE=0; wE < 2; wE++){ %>
                    <div class="box-xp">
                        <h5><%= workExperience[wE].title %></h5>
                        <p>
                            <span>
                                <a href="<%= workExperience[wE].companyLink %>" target="_blank"><%= workExperience[wE].company %></a>
                            </span>
                            <br>
                            <span><%= workExperience[wE].period %></span>
                        </p>

                        <ul>
                            <% workExperience[wE].bulletPoint.forEach( (bp) => { %>
                            <li><%- bp %></li>
                            <% }) %>
                        </ul>
                    </div>
                    <br>
                    <% } %>

                    <div class="modal-openner">
                        <button onclick="switch_popup('wE_id')" class="button-raw">Show more..!</button>
                    </div>

                    <div class="container box popup" id="wE_id">
                        <div class="button-wrapper">
                            <button onclick="switch_popup('wE_id')" class="button-raw">X</button>
                        </div>
                        <% for (let wE=0; wE < workExperience.length; wE++){ %>
                        <div class="box-xp">
                            <h5><%= workExperience[wE].title %></h5>
                            <p>
                                <span>
                                    <a href="<%= workExperience[wE].companyLink %>" target="_blank"><%= workExperience[wE].company %></a>
                                </span>
                                <br>
                                <span><%= workExperience[wE].period %></span>
                            </p>

                            <ul>
                                <% workExperience[wE].bulletPoint.forEach( (bp) => { %>
                                <li><%- bp %></li>
                                <% }) %>
                            </ul>
                        </div>
                        <br>
                        <% } %>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-lg-6">
                <hr>
                <h3>Education</h3>
                <div class="box">
                    <div class="box-xp">
                        <h5>Alexandria higher Institute of Engineering and Technology</h5>
                        <p>
                            <span>BA, Electronics & Communications Engineering</span>
                            <br>
                            <span>Sep, 2019 - Sep, 2024</span>
                        </p>
                    </div>
                    <br>

                    <% for (let eE=0; eE < 3; eE++){ %>
                    <div class="box-xp">
                        <h5><%= educationExperience[eE].place %></h5>
                        <p>
                            <span><%= educationExperience[eE].type %></span>
                        </p>

                        <ul>
                            <% educationExperience[eE].bulletPoint.forEach( (bp) => { %>
                            <li><%- bp %></li>
                            <% }) %>
                        </ul>
                    </div>
                    <br>
                    <% } %>

                    <div class="modal-openner">
                        <button onclick="switch_popup('eE_id')" class="button-raw">Show more..!</button>
                    </div>

                    <div class="container box popup" id="eE_id">
                        <div class="button-wrapper">
                            <button onclick="switch_popup('eE_id')" class="button-raw">X</button>
                        </div>
                        <% for (let eE=0; eE < educationExperience.length; eE++){ %>
                        <div class="box-xp">
                            <h5><%= educationExperience[eE].place %></h5>
                            <p>
                                <span><%= educationExperience[eE].type %></span>
                            </p>

                            <ul>
                                <% educationExperience[eE].bulletPoint.forEach( (bp) => { %>
                                <li><%- bp %></li>
                                <% }) %>
                            </ul>
                        </div>
                        <br>
                        <% } %>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-lg-6">
                <hr style="padding: 0.5px;">
                <h3>Volunteer</h3>
                <div class="box box-fullHieght">
                    <% for (let v=0; v < 2; v++){ %>
                    <div class="box-xp">
                        <h5><%= volunteer[v].position %></h5>
                        <p>
                            <span>
                                <a href="<%= volunteer[v].placeLink %>" target="_blank"><%= volunteer[v].place %></a>
                            </span>
                            <br>
                            <span><%= volunteer[v].period %></span>
                        </p>

                        <ul>
                            <% volunteer[v].bulletPoint.forEach( (bp) => { %>
                            <li><%- bp %></li>
                            <% }) %>
                        </ul>
                    </div>
                    <br>
                    <% } %>

                    <div class="modal-openner">
                        <button onclick="switch_popup('v_id')" class="button-raw">Show more..!</button>
                    </div>

                    <div class="container box popup" id="v_id">
                        <div class="button-wrapper">
                            <button onclick="switch_popup('v_id')" class="button-raw">X</button>
                        </div>
                        <% for (let v=0; v < volunteer.length; v++){ %>
                        <div class="box-xp">
                            <h5><%= volunteer[v].position %></h5>
                            <p>
                                <span>
                                    <a href="<%= volunteer[v].placeLink %>" target="_blank"><%= volunteer[v].place %></a>
                                </span>
                                <br>
                                <span><%= volunteer[v].period %></span>
                            </p>

                            <ul>
                                <% volunteer[v].bulletPoint.forEach( (bp) => { %>
                                <li><%- bp %></li>
                                <% }) %>
                            </ul>
                        </div>
                        <br>
                        <% } %>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-lg-6">
                <hr style="padding: 0.5px;">
                <h3>Tech Stack</h3>
                <div class="box box-fullHieght">
                    <div class="row">
                        <div class="col-6">
                            <h6 class="techStack-record-h">Languages</h6>
                        </div>
                        <div class="col-6 techStack-record-span">
                            <span><%= techStack.Languages %></span>
                        </div>
                        <hr class="techStack-hr">

                        <div class="col-6">
                            <h6 class="techStack-record-h">Frameworks</h6>
                        </div>
                        <div class="col-6 techStack-record-span">
                            <span><%= techStack.Frameworks %></span>
                        </div>
                        <hr class="techStack-hr">

                        <div class="col-6">
                            <h6 class="techStack-record-h">Databases</h6>
                        </div>
                        <div class="col-6 techStack-record-span">
                            <span><%= techStack.Databases %></span>
                        </div>
                        <hr class="techStack-hr">

                        <div class="col-6">
                            <h6 class="techStack-record-h">Tools</h6>
                        </div>
                        <div class="col-6 techStack-record-span">
                            <span><%= techStack.Tools %></span>
                        </div>
                        <hr class="techStack-hr">

                        <div class="col-6">
                            <h6 class="techStack-record-h">Platforms</h6>
                        </div>
                        <div class="col-6 techStack-record-span">
                            <span><%= techStack.Platforms %></span>
                        </div>
                        <hr class="techStack-hr">

                        <div class="col-6">
                            <h6 class="techStack-record-h">Others</h6>
                        </div>
                        <div class="col-6 techStack-record-span">
                            <span><%= techStack.Others %></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <br><br><br>

        <section>
            <h2 style="text-align: center;">Projects _</h2>

            <div class="row gx-3 gy-2 GH-wrapper" style="flex-direction: row-reverse;">
                <a href="https://github.com/XZANATOL" class="col-xs-12 col-md-6" target="_blank" title="GitHub Profile">
                    <img class="GHPP" src="https://avatars.githubusercontent.com/u/64689436" loading="lazy">
                    <p style="color: var(--main-links-color);">
                        GitHub Profile _
                    </p>
                </a>

                <div class="col-xs-12 col-md-6">
                    <ul class="GH-ul">
                        <li>
                            <span>Featured:</span>
                            <ul>
                                <li>
                                    <a href="https://github.com/XZANATOL/XZerver" target="_blank">XZerver</a>: Self-hosted Multi-purpose server for side projects management. <br><a href="https://github.com/XZANATOL/XZerver/blob/master/docs/DD%20-%20XZerver.md" target="_blank">Design Document</a>
                                </li>
                                <li>
                                    <a href="https://github.com/XZANATOL/DataChat" target="_blank">DataChat</a>: Self-Hosted chat app that groups features from Discord and WhatsApp for storing data in an organized manner. <br><a href="https://github.com/XZANATOL/DataChat#how-it-started" target="_blank">Design Document</a> / <a href="https://github.com/XZANATOL/DataChat#usage" target="_blank">Demo Video</a>
                                </li>
                            </ul>
                        </li>
                        
                        <li>
                            More projects can be found at <a href="https://github.com/XZANATOL/ProjectSpace" target="_blank">ProjectSpace</a>.
                        </li>
                    </ul>
                </div>
            </div>
                
        </section>

        <br><br><br>

        <section style="text-align: center;">
            <p>Made with NodeJS & Updated on Dec 2023.</p>
        </section>
    </main>
</body>
</html>