From e58104b674d6f15286380b7e7131780a6625f13f Mon Sep 17 00:00:00 2001 From: michaelmoss Date: Mon, 30 Mar 2026 00:27:44 -0400 Subject: [PATCH] michaelmoss virtual resume landing page --- src/michaelmoss/index.html | 384 ++++++++++++++++++ src/michaelmoss/style.css | 812 +++++++++++++++++++++++++++++++++++++ 2 files changed, 1196 insertions(+) create mode 100644 src/michaelmoss/index.html create mode 100644 src/michaelmoss/style.css diff --git a/src/michaelmoss/index.html b/src/michaelmoss/index.html new file mode 100644 index 0000000..f110b7f --- /dev/null +++ b/src/michaelmoss/index.html @@ -0,0 +1,384 @@ + + + + + + Michael Moss | Aspiring Software Engineer & APM + + + + + + + + + + +
+
+
+ Michael Moss professional headshot +
MM
+
+

Michael Moss

+

Aspiring Associate Product Manager & Software Engineer

+

+ Building data-informed, user-centered products that create real business impact. +

+
+ Get In Touch + View Projects +
+
+
+ + +
+
+

About Me

+
+
+
+ "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." +
+

+ 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. +

+

+ 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. +

+
+ +
+

Personal Milestones

+
+
+
+

Purpose & Self-Reflection

+

+ Completing self-assessments and defining a personal mission statement that aligns + with core values and long-term vision. +

+
+
+
+

Progressive Self-Development

+

+ Committing to 100+ hours of deliberate learning, earning certifications, and + applying skills through real-world projects. +

+
+
+
+

Stability

+

+ Building financial, emotional, and physical foundations — including a 6-month + emergency fund and daily wellness routines. +

+
+
+
+

Selfless Charity

+

+ Volunteering 5+ hours/month and developing a scalable mentorship or charitable + initiative within 24 months. +

+
+
+
+
+
+
+ + +
+
+

Experience

+
+ +
+
+
+
+

Assistant Manager

+ Target + 9/2024 – 7/2025 +
+
    +
  • Led daily operations, improving customer service and sales performance
    • +
  • Managed inventory and merchandising standards
    • +
  • Trained staff and resolved customer issues
    • +
  • Collaborated with leadership to meet store goals
    • +
+
+
+ +
+
+
+
+

Assistant Manager

+ CVS + 10/2023 – 7/2024 +
+
    +
  • Supervised team and managed daily store operations
    • +
  • Oversaw scheduling, performance evaluations, and disciplinary actions
    • +
  • Assisted with hiring and training new employees
    • +
+
+
+ +
+ +
+

Transferable Skills to Tech

+

+ 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. +

+
+
+
+ + +
+
+

Education

+
+
+
+

Code Differently

+

AI-Powered Software Engineering Program

+ In Progress +

Credential: Professional Certificate Program (Non-degree)

+

+ Project-based program focused on real-world product development, agile collaboration, + and AI-powered software engineering. Working in scrum teams to deliver product solutions. +

+
+
+
+
+ + +
+
+

Certifications

+
+
+
+

Certified ScrumMaster (CSM)

+

Scrum Alliance

+ Applied +
+
+
+

Agile / Scrum Practitioner

+

Applied in project-based scrum teams

+ Applied +
+
+
+

Java Foundations

+

Oracle Academy — Award of Completion

+ Applied +

Presented March 9, 2026

+
+
+
+
+ + +
+
+

Projects

+
+ +
+
+ +

Spring Boot API

+
+

Built a REST API using Java and Spring Boot, implementing industry-standard backend architecture and following RESTful design principles.

+
+ Java + Spring Boot + REST API +
+
+ +
+
+ +

Book API

+
+

Designed and implemented endpoints for full CRUD operations on a book management system, enabling create, read, update, and delete functionality.

+
+ Java + Spring Boot + CRUD + REST API +
+
+ +
+
+ +

Spring Boot Generator

+
+

