初始化提交

mengyaprofile-frontend/src/components/ClickParticle.css

@@ -0,0 +1,66 @@
+.click-particle {
+  position: fixed;
+  pointer-events: none;
+  border-radius: 50%;
+  z-index: 9999;
+  transform: translate(-50%, -50%);
+  animation-name: particle-radiate;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+  will-change: transform, opacity;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
+  mix-blend-mode: screen;
+}
+
+@keyframes particle-radiate {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  25% {
+    transform: translate(
+      calc(-50% + var(--target-x) * 0.3), 
+      calc(-50% + var(--target-y) * 0.3)
+    ) scale(1.2);
+    opacity: 0.9;
+  }
+  100% {
+    transform: translate(
+      calc(-50% + var(--target-x)), 
+      calc(-50% + var(--target-y))
+    ) scale(0);
+    opacity: 0;
+  }
+}
+
+/* 中心爆炸效果 */
+.click-burst {
+  position: fixed;
+  pointer-events: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  z-index: 9998;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, 
+    rgba(255, 255, 255, 0.8) 0%, 
+    rgba(255, 255, 255, 0.4) 30%,
+    rgba(255, 255, 255, 0) 70%
+  );
+  animation: burst-effect 0.6s ease-out forwards;
+}
+
+@keyframes burst-effect {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(2);
+    opacity: 0.6;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(3);
+    opacity: 0;
+  }
+}

