<!DOCTYPE html>
<html lang="en">
<head>
<!-- Primary Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A modern Homepage to presented by the odin project">
<meta name="keywords" content="Homepage , landing page, webdesign, webmaster">
<meta name="author" content="Mubarak Mohamed">
<meta name="theme-color" content="#596D48">
<!-- Open Graph / Social Media Meta Tags -->
<meta property="og:title" content="My Digital Library">
<meta property="og:description" content="Manage your book collection with ease">
<meta property="og:type" content="website">
<meta property="og:image" content="src/img/og-image.jpg">
<meta property="og:url" content="https://your-domain.com">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="zool_techno">
<meta name="twitter:title" content="zool_techno">
<meta name="twitter:description" content="Manage your homepage with ease">
<!-- Favicon -->
<link rel="icon" type="image/png" href="src/img/favicon.png">
<link rel="apple-touch-icon" href="src/img/apple-touch-icon.png">
<!-- Preconnect to External Resources -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:700&family=Roboto:400,500&display=swap" rel="stylesheet">
<!-- External CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="src/css/style.css">
<title>Mubarak Mohamed | Portfolio</title>
</head>
<body>
<!-- Header Section -->
<header class="main-header" role="banner">
<div class="container header-flex">
<div class="profile-img">
<img src="https://images.pexels.com/photos/1181696/pexels-photo-1181696.jpeg" alt="Professional portrait of Ashley Williams" width="400" height="400" loading="eager" decoding="async">
<h1>Ashley Williams</h1>
</div>
<section class="about" aria-labelledby="about-heading">
<h2 id="about-heading">About me</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<nav class="social-links" aria-label="Social media links">
<a href="https://github.com/mubarak-mohamed" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile">
<i class="devicon-github-original" aria-hidden="true"></i>
</a>
<a href="https://linkedin.com/in/mubarakmohamed" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile">
<i class="devicon-linkedin-plain" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/mubararkmohamed" target="_blank" rel="noopener noreferrer" aria-label="Twitter Profile">
<i class="devicon-twitter-original" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
</header>
<main role="main">
<!-- Projects Section -->
<section class="work container" aria-labelledby="work-heading">
<h2 id="work-heading">My work</h2>
<div class="projects-grid" role="list">
<!-- Project cards will be dynamically generated via JavaScript -->
<template id="project-card-template">
<article class="project-card" role="listitem" style="--project-color: var(--project-color-value);">
<div class="project-img">
<img src="" alt="" width="400" height="300" loading="lazy" decoding="async">
</div>
<div class="project-info">
<h3></h3>
<p></p>
<nav class="project-links" aria-label="Project links">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="View on GitHub">
<i class="devicon-github-original" aria-hidden="true"></i>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="View live demo">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14,3H21V10H19V5.41L10.41,14L9,12.59L17.59,4H14V3M5,5H12V7H7V17H17V12H19V19A2,2 0 0,1 17,21H7A2,2 0 0,1 5,19V5Z" fill="currentColor" />
</svg>
</a>
</nav>
</div>
</article>
</template>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section" aria-labelledby="contact-heading">
<div class="container contact-flex">
<div class="contact-info">
<h2 id="contact-heading">Contact me</h2>
<p>Please get in touch if you think our work could be mutually beneficial!</p>
<address>
1234 Random Road<br>
Random Town, California 12345
</address>
<p>
<a href="tel:555-555-5555" aria-label="Call me at 555-555-5555">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20,15.5C18.83,15.5 17.67,15.33 16.58,15C16.21,14.9 15.81,15 15.5,15.29L13.21,17.58C10.07,15.93 8.07,13.93 6.42,10.79L8.71,8.5C9,8.19 9.1,7.79 9,7.42C8.67,6.33 8.5,5.17 8.5,4A1.5,1.5 0 0,0 7,2.5H4A1.5,1.5 0 0,0 2.5,4C2.5,16.09 7.91,21.5 20,21.5A1.5,1.5 0 0,0 21.5,20V17A1.5,1.5 0 0,0 20,15.5Z" fill="currentColor" />
</svg>
555-555-5555
</a>
<br>
<a href="mailto:ashleywilliams.is.not.real@gmail.com" aria-label="Email me at ashleywilliams.is.not.real@gmail.com">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20,8V20H4V8H20M20,6H4A2,2 0 0,0 2,8V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V8A2,2 0 0,0 20,6M19.6,10.25L12,15.5L4.4,10.25L5.13,9L12,13.75L18.87,9L19.6,10.25Z" fill="currentColor" />
</svg>
ashleywilliams.is.not.real@gmail.com
</a>
</p>
<nav class="social-links" aria-label="Social media links">
<a href="https://github.com/mubarak-mohamed" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile">
<i class="devicon-github-original" aria-hidden="true"></i>
</a>
<a href="https://linkedin.com/in/mubarakmohamed" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile">
<i class="devicon-linkedin-plain" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/mubararkmohamed" target="_blank" rel="noopener noreferrer" aria-label="Twitter Profile">
<i class="devicon-twitter-original" aria-hidden="true"></i>
</a>
</nav>
</div>
<div class="contact-img">
<img src="https://images.pexels.com/photos/1181697/pexels-photo-1181697.jpeg" alt="Ashley Williams working at a desk" width="400" height="300" loading="lazy" decoding="async">
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container">
<p>© 2025 Mubarak Mohamed <a href="https://github.com/mubarak-mohamed" aria-label="GitHub"><i class="fab fa-github"></i></a>. Created with <i class="fas fa-heart"></i> for The Odin Project</p>
</footer>
<!-- Scripts -->
<script src="src/js/main.js" defer></script>
</body>
</html>/* ==========================================================================
CSS Custom Properties (Variables)
========================================================================== */
:root {
/* Colors */
--color-primary: #0097a7;
--color-secondary: #b23b2e;
--color-surface: #fff;
--color-background: #f5f6f7;
--color-text-main: #2c3e50;
--color-text-secondary: #7f8c8d;
--color-overlay: rgba(44, 62, 80, 0.7);
--color-border: #e0e0e0;
/* Typography */
--font-family-title: "Playfair Display", serif;
--font-family-body: "Roboto", Arial, sans-serif;
--font-size-base: 16px;
--font-size-h1: 2rem;
--font-size-h2: 2rem;
--font-size-h3: 1.2rem;
--font-size-body: 1rem;
--font-size-small: 0.875rem;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
/* Layout */
--container-max-width: 1100px;
--container-padding: 2rem 1rem;
--border-radius: 0.75rem;
--box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
--box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
--transition-base: 0.2s ease;
--transition-smooth: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==========================================================================
Base Styles
========================================================================== */
html {
box-sizing: border-box;
font-size: var(--font-size-base);
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-family-body);
background-color: var(--color-background);
color: var(--color-text-main);
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ==========================================================================
Layout Components
========================================================================== */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: var(--container-padding);
}
/* Header Styles */
.main-header {
background-color: var(--color-primary);
color: var(--color-surface);
box-shadow: var(--box-shadow);
}
.header-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-lg) 0;
}
/* Profile Section */
.profile-img {
flex: 1 1 250px;
min-width: 220px;
position: relative;
}
.profile-img img {
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.profile-img h1 {
position: absolute;
bottom: var(--spacing-sm);
left: var(--spacing-sm);
color: var(--color-surface);
font-family: var(--font-family-title);
font-size: var(--font-size-h1);
background-color: var(--color-overlay);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius);
}
/* About Section */
.about {
flex: 2 1 350px;
background-color: var(--color-surface);
color: var(--color-text-main);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: var(--spacing-lg);
}
.about h2 {
font-family: var(--font-family-title);
font-size: var(--font-size-h2);
margin-bottom: var(--spacing-sm);
}
/* Social Links */
.social-links {
margin-top: var(--spacing-md);
display: flex;
gap: var(--spacing-md);
}
.social-links a {
color: var(--color-primary);
font-size: 1.7rem;
transition: color var(--transition-base);
}
.social-links a:hover,
.social-links a:focus {
color: var(--color-secondary);
outline: none;
}
/* Projects Section */
.work h2 {
font-family: var(--font-family-title);
font-size: var(--font-size-h2);
margin-bottom: var(--spacing-lg);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--spacing-lg);
}
.project-card {
background-color: var(--color-surface);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 320px;
transition: transform var(--transition-smooth),
box-shadow var(--transition-smooth);
}
.project-card:hover,
.project-card:focus-within {
transform: translateY(-6px) scale(1.02);
box-shadow: var(--box-shadow-hover);
z-index: 2;
}
.project-img {
background-color: var(--project-color, #eee);
color: var(--color-surface);
font-size: var(--font-size-h3);
display: flex;
align-items: center;
justify-content: center;
height: 140px;
font-family: var(--font-family-title);
text-align: center;
}
.project-info {
padding: var(--spacing-md);
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.project-info h3 {
font-size: var(--font-size-h3);
margin-bottom: var(--spacing-xs);
}
.project-info p {
color: var(--color-text-secondary);
font-size: var(--font-size-body);
margin-bottom: var(--spacing-sm);
}
.project-links {
display: flex;
gap: var(--spacing-sm);
}
.project-links a {
color: var(--color-primary);
font-size: 1.3rem;
transition: color var(--transition-base);
}
.project-links a:hover,
.project-links a:focus {
color: var(--color-secondary);
outline: none;
}
/* Contact Section */
.contact-section {
background-color: var(--color-primary);
color: var(--color-surface);
}
.contact-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-lg) 0;
}
.contact-info {
flex: 1 1 300px;
}
.contact-info h2 {
font-family: var(--font-family-title);
font-size: var(--font-size-h2);
margin-bottom: var(--spacing-sm);
}
.contact-info address {
font-style: normal;
margin: var(--spacing-sm) 0;
}
.contact-info a {
color: var(--color-surface);
text-decoration: none;
transition: opacity var(--transition-base);
}
.contact-info a:hover,
.contact-info a:focus {
opacity: 0.8;
outline: none;
}
.contact-img {
flex: 1 1 300px;
min-width: 220px;
}
.contact-img img {
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
/* Footer */
.footer {
background-color: var(--color-surface);
color: var(--color-text-secondary);
text-align: center;
padding: var(--spacing-md) 0 var(--spacing-sm);
font-size: var(--font-size-small);
border-top: 1px solid var(--color-border);
}
/* ==========================================================================
Utility Classes
========================================================================== */
.icon {
width: 1.2em;
height: 1.2em;
vertical-align: middle;
margin-right: 0.2em;
}
/* ==========================================================================
Media Queries
========================================================================== */
@media (max-width: 900px) {
.header-flex,
.contact-flex {
flex-direction: column;
text-align: center;
}
.profile-img h1 {
position: static;
background: none;
color: var(--color-text-main);
padding: var(--spacing-xs) 0;
}
.social-links {
justify-content: center;
}
}
@media (max-width: 600px) {
.container {
padding: var(--spacing-sm);
}
.about,
.contact-info {
padding: var(--spacing-md);
}
.projects-grid {
grid-template-columns: 1fr;
}
.footer {
padding: var(--spacing-sm) 0;
}
}
/* ==========================================================================
Print Styles
========================================================================== */
@media print {
.main-header,
.contact-section {
background: none;
color: var(--color-text-main);
}
.profile-img h1 {
position: static;
background: none;
color: var(--color-text-main);
}
.project-card:hover {
transform: none;
box-shadow: var(--box-shadow);
}
.social-links a,
.project-links a {
color: var(--color-text-main);
}
.contact-img {
display: none;
}
}
const CONFIG = {
projects: [
{
title: "Sign-up Form ",
description:
"A brief description of the Sign up Form . Highlight key features and technologies used.",
image:
"https://plus.unsplash.com/premium_photo-1726754461023-3a40e4fa9cda?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8U2lnbiUyMHVwJTIwRm9ybSUyMHBhZ2V8ZW58MHx8MHx8fDA%3D",
color: "#b23b2e",
github: "https://codepen.io/mubarak-mohamed/full/pvJJrOM",
demo: "https://codepen.io/mubarak-mohamed/full/pvJJrOM"
},
{
title: "Rock Paper Scissors",
description:
"Description of the second project. Explain the problem it solves and your role.",
image:
"https://images.unsplash.com/photo-1618214839021-3fbe98a597bc?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Um9jayUyMFBhcGVyJTIwU2Npc3NvcnN8ZW58MHx8MHx8fDA%3D",
color: "#8d7fc7",
github: "https://codepen.io/mubarak-mohamed/pen/NPqqvbL?editors=1100",
demo: "https://codepen.io/mubarak-mohamed/full/NPqqvbL"
},
{
title: "Fornt-End ",
description:
"Description of A future worth getting excited about . Explain the problem it solves and your role.",
image:
"https://pi.tedcdn.com/r/s3.amazonaws.com/talkstar-photos/uploads/90787ae2-7599-4fb8-8298-e04cb473b9bf/ElonMuskExtendedInterview_2022-embed.jpg?cb=20160511&quality=63&u=&w=512",
color: "#8d7fc7",
github: "https://000201225.codepen.website/",
demo: "https://000201225.codepen.website/"
},
{
title: "Build a Drum Machine",
description:
"Description of the Build a Drum Machine project. Explain the problem it solves and your role.",
image:
"https://plus.unsplash.com/premium_photo-1661825551641-a2fdfc8afdc1?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8QnVpbGQlMjBhJTIwRHJ1bSUyME1hY2hpbmV8ZW58MHx8MHx8fDA%3D",
color: "#8d7fc7",
github: "https://codepen.io/mubarak-mohamed/pen/dPoyJYV",
demo: "https://codepen.io/mubarak-mohamed/full/dPoyJYV"
},
{
title: "Decimal to Binary Converter",
description:
"Description of the Build Decimal to Binary Converter t. Explain the problem it solves and your role.",
image:
"https://images.unsplash.com/photo-1701099153587-6f28b448ff0e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8QnVpbGQlMjBEZWNpbWFsJTIwdG8lMjBCaW5hcnklMjBDb252ZXJ0ZXJ8ZW58MHx8MHx8fDA%3D",
color: "#8d7fc7",
github: "https://codepen.io/mubarak-mohamed/pen/vEOEYRg",
demo: "https://codepen.io/mubarak-mohamed/full/vEOEYRg"
},
{
title: "Build a Simon Game",
description:
"Description of the Build a Simon Game project. Explain the problem it solves and your role.",
image:
"https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=3280&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
color: "#8d7fc7",
github: "https://codepen.io/mubarak-mohamed/full/abGNpBq",
demo: "https://codepen.io/mubarak-mohamed/full/abGNpBq"
}
// Add more projects as needed
],
smoothScroll: {
behavior: "smooth",
block: "start"
}
};
/**
* Utility Functions
*/
const utils = {
/**
* Safely query selector with error handling
* @param {string} selector - CSS selector
* @param {string} context - Context element (defaults to document)
* @returns {Element|null} - Found element or null
*/
querySelector(selector, context = document) {
try {
const element = context.querySelector(selector);
if (!element) {
console.warn(`Element not found: ${selector}`);
return null;
}
return element;
} catch (error) {
console.error(`Error querying selector ${selector}:`, error);
return null;
}
},
/**
* Safely query all elements with error handling
* @param {string} selector - CSS selector
* @param {string} context - Context element (defaults to document)
* @returns {NodeList|[]} - Found elements or empty array
*/
querySelectorAll(selector, context = document) {
try {
return context.querySelectorAll(selector);
} catch (error) {
console.error(`Error querying selector ${selector}:`, error);
return [];
}
},
/**
* Create element with attributes and content
* @param {string} tag - HTML tag name
* @param {Object} attributes - Element attributes
* @param {string|Node} content - Element content
* @returns {Element} - Created element
*/
createElement(tag, attributes = {}, content = "") {
const element = document.createElement(tag);
Object.entries(attributes).forEach(([key, value]) => {
if (key === "class") {
element.className = value;
} else {
element.setAttribute(key, value);
}
});
if (content) {
element.innerHTML = content;
}
return element;
}
};
/**
* Project Card Management
*/
const projectManager = {
/**
* Initialize project cards
*/
init() {
const template = utils.querySelector("#project-card-template");
const container = utils.querySelector(".projects-grid");
if (!template || !container) {
console.error("Required elements for project cards not found");
return;
}
CONFIG.projects.forEach((project) => {
const card = this.createProjectCard(project, template);
if (card) {
container.appendChild(card);
}
});
},
/**
* Create a project card from template
* @param {Object} project - Project data
* @param {Element} template - Template element
* @returns {Element|null} - Created card or null
*/
createProjectCard(project, template) {
try {
const card = template.content.cloneNode(true);
const article = card.querySelector("article");
if (!article) {
throw new Error("Project card template structure invalid");
}
// Set project color
article.style.setProperty("--project-color-value", project.color);
// Set project image
const img = card.querySelector(".project-img img");
if (img) {
img.src = project.image;
img.alt = `Screenshot of ${project.title}`;
}
// Set project info
const title = card.querySelector("h3");
const description = card.querySelector("p");
if (title) title.textContent = project.title;
if (description) description.textContent = project.description;
// Set project links
const githubLink = card.querySelector('a[aria-label="View on GitHub"]');
const demoLink = card.querySelector('a[aria-label="View live demo"]');
if (githubLink) githubLink.href = project.github;
if (demoLink) demoLink.href = project.demo;
return article;
} catch (error) {
console.error("Error creating project card:", error);
return null;
}
}
};
/**
* Smooth Scroll Management
*/
const scrollManager = {
/**
* Initialize smooth scrolling
*/
init() {
const anchors = utils.querySelectorAll('a[href^="#"]');
anchors.forEach((anchor) => {
anchor.addEventListener("click", this.handleSmoothScroll);
});
},
/**
* Handle smooth scroll click event
* @param {Event} event - Click event
*/
handleSmoothScroll(event) {
const href = this.getAttribute("href");
if (!href || href === "#") return;
const target = utils.querySelector(href);
if (!target) return;
event.preventDefault();
target.scrollIntoView(CONFIG.smoothScroll);
}
};
/**
* Initialize all features when DOM is ready
*/
document.addEventListener("DOMContentLoaded", () => {
try {
projectManager.init();
scrollManager.init();
} catch (error) {
console.error("Error initializing portfolio features:", error);
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.