|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="scroll-smooth"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Kashif Raza | Engineer & Developer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#f5f3ff', |
|
|
100: '#ede9fe', |
|
|
200: '#ddd6fe', |
|
|
300: '#c4b5fd', |
|
|
400: '#a78bfa', |
|
|
500: '#8b5cf6', |
|
|
600: '#7c3aed', |
|
|
700: '#6d28d9', |
|
|
800: '#5b21b6', |
|
|
900: '#4c1d95', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300"> |
|
|
|
|
|
<div class="cursor-follower hidden md:block"></div> |
|
|
|
|
|
|
|
|
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-2xl font-bold bg-gradient-to-r from-primary-600 to-secondary-500 bg-clip-text text-transparent">Kashif Raza</a> |
|
|
|
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#about" class="font-medium hover:text-primary-500 transition-colors">About</a> |
|
|
<a href="#skills" class="font-medium hover:text-primary-500 transition-colors">Skills</a> |
|
|
<a href="#projects" class="font-medium hover:text-primary-500 transition-colors">Projects</a> |
|
|
<a href="#tools" class="font-medium hover:text-primary-500 transition-colors">Tools</a> |
|
|
<a href="#contact" class="font-medium hover:text-primary-500 transition-colors">Contact</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="theme-toggle" class="w-10 h-10 rounded-full flex items-center justify-center bg-primary-100 dark:bg-secondary-900/50 text-primary-600 dark:text-secondary-300 hover:bg-primary-200 dark:hover:bg-secondary-800 transition-colors"> |
|
|
<i data-feather="moon" class="dark:hidden"></i> |
|
|
<i data-feather="sun" class="hidden dark:block"></i> |
|
|
</button> |
|
|
|
|
|
<button class="md:hidden focus:outline-none" id="mobile-menu-button"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="fixed inset-0 z-40 bg-white dark:bg-gray-900 hidden md:hidden transition-all duration-300"> |
|
|
<div class="container mx-auto px-6 py-24"> |
|
|
<div class="flex flex-col space-y-8 text-center"> |
|
|
<a href="#about" class="text-2xl font-medium hover:text-primary-500 transition-colors">About</a> |
|
|
<a href="#skills" class="text-2xl font-medium hover:text-primary-500 transition-colors">Skills</a> |
|
|
<a href="#projects" class="text-2xl font-medium hover:text-primary-500 transition-colors">Projects</a> |
|
|
<a href="#tools" class="text-2xl font-medium hover:text-primary-500 transition-colors">Tools</a> |
|
|
<a href="#contact" class="text-2xl font-medium hover:text-primary-500 transition-colors">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="hero" class="min-h-screen pt-24 pb-12 flex items-center"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col lg:flex-row items-center justify-between gap-12"> |
|
|
<div class="lg:w-1/2 space-y-8"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="h-px w-12 bg-primary-500"></div> |
|
|
<span class="text-sm font-medium">Diploma in Electronics & BCA Graduate</span> |
|
|
</div> |
|
|
|
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight"> |
|
|
Building <span class="bg-gradient-to-r from-primary-600 to-secondary-500 bg-clip-text text-transparent">Digital Bridges</span> Between Hardware & Software |
|
|
</h1> |
|
|
|
|
|
<p class="text-lg text-gray-700 dark:text-gray-300"> |
|
|
I'm Kashif Raza, blending electronics engineering expertise with creative web development to craft innovative digital solutions. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-4 pt-4"> |
|
|
<a href="#contact" class="px-8 py-3 bg-gradient-to-r from-primary-600 to-secondary-500 text-white rounded-full font-medium shadow-lg hover:shadow-primary-300 dark:hover:shadow-secondary-700 transition-all transform hover:-translate-y-1"> |
|
|
Get In Touch |
|
|
</a> |
|
|
<a href="https://altkriz.github.io/updatedresume.pdf" class="px-8 py-3 border-2 border-primary-500 dark:border-secondary-500 text-primary-600 dark:text-secondary-300 rounded-full font-medium hover:bg-primary-50 dark:hover:bg-secondary-900/20 transition-all"> |
|
|
Download CV <i data-feather="download" class="ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2 relative"> |
|
|
<div class="w-full aspect-square max-w-md mx-auto relative floating" style="animation-duration: 8s;"> |
|
|
<div class="absolute inset-0 bg-gradient-to-tr from-primary-400 to-secondary-500 rounded-2xl transform -rotate-6"></div> |
|
|
<img src="https://altkriz.github.io/img/hera.jpg" alt="Kashif Raza" class="relative w-full h-full object-cover rounded-2xl transform rotate-3 border-4 border-white dark:border-gray-800 shadow-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-gray-100 dark:bg-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary-600 to-secondary-500 bg-clip-text text-transparent inline-block">My Journey</h2> |
|
|
<p class="mt-4 max-w-2xl mx-auto text-gray-600 dark:text-gray-400"> |
|
|
From circuits to code - a unique blend of technical expertise |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> |
|
|
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-14 h-14 rounded-full bg-primary-100 dark:bg-secondary-900 flex items-center justify-center mr-4"> |
|
|
<i data-feather="cpu" class="text-primary-600 dark:text-secondary-300"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Electronics Engineer</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300"> |
|
|
Certified electronics professional with hands-on experience in circuit design, embedded systems, and IoT solutions. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-14 h-14 rounded-full bg-primary-100 dark:bg-secondary-900 flex items-center justify-center mr-4"> |
|
|
<i data-feather="code" class="text-primary-600 dark:text-secondary-300"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Web Developer</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300"> |
|
|
Passionate about crafting beautiful, functional websites with customizable features tailored to client needs. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div class="order-last lg:order-first"> |
|
|
<div class="relative p-1 rounded-xl bg-gradient-to-r from-primary-500 to-secondary-500"> |
|
|
<div class="bg-white dark:bg-gray-800 p-1 rounded-lg"> |
|
|
<img src="https://altkriz.github.io/img/hera.jpg" alt="Kashif Raza" class="w-full max-w-md rounded-lg shadow-lg"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-6">About <span class="bg-gradient-to-r from-primary-600 to-secondary-500 bg-clip-text text-transparent">Me</span></h2> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-6"> |
|
|
With a foundation in Electronics Engineering from Ambedkar Institute of Technology and a BCA from IGNOU, I bring a unique perspective to technology. My journey has been about bridging hardware and software to create comprehensive solutions. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-secondary-900 flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="map-pin" class="text-primary-600 dark:text-secondary-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Based in New Delhi</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Creating digital solutions for global clients</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-secondary-900 flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="globe" class="text-primary-600 dark:text-secondary-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Multilingual</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">English, Urdu, Arabic - facilitating global collaboration</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary-600 to-secondary-500 bg-clip-text text-transparent inline-block">Technical Skills</h2> |
|
|
<p class="mt-4 max-w-2xl mx-auto text-gray-600 dark:text-gray-400"> |
|
|
The tools and technologies I use to bring ideas to life |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> |
|
|
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-bold mb-6 flex items-center"> |
|
|
<i data-feather="code" class="mr-3 text-primary-600 dark:text-secondary-300"></i> |
|
|
Web Development |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">HTML5</span> |
|
|
<span class="font-bold text-primary-600 dark:text-secondary-300">80%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"> |
|
|
<div class="h-full rounded-full bg-gradient-to-r from-primary-500 to-secondary-400" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">CSS</span> |
|
|
<span class="font-bold text-primary-600 dark:text-secondary-300">75%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"> |
|
|
<div class="h-full rounded-full bg-gradient-to-r from-primary-500 to-secondary-400" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">JavaScript</span> |
|
|
<span class="font-bold text-primary-600 dark:text-secondary-300">75%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"> |
|
|
<div class="h-full rounded-full bg-gradient-to-r from-primary-500 to-secondary-400" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">Tailwind CSS</span> |
|
|
<span class="font-bold text-primary-600 dark:text-secondary-300">85%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"> |
|
|
<div class="h-full rounded-full bg-gradient-to-r from-primary-500 to-secondary-400" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-bold mb-6 flex items-center"> |
|
|
<i data-feather="cpu" class="mr-3 text-primary-600 dark:text-secondary-300"></i> |
|
|
Software & Hardware |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">Java</span> |
|
|
<span class="font-bold text-primary-600 dark:text-secondary-300">70%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"> |
|
|
<div class="h-full rounded-full bg-gradient-to-r from-primary-500 to-secondary-400" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">Raspberry Pi</span> |
|
|
<span class="font-bold text-primary-600 dark:text-secondary-300">80%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"> |
|
|
<div class="h-full rounded-full bg-gradient-to-r from-primary-500 to-secondary-400" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">IoT Projects</span> |
|
|
<span class="font-bold text-primary-600 dark:text-secondary-300">75%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"> |
|
|
<div class="h-full rounded-full bg-gradient-to-r from-primary-500 to-secondary-400" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">OpenVPN</span> |
|
|
<span class="font-bold text-primary-600 dark:text-secondary-300">85%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"> |
|
|
<div class="h-full rounded-full bg-gradient-to-r from-primary-500 to-secondary-400" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 flex flex-wrap justify-center gap-3"> |
|
|
<span class="px-4 py-2 rounded-full text-sm font-medium bg-primary-100 dark: |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
