精美的个人主页页面
1.先看效果
2.源代码
import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { FaTwitter, FaInstagram, FaLinkedin, FaGithub } from 'react-icons/fa'
const socialLinks = [
{ icon: FaTwitter, color: '#1DA1F2', url: 'https://twitter.com' },
{ icon: FaInstagram, color: '#E1306C', url: 'https://instagram.com' },
{ icon: FaLinkedin, color: '#0077B5', url: 'https://linkedin.com' },
{ icon: FaGithub, color: '#333', url: 'https://github.com' },
]
const skills = ['React', 'Node.js', 'Python', 'UI/UX Design', 'Data Analysis']
const posts = [
{ id: 1, title: 'The Future of AI', likes: 120, comments: 35 },
{ id: 2, title: 'My Journey in Tech', likes: 89, comments: 24 },
{ id: 3, title: '10 Tips for Better Code', likes: 156, comments: 42 },
]
export default function SocialMediaProfile() {
const [activeSkill, setActiveSkill] = useState
return (
initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="max-w-4xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden" > whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="h-48 w-full md:w-48 bg-gradient-to-br from-yellow-400 via-red-500 to-pink-500 rounded-full m-6 overflow-hidden border-4 border-white shadow-lg" > className="h-full w-full object-cover" src="/placeholder.svg?height=200&width=200" alt="Profile" /> initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.2, duration: 0.5 }} > Passionate about creating beautiful and functional web experiences. Always learning, always growing. {socialLinks.map((link, index) => ( key={index} href={link.url} target="_blank" rel="noopener noreferrer" whileHover={{ scale: 1.2, rotate: 5 }} whileTap={{ scale: 0.9 }} > ))}
Skills
{skills.map((skill, index) => (
key={index} className={`px-3 py-1 rounded-full text-sm font-medium ${ activeSkill === skill ? 'bg-indigo-500 text-white' : 'bg-gray-200 text-gray-700' }`} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={() => setActiveSkill(skill === activeSkill ? null : skill)} > {skill} ))}
Recent Posts
{posts.map((post) => (
key={post.id} className="bg-white p-4 rounded-lg shadow" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} > {post.title}
{post.likes} likes
•
{post.comments} comments
))}
)
}
扫描二维码分享
评论区
请登录后发表评论。