sec commit
This commit is contained in:
398
shared/code/frontend/portfolio/css/responsive.css
Normal file
398
shared/code/frontend/portfolio/css/responsive.css
Normal file
@@ -0,0 +1,398 @@
|
||||
/* 响应式样式文件 */
|
||||
/* 文件位置: portfolio/css/responsive.css */
|
||||
/* 创建时间: 2026-03-31 */
|
||||
|
||||
/* 大桌面设备 (1200px以上) */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 桌面设备 (1024px - 1199px) */
|
||||
@media (max-width: 1199px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.skills-grid,
|
||||
.projects-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板设备 (768px - 1023px) */
|
||||
@media (max-width: 1023px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
/* 导航栏响应式 */
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-primary);
|
||||
padding: var(--spacing-lg);
|
||||
transition: var(--transition-normal);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-toggle.active .bar:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px);
|
||||
}
|
||||
|
||||
.menu-toggle.active .bar:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.menu-toggle.active .bar:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(7px, -6px);
|
||||
}
|
||||
|
||||
/* Hero 部分响应式 */
|
||||
.hero .container {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
order: -1;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
/* 关于部分响应式 */
|
||||
.about-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 5rem;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* 联系部分响应式 */
|
||||
.contact-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* 页脚响应式 */
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动设备 (576px - 767px) */
|
||||
@media (max-width: 767px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.skills-grid,
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.experience {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/* 小移动设备 (575px以下) */
|
||||
@media (max-width: 575px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.about-text h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.project-content {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.navbar,
|
||||
.hero-buttons,
|
||||
.contact-form,
|
||||
.footer,
|
||||
.back-to-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.about,
|
||||
.skills,
|
||||
.projects,
|
||||
.contact {
|
||||
padding: 1rem 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高对比度模式支持 */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--color-text: #000000;
|
||||
--color-text-light: #333333;
|
||||
--color-primary: #ffffff;
|
||||
--color-secondary: #f0f0f0;
|
||||
--color-bg-light: #e0e0e0;
|
||||
--color-border: #000000;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #0000ff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0000ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
background: #0000ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 黑暗模式支持（系统级） */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* 我们的主题已经是深色，所以不需要额外调整 */
|
||||
/* 这里可以添加针对系统黑暗模式的微调 */
|
||||
}
|
||||
|
||||
/* 横屏模式 */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.hero {
|
||||
min-height: auto;
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超大屏幕支持 */
|
||||
@media (min-width: 1600px) {
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 触摸设备优化 */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.nav-link:hover::after {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.social-link:hover,
|
||||
.project-link:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* 增加触摸目标大小 */
|
||||
.nav-link {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 性能优化：在低端设备上减少特效 */
|
||||
@media (max-width: 1024px) and (prefers-reduced-data: reduce) {
|
||||
.hero {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.image-placeholder,
|
||||
.avatar-placeholder {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
}
|
||||
706
shared/code/frontend/portfolio/css/style.css
Normal file
706
shared/code/frontend/portfolio/css/style.css
Normal file
@@ -0,0 +1,706 @@
|
||||
/* 个人作品展示网站 - 主样式文件 */
|
||||
/* 文件位置: portfolio/css/style.css */
|
||||
/* 创建时间: 2026-03-31 */
|
||||
|
||||
/* CSS变量 - 深色主题 */
|
||||
:root {
|
||||
/* 颜色方案 */
|
||||
--color-primary: #1a1a2e;
|
||||
--color-secondary: #16213e;
|
||||
--color-accent: #0f3460;
|
||||
--color-highlight: #e94560;
|
||||
--color-text: #ffffff;
|
||||
--color-text-light: #b8b8b8;
|
||||
--color-border: #2d3748;
|
||||
--color-bg-light: #2a2a3e;
|
||||
|
||||
/* 字体 */
|
||||
--font-heading: 'Montserrat', sans-serif;
|
||||
--font-body: 'Open Sans', sans-serif;
|
||||
|
||||
/* 间距 */
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 2rem;
|
||||
--spacing-lg: 3rem;
|
||||
--spacing-xl: 4rem;
|
||||
|
||||
/* 边框半径 */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* 过渡 */
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
}
|
||||
|
||||
/* 重置和基础样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.highlight {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background-color: var(--color-highlight);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-normal);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-highlight);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #ff2e4f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
border: 2px solid var(--color-highlight);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-highlight);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 8px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(26, 26, 46, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
padding: var(--spacing-sm) 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--color-text-light);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: var(--color-highlight);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
margin: 5px 0;
|
||||
background-color: var(--color-text);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
/* Hero 部分 */
|
||||
.hero {
|
||||
padding: calc(var(--spacing-xl) * 2) 0 var(--spacing-xl);
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-highlight) 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 8rem;
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* 关于部分 */
|
||||
.about {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-highlight) 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 6rem;
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.about-text h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.experience {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.exp-item {
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--color-bg-light);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.exp-item h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2rem;
|
||||
color: var(--color-highlight);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.exp-item p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
/* 技能部分 */
|
||||
.skills {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
background-color: var(--color-secondary);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.skill-category h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-category h3 i {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.skill-bar {
|
||||
height: 8px;
|
||||
background-color: var(--color-bg-light);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-highlight) 100%);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
.skill-percent {
|
||||
float: right;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.skill-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-tag {
|
||||
background-color: var(--color-bg-light);
|
||||
color: var(--color-text-light);
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.skill-tag:hover {
|
||||
background-color: var(--color-highlight);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* 项目部分 */
|
||||
.projects {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background-color: var(--color-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
height: 200px;
|
||||
background-color: var(--color-accent);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-image .image-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.project-content {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.project-content h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.project-content p {
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.project-tech {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
background-color: var(--color-bg-light);
|
||||
color: var(--color-text-light);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.project-link {
|
||||
color: var(--color-highlight);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* 联系部分 */
|
||||
.contact {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.contact-info h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.contact-info p {
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-highlight);
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.contact-item h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
margin: 0;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background-color: var(--color-highlight);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: var(--color-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-highlight);
|
||||
box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* 页脚 */
|
||||
.footer {
|
||||
background-color: var(--color-secondary);
|
||||
padding: var(--spacing-xl) 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.footer-logo p {
|
||||
color: var(--color-text-light);
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.footer-links h4,
|
||||
.footer-newsletter h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.footer-links ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--color-text-light);
|
||||
text-decoration: none;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--color-text);
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.footer-newsletter p {
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.newsletter-form input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
background-color: var(--color-primary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--color-text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 返回顶部按钮 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: var(--color-highlight
|
||||
413
shared/code/frontend/portfolio/index.html
Normal file
413
shared/code/frontend/portfolio/index.html
Normal file
@@ -0,0 +1,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>张三 - 个人作品展示</title>
|
||||
<meta name="description" content="张三的个人作品展示网站，展示前端开发技能和项目经验">
|
||||
<meta name="keywords" content="前端开发, 个人作品, 网页设计, 响应式网站">
|
||||
<meta name="author" content="张三">
|
||||
|
||||
<!-- Open Graph 标签 -->
|
||||
<meta property="og:title" content="张三 - 个人作品展示">
|
||||
<meta property="og:description" content="专业前端开发工程师的个人作品展示">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://zhangsan-portfolio.com">
|
||||
|
||||
<!-- 字体 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- 样式 -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/responsive.css">
|
||||
|
||||
<!-- 网站图标 -->
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<a href="#" class="logo">张三<span class="highlight">.</span></a>
|
||||
|
||||
<button class="menu-toggle" aria-label="切换菜单">
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li><a href="#home" class="nav-link active">首页</a></li>
|
||||
<li><a href="#about" class="nav-link">关于</a></li>
|
||||
<li><a href="#skills" class="nav-link">技能</a></li>
|
||||
<li><a href="#projects" class="nav-link">项目</a></li>
|
||||
<li><a href="#contact" class="nav-link">联系</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero 部分 -->
|
||||
<section id="home" class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">你好，我是 <span class="highlight">张三</span></h1>
|
||||
<h2 class="hero-subtitle">前端开发工程师 & UI设计师</h2>
|
||||
<p class="hero-description">
|
||||
我专注于创建美观、高效、用户友好的网页应用。
|
||||
拥有5年+的前端开发经验，擅长React、Vue和现代CSS技术。
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#projects" class="btn btn-primary">查看作品</a>
|
||||
<a href="#contact" class="btn btn-secondary">联系我</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<div class="image-placeholder">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 关于部分 -->
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<h2 class="section-title">关于我</h2>
|
||||
<div class="about-content">
|
||||
<div class="about-image">
|
||||
<div class="avatar-placeholder">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-text">
|
||||
<h3>热情的前端开发者</h3>
|
||||
<p>
|
||||
我是一名充满热情的前端开发工程师，专注于创建优秀的用户体验。
|
||||
我相信好的设计不仅仅是美观，更重要的是功能性和易用性。
|
||||
</p>
|
||||
<p>
|
||||
在过去的5年里，我参与了多个大型项目，从企业级应用到创意个人项目。
|
||||
我热爱学习新技术，并享受将想法转化为现实的过程。
|
||||
</p>
|
||||
|
||||
<div class="experience">
|
||||
<div class="exp-item">
|
||||
<h4>5+ 年</h4>
|
||||
<p>开发经验</p>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<h4>50+ 项目</h4>
|
||||
<p>成功交付</p>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<h4>100%</h4>
|
||||
<p>客户满意度</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技能部分 -->
|
||||
<section id="skills" class="skills">
|
||||
<div class="container">
|
||||
<h2 class="section-title">我的技能</h2>
|
||||
|
||||
<div class="skills-grid">
|
||||
<!-- 前端技能 -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fas fa-code"></i> 前端开发</h3>
|
||||
<div class="skill-list">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">HTML5/CSS3</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 95%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">95%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">JavaScript</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 90%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">90%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">React</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 85%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">85%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Vue.js</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 80%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">80%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设计技能 -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fas fa-paint-brush"></i> 设计</h3>
|
||||
<div class="skill-list">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">UI/UX设计</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 85%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">85%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">响应式设计</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 90%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">90%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Figma</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 80%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">80%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Adobe Creative Suite</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">75%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他技能 -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fas fa-tools"></i> 其他技能</h3>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Git</span>
|
||||
<span class="skill-tag">Webpack</span>
|
||||
<span class="skill-tag">REST API</span>
|
||||
<span class="skill-tag">性能优化</span>
|
||||
<span class="skill-tag">SEO</span>
|
||||
<span class="skill-tag">团队协作</span>
|
||||
<span class="skill-tag">项目管理</span>
|
||||
<span class="skill-tag">问题解决</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 项目部分 -->
|
||||
<section id="projects" class="projects">
|
||||
<div class="container">
|
||||
<h2 class="section-title">精选项目</h2>
|
||||
|
||||
<div class="projects-grid">
|
||||
<!-- 项目1 -->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<div class="image-placeholder">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>电商平台</h3>
|
||||
<p>一个完整的响应式电商网站，包含商品展示、购物车、支付流程等功能。</p>
|
||||
<div class="project-tech">
|
||||
<span class="tech-tag">React</span>
|
||||
<span class="tech-tag">Node.js</span>
|
||||
<span class="tech-tag">MongoDB</span>
|
||||
<span class="tech-tag">Stripe</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目2 -->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<div class="image-placeholder">
|
||||
<i class="fas fa-tasks"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>任务管理应用</h3>
|
||||
<p>一个现代化的任务管理工具，支持看板视图、团队协作和实时更新。</p>
|
||||
<div class="project-tech">
|
||||
<span class="tech-tag">Vue.js</span>
|
||||
<span class="tech-tag">Firebase</span>
|
||||
<span class="tech-tag">Vuex</span>
|
||||
<span class="tech-tag">Vuetify</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目3 -->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<div class="image-placeholder">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>数据分析仪表板</h3>
|
||||
<p>交互式数据可视化仪表板，支持多种图表类型和数据源连接。</p>
|
||||
<div class="project-tech">
|
||||
<span class="tech-tag">D3.js</span>
|
||||
<span class="tech-tag">Express</span>
|
||||
<span class="tech-tag">PostgreSQL</span>
|
||||
<span class="tech-tag">Chart.js</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系部分 -->
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<h2 class="section-title">联系我</h2>
|
||||
|
||||
<div class="contact-content">
|
||||
<div class="contact-info">
|
||||
<h3>让我们合作</h3>
|
||||
<p>如果您有项目想法或需要帮助，请随时联系我。我通常会在24小时内回复。</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<div>
|
||||
<h4>邮箱</h4>
|
||||
<p>zhangsan@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone"></i>
|
||||
<div>
|
||||
<h4>电话</h4>
|
||||
<p>+86 138 0013 8000</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<div>
|
||||
<h4>位置</h4>
|
||||
<p>中国，北京</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-links">
|
||||
<a href="#" class="social-link" aria-label="GitHub">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="LinkedIn">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="Twitter">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="Codepen">
|
||||
<i class="fab fa-codepen"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-form">
|
||||
<form id="contactForm">
|
||||
<div class="form-group">
|
||||
<label for="name">姓名</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject">主题</label>
|
||||
<input type="text" id="subject" name="subject" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">消息</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">发送消息</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">
|
||||
<a href="#" class="logo">张三<span class="highlight">.</span></a>
|
||||
<p>创建美观、高效、用户友好的网页应用</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<h4>快速链接</h4>
|
||||
<ul>
|
||||
<li><a href="#home">首页</a></li>
|
||||
<li><a href="#about">关于</a></li>
|
||||
<li><a href="#skills">技能</a></li>
|
||||
<li><a href="#projects">项目</a></li>
|
||||
<li><a href="#contact">联系</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-newsletter">
|
||||
<h4>保持联系</h4>
|
||||
<p>订阅我的技术博客和项目更新</p>
|
||||
<form class="newsletter-form">
|
||||
<input type="email" placeholder="输入您的邮箱" required>
|
||||
<button type="submit" class="btn btn-small">订阅</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 张三. 保留所有权利.</p>
|
||||
<p>最后更新: 2026-03-31</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<button id="backToTop" class="back-to-top" aria-label="返回顶部">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
399
shared/code/frontend/portfolio/js/main.js
Normal file
399
shared/code/frontend/portfolio/js/main.js
Normal file
@@ -0,0 +1,399 @@
|
||||
// 个人作品展示网站 - 主JavaScript文件
|
||||
// 文件位置: portfolio/js/main.js
|
||||
// 创建时间: 2026-03-31
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 初始化所有功能
|
||||
initNavigation();
|
||||
initSmoothScroll();
|
||||
initContactForm();
|
||||
initBackToTop();
|
||||
initSkillAnimations();
|
||||
initProjectCards();
|
||||
|
||||
console.log('个人作品展示网站已加载完成！');
|
||||
});
|
||||
|
||||
// 导航功能
|
||||
function initNavigation() {
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
const navItems = document.querySelectorAll('.nav-link');
|
||||
|
||||
// 菜单切换
|
||||
if (menuToggle) {
|
||||
menuToggle.addEventListener('click', function() {
|
||||
navLinks.classList.toggle('active');
|
||||
menuToggle.classList.toggle('active');
|
||||
});
|
||||
}
|
||||
|
||||
// 导航项点击
|
||||
navItems.forEach(item => {
|
||||
item.addEventListener('click', function(e) {
|
||||
// 关闭移动端菜单
|
||||
if (window.innerWidth <= 1023) {
|
||||
navLinks.classList.remove('active');
|
||||
menuToggle.classList.remove('active');
|
||||
}
|
||||
|
||||
// 更新活动状态
|
||||
navItems.forEach(nav => nav.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动时更新活动导航项
|
||||
window.addEventListener('scroll', updateActiveNav);
|
||||
}
|
||||
|
||||
// 平滑滚动
|
||||
function initSmoothScroll() {
|
||||
const links = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
const headerHeight = document.querySelector('.navbar').offsetHeight;
|
||||
const targetPosition = targetElement.offsetTop - headerHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 联系表单处理
|
||||
function initContactForm() {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 获取表单数据
|
||||
const formData = new FormData(this);
|
||||
const data = Object.fromEntries(formData);
|
||||
|
||||
// 简单验证
|
||||
if (!validateForm(data)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = '发送中...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// 模拟API调用
|
||||
setTimeout(() => {
|
||||
// 在实际应用中，这里会发送到服务器
|
||||
console.log('表单数据:', data);
|
||||
|
||||
// 显示成功消息
|
||||
showFormMessage('消息发送成功！我会尽快回复您。', 'success');
|
||||
|
||||
// 重置表单
|
||||
contactForm.reset();
|
||||
|
||||
// 恢复按钮状态
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
function validateForm(data) {
|
||||
const errors = [];
|
||||
|
||||
if (!data.name || data.name.trim().length < 2) {
|
||||
errors.push('请输入有效的姓名（至少2个字符）');
|
||||
}
|
||||
|
||||
if (!data.email || !isValidEmail(data.email)) {
|
||||
errors.push('请输入有效的邮箱地址');
|
||||
}
|
||||
|
||||
if (!data.subject || data.subject.trim().length < 3) {
|
||||
errors.push('请输入主题（至少3个字符）');
|
||||
}
|
||||
|
||||
if (!data.message || data.message.trim().length < 10) {
|
||||
errors.push('请输入消息内容（至少10个字符）');
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
showFormMessage(errors.join('<br>'), 'error');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function isValidEmail(email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
function showFormMessage(message, type) {
|
||||
// 移除旧的消息
|
||||
const oldMessage = document.querySelector('.form-message');
|
||||
if (oldMessage) {
|
||||
oldMessage.remove();
|
||||
}
|
||||
|
||||
// 创建新消息
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `form-message ${type}`;
|
||||
messageDiv.innerHTML = message;
|
||||
|
||||
// 添加到表单前
|
||||
const form = document.getElementById('contactForm');
|
||||
form.parentNode.insertBefore(messageDiv, form);
|
||||
|
||||
// 5秒后自动移除
|
||||
setTimeout(() => {
|
||||
messageDiv.remove();
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
// 返回顶部按钮
|
||||
function initBackToTop() {
|
||||
const backToTopBtn = document.getElementById('backToTop');
|
||||
|
||||
if (backToTopBtn) {
|
||||
// 显示/隐藏按钮
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.pageYOffset > 300) {
|
||||
backToTopBtn.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
backToTopBtn.style.opacity = '1';
|
||||
}, 10);
|
||||
} else {
|
||||
backToTopBtn.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
backToTopBtn.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
// 点击返回顶部
|
||||
backToTopBtn.addEventListener('click', function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 技能条动画
|
||||
function initSkillAnimations() {
|
||||
const skillBars = document.querySelectorAll('.skill-level');
|
||||
|
||||
// 创建Intersection Observer来检测技能部分是否在视口中
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// 当技能部分进入视口时，触发动画
|
||||
skillBars.forEach(bar => {
|
||||
const width = bar.style.width;
|
||||
bar.style.width = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
bar.style.width = width;
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 停止观察，避免重复触发
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.5 // 当50%的元素可见时触发
|
||||
});
|
||||
|
||||
// 观察技能部分
|
||||
const skillsSection = document.getElementById('skills');
|
||||
if (skillsSection) {
|
||||
observer.observe(skillsSection);
|
||||
}
|
||||
}
|
||||
|
||||
// 项目卡片交互
|
||||
function initProjectCards() {
|
||||
const projectCards = document.querySelectorAll('.project-card');
|
||||
|
||||
projectCards.forEach(card => {
|
||||
// 点击卡片查看详情
|
||||
card.addEventListener('click', function(e) {
|
||||
// 防止点击链接时触发卡片点击
|
||||
if (e.target.tagName === 'A') return;
|
||||
|
||||
// 在实际应用中，这里会打开项目详情模态框
|
||||
console.log('查看项目详情:', this.querySelector('h3').textContent);
|
||||
});
|
||||
|
||||
// 键盘导航支持
|
||||
card.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
console.log('查看项目详情:', this.querySelector('h3').textContent);
|
||||
}
|
||||
});
|
||||
|
||||
// 设置卡片可聚焦
|
||||
card.setAttribute('tabindex', '0');
|
||||
});
|
||||
}
|
||||
|
||||
// 更新活动导航项
|
||||
function updateActiveNav() {
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const scrollPosition = window.pageYOffset + 100;
|
||||
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.offsetHeight;
|
||||
const sectionId = section.getAttribute('id');
|
||||
|
||||
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${sectionId}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 性能优化：延迟加载图片
|
||||
function initLazyLoading() {
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.add('loaded');
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('img[data-src]').forEach(img => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 添加CSS样式到页面
|
||||
function addDynamicStyles() {
|
||||
const styles = `
|
||||
.form-message {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-message.success {
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
color: #4caf50;
|
||||
border: 1px solid #4caf50;
|
||||
}
|
||||
|
||||
.form-message.error {
|
||||
background-color: rgba(244, 67, 54, 0.1);
|
||||
color: #f44336;
|
||||
border: 1px solid #f44336;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
background-color: var(--color-highlight);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
background-color: #ff2e4f;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:focus {
|
||||
outline: 2px solid var(--color-highlight);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
img[data-src] {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
img.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleSheet = document.createElement('style');
|
||||
styleSheet.textContent = styles;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
|
||||
// 初始化动态样式
|
||||
addDynamicStyles();
|
||||
|
||||
// 性能监控
|
||||
if (typeof PerformanceObserver !== 'undefined') {
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries()) {
|
||||
console.log(`${entry.name}: ${entry.duration}ms`);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe({ entryTypes: ['measure'] });
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('JavaScript错误:', e.message, 'at', e.filename, ':', e.lineno);
|
||||
|
||||
// 在实际应用中，这里可以发送错误到监控服务
|
||||
// sendErrorToMonitoring(e);
|
||||
});
|
||||
|
||||
// PWA支持（基础）
|
||||
if ('serviceWorker' in navigator && window.location.protocol === 'https:') {
|
||||
window.addEventListener('load', function() {
|
||||
navigator.serviceWorker.register('/sw.js').then(function(registration) {
|
||||
console.log('ServiceWorker 注册成功:', registration.scope);
|
||||
}).catch(function(error) {
|
||||
console.log('ServiceWorker 注册失败:', error);
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user