import React from "react";

import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import { motion } from "framer-motion";

const App = () => {

return (
<div className="bg-dark text-white min-vh-100">
<header className="text-center py-5">
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }}
className="display-4 fw-bold"
>
Hi, I'm John Doe
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5, duration: 1 }}
className="lead"
>
Full Stack Developer | React, Node.js, MongoDB, Express
</motion.p>
</header>

<section className="container my-5">

<motion.h2
className="text-center mb-4"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 0.8 }}
>
About Me
</motion.h2>
<motion.p
className="text-center"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 0.8 }}
>
I'm a passionate developer with experience in building dynamic web
applications using the MERN stack. I love solving problems, creating interactive
UIs, and optimizing performance. Outside of coding, I enjoy gaming and exploring
new tech trends.
</motion.p>
</section>

<section className="container my-5">

<motion.h2
className="text-center mb-4"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 0.8 }}
>
Projects
</motion.h2>
<div className="row g-4">
 {[1, 2, 3, 4, 5, 6].map((project) => (
<motion.div
className="col-md-4"
key={project}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<div className="card h-100 text-dark">
<div className="card-body">
<h5 className="card-title">Project {project}</h5>
<p className="card-text">
A detailed explanation of project {project} including purpose,
technologies used, and key features. This project showcases my ability to work on
real-world problems and deliver scalable solutions.
</p>
</div>
</div>
</motion.div>
))}
</div>
</section>

<section className="container my-5">

<motion.h2
className="text-center mb-4"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 0.8 }}
>
Skills
</motion.h2>
<div className="row">
{['JavaScript', 'React', 'Node.js', 'Express', 'MongoDB',
'Bootstrap'].map((skill, index) => (
<motion.div
className="col-md-6 mb-3"
key={index}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5 }}
>
<h5>{skill}</h5>
<div className="progress">
<div
className="progress-bar bg-warning"
role="progressbar"
style={{ width: `${80 - index * 5}%` }}
aria-valuenow={80 - index * 5}
aria-valuemin="0"
aria-valuemax="100"
>
{80 - index * 5}%
</div>
</div>
</motion.div>
))}
</div>
</section>
 <section className="container my-5">
<motion.h2
className="text-center mb-4"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 0.8 }}
>
Contact Me
</motion.h2>
<form className="w-75 mx-auto">
<div className="mb-3">
<label htmlFor="name" className="form-label">Name</label>
<input type="text" className="form-control" id="name" />
</div>
<div className="mb-3">
<label htmlFor="email" className="form-label">Email</label>
<input type="email" className="form-control" id="email" />
</div>
<div className="mb-3">
<label htmlFor="message" className="form-label">Message</label>
<textarea className="form-control" id="message" rows="4"></textarea>
</div>
<button type="submit" className="btn btn-warning">Send Message</button>
</form>
</section>

<footer className="text-center py-4 border-top mt-5">

<p className="mb-0">&copy; 2025 John Doe. All rights reserved.</p>
<div>
<a href="#" className="text-warning mx-2">LinkedIn</a>
<a href="#" className="text-warning mx-2">GitHub</a>
<a href="#" className="text-warning mx-2">Resume</a>
</div>
</footer>
</div>
);
};

export default App;