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

Popular posts from this blog

swapping the alternate values in given array's element ! 17/11/2022

Learning stage | c++ programs

c++ basic question