Skip to content

Implement Apple-inspired premium theme color scheme #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JimmFly merged 5 commits into from
Nov 24, 2025
Merged

Implement Apple-inspired premium theme color scheme #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
035d928
Initial plan
Copilot Nov 24, 2025
88e3fb0
Initial plan: Implement Apple-inspired theme colors
Copilot Nov 24, 2025
dfc1940
Implement Apple-inspired premium theme colors
Copilot Nov 24, 2025
3a4a30d
Fix remaining color references for complete Apple theme consistency
Copilot Nov 24, 2025
e2df3a2
Fix Prettier formatting in index.css for CI
Copilot Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .yarn/install-state.gz
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions src/components/GlobeDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ const GlobeDemo: React.FC = () => {
<p className='text-gray-300 mb-4'>使用鼠标拖拽旋转地球，滚轮缩放</p>
<div className='flex justify-center space-x-4'>
<div className='bg-gray-800 px-4 py-2 rounded'>
<span className='text-cyan-400'>✨ 真实地球纹理</span>
<span className='text-primary'>✨ 真实地球纹理</span>
</div>
<div className='bg-gray-800 px-4 py-2 rounded'>
<span className='text-blue-400'>🌍 大气层效果</span>
<span className='text-primary'>🌍 大气层效果</span>
</div>
<div className='bg-gray-800 px-4 py-2 rounded'>
<span className='text-green-400'>🔄 自动旋转</span>
Expand Down
6 changes: 3 additions & 3 deletions src/components/common/ParallaxContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ParallaxContainer: React.FC<ParallaxContainerProps> = ({ children }) => {

{/* Floating geometric shapes */}
<div
className='absolute top-1/4 left-1/6 w-4 h-4 bg-cyan-400/20 rounded-full'
className='absolute top-1/4 left-1/6 w-4 h-4 bg-blue-500/15 rounded-full'
style={{
transform: `translateY(${scrollProgress * PARALLAX_CONFIG.background.slow * 100}px) rotate(${scrollProgress * 360}deg)`,
}}
Expand All @@ -52,13 +52,13 @@ const ParallaxContainer: React.FC<ParallaxContainerProps> = ({ children }) => {

{/* Gradient glow */}
<div
className='absolute top-0 left-1/2 w-96 h-96 bg-gradient-to-br from-cyan-500/5 to-blue-500/5 rounded-full blur-3xl'
className='absolute top-0 left-1/2 w-96 h-96 bg-gradient-to-br from-blue-500/5 to-gray-700/5 rounded-full blur-3xl'
style={{
transform: `translateX(-50%) translateY(${scrollProgress * PARALLAX_CONFIG.background.slow * 200}px)`,
}}
/>
<div
className='absolute bottom-0 right-1/4 w-64 h-64 bg-gradient-to-tl from-purple-500/5 to-pink-500/5 rounded-full blur-3xl'
className='absolute bottom-0 right-1/4 w-64 h-64 bg-gradient-to-tl from-gray-700/5 to-gray-800/5 rounded-full blur-3xl'
style={{
transform: `translateY(${-scrollProgress * PARALLAX_CONFIG.background.medium * 150}px)`,
}}
Expand Down
10 changes: 5 additions & 5 deletions src/components/sections/AboutSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,9 @@ const AboutSection = React.memo(() => {
variants={fadeInUp}
>
<div className='relative'>
<div className='absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200'></div>
<div className='absolute -inset-1 bg-gradient-to-r from-blue-600 to-gray-700 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200'></div>
<div className='relative bg-background/90 rounded-3xl p-8'>
<h3 className='text-2xl font-bold text-cyan-400 mb-4 heading-modern'>
<h3 className='text-2xl font-bold text-primary mb-4 heading-modern'>
{t('about.cards.experience.title')}
</h3>
<p className='text-gray-300 font-semibold mb-3 text-lg'>
Expand All @@ -97,9 +97,9 @@ const AboutSection = React.memo(() => {
variants={fadeInUp}
>
<div className='relative'>
<div className='absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-600 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200'></div>
<div className='absolute -inset-1 bg-gradient-to-r from-blue-700 to-gray-800 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200'></div>
<div className='relative bg-background/90 rounded-3xl p-8'>
<h3 className='text-2xl font-bold text-purple-400 mb-4 heading-modern'>
<h3 className='text-2xl font-bold text-gray-300 mb-4 heading-modern'>
{t('about.cards.projects.title')}
</h3>
<p className='text-gray-300 font-semibold mb-3 text-lg'>
Expand Down Expand Up @@ -138,7 +138,7 @@ const AboutSection = React.memo(() => {
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6'>
{Object.entries(advantages).map(([key, value], index) => (
<motion.div key={key} className='group relative' variants={fadeInUp}>
<div className='absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200'></div>
<div className='absolute -inset-0.5 bg-gradient-to-r from-gray-700 to-gray-800 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200'></div>
<div className='relative flex items-start gap-4 p-6 glass-card hover:scale-[1.02] transition-all duration-300'>
<div
className={`w-3 h-3 rounded-full mt-2 flex-shrink-0 animate-pulse ${
Expand Down
22 changes: 11 additions & 11 deletions src/components/sections/ContactSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const ContactSection = () => {
style={{ transform: `translateY(${Number(parallaxY || 0) * 0.6}px)` }}
/>
<div
className='absolute top-1/3 left-1/3 w-20 h-20 bg-purple-500/10 rounded-full blur-xl'
className='absolute top-1/3 left-1/3 w-20 h-20 bg-primary/10 rounded-full blur-xl'
style={{ transform: `translateY(${Number(parallaxY || 0) * 0.3}px)` }}
/>
<div className='relative z-10'>
Expand Down Expand Up @@ -99,15 +99,15 @@ const ContactSection = () => {
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
transition={{ duration: 0.5 }}
>
<div className='absolute -inset-1 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
<div className='absolute -inset-1 bg-gradient-to-r from-blue-600 to-gray-700 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
<div className='relative card-modern'>
<h3 className='text-2xl font-bold mb-8 text-cyan-400 heading-modern'>
<h3 className='text-2xl font-bold mb-8 text-primary heading-modern'>
{t('contact.info')}
</h3>

<div className='space-y-6 mb-10'>
<div className='flex items-center group/item hover:scale-105 transition-transform duration-300'>
<div className='w-14 h-14 rounded-2xl bg-gradient-to-r from-cyan-500/20 to-blue-500/20 flex items-center justify-center mr-6 group-hover/item:shadow-glow transition-all duration-300'>
<div className='w-14 h-14 rounded-2xl bg-gradient-to-r from-primary/20 to-blue-500/20 flex items-center justify-center mr-6 group-hover/item:shadow-glow transition-all duration-300'>
<svg
className='w-7 h-7 text-cyan-400'
fill='none'
Expand All @@ -127,7 +127,7 @@ const ContactSection = () => {
<p className='text-gray-400 text-base font-medium'>{t('contact.email')}</p>
<a
href='mailto:jimmflyyang@gmail.com'
className='text-text hover:text-cyan-400 transition-colors text-lg font-semibold'
className='text-text hover:text-primary-hover transition-colors text-lg font-semibold'
>
jimmflyyang@gmail.com
</a>
Expand Down Expand Up @@ -203,9 +203,9 @@ const ContactSection = () => {
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 30 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<div className='absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-600 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
<div className='absolute -inset-1 bg-gradient-to-r from-blue-700 to-gray-800 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
<div className='relative card-modern'>
<h3 className='text-2xl font-bold mb-8 text-purple-400 heading-modern'>
<h3 className='text-2xl font-bold mb-8 text-gray-300 heading-modern'>
{t('contact.form.title')}
</h3>

Expand Down Expand Up @@ -253,7 +253,7 @@ const ContactSection = () => {
value={formData.name}
onChange={handleChange}
required
className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 text-text text-lg transition-all duration-300 group-hover:border-purple-500/50'
className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 text-text text-lg transition-all duration-300 group-hover:border-primary/50'
placeholder='Your Name'
/>
</div>
Expand All @@ -272,7 +272,7 @@ const ContactSection = () => {
value={formData.email}
onChange={handleChange}
required
className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 text-text text-lg transition-all duration-300 group-hover:border-purple-500/50'
className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 text-text text-lg transition-all duration-300 group-hover:border-primary/50'
placeholder='your.email@example.com'
/>
</div>
Expand All @@ -291,14 +291,14 @@ const ContactSection = () => {
onChange={handleChange}
required
rows={6}
className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 text-text text-lg resize-none transition-all duration-300 group-hover:border-purple-500/50'
className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 text-text text-lg resize-none transition-all duration-300 group-hover:border-primary/50'
placeholder='Your message...'
/>
</div>

<motion.button
type='submit'
className='w-full py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg rounded-2xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 flex justify-center items-center shadow-lg hover:shadow-xl transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed'
className='w-full py-4 bg-gradient-to-r from-primary to-primary-hover text-white font-bold text-lg rounded-2xl hover:from-primary-hover hover:to-primary transition-all duration-300 flex justify-center items-center shadow-lg hover:shadow-xl transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed'
disabled={isSubmitting}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
Expand Down
14 changes: 7 additions & 7 deletions src/components/sections/ExperienceSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,17 +54,17 @@ const ExperienceSection = React.memo(() => {

<div className='relative card-modern'>
{/* Modern timeline decoration */}
<div className='absolute left-0 top-8 bottom-8 w-1.5 bg-gradient-to-b from-cyan-400 via-purple-500 to-pink-500 rounded-full shadow-glow' />
<div className='absolute left-[-6px] top-8 w-4 h-4 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-full shadow-lg animate-pulse' />
<div className='absolute left-0 top-8 bottom-8 w-1.5 bg-gradient-to-b from-primary via-blue-500 to-gray-600 rounded-full shadow-glow' />
<div className='absolute left-[-6px] top-8 w-4 h-4 bg-gradient-to-r from-primary to-blue-500 rounded-full shadow-lg animate-pulse' />

<div className='ml-12'>
{/* Enhanced company and position information */}
<div className='flex flex-col md:flex-row md:items-center md:justify-between mb-6'>
<div className='group-hover:scale-105 transition-transform duration-300'>
<h3 className='text-3xl font-black text-cyan-400 mb-3 heading-modern'>
<h3 className='text-3xl font-black text-primary mb-3 heading-modern'>
{t(experience.company)}
</h3>
<h4 className='text-2xl font-bold text-purple-300 mb-2 heading-modern'>
<h4 className='text-2xl font-bold text-gray-300 mb-2 heading-modern'>
{t(experience.position)}
</h4>
</div>
Expand All @@ -83,7 +83,7 @@ const ExperienceSection = React.memo(() => {

{/* Enhanced achievements */}
<div className='mb-8'>
<h5 className='text-2xl font-bold text-purple-400 mb-6 heading-modern'>
<h5 className='text-2xl font-bold text-gray-400 mb-6 heading-modern'>
{t('experience.achievements')}
</h5>
<ul className='space-y-4'>
Expand All @@ -94,7 +94,7 @@ const ExperienceSection = React.memo(() => {
variants={fadeInUp}
transition={{ delay: index * 0.2 + achievementIndex * 0.1 }}
>
<span className='text-cyan-400 mr-4 mt-1 text-xl group-hover:text-purple-400 transition-colors'>
<span className='text-primary mr-4 mt-1 text-xl group-hover:text-gray-400 transition-colors'>
▸
</span>
<span className='text-lg leading-relaxed text-modern group-hover:text-white transition-colors'>
Expand All @@ -114,7 +114,7 @@ const ExperienceSection = React.memo(() => {
{experience.technologies.map((tech, techIndex) => (
<motion.span
key={techIndex}
className='px-4 py-2 bg-gradient-to-r from-cyan-500/10 to-purple-500/10 text-cyan-300 rounded-xl text-sm font-semibold border border-cyan-500/20 hover:border-purple-500/30 hover:scale-105 transition-all duration-300'
className='px-4 py-2 bg-gradient-to-r from-primary/10 to-gray-700/10 text-white rounded-xl text-sm font-semibold border border-primary/20 hover:border-primary/40 hover:scale-105 transition-all duration-300'
variants={fadeInUp}
transition={{ delay: index * 0.2 + techIndex * 0.05 }}
whileHover={{ scale: 1.05 }}
Expand Down
Loading
Loading