Deepseek ArtifactsDeepseek Artifacts

专业作品集网站

4.0
en
网页设计
作品集
网站设计
专业展示

Prompt

create a detailed,uniique beautiful professional portfolio sample website 

Generated Result

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;

More Recommendations

View All

Build ChatGPT-Like Web Interface

4.0
Software Development
en
AI Integration
Full-Stack Development
ChatGPT
UI Design
Backend Orchestration
You are a professional full-stack developer AI with deep experience in building AI-integrated UIs, backend orchestration, and vector memory systems. I want you to build a **web-based ChatGPT-like int...

Flutter 产品列表页

4.0
编程开发
en
Flutter
Dart
产品列表
class ProductListPage extends StatefulWidget { final bool useArabic; const ProductListPage({super.key, this.useArabic = false}); @override State<ProductListPage> createState() => _ProductLis...

Flutter产品列表页

4.0
编程开发
en
Flutter
产品列表
Widget
class ProductListPage extends StatefulWidget { final bool useArabic; const ProductListPage({super.key, this.useArabic = false}); @override State<ProductListPage> createState() => _ProductLis...

Build XO App with AI

4.0
Programming
en
Tic Tac Toe
AI Game
JavaScript
create a complete XO (Tic Tac Toe) app with AI opponent: "Build a modern, fully-featured Tic Tac Toe (XO) app that includes: A clean, user-friendly interface optimized for mobile, tablet, and web. ...

Generate YouTube Subscribers

4.0
Technology
en
YouTube
Subscribers
App
Make an app let generate YouTube subscribers and and comments by enter your username after that the says how many subscribers and like do you want so you type the amount of likes and subscribers , so ...

YouTube Subscribers App

4.0
Technology
en
YouTube
Subscribers
App
Make an app let generate YouTube subscribers and and comments by enter your username after that the says how many subscribers and like do you want so you type the amount of likes and subscribers , so ...