//App.js
import React, { useState } from 'react';
import { FaCode, FaBook, FaUserTie, FaSchool,
FaHospital, FaShoppingCart, FaDumbbell,
FaUtensils, FaClipboardList, FaChalkboardTeacher,
FaHeadset, FaConciergeBell, FaJava, FaDatabase,
FaBitcoin, FaChartLine, FaServer, FaPenNib } from 'react-icons/fa';
export default function App() {
const [hoveredSkill, setHoveredSkill] = useState(null);
const skills = [
{ name: 'Java', icon: FaJava, percentage: '85%' },
{ name: 'Web Development', icon: FaCode, percentage: '90%' },
{ name: 'Database', icon: FaDatabase, percentage: '80%' },
{ name: 'Crypto Development', icon: FaBitcoin, percentage: '70%' },
{ name: 'Trading', icon: FaChartLine, percentage: '75%' },
{ name: 'Backend', icon: FaServer, percentage: '88%' },
{ name: 'Article Writing', icon: FaPenNib, percentage: '95%' },
];
const projects = [
{
title: 'Library Management System',
description: `A comprehensive system for managing library resources.`,
icon: <FaBook className="text-6xl" />
},
{
title: 'School Management System',
description: `An efficient system for school administration.`,
icon: <FaSchool className="text-6xl" />
},
{
title: 'Employee Management System',
description: `Manage employee records and tasks seamlessly.`,
icon: <FaUserTie className="text-6xl" />
},
{
title: 'Hospital Management System',
description: `A system to streamline hospital operations and patient care.`,
icon: <FaHospital className="text-6xl" />
},
{
title: 'E-commerce Platform',
description: `An online platform for buying and selling goods.`,
icon: <FaShoppingCart className="text-6xl" />
},
{
title: 'Restaurant Management System',
description: `Manage restaurant operations efficiently.`,
icon: <FaUtensils className="text-6xl" />
},
{
title: 'Gym Management System',
description: `A system for managing gym memberships and schedules.`,
icon: <FaDumbbell className="text-6xl" />
},
{
title: 'Inventory Management System', description: `Keep track of inventory levels and orders.`,
icon: <FaClipboardList className="text-6xl" />
},
];
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
phone: '',
message: '',
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
// Handle form submission logic here
console.log('Form Data Submitted:', formData);
// Reset form after submission if needed
setFormData({
firstName: '',
lastName: '',
email: '',
phone: '',
message: '',
});
};
return (
<div className="bg-green-400 p-10">
{/* Hero Section */}
<div className="section_hero h-auto
bg-inherit w-11/12 m-10
rounded-md p-10 flex flex-col
items-center justify-center">
{/* Name Section */}
<h1 className="text-4xl font-bold text-white mb-4">
John Doe
</h1>
<p className="text-xl text-gray-600 mb-8">
Full Stack Developer | Web Designer | Programmer
</p>
{/* Contact Information with different styles */}
<div className="flex flex-col items-center
sm:flex-row sm:space-x-6
space-y-4 sm:space-y-0">
{/* Email */}
<div className="flex items-center space-x-2">
<span className="text-lg font-medium text-white">
Email:
</span>
<a href="mailto:[email protected]"
className="text-lg text-blue-600 hover:underline">
john.doe@example.com
</a>
</div>
{/* Phone */}
<div className="flex items-center space-x-2">
<span className="text-lg font-medium
text-white">
Phone:
</span>
<a href="tel:+1234567890"
className="text-lg text-blue-600 hover:underline">
+123 456 7890
</a>
</div>
</div>
{/* Social Links */}
<div className="mt-6 flex space-x-4">
<a href="#" className="text-green-600
text-2xl hover:text-green-700
transition duration-300">
<i className="fab fa-linkedin"></i>
</a>
<a href="#" className="text-green-600
text-2xl hover:text-green-700
transition duration-300">
<i className="fab fa-github"></i>
</a>
<a href="#" className="text-green-600
text-2xl hover:text-green-700
transition duration-300">
<i className="fab fa-twitter"></i>
</a>
</div>
</div>
{/* Services Section */}
<div className="section_service h-auto
bg-white w-11/12 m-10 rounded-md p-5">
<p className="text-green-600 font-bold
text-center text-[25px] my-5">
Services
</p>
<p className='text-center font-bold
text-[18px]'>
Our diverse range of services
is designed to support your personal
and professional growth.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2
lg:grid-cols-4 gap-8 p-10 mt-8">
<div className="service-card bg-green-500
text-white rounded-lg p-6
flex flex-col items-center
transition-all duration-300
ease-in-out hover:scale-105">
<FaCode className="text-4xl mb-4" />
<p className="font-bold text-lg">Application Development</p>
</div>
<div className="service-card bg-green-500
text-white rounded-lg p-6 flex
flex-col items-center transition-all
duration-300 ease-in-out hover:scale-105">
<FaChalkboardTeacher className="text-4xl mb-4" />
<p className="font-bold text-lg">Teaching</p>
</div>
<div className="service-card bg-green-500
text-white rounded-lg p-6
flex flex-col items-center
transition-all duration-300
ease-in-out hover:scale-105">
<FaHeadset className="text-4xl mb-4" />
<p className="font-bold text-lg">24/7 Student Support</p>
</div>
<div className="service-card bg-green-500
text-white rounded-lg p-6
flex flex-col items-center
transition-all duration-300
ease-in-out hover:scale-105">
<FaConciergeBell className="text-4xl mb-4" />
<p className="font-bold text-lg">Other Service</p>
</div>
</div>
</div>
{/* Skills Section */}
<div className="section_skills h-auto bg-green-600
w-11/12 m-10 rounded-md p-5">
<p className="text-white font-bold text-center text-[25px] my-5">Skills</p>
<p className='text-center text-white font-bolder text-[18px]'>
A diverse skill set including Java,
Web Development, Database Management,
Crypto Development, Trading, Backend Development,
and Article Writing for effective tech solutions.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 p-10">
{skills.map((skill, index) => {
const Icon = skill.icon;
return (
<div
key={index}
className="skill-card bg-green-500 text-white
rounded-lg p-6 flex flex-col items-center
transition-all duration-300 ease-in-out"
onMouseEnter={() => setHoveredSkill(index)}
onMouseLeave={() => setHoveredSkill(null)}
>
<Icon className="text-4xl mb-4" />
<p className="font-bold text-lg">{skill.name}</p>
{hoveredSkill === index && (
<p className="text-sm mt-2">{skill.percentage} Proficiency</p>
)}
</div>
);
})}
</div>
</div>
{/* Projects Section */}
<div className="section_projects h-auto
bg-white w-11/12 m-10 rounded-md p-5">
<p className="text-green-600 font-bold
text-center text-[25px] my-5">
Projects
</p>
<p className='text-center text-green-600
font-bolder text-[18px]'>
Innovative projects including a Library Management System,
School Management System, Employee Management System,
Hospital Management System, E-commerce Platform,
Restaurant Management System, Gym Management System,
and Inventory Management System.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 p-10">
{projects.map((project, index) => (
<div key={index} className="project-card bg-white
text-black rounded-lg p-6 flex
flex-col items-center transition-all
duration-300 ease-in-out hover:scale-105">
{project.icon} {/* React Icon for the project */}
<div className="p-2 text-center">
<h3 className="font-bold text-lg">{project.title}</h3>
<p className="text-sm mt-1">{project.description}</p>
</div>
</div>
))}
</div>
</div>
{/* Contact Section */}
<div className="section_contact h-auto bg-white w-11/12 m-10 rounded-md p-5">
<p className="text-green-600 font-bold text-center text-[25px]">
Contact
</p>
<form onSubmit={handleSubmit} className="mt-5">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<input
type="text"
name="firstName"
placeholder="First Name"
value={formData.firstName}
onChange={handleChange}
required
className="border border-gray-300 rounded p-2"
/>
<input
type="text"
name="lastName"
placeholder="Last Name"
value={formData.lastName}
onChange={handleChange}
required
className="border border-gray-300 rounded p-2"
/>
</div>
<input
type="email"
name="email"
placeholder="Email"
value={formData.email}
onChange={handleChange}
required
className="border border-gray-300 rounded p-2 mt-4 w-full"
/>
<input
type="tel"
name="phone"
placeholder="Phone Number"
value={formData.phone}
onChange={handleChange}
required
className="border border-gray-300 rounded p-2 mt-4 w-full"
/>
<textarea
name="message"
placeholder="Message"
value={formData.message}
onChange={handleChange}
required
className="border border-gray-300 rounded p-2 mt-4 w-full"
rows="4"
/>
<button
type="submit"
className="bg-green-500 text-white
rounded p-2 mt-4 hover:bg-green-600
transition duration-300"
>
Submit
</button>
</form>
</div>
</div>
);
}