215 lines
13 KiB
TypeScript
215 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Language } from './types';
|
|
import { RESUME_DATA } from './constants';
|
|
import LanguageToggle from './components/LanguageToggle';
|
|
import Section from './components/Section';
|
|
import ExperienceList from './components/ExperienceList';
|
|
import ProjectCard from './components/ProjectCard';
|
|
import { Mail, Phone, MessageSquare, Download, Linkedin, GraduationCap, Code2, ChevronDown, Award, Globe2 } from 'lucide-react';
|
|
|
|
const App: React.FC = () => {
|
|
const [lang, setLang] = useState<Language>('zh');
|
|
|
|
const { name, title, summary, contact, skills, experience, projects, education } = RESUME_DATA;
|
|
|
|
// Background images from Unsplash
|
|
const heroBgImage = "https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2670&auto=format&fit=crop";
|
|
const footerBgImage = "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000&auto=format&fit=crop";
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col font-sans bg-slate-50 text-slate-900 selection:bg-indigo-100 selection:text-indigo-900">
|
|
{/* Navigation / Header */}
|
|
<header className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-white/20 shadow-sm transition-all supports-[backdrop-filter]:bg-white/60">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
|
<div className="font-bold text-xl tracking-tight text-slate-900 flex items-center gap-2">
|
|
<div className="w-9 h-9 bg-gradient-to-br from-indigo-600 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-indigo-200">
|
|
{name['en'].split(' ')[0][0]}
|
|
</div>
|
|
<span className="hidden sm:block">{lang === 'en' ? 'Resume' : '个人简历'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 sm:gap-6">
|
|
<nav className="hidden md:flex gap-8 text-sm font-semibold text-slate-600">
|
|
<a href="#about" className="hover:text-indigo-600 transition-colors">{lang === 'en' ? 'About' : '简介'}</a>
|
|
<a href="#experience" className="hover:text-indigo-600 transition-colors">{lang === 'en' ? 'Experience' : '经历'}</a>
|
|
<a href="#projects" className="hover:text-indigo-600 transition-colors">{lang === 'en' ? 'Projects' : '项目'}</a>
|
|
</nav>
|
|
<div className="h-5 w-px bg-slate-300 hidden md:block"></div>
|
|
|
|
<button className="hidden sm:flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded-full hover:bg-slate-800 transition-colors shadow-md">
|
|
<Download size={14} />
|
|
<span>{lang === 'en' ? 'Download PDF' : '下载简历'}</span>
|
|
</button>
|
|
<LanguageToggle lang={lang} setLang={setLang} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero Section with Rich Background Image */}
|
|
<main className="flex-grow pt-16">
|
|
<div id="about" className="relative h-[85vh] min-h-[600px] flex items-center justify-center overflow-hidden">
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat bg-fixed"
|
|
style={{ backgroundImage: `url(${heroBgImage})` }}
|
|
></div>
|
|
|
|
{/* Overlay - White gradient for clean text readability */}
|
|
<div className="absolute inset-0 z-10 bg-gradient-to-b from-white/95 via-white/80 to-slate-50/95"></div>
|
|
|
|
<div className="relative z-20 max-w-4xl mx-auto text-center px-4">
|
|
<div className="animate-fade-in-up">
|
|
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/50 backdrop-blur-md text-indigo-700 text-sm font-bold mb-8 border border-indigo-100 shadow-sm ring-1 ring-indigo-50">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
|
|
</span>
|
|
<span>{lang === 'en' ? 'Available for new opportunities' : '正在寻找新机会'}</span>
|
|
</div>
|
|
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-black text-slate-900 tracking-tight mb-6 leading-[1.1]">
|
|
{name[lang]}
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-3xl text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-500 font-bold mb-8">
|
|
{title[lang]}
|
|
</p>
|
|
|
|
<p className="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed mb-10 font-medium">
|
|
{summary[lang]}
|
|
</p>
|
|
|
|
{/* Contact Buttons */}
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<a href={`tel:${contact.mobile}`} className="flex items-center gap-3 bg-slate-900 text-white px-8 py-4 rounded-full shadow-lg shadow-indigo-200 hover:shadow-xl hover:-translate-y-1 transition-all font-semibold">
|
|
<Phone size={18} />
|
|
<span>{contact.mobile}</span>
|
|
</a>
|
|
<a href={`mailto:${contact.email}`} className="flex items-center gap-3 bg-white text-slate-700 px-8 py-4 rounded-full shadow-md border border-slate-100 hover:border-indigo-200 hover:shadow-lg hover:-translate-y-1 transition-all font-semibold">
|
|
<Mail size={18} />
|
|
<span>{contact.email}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce text-slate-400 z-20">
|
|
<ChevronDown size={32} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Skills Section (Dark Band) */}
|
|
<div className="bg-slate-900 text-white py-20 relative overflow-hidden">
|
|
{/* Abstract BG pattern */}
|
|
<div className="absolute inset-0 opacity-10" style={{ backgroundImage: "radial-gradient(#4f46e5 1px, transparent 1px)", backgroundSize: "32px 32px" }}></div>
|
|
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 relative z-10">
|
|
<div className="text-center mb-12">
|
|
<h3 className="text-indigo-400 font-bold uppercase tracking-widest text-sm mb-3">
|
|
{lang === 'en' ? 'Technical Expertise' : '技能特长'}
|
|
</h3>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white">
|
|
{lang === 'en' ? 'Core Competencies' : '核心技术栈'}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap justify-center gap-3 md:gap-5">
|
|
{skills.map((skill, idx) => (
|
|
<div key={idx} className="group px-6 py-3 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 hover:border-indigo-500/50 backdrop-blur-sm transition-all cursor-default flex items-center gap-3">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-indigo-500 group-hover:bg-indigo-400 transition-colors"></div>
|
|
<span className="text-slate-200 font-medium text-base md:text-lg">{skill[lang]}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Experience Section */}
|
|
<Section id="experience" title={lang === 'en' ? 'Work Experience' : '工作经历'} className="bg-slate-50">
|
|
<ExperienceList experience={experience} lang={lang} />
|
|
</Section>
|
|
|
|
{/* Projects Section */}
|
|
<Section id="projects" title={lang === 'en' ? 'Featured Projects' : '个人作品'} className="bg-white">
|
|
<div className="grid md:grid-cols-2 gap-8 lg:gap-12">
|
|
{projects.map((project, index) => (
|
|
<ProjectCard key={index} project={project} lang={lang} />
|
|
))}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Education Section */}
|
|
<Section id="education" title={lang === 'en' ? 'Education' : '教育经历'} className="bg-slate-50">
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{education.map((edu, index) => (
|
|
<div key={index} className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 flex items-start gap-6 hover:shadow-md transition-all group">
|
|
<div className="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 shrink-0 group-hover:scale-110 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-300">
|
|
<GraduationCap size={32} />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-xl text-slate-900">{edu.school[lang]}</h3>
|
|
<p className="text-indigo-600 font-semibold mb-2 text-lg">{edu.major[lang]}</p>
|
|
<div className="flex flex-wrap items-center gap-3 text-sm text-slate-500 font-medium">
|
|
<span className="bg-slate-100 px-3 py-1 rounded-full text-slate-600">{edu.degree[lang]}</span>
|
|
<span className="hidden sm:inline text-slate-300">•</span>
|
|
<span>{edu.period}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Contact / Footer CTA Area */}
|
|
<div className="relative py-24 flex items-center justify-center bg-slate-900 overflow-hidden">
|
|
<div
|
|
className="absolute inset-0 z-0 bg-cover bg-center opacity-20"
|
|
style={{ backgroundImage: `url(${footerBgImage})` }}
|
|
></div>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-transparent"></div>
|
|
|
|
<div className="relative z-10 text-center px-4 max-w-3xl mx-auto">
|
|
<h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
|
|
{lang === 'en' ? 'Let\'s work together' : '期待与您的合作'}
|
|
</h2>
|
|
<p className="text-slate-300 text-lg mb-10 leading-relaxed">
|
|
{lang === 'en'
|
|
? 'I am currently open to new opportunities in autonomous driving, simulation, and game development.'
|
|
: '我目前正在寻找自动驾驶、仿真及游戏开发领域的新机会。'}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a href={`mailto:${contact.email}`} className="w-full sm:w-auto px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-full font-bold text-lg transition-all shadow-lg shadow-indigo-900/50 flex items-center justify-center gap-2">
|
|
<Mail size={20} />
|
|
{lang === 'en' ? 'Email Me' : '发送邮件'}
|
|
</a>
|
|
<div className="w-full sm:w-auto px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md text-white rounded-full font-bold text-lg transition-all flex items-center justify-center gap-2 cursor-pointer">
|
|
<MessageSquare size={20} />
|
|
WeChat: {contact.wechat}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-slate-950 border-t border-white/5 py-12">
|
|
<div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div className="flex flex-col items-center md:items-start">
|
|
<h2 className="text-xl font-bold text-white mb-2">{name[lang]}</h2>
|
|
<p className="text-slate-500 text-sm">
|
|
© {new Date().getFullYear()} All rights reserved.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-6">
|
|
<a href={`mailto:${contact.email}`} className="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-indigo-600"><Mail size={20}/></a>
|
|
<a href="#" className="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-blue-600"><Linkedin size={20}/></a>
|
|
<a href="#" className="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-emerald-600"><Globe2 size={20}/></a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App; |