<body class="light">
<header>
<h1>Welcome to My Personal Website</h1>
<button onclick="changeTheme()" class="theme-toggle">
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
<circle cx="8" cy="8" r="7.25" stroke="currentColor" stroke-width="1.5"/>
<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<circle cx="8" cy="8" r="7.25" fill="currentColor" stroke="currentColor" stroke-width="1.5"/>
</mask>
<g mask="url(#a)">
<path fill="currentColor" d="M0 0h8v16H0z"/>
</g>
</svg>
</button>
</header>
<div class="main-content">
<div class="nav-wrapper">
<nav>
<a href="#about">About Me</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
</div>
<article>
<section id="about">
<h2>About Me</h2>
<p>
I am a software engineer with a passion for web development. I am proficient in HTML, CSS, JavaScript.
I also have experience with database management and data analysis.
I am a quick learner and always eager to learn new technologies and techniques.
I am excited to work on projects that can make a positive impact on society.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<h3>Projects</h3>
<a href="https://github.com/m-sarabi/rain-char">rain-char</a>:
A lightweight JavaScript library for creating
a Matrix-style falling
character effect.
<h3>Art</h3>
<p>I enjoy creating art and I have made some digital artworks.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can reach me through my social media profiles:</p>
<ul>
<li><a href="https://github.com/m-sarabi">GitHub</a></li>
<li><a href="https://x.com/_msarabi">Twitter</a></li>
<li><a href="https://t.me/MSarabi">Telegram</a></li>
</ul>
</section>
</article>
</div>
<footer>
<p>© 2024 <a href="https://m-sarabi.ir">Mohammad Sarabi.</a> All rights reserved.</p>
</footer>
</body>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body.dark {
--body-bg: #121212;
--primary-text: #e0e0e0;
--header-footer-bg: #181818;
--header-footer-text: #ffffff;
--section-bg: #1f1f1f;
--secondary-text: #1e90ff;
--shadow: rgba(0, 0, 0, 0.2);
}
body.light {
--body-bg: #f4f4f4;
--primary-text: #333333;
--header-footer-bg: #333333;
--header-footer-text: #ffffff;
--section-bg: #ffffff;
--secondary-text: #006baf;
--shadow: rgba(0, 0, 0, 0.1);
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: var(--body-bg);
color: var(--primary-text);
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
background: var(--header-footer-bg);
color: var(--header-footer-text);
box-shadow: 0 0 10px var(--shadow);
text-align: center;
z-index: 2;
}
header {
padding: 20px 0;
}
.main-content {
display: flex;
flex: 1;
position: relative;
}
.nav-wrapper {
position: absolute;
height: 100%;
}
nav {
width: 130px;
background: var(--section-bg); /* Using a CSS variable */
padding: 20px;
box-shadow: 0 0 10px var(--shadow);
position: sticky;
top: 20px;
left: 20px;
height: fit-content;
z-index: 1;
}
nav a {
display: block;
color: var(--primary-text);
text-decoration: none;
margin: 10px 0;
font-weight: bold;
}
nav a:hover {
color: var(--secondary-text);
}
article {
max-width: 100%;
margin-right: 10%;
margin-left: 140px;
padding: 20px;
background: var(--section-bg);
box-shadow: 0 0 10px var(--shadow);
flex: 1;
}
button.theme-toggle {
background: none;
color: var(--header-footer-text);
border: none;
cursor: pointer;
width: 40px;
height: 40px;
position: absolute;
top: 20px;
right: 20px;
}
section {
margin-bottom: 20px;
}
section h2 {
margin-bottom: 10px;
color: var(--secondary-text);
}
section p {
margin-bottom: 10px;
}
section ul {
margin-left: 20px;
}
section a {
color: var(--secondary-text);
text-decoration: none;
}
section a:hover {
text-decoration: underline;
}
footer {
padding: 10px 0;
margin-top: 20px;
}
footer a {
color: var(--header-footer-text);
}function changeTheme() {
if (document.body.classList.contains('light')) {
document.body.classList.remove('light');
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
document.body.classList.add('light');
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.