<!DOCTYPE html>

<head>

<title>Mr. Muhammad - Professional Profile</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

line-height: 1.6;

color: #2c3e50;

background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

header {

background: linear-gradient(135deg, rgba(30, 60, 114, 0.85) 0%, rgba(42, 82, 152, 0.85) 100%),

url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80');

background-size: cover;

background-position: center;

background-attachment: fixed;

color: white;

padding: 2rem 0;

position: relative;

overflow: hidden;

}

header::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');

opacity: 0.2;

}

.header-content {

position: relative;

z-index: 2;

text-align: center;

}

.profile-image {

width: 150px;

height: 150px;

border-radius: 50%;

margin: 0 auto 1rem;

display: flex;

align-items: center;

justify-content: center;

border: 4px solid rgba(255, 255, 255, 0.8);

transition: transform 0.3s ease;

overflow: hidden;

position: relative;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

}

.profile-image img {

width: 100%;

height: 100%;

object-fit: cover;

border-radius: 50%;

}

.profile-image:hover {

transform: scale(1.05);

}

h1 {

font-size: 2.5rem;

margin-bottom: 0.5rem;

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}

.subtitle {

font-size: 1.2rem;

opacity: 0.9;

margin-bottom: 2rem;

}

.nav-links {

display: flex;

justify-content: center;

gap: 2rem;

flex-wrap: wrap;

}

.nav-link {

background: rgba(255, 255, 255, 0.2);

color: white;

padding: 0.8rem 1.5rem;

text-decoration: none;

border-radius: 25px;

transition: all 0.3s ease;

backdrop-filter: blur(10px);

}

.nav-link:hover {

background: rgba(255, 255, 255, 0.3);

transform: translateY(-2px);

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}

main {

padding: 4rem 0;

}

.section {

background: white;

margin: 2rem 0;

padding: 2.5rem;

border-radius: 15px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.section:hover {

transform: translateY(-5px);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}

.section h2 {

color: #1e3c72;

font-size: 1.8rem;

margin-bottom: 1.5rem;

display: flex;

align-items: center;

gap: 0.5rem;

}

.section h2::before {

content: '';

width: 4px;

height: 30px;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

border-radius: 2px;

}

.skills-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 1.5rem;

margin-top: 2rem;

}

.skill-card {

background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

padding: 1.5rem;

border-radius: 10px;

text-align: center;

transition: transform 0.3s ease;

border: 1px solid #dee2e6;

}

.skill-card:hover {

transform: translateY(-3px);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

.contact-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 1.5rem;

margin-top: 2rem;

}

.contact-item {

background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

color: white;

padding: 1.5rem;

border-radius: 10px;

text-align: center;

text-decoration: none;

transition: transform 0.3s ease;

}

.contact-item:hover {

transform: translateY(-3px);

color: white;

}

footer {

background: #2c3e50;

color: white;

text-align: center;

padding: 2rem 0;

}

