lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
153 lines (132 loc) • 7.84 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Hero</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.2.0/src/lightswind.css">
</head>
<body class="bg-white dark:bg-black text-gray-800 dark:text-gray-200">
<!-- Hero Section -->
<div class="bg-white dark:bg-black text-black dark:text-white relative flex items-start justify-center
h-screen font-primarylw px-5 py-10 md:px-20 md:py-22">
<div class="grid grid-cols-1 lg:grid-cols-2 items-center gap-10 md:px-10">
<!-- Left Section -->
<div class="text-center md:text-left">
<h1 class="text-2xl lg:text-5xl font-bold text-black dark:text-white mb-4">
<span class="text-primarylw">Hi,</span> I'm a Full Stack Developer
</h1>
<p class="text-xs md:text-sm lg:md:text-lg text-black dark:text-white mb-8">
I specialize in building scalable and performant web applications. With a deep understanding of both
front-end and back-end technologies, I create seamless user experiences and high-quality solutions
for businesses. Let's turn your ideas into reality.
</p>
<div class="flex justify-center md:justify-start gap-6">
<!-- Follow Button -->
<button class="flex items-center justify-center gap-2 px-4 text-xs md:text-lg px-6 py-3 rounded-2xl bg-primarylw text-white
font-semibold hover:bg-primarylw-2 transition-all duration-300 transform hover:scale-105">
Follow
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-5 w-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
</svg>
</button>
<!-- Resume Button -->
<button class="flex items-center justify-center gap-2 text-xs md:text-lg px-6 py-3 rounded-2xl bg-white text-primarylw hover:text-white
font-semibold hover:bg-darklw transition-all duration-300 transform hover:scale-105">
Resume
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-5 w-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
</div>
</div>
<!-- Right Section: Profile Image -->
<div class="flex justify-center lg:justify-end">
<img src="https://cdn.buymeacoffee.com/uploads/profile_pictures/2023/11/PIXxBAJGpUj1wI7F.png@300w_0e.webp"
alt="Profile"
class="rounded-full w-28 h-28 md:w-64 md:h-64 lg:w-96 lg:h-96 shadow-lg transform hover:scale-105 transition-all duration-300">
</div>
</div>
<!-- Skills Section -->
<div class="absolute bottom-10 w-full text-center">
<h2 class="text-xl text-black dark:text-white font-semibold mb-4">Technologies I work with:</h2>
<div class="flex flex-wrap justify-center gap-6">
<span class="bg-white text-black rounded-full py-2 px-6 shadow-md font-medium text-sm">React</span>
<span class="bg-white text-black rounded-full py-2 px-6 shadow-md font-medium text-sm">Node.js</span>
<span class="bg-white text-black rounded-full py-2 px-6 shadow-md font-medium text-sm">Tailwind
CSS</span>
<span class="bg-white text-black rounded-full py-2 px-6 shadow-md font-medium text-sm">GraphQL</span>
</div>
</div>
</div>
<!-- Theme Toggle Button -->
<button id="theme-toggle"
class="fixed z-50 top-2 left-2 text-gray-800 dark:text-gray-200 dark:text-white bg-gray-500/30 dark:bg-gray-900/70 p-2 rounded-full shadow-md hover:bg-gray-700">
<!-- Sun Icon for Light Mode -->
<svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
<!-- Moon Icon for Dark Mode -->
<svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
</button>
<script src="https://cdn.jsdelivr.net/npm/lightwind@3.1.0/src/lightswind.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class', // Enable class-based dark mode
theme: {
extend: {
colors: {},
},
},
};
const setInitialTheme = () => {
const currentTheme = localStorage.getItem('iframetheme') || 'dark';
if (currentTheme === 'dark') {
document.body.classList.add('dark');
document.getElementById('sun-icon').style.opacity = '0';
document.getElementById('moon-icon').style.opacity = '1';
} else {
document.body.classList.remove('dark');
document.getElementById('sun-icon').style.opacity = '1';
document.getElementById('moon-icon').style.opacity = '0';
}
};
setInitialTheme();
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
const currentTheme = localStorage.getItem('iframetheme') || 'dark';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem('iframetheme', newTheme);
document.body.classList.toggle('dark', newTheme === 'dark');
if (newTheme === 'dark') {
document.getElementById('moon-icon').style.opacity = '0';
document.getElementById('sun-icon').style.opacity = '1';
} else {
document.getElementById('moon-icon').style.opacity = '1';
document.getElementById('sun-icon').style.opacity = '0';
}
const iframe = document.querySelector('iframe');
if (iframe) {
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument || iframeWindow.document;
if (iframeDocument) {
iframeDocument.addEventListener('DOMContentLoaded', () => {
iframeDocument.body.classList.toggle('dark', newTheme === 'dark');
});
}
}
});
</script>
</body>
</html>