Created an automated tool to streamline Spring Boot project setup and accelerate development workflows, reducing boilerplate configuration time.

+
+ Java + Spring Boot + Automation +
+
+ +
+
+
+ + +
+
+

Skills

+
+ +
+

Languages

+
+ Python + JavaScript + HTML / CSS + SQL + Java +
+
+ +
+

Frameworks & Tools

+
+ React + Node.js + Flask + Spring Boot + Git / GitHub + Postman + VS Code +
+
+ +
+

Technical Concepts

+
+ REST APIs + Agile / Scrum + CRUD Operations + Backend Development +
+
+ +
+

Professional Skills

+
+ User-Centered Problem Solving + Cross-Functional Collaboration + Analytical Thinking + Stakeholder Communication + Leadership + Team Training +
+
+ +
+
+
+ + +
+
+

Contact

+

Ready to connect? Reach out through any of the channels below.

+
+ + + +

Email

+

Mxmoss261@Gmail.com

+ + + + +

LinkedIn

+

michael-moss-627982194

+ + + + +

GitHub

+

michael77737

+ + +
+
+
+ + + + + + + + diff --git a/src/michaelmoss/style.css b/src/michaelmoss/style.css new file mode 100644 index 0000000..f51f6b9 --- /dev/null +++ b/src/michaelmoss/style.css @@ -0,0 +1,812 @@ +/* ========================================= + VIRTUAL RESUME — Michael Moss + style.css + ========================================= */ + +/* ===== RESET & BASE ===== */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', sans-serif; + color: #1a1a2e; + background-color: #f8f9fa; + line-height: 1.7; +} + +/* ===== DESIGN TOKENS ===== */ +:root { + --navy: #0f3460; + --blue-dark: #16213e; + --accent: #e94560; + --accent-light:#ff6b6b; + --text: #1a1a2e; + --text-muted: #6b7280; + --bg: #f8f9fa; + --bg-alt: #eef2f7; + --white: #ffffff; + --shadow: 0 4px 20px rgba(15, 52, 96, 0.10); + --shadow-lg: 0 10px 35px rgba(15, 52, 96, 0.16); + --radius: 12px; + --transition: all 0.3s ease; +} + +/* ========================================= + NAVBAR + ========================================= */ +.navbar { + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + padding: 1.2rem 0; + transition: var(--transition); +} + +.navbar.scrolled { + background: var(--navy); + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.30); + padding: 0.75rem 0; +} + +.nav-container { + max-width: 1100px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-logo { + width: 44px; + height: 44px; + border-radius: 50%; + background: var(--accent); + color: var(--white); + font-family: 'Playfair Display', serif; + font-size: 1.1rem; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.nav-links { + list-style: none; + display: flex; + gap: 2rem; +} + +.nav-links a { + color: var(--white); + text-decoration: none; + font-size: 0.88rem; + font-weight: 500; + letter-spacing: 0.4px; + opacity: 0.85; + transition: var(--transition); +} + +.nav-links a:hover { + opacity: 1; + color: var(--accent-light); +} + +/* ========================================= + HERO + ========================================= */ +.hero { + min-height: 100vh; + background: linear-gradient(135deg, var(--blue-dark) 0%, var(--navy) 55%, #1a4a7a 100%); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 7rem 2rem 5rem; + position: relative; + overflow: hidden; +} + +/* Decorative blobs */ +.hero::before, +.hero::after { + content: ''; + position: absolute; + border-radius: 50%; + pointer-events: none; +} + +.hero::before { + width: 620px; + height: 620px; + background: rgba(233, 69, 96, 0.07); + top: -120px; + right: -120px; +} + +.hero::after { + width: 400px; + height: 400px; + background: rgba(255, 255, 255, 0.04); + bottom: -60px; + left: -60px; +} + +.hero-content { + position: relative; + z-index: 1; +} + +/* --- Headshot --- */ +.hero-photo { + margin-bottom: 1.75rem; +} + +.headshot { + width: 155px; + height: 155px; + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--accent); + box-shadow: 0 8px 30px rgba(233, 69, 96, 0.35); +} + +.headshot-placeholder { + width: 155px; + height: 155px; + border-radius: 50%; + background: linear-gradient(135deg, var(--accent), #c0392b); + color: var(--white); + font-family: 'Playfair Display', serif; + font-size: 3rem; + display: none; + align-items: center; + justify-content: center; + margin: 0 auto; + border: 4px solid rgba(255, 255, 255, 0.20); +} + +.hero h1 { + font-family: 'Playfair Display', serif; + font-size: 3.6rem; + color: var(--white); + margin-bottom: 0.5rem; + letter-spacing: -0.5px; +} + +.hero h2 { + font-size: 1.25rem; + color: var(--accent-light); + font-weight: 400; + margin-bottom: 1.25rem; + letter-spacing: 0.4px; +} + +.tagline { + font-size: 1.05rem; + color: rgba(255, 255, 255, 0.72); + max-width: 540px; + margin: 0 auto 2.5rem; + line-height: 1.8; +} + +.hero-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +/* --- Buttons --- */ +.btn { + padding: 0.85rem 2.1rem; + border-radius: 50px; + text-decoration: none; + font-weight: 600; + font-size: 0.95rem; + transition: var(--transition); + letter-spacing: 0.3px; + display: inline-block; +} + +.btn-primary { + background: var(--accent); + color: var(--white); + box-shadow: 0 4px 16px rgba(233, 69, 96, 0.40); +} + +.btn-primary:hover { + background: #c0392b; + transform: translateY(-2px); + box-shadow: 0 6px 22px rgba(233, 69, 96, 0.50); +} + +.btn-secondary { + background: transparent; + color: var(--white); + border: 2px solid rgba(255, 255, 255, 0.50); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.10); + border-color: var(--white); + transform: translateY(-2px); +} + +/* ========================================= + SECTION SHARED + ========================================= */ +.section { + padding: 5rem 0; +} + +.section-alt { + background: var(--bg-alt); +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 0 2rem; +} + +.section-title { + font-family: 'Playfair Display', serif; + font-size: 2.2rem; + color: var(--navy); + text-align: center; + margin-bottom: 3rem; + position: relative; +} + +.section-title::after { + content: ''; + display: block; + width: 60px; + height: 4px; + background: var(--accent); + border-radius: 2px; + margin: 0.75rem auto 0; +} + +/* ========================================= + ABOUT + ========================================= */ +.about-content { + display: flex; + flex-direction: column; + gap: 3rem; +} + +.goal-statement { + font-size: 1.15rem; + font-style: italic; + color: var(--navy); + border-left: 4px solid var(--accent); + padding: 1rem 1.5rem; + background: rgba(15, 52, 96, 0.05); + border-radius: 0 var(--radius) var(--radius) 0; + margin-bottom: 1.5rem; + line-height: 1.9; +} + +.about-text p { + color: var(--text-muted); + font-size: 1.02rem; + margin-bottom: 0.9rem; +} + +.milestones h3 { + font-size: 1.35rem; + color: var(--navy); + font-weight: 600; + margin-bottom: 1.5rem; +} + +.milestone-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + gap: 1.5rem; +} + +.milestone-card { + background: var(--white); + border-radius: var(--radius); + padding: 1.5rem; + box-shadow: var(--shadow); + border-top: 3px solid var(--accent); + transition: var(--transition); +} + +.milestone-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.milestone-icon { + width: 46px; + height: 46px; + background: linear-gradient(135deg, var(--navy), var(--accent)); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + color: var(--white); + font-size: 1.1rem; + margin-bottom: 1rem; +} + +.milestone-card h4 { + font-size: 0.98rem; + color: var(--navy); + font-weight: 600; + margin-bottom: 0.5rem; +} + +.milestone-card p { + font-size: 0.88rem; + color: var(--text-muted); + line-height: 1.65; +} + +/* ========================================= + EXPERIENCE / TIMELINE + ========================================= */ +.timeline { + position: relative; + padding-left: 2rem; + margin-bottom: 2.5rem; +} + +.timeline::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(to bottom, var(--accent), var(--navy)); +} + +.timeline-item { + position: relative; + padding-left: 2rem; + margin-bottom: 2.5rem; +} + +.timeline-item:last-child { + margin-bottom: 0; +} + +.timeline-dot { + position: absolute; + left: -2.42rem; + top: 0.42rem; + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--accent); + border: 3px solid var(--bg-alt); + box-shadow: 0 0 0 2px var(--accent); +} + +.timeline-content { + background: var(--white); + border-radius: var(--radius); + padding: 1.5rem 2rem; + box-shadow: var(--shadow); + transition: var(--transition); +} + +.timeline-content:hover { + box-shadow: var(--shadow-lg); +} + +.timeline-header { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.65rem; + margin-bottom: 0.85rem; +} + +.timeline-header h3 { + font-size: 1.1rem; + color: var(--navy); + font-weight: 600; +} + +.timeline-org { + background: var(--navy); + color: var(--white); + padding: 0.18rem 0.75rem; + border-radius: 20px; + font-size: 0.78rem; + font-weight: 600; +} + +.timeline-date { + color: var(--text-muted); + font-size: 0.83rem; + margin-left: auto; +} + +.timeline-content ul { + padding-left: 1.2rem; +} + +.timeline-content ul li { + color: var(--text-muted); + font-size: 0.93rem; + margin-bottom: 0.35rem; +} + +/* Transferable Skills box */ +.transferable-box { + background: linear-gradient(135deg, var(--navy), #1a4a7a); + color: var(--white); + border-radius: var(--radius); + padding: 2rem 2.2rem; +} + +.transferable-box h3 { + font-size: 1.1rem; + color: var(--accent-light); + margin-bottom: 0.85rem; + display: flex; + align-items: center; + gap: 0.6rem; +} + +.transferable-box p { + line-height: 1.85; + opacity: 0.88; + font-size: 0.93rem; +} + +/* ========================================= + EDUCATION + ========================================= */ +.education-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; +} + +.education-card { + background: var(--white); + border-radius: var(--radius); + padding: 2rem; + box-shadow: var(--shadow); + border-top: 4px solid var(--navy); + transition: var(--transition); +} + +.education-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.edu-icon { + font-size: 2rem; + color: var(--navy); + margin-bottom: 0.9rem; +} + +.education-card h3 { + font-size: 1.2rem; + color: var(--navy); + font-weight: 700; + margin-bottom: 0.25rem; +} + +.edu-program { + color: var(--accent); + font-weight: 500; + margin-bottom: 0.65rem; +} + +.education-card p { + color: var(--text-muted); + font-size: 0.9rem; + line-height: 1.7; + margin-top: 0.75rem; +} + +.edu-degree { + margin-top: 0.9rem; + font-size: 0.85rem; +} + +/* ========================================= + SHARED BADGE + ========================================= */ +.badge { + display: inline-block; + padding: 0.22rem 0.8rem; + border-radius: 20px; + font-size: 0.76rem; + font-weight: 600; +} + +.badge-progress { + background: #fff3cd; + color: #856404; +} + +.badge-earned { + background: #d1fae5; + color: #065f46; +} + +/* ========================================= + CERTIFICATIONS + ========================================= */ +.cert-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 1.5rem; +} + +.cert-card { + background: var(--white); + border-radius: var(--radius); + padding: 2rem; + text-align: center; + box-shadow: var(--shadow); + border-bottom: 4px solid var(--accent); + transition: var(--transition); +} + +.cert-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.cert-icon { + font-size: 2.5rem; + color: var(--accent); + margin-bottom: 0.9rem; +} + +.cert-card h3 { + font-size: 1.05rem; + color: var(--navy); + font-weight: 600; + margin-bottom: 0.4rem; +} + +.cert-card p { + color: var(--text-muted); + font-size: 0.87rem; + margin-bottom: 0.8rem; +} + +.cert-note { + font-size: 0.8rem; + margin-top: 0.75rem; + margin-bottom: 0; +} + +/* ========================================= + PROJECTS + ========================================= */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; +} + +.project-card { + background: var(--white); + border-radius: var(--radius); + padding: 2rem; + box-shadow: var(--shadow); + border-top: 4px solid var(--accent); + transition: var(--transition); +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); +} + +.project-header { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.9rem; +} + +.project-header i { + font-size: 1.5rem; + color: var(--accent); +} + +.project-header h3 { + font-size: 1.1rem; + color: var(--navy); + font-weight: 600; +} + +.project-card p { + color: var(--text-muted); + font-size: 0.93rem; + line-height: 1.7; + margin-bottom: 1.2rem; +} + +.project-tech { + display: flex; + flex-wrap: wrap; + gap: 0.45rem; +} + +.project-tech span { + background: rgba(15, 52, 96, 0.08); + color: var(--navy); + padding: 0.23rem 0.75rem; + border-radius: 20px; + font-size: 0.78rem; + font-weight: 500; +} + +/* ========================================= + SKILLS + ========================================= */ +.skills-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 1.75rem; +} + +.skills-group { + background: var(--white); + border-radius: var(--radius); + padding: 1.5rem; + box-shadow: var(--shadow); +} + +.skills-group h3 { + font-size: 0.97rem; + color: var(--navy); + font-weight: 600; + margin-bottom: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.skills-group h3 i { + color: var(--accent); +} + +.skill-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.skill-tags span { + background: linear-gradient(135deg, var(--navy), #1a4a7a); + color: var(--white); + padding: 0.32rem 0.9rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 500; + transition: var(--transition); + cursor: default; +} + +.skill-tags span:hover { + background: linear-gradient(135deg, var(--accent), #c0392b); + transform: translateY(-2px); +} + +/* ========================================= + CONTACT + ========================================= */ +.contact-intro { + text-align: center; + color: var(--text-muted); + font-size: 1.05rem; + margin-bottom: 2.5rem; +} + +.contact-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + max-width: 780px; + margin: 0 auto; +} + +.contact-card { + background: var(--white); + border-radius: var(--radius); + padding: 2rem 1.5rem; + text-align: center; + box-shadow: var(--shadow); + text-decoration: none; + color: var(--text); + border-bottom: 3px solid transparent; + transition: var(--transition); +} + +.contact-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); + border-bottom-color: var(--accent); +} + +.contact-card i { + font-size: 2rem; + color: var(--navy); + margin-bottom: 0.75rem; + display: block; + transition: var(--transition); +} + +.contact-card:hover i { + color: var(--accent); +} + +.contact-card h3 { + font-size: 1rem; + color: var(--navy); + font-weight: 600; + margin-bottom: 0.3rem; +} + +.contact-card p { + color: var(--text-muted); + font-size: 0.83rem; + word-break: break-word; +} + +/* ========================================= + FOOTER + ========================================= */ +.footer { + background: var(--blue-dark); + color: rgba(255, 255, 255, 0.55); + text-align: center; + padding: 1.5rem 1rem; + font-size: 0.87rem; +} + +/* ========================================= + RESPONSIVE + ========================================= */ +@media (max-width: 768px) { + .hero h1 { font-size: 2.6rem; } + .hero h2 { font-size: 1.1rem; } + .section-title { font-size: 1.85rem; } + .nav-links { display: none; } + + .timeline-date { + margin-left: 0; + display: block; + margin-top: 0.25rem; + } + + .timeline-header { + flex-direction: column; + align-items: flex-start; + } +} + +@media (max-width: 480px) { + .hero h1 { font-size: 2rem; } + .btn { padding: 0.75rem 1.5rem; font-size: 0.9rem; } + .section { padding: 3.5rem 0; } +}