diff --git a/public/favicon.svg b/public/favicon.svg index f157bd1..49bd930 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,9 +1,16 @@ - - - + + + + + + + + + + + diff --git a/public/modern-code-icon.svg b/public/modern-code-icon.svg new file mode 100644 index 0000000..8a14d18 --- /dev/null +++ b/public/modern-code-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx index b8e40ad..2140169 100644 --- a/src/components/GlassHeader.tsx +++ b/src/components/GlassHeader.tsx @@ -8,6 +8,7 @@ import { useState, useEffect } from "react"; import { Menu, X } from "lucide-react"; import { defaultLang } from "@/i18n/ui"; import { type GlassHeaderProps } from "@/types"; +import { motion } from "framer-motion"; export default function GlassHeader({ lang: propLang }: GlassHeaderProps) { const [lang, setLang] = useState(propLang || defaultLang); @@ -35,18 +36,30 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) { const toggleMenu = () => setIsMenuOpen(!isMenuOpen); return ( -
+ - - โœจ {personalInfo.name} - +
Code Icon + {personalInfo.name} + {/* Desktop Navigation */} -
+
{/* Language Switcher added here */} - - + + + + + + + {/* Mobile Menu Button */} - +
{/* Mobile Navigation */} -
-
( - ( + {item.icon} {t(item.key as any)} - + ))}
- + ); } diff --git a/src/pages/services.md b/src/pages/services.md new file mode 100644 index 0000000..bd6962d --- /dev/null +++ b/src/pages/services.md @@ -0,0 +1,119 @@ +--- +title: "My Services" +description: "Explore the professional services I offer to help bring your digital projects to life" +layout: "../layouts/AboutLayout.astro" +--- + +import HighlightBox from '../components/ui/HighlightBox.astro'; + +# Services I Provide ๐Ÿ› ๏ธ + + +็”จไผ˜้›…็š„ไปฃ็ ๅ’Œๅˆ›ๆ–ฐ็š„ๆ€็ปด๏ผŒไธบๅคๆ‚้—ฎ้ข˜ๆ‰“้€ ็ฒพ่‡ด็š„่งฃๅ†ณๆ–นๆกˆใ€‚ + + +## Web Development ๐ŸŒ + + + +- Building responsive and modern websites using the latest technologies +- Creating custom web applications tailored to your specific needs +- Implementing frontend interfaces with React, Vue.js, or Angular +- Developing backend systems with Node.js, Express, Django, or Flask +- Optimizing website performance and user experience + + + +## App Development ๐Ÿ“ฑ + + + +- Developing cross-platform mobile applications using React Native or Flutter +- Creating native iOS and Android applications +- Building progressive web apps (PWAs) for mobile-like experiences on the web +- Implementing offline functionality and push notifications +- Integrating with device features like camera, GPS, and sensors + + + +## WeChat Mini Program Development ๐Ÿ’ฌ + + + +- Designing and developing WeChat Mini Programs for businesses +- Creating interactive and engaging user interfaces +- Implementing WeChat Pay and other WeChat APIs +- Optimizing for WeChat's ecosystem and requirements +- Building custom features and functionalities specific to your business needs + + + +## UI Design ๐ŸŽจ + + + +- Creating modern, clean, and intuitive user interfaces +- Designing responsive layouts that work across all devices +- Developing brand identity and visual language +- Creating wireframes, prototypes, and high-fidelity mockups +- Implementing design systems for consistent user experiences + + + +## Bug Fixing ๐Ÿ› + + + +- Identifying and resolving issues in existing applications +- Debugging complex problems in frontend and backend systems +- Optimizing code for better performance and reliability +- Refactoring legacy code to modern standards +- Implementing automated testing to prevent future bugs + + + +## Important Notes ๐Ÿ“ + + +To avoid unnecessary misunderstandings, please read the following notes before contacting me: + +1. Please provide detailed project requirements, including wireframes or design specifications (if you don't understand these, I can help guide you). +2. Please specify project completion time and development period. +3. In general, I only accept commercial projects, and other forms of cooperation need to be discussed separately. +4. I currently cannot provide invoicing services. +5. Projects can be maintained free of charge for 3 months after completion. + + +## Collaboration Process ๐Ÿค + + +1. Confirm the project +2. Determine the collaboration method +3. Confirm project functional requirements +4. Confirm development period and delivery time +5. Confirm project design or wireframes +6. Make payment +7. Project development +8. Project testing +9. Project launch +10. Project maintenance + + +## Payment Methods ๐Ÿ’ฐ + + + +- WeChat Pay +- Alipay +- Bank Transfer + +**Note: All projects use the 442 payment method** + + +## Contact Information ๐Ÿ“ž + + +- QQ: **2770723534** +- WeChat: **JoyCodeing** +- Email: **zhaoguiyang18@gmail.com** + \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 9a513ed..b464efc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -10,10 +10,39 @@ overflow: hidden; } +/* Modern Design Elements */ +.gradient-text { + background: linear-gradient(to right, #8B5CF6, #EC4899); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.glass-effect { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +.dark .glass-effect { + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.hover-lift { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.hover-lift:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); +} + @custom-variant dark (&:is(.dark *)); :root { - --radius: 0.625rem; + --radius: 0.75rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); @@ -45,6 +74,17 @@ --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); + --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --svg-filter-color: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%); + + /* Modern Design Variables */ + --gradient-primary: linear-gradient(135deg, #8B5CF6, #EC4899); + --gradient-secondary: linear-gradient(135deg, #3B82F6, #10B981); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); + --animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); + --animation-smooth: cubic-bezier(0.65, 0, 0.35, 1); } .dark { @@ -79,6 +119,12 @@ --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); + --svg-filter-color: invert(100%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(102%) contrast(101%); + + /* Dark Mode Modern Design Variables */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3); } @theme inline { @@ -122,9 +168,20 @@ @layer base { * { @apply border-border outline-ring/50; - line-height: 1.2; + line-height: 1.5; } body { @apply bg-background text-foreground; + font-feature-settings: "ss01", "ss02", "cv01", "cv02"; + } + h1, h2, h3, h4, h5, h6 { + @apply font-bold tracking-tight; + line-height: 1.2; + } + a { + @apply transition-colors duration-200; + } + img { + @apply rounded-md; } }