301 lines
13 KiB
HTML
301 lines
13 KiB
HTML
|
<!-- 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>
|