|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>My Professional Journey | Experiences & Insights</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.post-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.reading-progress { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
height: 4px; |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
z-index: 100; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans antialiased"> |
|
|
|
|
|
<div id="progress" class="reading-progress"></div> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="text-xl font-bold gradient-text">ExperienceLog</a> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#" class="text-gray-700 hover:text-blue-600 transition">Home</a> |
|
|
<a href="#" class="text-gray-700 hover:text-blue-600 transition">Articles</a> |
|
|
<a href="#" class="text-gray-700 hover:text-blue-600 transition">About</a> |
|
|
<a href="#" class="text-gray-700 hover:text-blue-600 transition">Contact</a> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="menu-btn" class="text-gray-500 hover:text-gray-900 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white border-t"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Home</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Articles</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">About</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<header class="bg-gradient-to-r from-blue-50 to-purple-50 py-20"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6"> |
|
|
Sharing My <span class="gradient-text">Professional Journey</span> |
|
|
</h1> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Insights, lessons learned, and experiences from my career path. Join me as I document the challenges, successes, and everything in between. |
|
|
</p> |
|
|
<div class="mt-10"> |
|
|
<a href="#featured" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"> |
|
|
Read Featured Articles |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="featured" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900">Featured Experiences</h2> |
|
|
<p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto"> |
|
|
Selected stories that highlight key moments in my professional development |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="post-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Career growth" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>June 15, 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>8 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Breaking Through the Mid-Career Plateau</h3> |
|
|
<p class="text-gray-600 mb-4">How I navigated the challenging transition from individual contributor to leadership role and the lessons I learned along the way.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> |
|
|
Read more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="post-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Teamwork" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>April 28, 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>6 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Building High-Performance Teams Remotely</h3> |
|
|
<p class="text-gray-600 mb-4">The strategies and tools that helped me foster collaboration and maintain team cohesion in a distributed work environment.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> |
|
|
Read more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="post-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Workplace" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>February 10, 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>10 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Navigating Workplace Politics Without Losing Yourself</h3> |
|
|
<p class="text-gray-600 mb-4">My personal approach to maintaining authenticity while successfully navigating complex organizational dynamics.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> |
|
|
Read more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
|
View All Articles <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900">Recent Experiences</h2> |
|
|
<p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto"> |
|
|
The latest stories from my professional journey |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="post-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>August 5, 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>5 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">The Power of Saying No: Setting Professional Boundaries</h3> |
|
|
<p class="text-gray-600 mb-4">How learning to decline requests strategically helped me focus on high-impact work and improved my work-life balance.</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> |
|
|
Read more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800"> |
|
|
Career Growth |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="post-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>July 22, 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>7 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Mentorship: Both Sides of the Relationship</h3> |
|
|
<p class="text-gray-600 mb-4">Reflections on what I've learned from being both a mentor and mentee, and how these relationships have shaped my career.</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> |
|
|
Read more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800"> |
|
|
Leadership |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="post-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>July 10, 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>9 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Rebounding from Career Setbacks</h3> |
|
|
<p class="text-gray-600 mb-4">The strategies I used to recover from professional disappointments and turn them into growth opportunities.</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> |
|
|
Read more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> |
|
|
Resilience |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="post-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>June 30, 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>6 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Continuous Learning in a Fast-Changing Industry</h3> |
|
|
<p class="text-gray-600 mb-4">My approach to staying relevant and continuously upgrading skills without burning out.</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> |
|
|
Read more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800"> |
|
|
Learning |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center text-white"> |
|
|
<h2 class="text-3xl font-bold mb-6">Join My Professional Journey</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto"> |
|
|
Get the latest experiences and insights delivered directly to your inbox |
|
|
</p> |
|
|
<form class="max-w-md mx-auto"> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300"> |
|
|
<button type="submit" class="px-6 py-3 bg-white text-blue-600 font-medium rounded-md hover:bg-gray-100 transition"> |
|
|
Subscribe |
|
|
</button> |
|
|
</div> |
|
|
<p class="mt-3 text-sm text-blue-100"> |
|
|
I respect your privacy. Unsubscribe at any time. |
|
|
</p> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold gradient-text mb-4">ExperienceLog</h3> |
|
|
<p class="text-gray-400"> |
|
|
Documenting my professional journey, one experience at a time. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Explore</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Articles</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Categories</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Career Growth</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Leadership</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Workplace Skills</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Personal Development</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Connect</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-medium"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 ExperienceLog. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const menuBtn = document.getElementById('menu-btn'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
menuBtn.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const winScroll = document.body.scrollTop || document.documentElement.scrollTop; |
|
|
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; |
|
|
const scrolled = (winScroll / height) * 100; |
|
|
document.getElementById('progress').style.width = scrolled + '%'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=anil1979/anil" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
