Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history 
restrecture
  • Loading branch information
@magoimaxwel
magoimaxwel authored Nov 21, 2024
1 parent f4f5a80 commit a30cd93
Showing 1 changed file with 99 additions and 82 deletions.
181 changes: 99 additions & 82 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,17 @@
}

header {
background-color: #000;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
width: 100%;
z-index: 100;
}

header h1 {
Expand Down Expand Up @@ -77,19 +81,15 @@
}

.hero {
height: calc(100vh - 80px); /* Full viewport height minus the header height */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
position: relative;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692');
background-size: 100% 100%; /* Full width and height */
background-size: cover;
background-position: center;
color: #fff;
width: 100%;
overflow: hidden;
z-index: 1;
}

.hero::before {
Expand All @@ -100,14 +100,25 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
z-index: 1;
z-index: 2;
}

.hero-content {
.content-wrapper {
position: relative;
z-index: 2;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
text-align: center;
padding: 0 2rem;
}

.hero-content {
max-width: 800px;
margin-left: 2rem; /* Ensures content is positioned similarly to original design */
text-align: center;
}

.hero h1 {
Expand All @@ -119,7 +130,6 @@
.hero h2 {
font-size: 2rem;
font-weight: 500;
max-width: 800px;
margin-bottom: 2rem;
line-height: 1.5;
}
Expand All @@ -129,6 +139,12 @@
color: #fff;
}

.sections-container {
position: relative;
z-index: 10;
margin-top: 100vh;
background-color: var(--background-color);
}

.section {
background-color: var(--background-color);
Expand Down Expand Up @@ -171,10 +187,6 @@

/* Responsive Design */
@media (max-width: 768px) {
.hero {
padding: 1rem;
}

.hero h1 {
font-size: 2.5rem;
}
Expand Down Expand Up @@ -215,72 +227,77 @@ <h1>Magoi Maxwel</h1>
</header>

<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>Magoi Maxwel</h1>
<h2>Specializing in Industrial Automation, IIoT, SCADA Systems, and XR Solutions</h2>
<p>Come and see what I'm currently working on ⟶</p>
</div>
</section>

<!-- Professional Summary -->
<section class="section">
<h3>Professional Summary</h3>
<p>I am a passionate engineer and developer with a BSc in Mechatronic Engineering. I specialize in industrial automation, AR/VR solutions, and advanced digital tools for modern manufacturing and industrial training.</p>
</section>

<!-- Core Expertise -->
<section class="section">
<h3>Core Expertise</h3>
<div class="skills-grid">
<div class="skill-card">
<h4>Industrial Automation</h4>
<p>Proficient in Siemens, Mitsubishi, Schneider, and Allen-Bradley systems.</p>
</div>
<div class="skill-card">
<h4>IIoT & SCADA Development</h4>
<p>Pioneering customizable SCADA systems with minimal configuration.</p>
</div>
<div class="skill-card">
<h4>XR Development</h4>
<p>Developing VR/AR applications for industrial training using Unity and Blender.</p>
</div>
<div class="skill-card">
<h4>Automotive Innovation</h4>
<p>ADAS systems and self-driving capabilities development.</p>
<div class="hero">
<div class="content-wrapper">
<div class="hero-content">
<h1>Magoi Maxwel</h1>
<h2>Specializing in Industrial Automation, IIoT, SCADA Systems, and XR Solutions</h2>
<p>Come and see what I'm currently working on ⟶</p>
</div>
</div>
</section>

<!-- Portfolio Highlights -->
<section class="section">
<h3>Portfolio Highlights</h3>
<div class="portfolio-grid">
<div class="portfolio-item">
<h4>VR Training System</h4>
<p>Immersive virtual reality tool for industrial automation scenarios.</p>
</div>

<!-- Sections Container -->
<div class="sections-container">
<!-- Professional Summary -->
<section class="section">
<h3>Professional Summary</h3>
<p>I am a passionate engineer and developer with a BSc in Mechatronic Engineering. I specialize in industrial automation, AR/VR solutions, and advanced digital tools for modern manufacturing and industrial training.</p>
</section>

<!-- Core Expertise -->
<section class="section">
<h3>Core Expertise</h3>
<div class="skills-grid">
<div class="skill-card">
<h4>Industrial Automation</h4>
<p>Proficient in Siemens, Mitsubishi, Schneider, and Allen-Bradley systems.</p>
</div>
<div class="skill-card">
<h4>IIoT & SCADA Development</h4>
<p>Pioneering customizable SCADA systems with minimal configuration.</p>
</div>
<div class="skill-card">
<h4>XR Development</h4>
<p>Developing VR/AR applications for industrial training using Unity and Blender.</p>
</div>
<div class="skill-card">
<h4>Automotive Innovation</h4>
<p>ADAS systems and self-driving capabilities development.</p>
</div>
</div>
<div class="portfolio-item">
<h4>ADAS Prototype</h4>
<p>Open-source ADAS system with forward collision warning.</p>
</section>

<!-- Portfolio Highlights -->
<section class="section">
<h3>Portfolio Highlights</h3>
<div class="portfolio-grid">
<div class="portfolio-item">
<h4>VR Training System</h4>
<p>Immersive virtual reality tool for industrial automation scenarios.</p>
</div>
<div class="portfolio-item">
<h4>ADAS Prototype</h4>
<p>Open-source ADAS system with forward collision warning.</p>
</div>
<div class="portfolio-item">
<h4>SCADA Platform</h4>
<p>Modular SCADA platform for rapid deployment.</p>
</div>
</div>
<div class="portfolio-item">
<h4>SCADA Platform</h4>
<p>Modular SCADA platform for rapid deployment.</p>
</section>

<!-- Get in Touch -->
<section class="section">
<h3>Get in Touch</h3>
<div class="contact-links">
<a href="#" class="contact-link"><i class="fas fa-globe"></i> Website</a>
<a href="#" class="contact-link"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="#" class="contact-link"><i class="fas fa-envelope"></i> Email</a>
<a href="#" class="contact-link"><i class="fab fa-github"></i> GitHub</a>
</div>
</div>
</section>

<!-- Get in Touch -->
<section class="section">
<h3>Get in Touch</h3>
<div class="contact-links">
<a href="#" class="contact-link"><i class="fas fa-globe"></i> Website</a>
<a href="#" class="contact-link"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="#" class="contact-link"><i class="fas fa-envelope"></i> Email</a>
<a href="#" class="contact-link"><i class="fab fa-github"></i> GitHub</a>
</div>
</section>
</section>
</div>
</div>
</body>
</html>

0 comments on commit a30cd93

Please sign in to comment.