专业作品集网站

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App">
      {/* Navigation */}
      <nav className="bg-gray-800 text-white p-4 sticky top-0 z-50">
        <div className="container mx-auto flex justify-between items-center">
          <div className="text-xl font-bold">My Portfolio</div>
          <div className="flex space-x-4">
            <a href="#home" className="hover:text-gray-400">Home</a>
            <a href="#about" className="hover:text-gray-400">About</a>
            <a href="#services" className="hover:text-gray-400">Services</a>
            <a href="#portfolio" className="hover:text-gray-400">Portfolio</a>
            <a href="#testimonials" className="hover:text-gray-400">Testimonials</a>
            <a href="#contact" className="hover:text-gray-400">Contact</a>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section id="home" className="bg-gray-900 text-white h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-5xl font-bold">Welcome to My Portfolio</h1>
          <p className="mt-4 text-xl">Discover the work of a passionate developer</p>
          <button className="mt-8 bg-blue-600 px-6 py-3 rounded-full hover:bg-blue-700">Explore My Work</button>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-16 bg-gray-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-8">About Me</h2>
          <div className="flex flex-wrap items-center">
            <div className="w-full md:w-1/2 p-4">
              <img src="https://placehold.co/500x500" alt="Profile" className="rounded-full mx-auto shadow-lg" />
            </div>
            <div className="w-full md:w-1/2 p-4">
              <p className="text-lg mb-4">Hi there! I am a passionate web developer with over 5 years of experience in creating beautiful and functional websites. My expertise lies in React, JavaScript, and TailwindCSS.</p>
              <p className="text-lg mb-4">I am always eager to learn new technologies and improve my skills. I believe in delivering high-quality work that meets clients' needs and exceeds their expectations.</p>
              <button className="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700">Download Resume</button>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-8">My Services</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-100 p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold mb-4">Web Development</h3>
              <p>I specialize in building responsive and user-friendly websites using the latest web technologies.</p>
            </div>
            <div className="bg-gray-100 p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold mb-4">UI/UX Design</h3>
              <p>I create visually appealing designs that enhance user experience and drive engagement.</p>
            </div>
            <div className="bg-gray-100 p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold mb-4">SEO Optimization</h3>
              <p>I optimize websites to improve their search engine rankings and increase organic traffic.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio Section */}
      <section id="portfolio" className="py-16 bg-gray-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-8">My Portfolio</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="Project 1" className="mb-4" />
              <h3 className="text-xl font-bold mb-2">Project 1</h3>
              <p>A brief description of Project 1 and the technologies used.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="Project 2" className="mb-4" />
              <h3 className="text-xl font-bold mb-2">Project 2</h3>
              <p>A brief description of Project 2 and the technologies used.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="Project 3" className="mb-4" />
              <h3 className="text-xl font-bold mb-2">Project 3</h3>
              <p>A brief description of Project 3 and the technologies used.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-8">Testimonials</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-100 p-6 rounded-lg shadow-md">
              <p className="text-lg mb-4">"Working with [Your Name] was an absolute pleasure. The attention to detail and the quality of work are unmatched."</p>
              <p className="text-gray-600">- Client 1</p>
            </div>
            <div className="bg-gray-100 p-6 rounded-lg shadow-md">
              <p className="text-lg mb-4">"The website they built for us has significantly improved our online presence. Highly recommended!"</p>
              <p className="text-gray-600">- Client 2</p>
            </div>
            <div className="bg-gray-100 p-6 rounded-lg shadow-md">
              <p className="text-lg mb-4">"Professional, reliable, and talented. [Your Name] delivered exactly what we needed."</p>
              <p className="text-gray-600">- Client 3</p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16 bg-gray-900 text-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-8">Contact Me</h2>
          <form className="max-w-lg mx-auto">
            <div className="mb-4">
              <label className="block text-sm font-bold mb-2" htmlFor="name">Name</label>
              <input type="text" id="name" className="w-full px-3 py-2 text-gray-900 rounded" />
            </div>
            <div className="mb-4">
              <label className="block text-sm font-bold mb-2" htmlFor="email">Email</label>
              <input type="email" id="email" className="w-full px-3 py-2 text-gray-900 rounded" />
            </div>
            <div className="mb-4">
              <label className="block text-sm font-bold mb-2" htmlFor="message">Message</label>
              <textarea id="message" className="w-full px-3 py-2 text-gray-900 rounded" rows="5"></textarea>
            </div>
            <button type="submit" className="bg-blue-600 px-6 py-3 rounded-full hover:bg-blue-700">Send Message</button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-800 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p>&copy; 2025 My Portfolio. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;