<!-- Created by Mohammed Nuseirat -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for character set and viewport settings -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title -->
<title>Mohammed Nuseirat</title>
<!-- Link to external CSS for styling -->
<link rel="stylesheet" href="styles.css">
<!-- Link to AOS (Animate On Scroll) library for scroll animations -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<!-- Link to Font Awesome library for social media and icon fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- Custom cursor element -->
<div class="cursor"></div>
<!-- Main container for page content -->
<div class="container">
<!-- Profile Section -->
<div class="profile-card" data-aos="fade-up">
<div class="profile-content">
<!-- Profile Image -->
<div class="profile-image"><img src="https://avatars.githubusercontent.com/u/130251088?v=4" alt=""> </div>
<!-- Profile Info -->
<div class="profile-info">
<h1>Mohammed Nuseirat</h1>
<p>Software Engineer specializing in creating intuitive and engaging user experiences.</p>
<!-- Stats Section -->
<div class="stats">
<div class="stat">
<!-- Experience Years -->
<div class="stat-number">3</div>
<div class="stat-label">Years Experience</div>
</div>
<!-- Completed Projects -->
<div class="stat">
<div class="stat-number">10</div>
<div class="stat-label">Projects Completed</div>
</div>
</div>
<!-- Social Media Links and CV Download Button -->
<div class="social-links">
<a href="https://github.com/nuseirat" title="GitHub" class="social-icon">
<i class="fab fa-github"></i>
</a>
<a href="https://linkedin.com/in/mohammednuseirat" title="LinkedIn" class="social-icon">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://x.com/mohanuseirat" title="X" class="social-icon">
<i class="fa-brands fa-x-twitter"></i>
</a>
<a href="https://nuseirat.hashnode.dev/" title="Hashnode" class="social-icon">
<i class="fa-brands fa-hashnode"></i>
</a>
<a href="Mohammed.Alnuseirat.Resume.pdf" download class="cv-button">
<i class="fas fa-download"></i> Download CV
</a>
</div>
</div>
</div>
</div>
<!-- Skills Section -->
<div class="skills-grid">
<!-- Education Card -->
<div class="skill-card primary" data-aos="fade-right">
<i class="fas fa-graduation-cap skill-icon"></i>
<h3>Education</h3>
<p>CS Student at Arab Open University 2022-2026</p>
</div>
<!-- Location Card -->
<div class="skill-card accent" data-aos="fade-left">
<i class="fas fa-location-dot skill-icon"></i>
<h3>Location</h3>
<p>Saudi Arabia, Eastern Province</p>
</div>
</div>
<!-- Experience Section -->
<div class="experience-section">
<h2 id="experience" data-aos="fade-up">Experience</h2>
<!-- Timeline for Experiences -->
<div class="timeline">
<!-- Timeline Item 1 -->
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Founder & Lead Developer </h3>
<h4>Anavrin For Desgins & Software Solutions</h4>
<p>2021 - Presnt </p>
<p>Developed and maintained websites and E-store using modern technologies.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>AOU Club Co-Leader</h3>
<h4>Arab Open University</h4>
<p>2022 - 2024</p>
<p>Led website and social media efforts, streamlined accounting, and aligned digital strategies with business goals.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Web Developer</h3>
<h4>Arab & Obada Genral Service Foundtion</h4>
<p>2018 - 2019</p>
<p>Created and optimized a website, supported marketing, and streamlined bookkeeping for business alignment.</p>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Bookkeeping Manager</h3>
<h4>Arab & Obada Genral Service Foundtion</h4>
<p>2017 - 2018</p>
<p>Handled financial records, transactions, reconciliations, and budget collaboration to ensure accuracy and compliance with accounting standards.</p>
</div>
</div>
</div>
</div>
<!-- Projects Section -->
<div class="projects">
<h2 id="recent-projects" data-aos="fade-up">Recent Projects</h2>
<!-- Grid for Project Cards -->
<div class="projects-grid">
<!-- Project Card 1 - ViewGetterYT -->
<div class="project-card" data-aos="fade-up">
<div class="project-image" onclick="expandImage(this)">
<img src="images/ViewGetterYT.png" alt="Project 1">
</div>
<div class="project-info">
<h3>ViewGetterYT</h3>
<p>Python Application</p>
<a href="https://viewgetter.netlify.app/" class="project-link">View Project →</a>
</div>
</div>
<!-- Project Card 2 - AOU GPA Calculator -->
<div class="project-card" data-aos="fade-up">
<div class="project-image" onclick="expandImage(this)">
<img src="images/aougpa.png" alt="Project 1">
</div>
<div class="project-info">
<h3>Aou GPA Calcuotr</h3>
<p>Full-stack web application</p>
<a href="https://aougpa.netlify.app/" class="project-link">View Project →</a>
</div>
</div>
<!-- Project Card 3 - Alnusayrat -->
<div class="project-card" data-aos="fade-up">
<div class="project-image" onclick="expandImage(this)">
<img src="images/alnusayrat.png" alt="Project 1">
</div>
<div class="project-info">
<h3>Alnusayrat Family Website</h3>
<p>Full-stack web application</p>
<a href="https://alnusayrat.netlify.app/" class="project-link">View Project →</a>
</div>
</div>
<!-- Project Card 4 - CertifyMaster -->
<div class="project-card" data-aos="fade-up">
<div class="project-image" onclick="expandImage(this)">
<img src="images/certifymaster.png" alt="Project 1">
</div>
<div class="project-info">
<h3>CertifyMaster</h3>
<p>Web Application</p>
<a href="https://certifymaster.netlify.app/" class="project-link">View Project →</a>
</div>
</div>
<!-- Project Card 5 - SIS -->
<div class="project-card" data-aos="fade-up">
<div class="project-image" onclick="expandImage(this)">
<img src="images/sis.png" alt="Project 1">
</div>
<div class="project-info">
<h3>AOU Student Information System</h3>
<p>Frontend web application</p>
<a href="https://sisportal.netlify.app/" class="project-link">View Project →</a>
</div>
</div>
</div>
</div>
<!-- Tools Section -->
<div class="premium-tools">
<div class="tools-header">
<h2 data-aos="fade-up">Set of Tools</h2>
</div>
<!-- Grid of Tools Icons -->
<div class="tools-categories">
<div class="tools-grid">
<div class="tool-card" data-aos="fade-up">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" class="tool-icon" />
<h4>Python</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" class="tool-icon" />
<h4>JavaScript</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java" class="tool-icon" />
<h4>Java</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS3" class="tool-icon" />
<h4>CSS3</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML5" class="tool-icon" />
<h4>HTML5</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg" alt="Dart" class="tool-icon" />
<h4>Dart</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://raw.githubusercontent.com/github/explore/main/topics/json/json.png" alt="Json" class="tool-icon" />
<h4>Json</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cf/New_Power_BI_Logo.svg" alt="Power BI" class="tool-icon" />
<h4>Power BI</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg" alt="Figma" class="tool-icon" />
<h4>Figma</h4>
</div>
<div class="tool-card" data-aos="fade-up">
<img src="https://img.icons8.com/color/48/google-colab.png" alt="Google Colab" class="tool-icon" />
<h4>Google Colab</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<p>Developed by Mohammed Nuseirat</p>
<p class="footer-year">© <span id="currentYear"></span></p>
</div>
</footer>
<!-- Modal -->
<div id="imageModal" class="modal">
<span class="close-modal">×</span>
<img id="expandedImage" class="modal-content">
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/86e812f22e.js" crossorigin="anonymous"></script>
</body>
</html>