minhaj portfolio site
import React from 'react';
import { Github, Youtube, ExternalLink, Mail, Code, BookOpen, Video } from 'lucide-react';
const Portfolio = () => {
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
{/* Hero Section */}
<header className="container mx-auto px-4 py-16 md:py-24">
<div className="max-w-3xl mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-4">
Minhaj Raza
</h1>
<p className="text-xl md:text-2xl text-gray-600 mb-8">
CS Student • App Developer • Content Creator
</p>
<div className="flex justify-center space-x-4">
<a href="#" className="text-gray-600 hover:text-gray-900">
<Github className="w-6 h-6" />
</a>
<a href="#" className="text-gray-600 hover:text-red-600">
<Youtube className="w-6 h-6" />
</a>
<a href="mailto:contact@example.com" className="text-gray-600 hover:text-gray-900">
<Mail className="w-6 h-6" />
</a>
</div>
</div>
</header>
{/* About Section */}
<section className="container mx-auto px-4 py-16">
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-gray-900 mb-8">About Me</h2>
<p className="text-lg text-gray-600 mb-6">
I'm a Computer Science student passionate about building applications and sharing knowledge
through content creation. I combine technical expertise with entrepreneurial spirit to create
valuable solutions for students and tech enthusiasts.
</p>
</div>
</section>
{/* Projects Section */}
<section className="container mx-auto px-4 py-16 bg-white">
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-gray-900 mb-8">Featured Projects</h2>
<div className="grid gap-8">
{/* Shandy Notes */}
<div className="bg-gray-50 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center">
<BookOpen className="w-8 h-8 text-blue-600 mr-3" />
<h3 className="text-xl font-bold text-gray-900">Shandy Notes</h3>
</div>
<a href="#" className="text-blue-600 hover:text-blue-800">
<ExternalLink className="w-5 h-5" />
</a>
</div>
<p className="text-gray-600 mb-4">
A comprehensive platform providing quality study notes and resources for students.
</p>
<div className="flex flex-wrap gap-2">
<span className="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">Web Development</span>
<span className="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">Education</span>
</div>
</div>
{/* YouTube Channel */}
<div className="bg-gray-50 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center">
<Video className="w-8 h-8 text-red-600 mr-3" />
<h3 className="text-xl font-bold text-gray-900">Minhaj Raza YouTube</h3>
</div>
<a href="#" className="text-red-600 hover:text-red-800">
<ExternalLink className="w-5 h-5" />
</a>
</div>
<p className="text-gray-600 mb-4">
Tech, business, and educational content helping others learn and grow in the digital world.
</p>
<div className="flex flex-wrap gap-2">
<span className="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm">Content Creation</span>
<span className="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm">Tech Education</span>
</div>
</div>
</div>
</div>
</section>
{/* Skills Section */}
<section className="container mx-auto px-4 py-16">
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-gray-900 mb-8">Skills</h2>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
<div className="bg-white p-4 rounded-lg shadow-sm">
<Code className="w-6 h-6 text-blue-600 mb-2" />
<h3 className="font-semibold mb-2">Development</h3>
<ul className="text-gray-600 text-sm">
<li>Full Stack Development</li>
<li>Mobile App Development</li>
<li>UI/UX Design</li>
</ul>
</div>
<div className="bg-white p-4 rounded-lg shadow-sm">
<Video className="w-6 h-6 text-blue-600 mb-2" />
<h3 className="font-semibold mb-2">Content Creation</h3>
<ul className="text-gray-600 text-sm">
<li>Video Production</li>
<li>Technical Writing</li>
<li>Educational Content</li>
</ul>
</div>
<div className="bg-white p-4 rounded-lg shadow-sm">
<BookOpen className="w-6 h-6 text-blue-600 mb-2" />
<h3 className="font-semibold mb-2">Education</h3>
<ul className="text-gray-600 text-sm">
<li>Computer Science</li>
<li>Teaching</li>
<li>Course Development</li>
</ul>
</div>
</div>
</div>
</section>
{/* Contact Section */}
<section className="container mx-auto px-4 py-16 bg-white">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl font-bold text-gray-900 mb-8">Get in Touch</h2>
<p className="text-lg text-gray-600 mb-8">
Interested in collaborating or have a question? Feel free to reach out!
</p>
<a
href="mailto:contact@example.com"
className="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<Mail className="w-5 h-5 mr-2" />
Contact Me
</a>
</div>
</section>
{/* Footer */}
<footer className="container mx-auto px-4 py-8">
<div className="max-w-3xl mx-auto text-center text-gray-600">
<p>© 2024 Minhaj Raza. All rights reserved.</p>
</div>
</footer>
</div>
);
};
export default Portfolio;
Comments
Post a Comment