Programmer Profile - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import { FaGithub, FaLinkedin, FaEnvelope, FaAndroid, FaReact, FaJava } from "react-icons/fa"; import { SiKotlin, SiTailwindcss } from "react-icons/si"; const Portfolio = () => { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "" }); const projects = [ { title: "E-Commerce App", description: "A full-featured Android e-commerce application with real-time updates", tech: ["Android", "Kotlin", "Firebase"], image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3", github: "https://github.com" }, { title: "Weather Dashboard", description: "React-based weather application with dynamic updates", tech: ["React", "TailwindCSS", "API Integration"], image: "https://images.unsplash.com/photo-1601134467661-3d775b999c8b", github: "https://github.com" }, { title: "Task Manager", description: "Modern task management system with cloud synchronization", tech: ["Android", "Java", "REST API"], image: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c", github: "https://github.com" } ]; const testimonials = [ { name: "John Smith", role: "Project Manager", text: "Exceptional developer with great attention to detail.", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" }, { name: "Sarah Johnson", role: "Tech Lead", text: "Delivers high-quality code and meets deadlines consistently.", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330" } ]; const handleSubmit = (e) => { e.preventDefault(); console.log("Form submitted:", formData); }; const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; return ( <div className="min-h-screen bg-gray-50"> {/* Header */} <header className="bg-white shadow-md fixed w-full top-0 z-50"> <nav className="container mx-auto px-6 py-4"> <div className="flex items-center justify-between"> <div className="text-2xl font-bold text-gray-800">John Developer</div> <div className="hidden md:flex space-x-8"> <a href="#about" className="text-gray-600 hover:text-blue-600">About</a> <a href="#projects" className="text-gray-600 hover:text-blue-600">Projects</a> <a href="#skills" className="text-gray-600 hover:text-blue-600">Skills</a> <a href="#contact" className="text-gray-600 hover:text-blue-600">Contact</a> </div> </div> </nav> </header> {/* Hero Section */} <section className="pt-32 pb-20 bg-gradient-to-r from-blue-500 to-purple-600"> <div className="container mx-auto px-6 text-center"> <h1 className="text-4xl md:text-6xl font-bold text-white mb-4">Android & Web Developer</h1> <p className="text-xl text-white opacity-90">Building beautiful, functional applications</p> </div> </section> {/* About Section */} <section id="about" className="py-20 bg-white"> <div className="container mx-auto px-6"> <h2 className="text-3xl font-bold text-center mb-12">About Me</h2> <div className="flex flex-col md:flex-row items-center justify-between"> <div className="md:w-1/2 mb-8 md:mb-0"> <img src="https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2" alt="Profile" className="rounded-lg shadow-xl" onError={(e) => e.target.src = "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d"} /> </div> <div className="md:w-1/2 md:pl-12"> <p className="text-gray-600 leading-relaxed"> Passionate developer with 5+ years of experience in Android and Web development. Specialized in creating intuitive user interfaces and robust applications that solve real-world problems. </p> </div> </div> </div> </section> {/* Projects Section */} <section id="projects" className="py-20 bg-gray-50"> <div className="container mx-auto px-6"> <h2 className="text-3xl font-bold text-center mb-12">Recent Projects</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> {projects.map((project, index) => ( <div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300"> <img src={project.image} alt={project.title} className="w-full h-48 object-cover" onError={(e) => e.target.src = "https://images.unsplash.com/photo-1517694712202-14dd9538aa97"} /> <div className="p-6"> <h3 className="text-xl font-semibold mb-2">{project.title}</h3> <p className="text-gray-600 mb-4">{project.description}</p> <div className="flex flex-wrap gap-2 mb-4"> {project.tech.map((tech, i) => ( <span key={i} className="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"> {tech} </span> ))} </div> <a href={project.github} className="text-blue-600 hover:text-blue-800 flex items-center"> <FaGithub className="mr-2" /> View on GitHub </a> </div> </div> ))} </div> </div> </section> {/* Skills Section */} <section id="skills" className="py-20 bg-white"> <div className="container mx-auto px-6"> <h2 className="text-3xl font-bold text-center mb-12">Skills</h2> <div className="grid grid-cols-2 md:grid-cols-4 gap-8"> <div className="flex flex-col items-center"> <FaAndroid className="text-5xl text-green-500 mb-4" /> <h3 className="text-lg font-semibold">Android</h3> <div className="w-full bg-gray-200 rounded-full h-2.5 mt-2"> <div className="bg-green-500 h-2.5 rounded-full" style={{ width: "90%" }}></div> </div> </div> <div className="flex flex-col items-center"> <FaReact className="text-5xl text-blue-500 mb-4" /> <h3 className="text-lg font-semibold">React</h3> <div className="w-full bg-gray-200 rounded-full h-2.5 mt-2"> <div className="bg-blue-500 h-2.5 rounded-full" style={{ width: "85%" }}></div> </div> </div> <div className="flex flex-col items-center"> <SiKotlin className="text-5xl text-purple-500 mb-4" /> <h3 className="text-lg font-semibold">Kotlin</h3> <div className="w-full bg-gray-200 rounded-full h-2.5 mt-2"> <div className="bg-purple-500 h-2.5 rounded-full" style={{ width: "80%" }}></div> </div> </div> <div className="flex flex-col items-center"> <SiTailwindcss className="text-5xl text-teal-500 mb-4" /> <h3 className="text-lg font-semibold">TailwindCSS</h3> <div className="w-full bg-gray-200 rounded-full h-2.5 mt-2"> <div className="bg-teal-500 h-2.5 rounded-full" style={{ width: "75%" }}></div> </div> </div> </div> </div> </section> {/* Testimonials Section */} <section className="py-20 bg-gray-50"> <div className="container mx-auto px-6"> <h2 className="text-3xl font-bold text-center mb-12">Testimonials</h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> {testimonials.map((testimonial, index) => ( <div key={index} className="bg-white rounded-lg shadow-lg p-8"> <div className="flex items-center mb-4"> <img src={testimonial.image} alt={testimonial.name} className="w-12 h-12 rounded-full mr-4" onError={(e) => e.target.src = "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"} /> <div> <h3 className="font-semibold">{testimonial.name}</h3> <p className="text-gray-600">{testimonial.role}</p> </div> </div> <p className="text-gray-600 italic">"{testimonial.text}"</p> </div> ))} </div> </div> </section> {/* Contact Section */} <section id="contact" className="py-20 bg-white"> <div className="container mx-auto px-6"> <h2 className="text-3xl font-bold text-center mb-12">Get in Touch</h2> <div className="max-w-2xl mx-auto"> <form onSubmit={handleSubmit} className="space-y-6"> <div> <label className="block text-gray-700 mb-2">Name</label> <input type="text" name="name" value={formData.name} onChange={handleChange} className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required /> </div> <div> <label className="block text-gray-700 mb-2">Email</label> <input type="email" name="email" value={formData.email} onChange={handleChange} className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required /> </div> <div> <label className="block text-gray-700 mb-2">Subject</label> <input type="text" name="subject" value={formData.subject} onChange={handleChange} className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required /> </div> <div> <label className="block text-gray-700 mb-2">Message</label> <textarea name="message" value={formData.message} onChange={handleChange} rows="4" className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required ></textarea> </div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors duration-300" > Send Message </button> </form> <div className="mt-12 flex justify-center space-x-6"> <a href="https://github.com" className="text-gray-600 hover:text-blue-600"> <FaGithub className="text-3xl" /> </a> <a href="https://linkedin.com" className="text-gray-600 hover:text-blue-600"> <FaLinkedin className="text-3xl" /> </a> <a href="mailto:contact@example.com" className="text-gray-600 hover:text-blue-600"> <FaEnvelope className="text-3xl" /> </a> </div> </div> </div> </section> </div> ); }; export default Portfolio;