@media (max-width: 768px) {

.nav-links {

gap: 1rem;

}

.nav-link {

padding: 0.6rem 1rem;

font-size: 0.9rem;

}

h1 {

font-size: 2rem;

}

.section {

padding: 1.5rem;

}

.animate-fade-in {

animation: fadeIn 0.8s ease-in-out;

}

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

</style>

</head>

<body>

</div>

<h1>Mohammad Bin Hamid Habib</h1>

<p class="subtitle">Professional Profile & Portfolio</p>

<a href="#about" class="nav-link">About</a>

<a href="#experience" class="nav-link">Experience</a>

<a href="#skills" class="nav-link">Skills</a>

<a href="#contact" class="nav-link">Contact</a>

</nav>

</div>

</header>

<h2>About Me</h2>

<p>Welcome to my professional profile. I am an experienced General Manager and business development professional with over 12 years of expertise in construction management, strategic planning, and administrative leadership. My career spans multiple countries including Saudi Arabia, UAE, and the United States, where I've successfully managed operations, developed strategic partnerships, and driven business growth.</p>

<br>

<p>With a strong foundation in financial management, project oversight, and brand marketing, I specialize in transforming business operations through strategic planning and effective project management. My experience ranges from hands-on administrative roles to senior management positions, giving me a comprehensive understanding of business operations at every level.</p>

<br>

<p>I am passionate about business development, networking, and building strategic partnerships that create lasting value. Currently based in Jeddah, Saudi Arabia, I continue to focus on driving operational excellence and business growth in the construction and consulting sectors.</p>

</section>

<h2>Professional Experience</h2>

<h3 style="color: #2a5298; margin-bottom: 0.5rem;">General Manager</h3>

<p style="margin-bottom: 0.5rem; color: #6c757d;"><strong>Red Rocks Contracting</strong></p>

<p style="margin-bottom: 0.5rem; font-size: 0.9rem; color: #6c757d;">Nov 2024 - Present · Jeddah, Saudi Arabia</p>

<p>Leading business development initiatives, administrative operations, and comprehensive project management for a contracting company. Responsible for strategic planning, client relations, and operational oversight to drive business growth and ensure project success.</p>

</div>

<h3 style="color: #2a5298; margin-bottom: 0.5rem;">Career Transition & Relocation</h3>

<p style="margin-bottom: 0.5rem; color: #6c757d;"><strong>Professional Development Period</strong></p>

<p style="margin-bottom: 0.5rem; font-size: 0.9rem; color: #6c757d;">Jul 2022 - Oct 2024 · California, United States</p>

<p>Focused on professional development and strategic career planning during international relocation. Utilized this period to enhance skills in market research, business analysis, and strategic planning while exploring new business opportunities.</p>

</div>

<h3 style="color: #2a5298; margin-bottom: 0.5rem;">Administrative and Financial Manager</h3>

<p style="margin-bottom: 0.5rem; color: #6c757d;"><strong>Sea Rocks Construction LLC</strong></p>

<p style="margin-bottom: 0.5rem; font-size: 0.9rem; color: #6c757d;">Sep 2016 - Jul 2022 · 5 yrs 11 mos · Ras al-Khaimah, UAE</p>

<p>Managed comprehensive financial operations and administrative functions for a construction company. Oversaw budgeting, financial planning, project coordination, and strategic business development initiatives. Successfully streamlined operations and improved financial efficiency.</p>

</div>

<h3 style="color: #2a5298; margin-bottom: 0.5rem;">Administrative Assistant</h3>

<p style="margin-bottom: 0.5rem; color: #6c757d;"><strong>Sea Rocks Construction LLC</strong></p>

<p style="margin-bottom: 0.5rem; font-size: 0.9rem; color: #6c757d;">Oct 2012 - Jul 2016 · 3 yrs 10 mos · Ras al-Khaimah, UAE</p>

<p>Provided comprehensive administrative support and coordination for construction projects. Developed strong organizational systems, managed client communications, and supported project management activities that contributed to operational success.</p>

</div>

<div>

<h3 style="color: #2a5298; margin-bottom: 0.5rem;">3D Animation Teaching Assistant</h3>

<p style="margin-bottom: 0.5rem; color: #6c757d;"><strong>Dubai3dStudio · Part-time</strong></p>

<p style="margin-bottom: 0.5rem; font-size: 0.9rem; color: #6c757d;">Jan 2011 - Jun 2011 · 6 mos · Dubai, UAE</p>

<p>Assisted in teaching 3D animation techniques and software applications. Supported students in developing technical skills and creative problem-solving abilities in digital animation and design.</p>

</div>

</section>

<h2>Skills & Expertise</h2>

<h3 style="color: #1e3c72; margin-bottom: 1rem;">Business Development</h3>

<p>Strategic partnerships, networking, market research, and business consulting with a focus on growth and expansion.</p>

</div>

<h3 style="color: #1e3c72; margin-bottom: 1rem;">Project Management</h3>

<p>Comprehensive project oversight, strategic planning, budgeting, and successful delivery of construction and business projects.</p>

</div>

<h3 style="color: #1e3c72; margin-bottom: 1rem;">Brand Marketing</h3>

<p>Brand consulting, marketing strategy, content strategy, public relations, and comprehensive branding solutions.</p>

</div>

<h3 style="color: #1e3c72; margin-bottom: 1rem;">Financial Management</h3>

<p>Financial planning, budgeting, administrative management, and operational efficiency optimization.</p>

</div>

<h3 style="color: #1e3c72; margin-bottom: 1rem;">Strategic Planning</h3>

<p>Long-term strategic development, market analysis, business planning, and organizational growth strategies.</p>

</div>

<h3 style="color: #1e3c72; margin-bottom: 1rem;">Communication</h3>

<p>Professional communication, interpersonal skills, client relations, and cross-cultural business interactions.</p>

</div>

<h3 style="color: #1e3c72; margin-bottom: 1rem;">Additional Competencies</h3>

<p style="line-height: 1.8; color: #495057;"><strong>Industry Knowledge:</strong> Construction Management, Food Service & Restaurant Industry, Business Development and Consulting, Branding<br>

<strong>Technical Skills:</strong> Research Skills, Content Strategy, Market Research, Graphic Designing<br>

<strong>Leadership:</strong> Team Management, Administrative Leadership, Operational Excellence</p>

</div>

</section>

<h2>Get In Touch</h2>

<p style="margin-bottom: 2rem;">I'm always open to discussing new opportunities, collaborations, or professional inquiries. Feel free to reach out through any of the following channels:</p>

<h3>Email</h3>

<p>contact@MrMuhammad.com</p>

</a>

<h3>Phone</h3>

</a>

<h3>LinkedIn</h3>

<p>Connect with me</p>

</a>

<h3>Location</h3>

<p>Available for remote work</p>

</a>

</div>

</section>

</main>

<p>Professional services and consultations available upon request.</p>

</div>

</footer>

// Smooth scrolling for navigation 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'

});

}

});

// Add animation class to elements when they come into view

const observerOptions = {

threshold: 0.1,

rootMargin: '0px 0px -50px 0px'

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('animate-fade-in');

}

});

}, observerOptions);

document.querySelectorAll('.section').forEach(section => {

observer.observe(section);

});

// Add hover effects to contact items

document.querySelectorAll('.contact-item').forEach(item => {

item.addEventListener('mouseenter', function() {

this.style.background = 'linear-gradient(135deg, #2a5298 0%, #3d5aa1 100%)';

});

item.addEventListener('mouseleave', function() {

this.style.background = 'linear-gradient(135deg, #1e3c72 0%, #2a5298 100%)';

});

</script>

</body>

</html>