Skip to content

michaelmoss virtual resume landing page #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
michael77737 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

michaelmoss virtual resume landing page #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
384 changes: 384 additions & 0 deletions src/michaelmoss/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,384 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Michael Moss | Aspiring Software Engineer & APM</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</head>
<body>

<!-- ===== NAVIGATION ===== -->
<nav class="navbar" id="navbar">
<div class="nav-container">
<div class="nav-logo">MM</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#certifications">Certifications</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>

<!-- ===== HERO SECTION ===== -->
<section class="hero" id="home">
<div class="hero-content">
<div class="hero-photo">
<img
src="images/headshot.jpg"
alt="Michael Moss professional headshot"
class="headshot"
onerror="this.style.display='none'; document.getElementById('initials-avatar').style.display='flex';"
/>
<div class="headshot-placeholder" id="initials-avatar">MM</div>
</div>
<h1>Michael Moss</h1>
<h2>Aspiring Associate Product Manager &amp; Software Engineer</h2>
<p class="tagline">
Building data-informed, user-centered products that create real business impact.
</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">Get In Touch</a>
<a href="#projects" class="btn btn-secondary">View Projects</a>
</div>
</div>
</section>

<!-- ===== ABOUT ME ===== -->
<section class="section" id="about">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="about-content">
<div class="about-text">
<blockquote class="goal-statement">
"To live a purposeful and meaningful life by continuously developing my skills,
maintaining financial and emotional stability, and contributing selflessly to the
well-being of others."
</blockquote>
<p>
I'm an aspiring Associate Product Manager and Software Engineer currently completing
an intensive, project-based training program focused on AI-powered software development,
agile collaboration, and solving real-world user problems.
</p>
<p>
I'm passionate about building products that create real business impact and driven by
a balanced approach to life — one that blends personal growth, financial stability,
and giving back to the community.
</p>
</div>

<div class="milestones">
<h3>Personal Milestones</h3>
<div class="milestone-grid">
<div class="milestone-card">
<div class="milestone-icon"><i class="fas fa-bullseye"></i></div>
<h4>Purpose &amp; Self-Reflection</h4>
<p>
Completing self-assessments and defining a personal mission statement that aligns
with core values and long-term vision.
</p>
</div>
<div class="milestone-card">
<div class="milestone-icon"><i class="fas fa-chart-line"></i></div>
<h4>Progressive Self-Development</h4>
<p>
Committing to 100+ hours of deliberate learning, earning certifications, and
applying skills through real-world projects.
</p>
</div>
<div class="milestone-card">
<div class="milestone-icon"><i class="fas fa-shield-alt"></i></div>
<h4>Stability</h4>
<p>
Building financial, emotional, and physical foundations — including a 6-month
emergency fund and daily wellness routines.
</p>
</div>
<div class="milestone-card">
<div class="milestone-icon"><i class="fas fa-hands-helping"></i></div>
<h4>Selfless Charity</h4>
<p>
Volunteering 5+ hours/month and developing a scalable mentorship or charitable
initiative within 24 months.
</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- ===== EXPERIENCE ===== -->
<section class="section section-alt" id="experience">
<div class="container">
<h2 class="section-title">Experience</h2>
<div class="timeline">

<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="timeline-header">
<h3>Assistant Manager</h3>
<span class="timeline-org">Target</span>
<span class="timeline-date">9/2024 – 7/2025</span>
</div>
<ul>
<li>Led daily operations, improving customer service and sales performance</li>
<li>Managed inventory and merchandising standards</li>
<li>Trained staff and resolved customer issues</li>
<li>Collaborated with leadership to meet store goals</li>
</ul>
</div>
</div>

<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="timeline-header">
<h3>Assistant Manager</h3>
<span class="timeline-org">CVS</span>
<span class="timeline-date">10/2023 – 7/2024</span>
</div>
<ul>
<li>Supervised team and managed daily store operations</li>
<li>Oversaw scheduling, performance evaluations, and disciplinary actions</li>
<li>Assisted with hiring and training new employees</li>
</ul>
</div>
</div>

</div>

<div class="transferable-box">
<h3><i class="fas fa-exchange-alt"></i> Transferable Skills to Tech</h3>
<p>
My hands-on leadership experience has built strong problem-solving, communication, and
organizational skills that directly translate into software development. Managing team
workflows mirrors debugging and optimizing code, while training staff has strengthened
my ability to explain technical concepts clearly. I'm comfortable learning new systems
quickly, staying organized under pressure, and taking ownership of tasks — all essential
in a fast-paced development environment.
</p>
</div>
</div>
</section>

<!-- ===== EDUCATION ===== -->
<section class="section" id="education">
<div class="container">
<h2 class="section-title">Education</h2>
<div class="education-grid">
<div class="education-card">
<div class="edu-icon"><i class="fas fa-laptop-code"></i></div>
<h3>Code Differently</h3>
<p class="edu-program">AI-Powered Software Engineering Program</p>
<span class="badge badge-progress">In Progress</span>
<p class="edu-degree"><strong>Credential:</strong> Professional Certificate Program (Non-degree)</p>
<p>
Project-based program focused on real-world product development, agile collaboration,
and AI-powered software engineering. Working in scrum teams to deliver product solutions.
</p>
</div>
</div>
</div>
</section>

