<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Master Programmer Portfolio</title>
<style>
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
/* Custom Properties for Theming */
:root {
--bg-color: #f4f7fa;
--text-color: #1a1a1a;
--card-bg: #ffffff;
--accent-color: #007bff;
--secondary-color: #ff6b6b;
--shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
--transition: all 0.3s ease;
--gradient: linear-gradient(
135deg,
#007bff,
#00ddeb,
#ff6b6b,
#ffd700,
#32cd32,
#9400d3,
#ff4500,
#00ced1,
#ff1493,
#00ff7f
);
}
/* Dark Mode */
body.dark-mode {
--bg-color: #121212;
--text-color: #e0e0e0;
--card-bg: #1e1e1e;
--accent-color: #00ddeb;
--secondary-color: #ff8787;
--shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
/* Body Styling */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-color);
color: var(--text-color);
line-height: 1.7;
overflow-x: hidden;
position: relative;
transform-style: preserve-3d;
}
/* Background Animation with Multiple Layers */
body::before,
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient);
opacity: 0.1;
z-index: -1;
animation: gradientShift 1s ease infinite, rotate3D 2s linear infinite;
filter: blur(5px) contrast(1.5);
}
body::after {
animation-delay: 0.5s;
opacity: 0.05;
transform: rotate(45deg);
}
/* Header Styling */
header {
background: var(--gradient);
color: white;
text-align: center;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
display: grid;
grid-template: repeat(10, 1fr) / repeat(10, 1fr);
transform-style: preserve-3d;
}
header > * {
grid-area: 1 / 1 / -1 / -1;
animation: pulse3D 1s ease infinite, neonGlow 0.5s ease-in-out infinite alternate;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
header::before,
header::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
animation: spin 2s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
header h1 {
font-size: 3.5rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
transform: translateZ(20px);
}
header p {
font-size: 1.4rem;
opacity: 0.9;
margin-top: 0.5rem;
transform: translateZ(10px);
}
/* Dark/Light Mode Toggle */
.toggle-mode {
position: fixed;
top: 20px;
right: 20px;
background: var(--accent-color);
border: none;
padding: 12px;
border-radius: 50%;
cursor: pointer;
box-shadow: var(--shadow);
z-index: 1000;
transition: var(--transition);
animation: bounce 0.5s ease infinite;
}
.toggle-mode:hover {
transform: scale(1.1) rotate(360deg);
background: var(--secondary-color);
}
.toggle-mode img {
width: 24px;
height: 24px;
filter: drop-shadow(0 0 5px white);
}
/* Container with Nested Grids */
.container {
max-width: 1000px;
margin: 3rem auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(50, 1fr);
gap: 1px;
transform-style: preserve-3d;
}
.container > * {
grid-column: 1 / -1;
}
/* About Section */
.about {
background: var(--card-bg);
padding: 3rem;
border-radius: 20px;
box-shadow: var(--shadow);
margin-bottom: 3rem;
position: relative;
overflow: hidden;
transform: perspective(1000px) rotateY(0deg);
transition: transform 0.5s ease;
display: flex;
flex-wrap: wrap;
gap: 1px;
animation: shimmer 1s linear infinite;
}
.about:hover {
transform: perspective(1000px) rotateY(5deg) translateZ(20px);
}
.about::before,
.about::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient);
opacity: 0.1;
animation: slide 1s linear infinite;
clip-path: circle(50% at 50% 50%);
}
.about h2 {
font-size: 2.5rem;
color: var(--accent-color);
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
transform: translateZ(15px);
}
.about h2::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
animation: pulseLine 0.5s ease infinite;
}
.about:hover h2::after {
transform: scaleX(1);
}
.about p {
font-size: 1.1rem;
margin-bottom: 1rem;
transform: translateZ(10px);
animation: fadeInUp 0.5s ease-out infinite;
}
/* Skills Section */
.skills {
background: var(--card-bg);
padding: 3rem;
border-radius: 20px;
box-shadow: var(--shadow);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
position: relative;
transform-style: preserve-3d;
}
.skills h2 {
grid-column: 1 / -1;
font-size: 2.5rem;
color: var(--accent-color);
margin-bottom: 1.5rem;
transform: translateZ(15px);
}
.skill-item {
background: var(--gradient);
color: white;
padding: 1rem;
border-radius: 15px;
text-align: center;
font-size: 1rem;
font-weight: 600;
position: relative;
overflow: hidden;
transition: var(--transition);
transform: translateY(0) translateZ(10px);
animation: rotateSkill 1s linear infinite;
filter: blur(0.5px) contrast(1.2);
}
.skill-item:hover {
transform: translateY(-10px) translateZ(20px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.skill-item::before,
.skill-item::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
animation: sweep 0.5s ease infinite;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* Projects Section */
.projects {
background: var(--card-bg);
padding: 3rem;
border-radius: 20px;
box-shadow: var(--shadow);
margin-bottom: 3rem;
transform-style: preserve-3d;
}
.projects h2 {
font-size: 2.5rem;
color: var(--accent-color);
margin-bottom: 2rem;
transform: translateZ(15px);
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.project-card {
background: var(--gradient);
border-radius: 15px;
overflow: hidden;
position: relative;
transform: perspective(1000px) rotateX(0deg);
transition: transform 0.5s ease, box-shadow 0.3s ease;
animation: cardWobble 1s ease infinite;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}
.project-card:hover {
transform: perspective(1000px) rotateX(10deg) translateZ(20px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.project-card img {
width: 100%;
height: 150px;
object-fit: cover;
filter: brightness(0.8) blur(1px);
transition: filter 0.3s ease;
animation: imagePulse 0.5s ease infinite;
}
.project-card:hover img {
filter: brightness(1) blur(0);
}
.project-info {
padding: 1.5rem;
color: white;
text-align: center;
transform: translateZ(10px);
}
.project-info h3 {
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
.project-info p {
font-size: 0.9rem;
opacity: 0.9;
}
/* Footer */
footer {
background: var(--gradient);
color: white;
text-align: center;
padding: 2rem;
box-shadow: var(--shadow);
position: relative;
transform-style: preserve-3d;
animation: footerGlow 1s ease infinite;
}
footer p {
font-size: 1.1rem;
transform: translateZ(10px);
}
/* Micro-Element Container */
.micro-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999;
}
.micro-element {
position: absolute;
width: 5px;
height: 5px;
background: var(--accent-color);
border-radius: 50%;
animation: float 2s ease infinite;
filter: blur(2px);
transform: translateZ(5px);
}
/* Animations */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes neonGlow {
0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px var(--accent-color); }
100% { text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px var(--accent-color); }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeInUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes pulse3D {
0% { transform: translateZ(0); }
50% { transform: translateZ(20px); }
100% { transform: translateZ(0); }
}
@keyframes rotate3D {
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
@keyframes slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes pulseLine {
0% { transform: scaleX(1); }
50% { transform: scaleX(1.2); }
100% { transform: scaleX(1); }
}
@keyframes sweep {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes rotateSkill {
0% { transform: rotate(0deg) translateZ(10px); }
100% { transform: rotate(360deg) translateZ(10px); }
}
@keyframes cardWobble {
0% { transform: perspective(1000px) rotateX(0deg); }
50% { transform: perspective(1000px) rotateX(5deg); }
100% { transform: perspective(1000px) rotateX(0deg); }
}
@keyframes imagePulse {
0% { filter: brightness(0.8) blur(1px); }
50% { filter: brightness(0.9) blur(0.5px); }
100% { filter: brightness(0.8) blur(1px); }
}
@keyframes footerGlow {
0% { box-shadow: 0 0 20px var(--accent-color); }
50% { box-shadow: 0 0 40px var(--accent-color); }
100% { box-shadow: 0 0 20px var(--accent-color); }
}
@keyframes float {
0% { transform: translateY(0) translateZ(5px); }
50% { transform: translateY(-20px) translateZ(5px); }
100% { transform: translateY(0) translateZ(5px); }
}
/* Responsive Design */
@media (max-width: 768px) {
header h1 { font-size: 2.5rem; }
header p { font-size: 1.2rem; }
.about, .skills, .projects { padding: 2rem; }
.project-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.toggle-mode { top: 10px; right: 10px; padding: 8px; }
header { padding: 2rem 1rem; }
.container { padding: 0 1rem; }
}
</style>
</head>
<body>
<!-- Dark/Light Mode Toggle -->
<button class="toggle-mode" onclick="toggleMode()">
<img id="toggle-icon" src="https://img.icons8.com/ios-filled/50/ffffff/sun.png" alt="Toggle Mode">
</button>
<!-- Micro-Element Container -->
<div class="micro-elements" id="micro-elements"></div>
<!-- Header -->
<header>
<h1>Master Programmer</h1>
<p>Unleashing Code, Crafting Innovation</p>
</header>
<!-- Main Content -->
<div class="container">
<!-- About Section -->
<section class="about">
<h2>About Me</h2>
<p>Hi, I'm [Your Name], a passionate programmer with a flair for creating cutting-edge solutions. My expertise spans multiple domains, from web development to algorithmic mastery, driven by a relentless pursuit of excellence.</p>
<p>I thrive on challenges, writing clean, efficient code that powers innovative applications. Let's transform ideas into reality!</p>
<div id="nested-about"></div>
</section>
<!-- Skills Section -->
<section class="skills">
<h2>My Skills</h2>
<div class="skill-item">HTML5 & CSS3</div>
<div class="skill-item">JavaScript (ES6+)</div>
<div class="skill-item">Python</div>
<div class="skill-item">Java</div>
<div class="skill-item">SQL & NoSQL</div>
<div class="skill-item">React.js</div>
<div class="skill-item">Node.js</div>
<div class="skill-item">Git & GitHub</div>
<div class="skill-item">Algorithms</div>
<div class="skill-item">APIs</div>
<div id="nested-skills"></div>
</section>
<!-- Projects Section -->
<section class="projects">
<h2>My Projects</h2>
<div class="project-grid">
<div class="project-card">
<img src="https://via.placeholder.com/300x150?text=Project+1" alt="Project 1">
<div class="project-info">
<h3>Web App</h3>
<p>A dynamic web application built with React and Node.js.</p>
</div>
</div>
<div class="project-card">
<img src="https://via.placeholder.com/300x150?text=Project+2" alt="Project 2">
<div class="project-info">
<h3>Algorithm Visualizer</h3>
<p>An interactive tool to visualize sorting algorithms using JavaScript.</p>
</div>
</div>
<div class="project-card">
<img src="https://via.placeholder.com/300x150?text=Project+3" alt="Project 3">
<div class="project-info">
<h3>Automation Script</h3>
<p>A Python script for automating repetitive tasks.</p>
</div>
</div>
<div id="nested-projects"></div>
</div>
</section>
</div>
<!-- Footer -->
<footer>
<p>© 2025 [Your Name]. Crafted with Code & Creativity.</p>
<div id="nested-footer"></div>
</footer>
<!-- JavaScript for Dark/Light Mode and Heavy Computations -->
<script>
function toggleMode() {
const body = document.body;
const toggleIcon = document.getElementById('toggle-icon');
body.classList.toggle('dark-mode');
toggleIcon.src = body.classList.contains('dark-mode')
? 'https://img.icons8.com/ios-filled/50/ffffff/moon-symbol.png'
: 'https://img.icons8.com/ios-filled/50/ffffff/sun.png';
toggleIcon.alt = body.classList.contains('dark-mode') ? 'Dark Mode' : 'Light Mode';
localStorage.setItem('darkMode', body.classList.contains('dark-mode'));
// Heavy computation on toggle
for (let i = 0; i < 1000000; i++) {
Math.sin(Math.random() * i);
}
}
window.onload = () => {
if (localStorage.getItem('darkMode') === 'true') {
document.body.classList.add('dark-mode');
document.getElementById('toggle-icon').src = 'https://img.icons8.com/ios-filled/50/ffffff/moon-symbol.png';
document.getElementById('toggle-icon').alt = 'Dark Mode';
}
// Generate massive DOM structure
const sections = [
{ id: 'nested-about', count: 1000 },
{ id: 'nested-skills', count: 1000 },
{ id: 'nested-projects', count: 1000 },
{ id: 'nested-footer', count: 1000 }
];
sections.forEach(section => {
const container = document.getElementById(section.id);
for (let i = 0; i < section.count; i++) {
const div = document.createElement('div');
div.style.display = 'grid';
div.style.gridTemplate = '1fr / 1fr';
div.style.transform = `translateZ(${Math.random() * 10}px)`;
div.style.animation = `pulse 0.5s ease infinite`;
for (let j = 0; j < 10; j++) {
const nested = document.createElement('div');
nested.style.background = 'rgba(0, 0, 0, 0.01)';
nested.style.transform = `rotate(${Math.random() * 360}deg)`;
nested.style.animation = `rotate3D 1s linear infinite`;
div.appendChild(nested);
}
container.appendChild(div);
}
});
// Generate micro-elements
const microContainer = document.getElementById('micro-elements');
for (let i = 0; i < 10000; i++) {
const micro = document.createElement('div');
micro.className = 'micro-element';
micro.style.left = `${Math.random() * 100}%`;
micro.style.top = `${Math.random() * 100}%`;
micro.style.animationDelay = `${Math.random() * 2}s`;
microContainer.appendChild(micro);
}
// Attach event listeners to all elements
const allElements = document.querySelectorAll('*');
allElements.forEach(el => {
el.addEventListener('mousemove', () => {
el.style.transform = `translateZ(${Math.random() * 20}px) rotate(${Math.random() * 10}deg)`;
// Heavy computation
let sum = 0;
for (let i = 0; i < 10000; i++) {
sum += Math.cos(i * Math.random());
}
});
el.addEventListener('scroll', () => {
el.style.filter = `blur(${Math.random() * 2}px)`;
});
});
// Real-time style updates
setInterval(() => {
allElements.forEach(el => {
el.style.backgroundPosition = `${Math.random() * 100}% ${Math.random() * 100}%`;
el.style.transform = `translateZ(${Math.random() * 10}px)`;
});
}, 16); // ~60fps
};
// Recursive heavy computation
function computeHeavy() {
let result = 0;
for (let i = 0; i < 100000; i++) {
result += Math.tan(Math.random() * i);
}
requestAnimationFrame(computeHeavy);
}
computeHeavy();
</script>
</body>
</html>