Skip to content

Commit

Permalink
Redesign portfolio website with minimal and modern look
Browse files Browse the repository at this point in the history 
- Enhanced SEO with better meta tags and descriptions
- Improved design with clean layout and subtle animations
- Added skill tags and social icons
- Optimized performance with minimal JS and lazy loading
- Removed local profile image in favor of GitHub avatar
  • Loading branch information
@openhands-agent @bkhanale
openhands-agent authored and bkhanale committed Jan 5, 2025
1 parent 3eabc95 commit 9239134
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 17 deletions.
Binary file removed images/profile-photo.png
View file
Binary file not shown.
99 changes: 82 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,97 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bhushan Khanale - Portfolio</title>
<meta name="description" content="Welcome to Bhushan Khanale's personal website. Explore my blog and connect with me on social media.">
<meta property="og:title" content="Bhushan Khanale - Personal Website">
<meta property="og:description" content="Welcome to Bhushan Khanale's personal website. Explore my blog and connect with me on social media.">
<title>Bhushan Khanale - Senior Software Engineer</title>
<meta name="description" content="Senior Software Engineer specializing in Ruby, JavaScript, Python, AWS, and GCP. Passionate about technology and DevOps.">
<meta name="keywords" content="Bhushan Khanale, Software Engineer, Ruby, JavaScript, Python, AWS, GCP, DevOps">
<meta property="og:title" content="Bhushan Khanale - Senior Software Engineer">
<meta property="og:description" content="Senior Software Engineer specializing in Ruby, JavaScript, Python, AWS, and GCP. Passionate about technology and DevOps.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bhushankhanale.com">
<meta property="og:image" content="https://avatars.githubusercontent.com/u/23272598">
<link rel="canonical" href="https://www.bhushankhanale.com">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
primary: '#3B82F6',
}
}
}
}
</script>
</head>
<body class="bg-gray-100 font-sans">
<header class="bg-white shadow">
<nav class="container mx-auto px-6 py-3 flex justify-between items-center">
<h1 class="text-xl font-bold">
<a href="/" class="text-gray-800 hover:text-gray-600">Bhushan Khanale</a>
<body class="bg-white font-sans antialiased">
<header class="fixed w-full bg-white/80 backdrop-blur-sm border-b border-gray-100 z-50">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<h1 class="text-xl font-semibold">
<a href="/" class="text-gray-900 hover:text-primary transition-colors">Bhushan Khanale</a>
</h1>
<a href="https://blog.bhushankhanale.com" target="_blank" class="text-gray-600 hover:text-gray-800">Blog</a>
<a href="https://blog.bhushankhanale.com" target="_blank" rel="noopener noreferrer"
class="text-gray-600 hover:text-primary transition-colors">Blog</a>
</nav>
</header>

<main class="container mx-auto px-6 py-8 text-center">
<img src="./images/profile-photo.png" alt="Bhushan Khanale's profile picture" class="rounded-full mx-auto mb-4 w-48 h-48 object-cover">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Bhushan Khanale</h2>
<div class="flex justify-center space-x-4">
<a href="https://twitter.com/BhushanKhanale" target="_blank" class="text-blue-500 hover:text-blue-600" aria-label="Follow me on Twitter">Twitter</a>
<a href="https://linkedin.com/in/bhushan-khanale" target="_blank" class="text-blue-700 hover:text-blue-800" aria-label="Connect with me on LinkedIn">LinkedIn</a>
<a href="https://github.com/bkhanale" target="_blank" class="text-gray-800 hover:text-gray-900" aria-label="Check out my projects on GitHub">GitHub</a>
<main class="min-h-screen flex items-center justify-center pt-20">
<div class="container mx-auto px-6 py-12 max-w-3xl">
<div class="text-center space-y-6">
<img src="https://avatars.githubusercontent.com/u/23272598"
alt="Bhushan Khanale"
class="w-32 h-32 rounded-full mx-auto shadow-lg"
loading="lazy">

<div class="space-y-2">
<h2 class="text-3xl font-bold text-gray-900">Bhushan Khanale</h2>
<p class="text-lg text-primary font-medium">Senior Software Engineer</p>
</div>

<p class="text-gray-600 max-w-2xl mx-auto">
I love everything tech. Mostly seen learning new programming languages. Devops is love ❤️
</p>

<div class="flex flex-wrap justify-center gap-2 pt-2">
<span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">Ruby</span>
<span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">JavaScript</span>
<span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">Python</span>
<span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">AWS</span>
<span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">GCP</span>
</div>

<div class="flex justify-center items-center space-x-6 pt-4">
<a href="https://twitter.com/BhushanKhanale" target="_blank" rel="noopener noreferrer"
class="text-gray-600 hover:text-primary transition-colors" aria-label="Twitter">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
</svg>
</a>
<a href="https://linkedin.com/in/bhushan-khanale" target="_blank" rel="noopener noreferrer"
class="text-gray-600 hover:text-primary transition-colors" aria-label="LinkedIn">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="https://github.com/bkhanale" target="_blank" rel="noopener noreferrer"
class="text-gray-600 hover:text-primary transition-colors" aria-label="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
</svg>
</a>
<a href="mailto:hello@bhushankhanale.com"
class="text-gray-600 hover:text-primary transition-colors" aria-label="Email">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</a>
</div>
</div>
</div>
</main>
</body>
Expand Down

0 comments on commit 9239134

Please sign in to comment.