Connect | Dippan Bhusal

A high-performance, SEO-optimized personal contact hub and portfolio gallery.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Tech Stack
3. Key Features
4. SEO & Optimization
5. Getting Started
6. Project Structure
7. Contact

---

⚡ About The Project

Connect is a modern, responsive "Linktree-style" contact hub and project showcase designed for developers and creators. Unlike generic link-in-bio tools, this project offers full control over design, SEO, and analytics.

It is built with a focus on performance, brand identity (utilizing the "Buy Me a Coffee" yellow palette), and micro-interactions to create a premium user experience.

📸 Screenshots

---

🛠 Tech Stack

Built with vanilla web technologies to ensure maximum speed and zero build-step complexity.

• 
• 
• 
• 
• 

---

✨ Key Features

• 🎨 Glassmorphism Design: Modern UI with frosted glass effects and dynamic background blobs.
• 📱 Fully Responsive: Adaptive grid layouts that look perfect on mobile, tablet, and desktop.
• 🎭 Advanced Animations:
  • 3D Tilt effects on project cards (vanilla-tilt.js).
  • Scroll-triggered entry animations (AOS).
  • Interactive parallax background that responds to mouse movement.
• 🌓 Smart Themes: Custom branding with #FFDD00 (BMC Yellow) and #212121 (Matte Black).
• 📲 PWA Ready: Includes manifest.json for "Add to Home Screen" functionality on mobile devices.
• 🔗 Dynamic Tools:
  • Built-in QR Code generator for the live page.
  • Native Web Share API integration.

---

🚀 SEO & Optimization

This project is not just visual; it is engineered for search engines and AI bots.

• 📈 Organic SEO: Semantic HTML5 structure, optimized meta description, and keywords.
• 🤖 AI SEO (Schema Markup):
  • Person Schema for the homepage (helps ChatGPT/Google Gemini understand your identity).
  • CollectionPage Schema for the projects gallery.
• 🖼️ Social SEO (Open Graph): Custom OG Tags ensure links look professional when shared on LinkedIn, Twitter/X, and Discord.
• ⚡ Performance:
  • Pre-loading of critical assets.
  • Efficient CDN usage.
  • Custom 404 Error handling.

---

🏁 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• A modern web browser.
• A code editor (VS Code recommended).

Installation

1. Clone the repo

   git clone [https://github.com/KDippan/connect.git](https://github.com/KDippan/connect.git)

2. Navigate to the folder

   cd connect

3. Go Live
   • Simply open index.html in your browser.
   • Or use the "Live Server" extension in VS Code.

---

📂 Project Structure

/ ├── index.html # Main Profile & Contact Hub ├── projects.html # Portfolio Gallery (Grid Layout) ├── 404.html # Custom 404 Error Page ├── sitemap.xml # Google Search Console Sitemap ├── robots.txt # Crawler Instructions ├── manifest.json # PWA Configuration ├── _redirects # Netlify Rewrite Rules └── README.md # Documentation

📬 Contact Dippan Bhusal - Web Developer | Tech Enthusiast

• Website: dippanbhusal.tech
• GitHub: @KDippan
• Twitter/X: @DippanBhusal
• LinkedIn: Dippan Bhusal
• Email: dippan.connect@gmail.com