<!-- ===== CERTIFICATIONS ===== -->
<section class="section section-alt" id="certifications">
<div class="container">
<h2 class="section-title">Certifications</h2>
<div class="cert-grid">
<div class="cert-card">
<div class="cert-icon"><i class="fas fa-certificate"></i></div>
<h3>Certified ScrumMaster (CSM)</h3>
<p>Scrum Alliance</p>
<span class="badge badge-earned">Applied</span>
</div>
<div class="cert-card">
<div class="cert-icon"><i class="fas fa-users-cog"></i></div>
<h3>Agile / Scrum Practitioner</h3>
<p>Applied in project-based scrum teams</p>
<span class="badge badge-earned">Applied</span>
</div>
<div class="cert-card">
<div class="cert-icon"><i class="fas fa-code"></i></div>
<h3>Java Foundations</h3>
<p>Oracle Academy — Award of Completion</p>
<span class="badge badge-earned">Applied</span>
<p class="cert-note">Presented March 9, 2026</p>
</div>
</div>
</div>
</section>

<!-- ===== PROJECTS ===== -->
<section class="section" id="projects">
<div class="container">
<h2 class="section-title">Projects</h2>
<div class="projects-grid">

<div class="project-card">
<div class="project-header">
<i class="fas fa-server"></i>
<h3>Spring Boot API</h3>
</div>
<p>Built a REST API using Java and Spring Boot, implementing industry-standard backend architecture and following RESTful design principles.</p>
<div class="project-tech">
<span>Java</span>
<span>Spring Boot</span>
<span>REST API</span>
</div>
</div>

<div class="project-card">
<div class="project-header">
<i class="fas fa-book"></i>
<h3>Book API</h3>
</div>
<p>Designed and implemented endpoints for full CRUD operations on a book management system, enabling create, read, update, and delete functionality.</p>
<div class="project-tech">
<span>Java</span>
<span>Spring Boot</span>
<span>CRUD</span>
<span>REST API</span>
</div>
</div>

<div class="project-card">
<div class="project-header">
<i class="fas fa-tools"></i>
<h3>Spring Boot Generator</h3>
</div>
<p>Created an automated tool to streamline Spring Boot project setup and accelerate development workflows, reducing boilerplate configuration time.</p>
<div class="project-tech">
<span>Java</span>
<span>Spring Boot</span>
<span>Automation</span>
</div>
</div>

</div>
</div>
</section>

<!-- ===== SKILLS ===== -->
<section class="section section-alt" id="skills">
<div class="container">
<h2 class="section-title">Skills</h2>
<div class="skills-container">

<div class="skills-group">
<h3><i class="fas fa-code"></i> Languages</h3>
<div class="skill-tags">
<span>Python</span>
<span>JavaScript</span>
<span>HTML / CSS</span>
<span>SQL</span>
<span>Java</span>
</div>
</div>

<div class="skills-group">
<h3><i class="fas fa-layer-group"></i> Frameworks &amp; Tools</h3>
<div class="skill-tags">
<span>React</span>
<span>Node.js</span>
<span>Flask</span>
<span>Spring Boot</span>
<span>Git / GitHub</span>
<span>Postman</span>
<span>VS Code</span>
</div>
</div>

<div class="skills-group">
<h3><i class="fas fa-network-wired"></i> Technical Concepts</h3>
<div class="skill-tags">
<span>REST APIs</span>
<span>Agile / Scrum</span>
<span>CRUD Operations</span>
<span>Backend Development</span>
</div>
</div>

<div class="skills-group">
<h3><i class="fas fa-users"></i> Professional Skills</h3>
<div class="skill-tags">
<span>User-Centered Problem Solving</span>
<span>Cross-Functional Collaboration</span>
<span>Analytical Thinking</span>
<span>Stakeholder Communication</span>
<span>Leadership</span>
<span>Team Training</span>
</div>
</div>

</div>
</div>
</section>

<!-- ===== CONTACT ===== -->
<section class="section" id="contact">
<div class="container">
<h2 class="section-title">Contact</h2>
<p class="contact-intro">Ready to connect? Reach out through any of the channels below.</p>
<div class="contact-grid">

<a href="mailto:Mxmoss261@Gmail.com" class="contact-card">
<i class="fas fa-envelope"></i>
<h3>Email</h3>
<p>Mxmoss261@Gmail.com</p>
</a>

<a href="https://www.linkedin.com/in/michael-moss-627982194/" target="_blank" rel="noopener noreferrer" class="contact-card">
<i class="fab fa-linkedin"></i>
<h3>LinkedIn</h3>
<p>michael-moss-627982194</p>
</a>

<a href="https://github.com/michael77737" target="_blank" rel="noopener noreferrer" class="contact-card">
<i class="fab fa-github"></i>
<h3>GitHub</h3>
<p>michael77737</p>
</a>

</div>
</div>
</section>

<!-- ===== FOOTER ===== -->
<footer class="footer">
<p>&copy; 2026 Michael Moss &mdash; Wilmington, DE &middot; Built with HTML &amp; CSS</p>
</footer>

<script>
// Sticky navbar style on scroll
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 60) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});

// Smooth scroll for all anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>

</body>
</html>
Loading