mengyaprofile-frontend/src/components/ClickParticle.js

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import './ClickParticle.css';
+
+const ClickParticle = () => {
+  useEffect(() => {
+    const handleClick = (e) => {
+      const colors = [
+        '#ff6b9d', '#c44569', '#f8b500', '#ffd93d',
+        '#a8e6cf', '#95d5b2', '#74c69d', '#52b788',
+        '#6bcf7f', '#4dd599', '#38ada9', '#3fc1c9',
+        '#5f27cd', '#341f97', '#ee5a6f', '#fc5c65',
+        '#fed330', '#f7b731', '#fa8231', '#fd79a8'
+      ];
+
+      // 更密集的均匀辐射（一次点击，360°均匀分布）
+      const particleCount = 16 + Math.floor(Math.random() * 8); // 16-24
+
+      for (let i = 0; i < particleCount; i++) {
+        const particle = document.createElement('div');
+        particle.className = 'click-particle';
+
+        // 均匀角度，无随机抖动，形成整齐的环形辐射
+        const angle = (Math.PI * 2 * i) / particleCount;
+
+        // 半径随机，营造层次
+        const distance = 90 + Math.random() * 80; // 90-170px
+        const targetX = Math.cos(angle) * distance;
+        const targetY = Math.sin(angle) * distance;
+
+        // 初始位置（固定坐标系更准确贴合视窗）
+        particle.style.left = e.clientX + 'px';
+        particle.style.top = e.clientY + 'px';
+
+        // 配色与尺寸
+        particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+        const size = 4 + Math.random() * 6; // 4-10px
+        particle.style.width = size + 'px';
+        particle.style.height = size + 'px';
+
+        // 传递目标位移参数
+        particle.style.setProperty('--target-x', targetX + 'px');
+        particle.style.setProperty('--target-y', targetY + 'px');
+
+        // 动画时长（更自然的缓出）
+        const durationMs = 600 + Math.round(Math.random() * 400); // 600-1000ms
+        particle.style.animationDuration = durationMs / 1000 + 's';
+
+        document.body.appendChild(particle);
+
+        // 动画完成后清理
+        setTimeout(() => {
+          particle.remove();
+        }, durationMs + 50);
+      }
+
+      // 中心爆炸涟漪
+      const centerBurst = document.createElement('div');
+      centerBurst.className = 'click-burst';
+      centerBurst.style.left = e.clientX + 'px';
+      centerBurst.style.top = e.clientY + 'px';
+      document.body.appendChild(centerBurst);
+      setTimeout(() => centerBurst.remove(), 600);
+    };
+
+    document.addEventListener('click', handleClick, { passive: true });
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, []);
+
+  return null;
+};
+
+export default ClickParticle;

mengyaprofile-frontend/src/components/ContactsSection.css

@@ -0,0 +1,226 @@
+.contacts-section {
+  margin-bottom: 40px;
+  animation: fadeInUp 0.8s ease-out 0.4s both;
+  padding: 24px;
+  border: 2px solid rgba(82, 183, 136, 0.3);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 20px rgba(82, 183, 136, 0.1);
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.section-title {
+  font-size: 32px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-icon {
+  font-size: 32px;
+}
+
+.contacts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.contact-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.contact-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+}
+
+.contact-icon {
+  font-size: 28px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #52b788, #95d5b2);
+  border-radius: 10px;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(82, 183, 136, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 图片图标样式 */
+.contact-icon-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+/* Emoji 图标样式 */
+.contact-icon-emoji {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.contact-info {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.contact-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 4px;
+}
+
+.contact-value {
+  font-size: 13px;
+  color: #4a5568;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.contact-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.contact-button {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: none;
+  background: rgba(82, 183, 136, 0.1);
+  color: #52b788;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
+
+.contact-button:hover {
+  background: linear-gradient(135deg, #52b788, #95d5b2);
+  color: white;
+  transform: scale(1.1);
+}
+
+.contact-button:active {
+  transform: scale(0.95);
+}
+
+.copy-toast {
+  position: absolute;
+  top: -36px;
+  right: 20px;
+  background: #48bb78;
+  color: white;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
+  animation: toastSlideIn 0.3s ease-out;
+}
+
+@keyframes toastSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .contacts-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  
+  .section-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  .contact-card {
+    padding: 14px;
+    border-radius: 12px;
+    gap: 12px;
+  }
+  
+  .contact-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 22px;
+    border-radius: 8px;
+  }
+  
+  .contact-icon-img {
+    border-radius: 8px;
+  }
+  
+  .contact-icon-emoji {
+    font-size: 22px;
+  }
+  
+  .contact-label {
+    font-size: 14px;
+  }
+  
+  .contact-value {
+    font-size: 12px;
+  }
+  
+  .contact-actions {
+    gap: 6px;
+  }
+  
+  .contact-button {
+    width: 28px;
+    height: 28px;
+    font-size: 14px;
+  }
+  
+  .copy-toast {
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .contacts-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

mengyaprofile-frontend/src/components/ContactsSection.js

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import './ContactsSection.css';
+
+function ContactsSection({ contacts }) {
+  const [copiedType, setCopiedType] = useState(null);
+
+  const handleCopy = (value, type) => {
+    navigator.clipboard.writeText(value).then(() => {
+      setCopiedType(type);
+      setTimeout(() => setCopiedType(null), 2000);
+    });
+  };
+
+  const getContactIcon = (type) => {
+    const icons = {
+      qq: '💬',
+      email: '📧',
+      github: '🐙',
+      wechat: '💚',
+      twitter: '🐦',
+      linkedin: '💼'
+    };
+    return icons[type] || '📱';
+  };
+
+  // 判断 icon 是否为 URL
+  const isImageUrl = (icon) => {
+    return icon && (icon.startsWith('http://') || icon.startsWith('https://'));
+  };
+
+  // 渲染图标(支持 URL 和 Emoji)
+  const renderIcon = (contact) => {
+    const icon = contact.icon || getContactIcon(contact.type);
+    
+    if (isImageUrl(icon)) {
+      return (
+        <img 
+          src={icon} 
+          alt={contact.label}
+          className="contact-icon-img"
+          onError={(e) => {
+            e.target.style.display = 'none';
+            e.target.nextSibling.style.display = 'block';
+          }}
+        />
+      );
+    }
+    
+    return <span className="contact-icon-emoji">{icon}</span>;
+  };
+
+  return (
+    <section className="contacts-section">
+      <h2 className="section-title">
+        <span className="title-icon">📮</span>
+        联系方式
+      </h2>
+      
+      <div className="contacts-grid">
+        {contacts.map((contact, index) => (
+          <div key={index} className="contact-card">
+            <div className="contact-icon">
+              {renderIcon(contact)}
+            </div>
+            
+            <div className="contact-info">
+              <h3 className="contact-label">{contact.label}</h3>
+              <p className="contact-value">{contact.value}</p>
+            </div>
+            
+            <div className="contact-actions">
+              {contact.link && (
+                <a
+                  href={contact.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="contact-button contact-visit"
+                  title="访问"
+                >
+                  🔗
+                </a>
+              )}
+              
+              <button
+                onClick={() => handleCopy(contact.value, contact.type)}
+                className="contact-button contact-copy"
+                title="复制"
+              >
+                {copiedType === contact.type ? '✓' : '📋'}
+              </button>
+            </div>
+            
+            {copiedType === contact.type && (
+              <div className="copy-toast">已复制!</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default ContactsSection;

mengyaprofile-frontend/src/components/ProfileSection.css

@@ -0,0 +1,155 @@
+.profile-section {
+  margin-bottom: 40px;
+}
+
+.profile-card {
+  background: transparent;
+  border-radius: 24px;
+  padding: 40px 30px;
+  text-align: center;
+  box-shadow: none;
+  animation: fadeInUp 0.8s ease-out;
+  position: relative;
+  overflow: hidden;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.profile-avatar-container {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
+.profile-avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 5px solid white;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  position: relative;
+  z-index: 1;
+  animation: avatarPulse 3s ease-in-out infinite;
+}
+
+@keyframes avatarPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.avatar-ring {
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  right: -10px;
+  bottom: -10px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #52b788, #95d5b2);
+  opacity: 0.3;
+  animation: ringPulse 3s ease-in-out infinite;
+}
+
+@keyframes ringPulse {
+  0%, 100% { transform: scale(1); opacity: 0.3; }
+  50% { transform: scale(1.1); opacity: 0.5; }
+}
+
+.profile-nickname {
+  font-size: 36px;
+  font-weight: 700;
+  color: #2d3748;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, #52b788, #95d5b2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.profile-position {
+  margin-bottom: 24px;
+}
+
+.position-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #52b788, #95d5b2);
+  color: white;
+  padding: 8px 24px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  box-shadow: 0 4px 15px rgba(82, 183, 136, 0.4);
+}
+
+.profile-introduction {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #2d3748;
+  margin-bottom: 0;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
+  font-weight: 500;
+}
+
+.profile-motto {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px 24px;
+  background: linear-gradient(135deg, rgba(82, 183, 136, 0.1), rgba(149, 213, 178, 0.1));
+  border-radius: 12px;
+  margin-top: 24px;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.motto-icon {
+  font-size: 24px;
+}
+
+.motto-text {
+  font-size: 16px;
+  color: #2d6a4f;
+  font-weight: 500;
+  font-style: italic;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .profile-card {
+    padding: 30px 20px;
+  }
+  
+  .profile-avatar {
+    width: 100px;
+    height: 100px;
+  }
+  
+  .profile-nickname {
+    font-size: 28px;
+  }
+  
+  .profile-introduction {
+    font-size: 15px;
+  }
+  
+  .profile-motto {
+    flex-direction: column;
+    gap: 8px;
+  }
+}

mengyaprofile-frontend/src/components/ProfileSection.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import './ProfileSection.css';
+
+function ProfileSection({ profile }) {
+  return (
+    <section className="profile-section">
+      <div className="profile-card">
+        <div className="profile-avatar-container">
+          <img 
+            src={profile.avatar} 
+            alt={profile.nickname}
+            className="profile-avatar"
+          />
+          <div className="avatar-ring"></div>
+        </div>
+        
+        <h1 className="profile-nickname">{profile.nickname}</h1>
+        
+        <p className="profile-introduction">{profile.introduction}</p>
+      </div>
+    </section>
+  );
+}
+
+export default ProfileSection;

mengyaprofile-frontend/src/components/ProjectsSection.css

@@ -0,0 +1,238 @@
+.projects-section {
+  margin-bottom: 40px;
+  animation: fadeInUp 0.8s ease-out 0.2s both;
+  padding: 24px;
+  border: 2px solid rgba(82, 183, 136, 0.3);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 20px rgba(82, 183, 136, 0.1);
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.section-title {
+  font-size: 32px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-icon {
+  font-size: 36px;
+  display: inline-block;
+  animation: bounce 2s ease-in-out infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 16px;
+}
+
+.project-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  padding: 20px;
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  position: relative;
+  overflow: hidden;
+}
+
+.develop-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+  cursor: help;
+  color: #52b788;
+  opacity: 0.85;
+  transition: opacity 0.2s ease;
+}
+
+.develop-badge:hover {
+  opacity: 1;
+}
+
+.develop-badge svg {
+  display: block;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+.project-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #52b788, #95d5b2);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.project-card:hover::before {
+  transform: scaleX(1);
+}
+
+.project-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+}
+
+.project-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.project-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.project-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.project-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #2d3748;
+  margin: 0;
+  flex: 1;
+}
+
+.project-description {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #4a5568;
+  margin-bottom: 12px;
+  flex-grow: 1;
+}
+
+.project-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.project-tag {
+  display: inline-block;
+  padding: 3px 10px;
+  background: linear-gradient(135deg, rgba(82, 183, 136, 0.15), rgba(149, 213, 178, 0.15));
+  color: #2d6a4f;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.project-link-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 12px;
+  border-top: 1px solid #e2e8f0;
+  color: #52b788;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.arrow {
+  transition: transform 0.3s ease;
+  font-size: 18px;
+}
+
+.project-card:hover .arrow {
+  transform: translateX(4px);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .projects-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+  
+  .section-title {
+    font-size: 28px;
+  }
+  
+  .project-card {
+    padding: 16px;
+  }
+  
+  .develop-badge {
+    top: 8px;
+    right: 8px;
+  }
+  
+  .develop-badge svg {
+    width: 16px;
+    height: 16px;
+  }
+  
+  .project-header {
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+  
+  .project-icon {
+    width: 36px;
+    height: 36px;
+  }
+  
+  .project-title {
+    font-size: 16px;
+  }
+  
+  .project-description {
+    font-size: 13px;
+  }
+  
+  .project-tag {
+    font-size: 11px;
+    padding: 2px 8px;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .projects-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1025px) and (max-width: 1440px) {
+  .projects-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

mengyaprofile-frontend/src/components/ProjectsSection.js

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react';
+import './ProjectsSection.css';
+
+function ProjectsSection({ projects }) {
+  const [hoveredId, setHoveredId] = useState(null);
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  useEffect(() => {
+    // 检查 URL 参数
+    const urlParams = new URLSearchParams(window.location.search);
+    const token = urlParams.get('token');
+    const pathname = window.location.pathname;
+    
+    // 检查是否为 /admin 路径且 token 正确
+    if (pathname.includes('/admin') && token === 'shumengya520') {
+      setIsAdmin(true);
+    }
+  }, []);
+
+  const getFavicon = (url) => {
+    try {
+      const domain = new URL(url).origin;
+      return `${domain}/favicon.ico`;
+    } catch {
+      return 'https://api.iconify.design/mdi:web.svg';
+    }
+  };
+
+  // 过滤项目
+  // 1. 如果 show 为 false,则不显示
+  // 2. 如果 admin 为 true 且不是管理员模式,则不显示
+  const filteredProjects = projects.filter(project => {
+    // 首先检查 show 字段,如果为 false 则直接不显示
+    if (project.show === false) {
+      return false;
+    }
+    
+    // 然后检查 admin 权限
+    if (project.admin === true && !isAdmin) {
+      return false; // 隐藏需要 admin 权限的项目
+    }
+    
+    return true; // 显示其他所有项目
+  });
+
+  return (
+    <section className="projects-section">
+      <h2 className="section-title">
+        <span className="title-icon">🎯</span>
+        精选项目
+      </h2>
+      
+      <div className="projects-grid">
+        {filteredProjects.map(project => (
+          <a
+            key={project.id}
+            href={project.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`project-card ${hoveredId === project.id ? 'hovered' : ''}`}
+            onMouseEnter={() => setHoveredId(project.id)}
+            onMouseLeave={() => setHoveredId(null)}
+          >
+            {project.develop === true && (
+              <div className="develop-badge" title="独立开发">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M13.7803 3.03039L20.4697 9.71982C21.0508 10.3009 21.0508 11.2451 20.4697 11.8262L11.8262 20.4697C11.2451 21.0508 10.3009 21.0508 9.71982 20.4697L3.03039 13.7803C2.44928 13.1992 2.44928 12.255 3.03039 11.6739L11.6739 3.03039C12.255 2.44928 13.1992 2.44928 13.7803 3.03039Z" fill="currentColor"/>
+                  <path d="M5 20L9 16L13 20L9 24L5 20Z" fill="currentColor"/>
+                </svg>
+              </div>
+            )}
+            <div className="project-header">
+              <div className="project-icon">
+                <img 
+                  src={project.icon || getFavicon(project.link)} 
+                  alt={project.title}
+                  onError={(e) => {
+                    e.target.src = 'https://api.iconify.design/mdi:web.svg';
+                  }}
+                />
+              </div>
+              <h3 className="project-title">{project.title}</h3>
+            </div>
+            
+            <p className="project-description">{project.description}</p>
+            
+            {project.tags && project.tags.length > 0 && (
+              <div className="project-tags">
+                {project.tags.map((tag, index) => (
+                  <span key={index} className="project-tag">{tag}</span>
+                ))}
+              </div>
+            )}
+            
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default ProjectsSection;

mengyaprofile-frontend/src/components/TechStackSection.css

@@ -0,0 +1,120 @@
+.techstack-section {
+  margin-bottom: 40px;
+  animation: fadeInUp 0.8s ease-out 0.15s both;
+  padding: 24px;
+  border: 2px solid rgba(82, 183, 136, 0.3);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 20px rgba(82, 183, 136, 0.1);
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.section-title {
+  font-size: 32px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-icon {
+  font-size: 36px;
+  display: inline-block;
+  animation: bounce 2s ease-in-out infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+.techstack-container {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.tech-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+  align-items: center;
+  justify-items: center;
+}
+
+.tech-item {
+  transition: all 0.3s ease;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+.tech-item a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  text-decoration: none;
+}
+
+.tech-item img {
+  height: 32px;
+  max-width: 100%;
+  display: block;
+  transition: transform 0.3s ease, filter 0.3s ease;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+  object-fit: contain;
+}
+
+.tech-item:hover {
+  transform: translateY(-3px);
+  background: rgba(255, 255, 255, 0.25);
+  box-shadow: 0 4px 15px rgba(82, 183, 136, 0.2);
+}
+
+.tech-item:hover img {
+  filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .section-title {
+    font-size: 28px;
+  }
+  
+  .techstack-container {
+    padding: 20px;
+  }
+  
+  .tech-items {
+    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    gap: 10px;
+  }
+  
+  .tech-item img {
+    height: 28px;
+  }
+}

mengyaprofile-frontend/src/components/TechStackSection.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import './TechStackSection.css';
+
+function TechStackSection({ techstack }) {
+  if (!techstack || !techstack.items) return null;
+
+  return (
+    <section className="techstack-section">
+      <h2 className="section-title">
+        <span className="title-icon">🛠️</span>
+        {techstack.title}
+      </h2>
+      
+      <div className="techstack-container">
+        <div className="tech-items">
+          {techstack.items.map((item, idx) => (
+            <div key={idx} className="tech-item">
+              {item.link ? (
+                <a 
+                  href={item.link} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  title={item.name}
+                >
+                  <img 
+                    src={item.icon} 
+                    alt={item.name}
+                    loading="lazy"
+                  />
+                </a>
+              ) : (
+                <img 
+                  src={item.icon} 
+                  alt={item.name}
+                  title={item.name}
+                  loading="lazy"
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default TechStackSection;