diff --git a/src/components/stateless/FixTabPanel/index.jsx b/src/components/stateless/FixTabPanel/index.jsx
index 6a226b393..084e82f5a 100644
--- a/src/components/stateless/FixTabPanel/index.jsx
+++ b/src/components/stateless/FixTabPanel/index.jsx
@@ -28,13 +28,13 @@ const FixTabPanel = React.forwardRef(
           position: 'relative',
           overflowY: 'auto',
           overflowX: 'hidden',
-          ...style,
+          ...style
         }}
       >
         {showScrollProgress && (
           <ScrollProgressBar
             container={wrapperRef.current}
-            position="fixed" // sticky
+            position='fixed' // sticky
             {...scrollProgressProps}
           />
         )}
@@ -48,7 +48,7 @@ const FixTabPanel = React.forwardRef(
             minWidth: 0,
             height: fill ? '100%' : 'auto',
             padding: '5px',
-            boxSizing: 'border-box',
+            boxSizing: 'border-box'
           }}
         >
           {children}
diff --git a/src/components/stateless/MusicPlayer/index.jsx b/src/components/stateless/MusicPlayer/index.jsx
index a9dab5471..47b502f43 100644
--- a/src/components/stateless/MusicPlayer/index.jsx
+++ b/src/components/stateless/MusicPlayer/index.jsx
@@ -8,22 +8,22 @@ const TRACKS = [
     title: 'Cyberpunk City',
     artist: 'MokkaMusic',
     cover: 'https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?w=200&h=200&fit=crop',
-    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
   },
   {
     id: 2,
     title: 'Dreamy Vibes',
     artist: 'Panda Beats',
     cover: 'https://images.unsplash.com/photo-1493225255756-d9584f8606e9?w=200&h=200&fit=crop',
-    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
+    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'
   },
   {
     id: 3,
     title: 'Deep Ocean',
     artist: 'Blue Wave',
     cover: 'https://images.unsplash.com/photo-1459749411177-287ce1465453?w=200&h=200&fit=crop',
-    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
-  },
+    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3'
+  }
 ]
 
 const MusicPlayer = () => {
@@ -163,42 +163,42 @@ const MusicPlayer = () => {
   const remainingTime = duration - currentTime
 
   return (
-    <div className="mx-auto flex h-[700px] max-w-md flex-col overflow-hidden rounded-2xl bg-gray-900 font-sans text-white shadow-2xl">
+    <div className='mx-auto flex h-[700px] max-w-md flex-col overflow-hidden rounded-2xl bg-gray-900 font-sans text-white shadow-2xl'>
       {/* === 上半部分：播放器控制 === */}
-      <div className="z-10 flex flex-col items-center bg-gradient-to-br from-gray-800 to-gray-900 p-6 shadow-lg">
+      <div className='z-10 flex flex-col items-center bg-gradient-to-br from-gray-800 to-gray-900 p-6 shadow-lg'>
         {/* 封面 & 旋转动画 */}
         <div
           className={`relative mb-6 h-56 w-56 overflow-hidden rounded-full border-8 border-gray-800 shadow-2xl ${isPlaying ? 'animate-[spin_12s_linear_infinite]' : ''}`}
         >
-          <img src={currentTrack.cover} alt="cover" className="h-full w-full object-cover" />
+          <img src={currentTrack.cover} alt='cover' className='h-full w-full object-cover' />
           {/* 中间的小圆点，模拟黑胶唱片 */}
-          <div className="absolute top-1/2 left-1/2 z-10 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gray-800"></div>
+          <div className='absolute top-1/2 left-1/2 z-10 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gray-800' />
         </div>
 
         {/* 歌曲信息 */}
-        <div className="mb-6 w-full text-center">
-          <h2 className="truncate text-xl font-bold text-white">{currentTrack.title}</h2>
-          <p className="mt-1 text-sm text-gray-400">{currentTrack.artist}</p>
+        <div className='mb-6 w-full text-center'>
+          <h2 className='truncate text-xl font-bold text-white'>{currentTrack.title}</h2>
+          <p className='mt-1 text-sm text-gray-400'>{currentTrack.artist}</p>
         </div>
 
         {/* 进度条 & 时间 */}
-        <div className="mb-6 w-full space-y-2">
+        <div className='mb-6 w-full space-y-2'>
           <input
-            type="range"
-            min="0"
+            type='range'
+            min='0'
             max={duration || 0}
             value={currentTime}
             onChange={handleSeek}
-            className="h-1 w-full cursor-pointer appearance-none rounded-lg bg-gray-700 accent-green-500 transition-all hover:h-2"
+            className='h-1 w-full cursor-pointer appearance-none rounded-lg bg-gray-700 accent-green-500 transition-all hover:h-2'
           />
-          <div className="flex justify-between font-mono text-xs text-gray-400">
+          <div className='flex justify-between font-mono text-xs text-gray-400'>
             <span>{formatTime(currentTime)}</span>
             <span>-{formatTime(remainingTime)}</span>
           </div>
         </div>
 
         {/* 按钮组 */}
-        <div className="flex w-full items-center justify-between px-4">
+        <div className='flex w-full items-center justify-between px-4'>
           {/* 循环切换 */}
           <button
             onClick={() => setIsLooping(!isLooping)}
@@ -208,79 +208,83 @@ const MusicPlayer = () => {
             {isLooping ? <Repeat size={20} /> : <RefreshCw size={20} />}
           </button>
 
-          <button onClick={handlePrev} className="p-2 text-gray-300 transition hover:scale-110 hover:text-white">
+          <button onClick={handlePrev} className='p-2 text-gray-300 transition hover:scale-110 hover:text-white'>
             <SkipBack size={28} />
           </button>
 
           {/* 播放/暂停大按钮 */}
           <button
             onClick={togglePlay}
-            className="rounded-full bg-green-500 p-4 text-black shadow-lg shadow-green-500/30 transition hover:scale-105 hover:bg-green-400 active:scale-95"
+            className='rounded-full bg-green-500 p-4 text-black shadow-lg shadow-green-500/30 transition hover:scale-105 hover:bg-green-400 active:scale-95'
           >
-            {isPlaying ? (
-              <Pause size={32} fill="currentColor" />
-            ) : (
-              <Play size={32} fill="currentColor" className="ml-1" />
-            )}
+            {isPlaying
+              ? (
+                <Pause size={32} fill='currentColor' />
+                )
+              : (
+                <Play size={32} fill='currentColor' className='ml-1' />
+                )}
           </button>
 
-          <button onClick={handleNext} className="p-2 text-gray-300 transition hover:scale-110 hover:text-white">
+          <button onClick={handleNext} className='p-2 text-gray-300 transition hover:scale-110 hover:text-white'>
             <SkipForward size={28} />
           </button>
 
           {/* 占位/菜单按钮 */}
-          <button className="p-2 text-gray-400 hover:text-white">
+          <button className='p-2 text-gray-400 hover:text-white'>
             <Clock size={20} />
           </button>
         </div>
       </div>
 
       {/* === 下半部分：播放列表 (固定高度，内部滚动) === */}
-      <div className="flex flex-1 flex-col overflow-hidden bg-black/20 backdrop-blur-sm">
-        <div className="flex items-center gap-2 bg-gray-900/50 px-6 py-3 text-xs font-bold tracking-wider text-gray-500 uppercase">
+      <div className='flex flex-1 flex-col overflow-hidden bg-black/20 backdrop-blur-sm'>
+        <div className='flex items-center gap-2 bg-gray-900/50 px-6 py-3 text-xs font-bold tracking-wider text-gray-500 uppercase'>
           <ListMusic size={14} />
           <span>Playlist ({TRACKS.length})</span>
         </div>
 
-        <div className="custom-scrollbar flex-1 overflow-y-auto p-2">
+        <div className='custom-scrollbar flex-1 overflow-y-auto p-2'>
           {TRACKS.map((track, index) => {
             const isCurrent = index === currentTrackIndex
             return (
               <button
                 key={track.id}
                 onClick={() => playTrack(index)}
-                type="button"
+                type='button'
                 aria-label={`Play ${track.title} by ${track.artist}`}
                 className={`group mb-1 flex w-full items-center rounded-xl p-3 text-left transition-all duration-200 ${isCurrent ? 'bg-gray-800/80' : 'text-gray-400 hover:bg-gray-800/40'} `}
               >
                 {/* 序号 / 动态图标 */}
-                <div className="mr-2 flex w-10 items-center justify-center">
-                  {isCurrent && isPlaying ? (
-                    <div className="flex h-3 items-end gap-1">
-                      <span className="h-full w-0.5 animate-[bounce_1s_infinite] bg-green-500"></span>
-                      <span className="h-2/3 w-0.5 animate-[bounce_1.2s_infinite] bg-green-500"></span>
-                      <span className="h-1/2 w-0.5 animate-[bounce_0.8s_infinite] bg-green-500"></span>
-                    </div>
-                  ) : (
-                    <span className={`font-mono text-sm ${isCurrent ? 'text-green-500' : 'text-gray-600'}`}>
-                      {index + 1}
-                    </span>
-                  )}
+                <div className='mr-2 flex w-10 items-center justify-center'>
+                  {isCurrent && isPlaying
+                    ? (
+                      <div className='flex h-3 items-end gap-1'>
+                        <span className='h-full w-0.5 animate-[bounce_1s_infinite] bg-green-500' />
+                        <span className='h-2/3 w-0.5 animate-[bounce_1.2s_infinite] bg-green-500' />
+                        <span className='h-1/2 w-0.5 animate-[bounce_0.8s_infinite] bg-green-500' />
+                      </div>
+                      )
+                    : (
+                      <span className={`font-mono text-sm ${isCurrent ? 'text-green-500' : 'text-gray-600'}`}>
+                        {index + 1}
+                      </span>
+                      )}
                 </div>
 
                 {/* 标题信息 */}
-                <div className="min-w-0 flex-1">
+                <div className='min-w-0 flex-1'>
                   <div
                     className={`truncate font-medium ${isCurrent ? 'text-green-400' : 'text-gray-200 group-hover:text-white'}`}
                   >
                     {track.title}
                   </div>
-                  <div className="truncate text-xs text-gray-500">{track.artist}</div>
+                  <div className='truncate text-xs text-gray-500'>{track.artist}</div>
                 </div>
 
                 {/* 播放状态文字 */}
                 {isCurrent && (
-                  <span className="px-2 text-xs font-medium text-green-500/80">{isPlaying ? 'Playing' : 'Paused'}</span>
+                  <span className='px-2 text-xs font-medium text-green-500/80'>{isPlaying ? 'Playing' : 'Paused'}</span>
                 )}
               </button>
             )
diff --git a/src/components/stateless/PageContainer/index.jsx b/src/components/stateless/PageContainer/index.jsx
index bb577a847..806019176 100644
--- a/src/components/stateless/PageContainer/index.jsx
+++ b/src/components/stateless/PageContainer/index.jsx
@@ -16,7 +16,7 @@ const PageContainer = ({ children, title, footer = <Footer />, className, style
           backgroundColor: token.colorBgContainer,
           display: 'flex',
           flexDirection: 'column',
-          ...style,
+          ...style
         }}
       >
         {title && (
@@ -27,19 +27,19 @@ const PageContainer = ({ children, title, footer = <Footer />, className, style
               fontSize: '16px',
               fontWeight: 600,
               color: token.colorTextHeading,
-              flexShrink: 0,
+              flexShrink: 0
             }}
           >
             {title}
           </div>
         )}
         <div
-          className="page-container-content"
+          className='page-container-content'
           style={{
             flex: 1,
             overflow: 'auto',
             position: 'relative',
-            padding: '24px',
+            padding: '24px'
           }}
         >
           {children}
@@ -55,7 +55,7 @@ PageContainer.propTypes = {
   title: PropTypes.node,
   footer: PropTypes.node,
   className: PropTypes.string,
-  style: PropTypes.object,
+  style: PropTypes.object
 }
 
 export default PageContainer
diff --git a/src/pages/mermaid/index.jsx b/src/pages/mermaid/index.jsx
index 15a88394f..22db36178 100644
--- a/src/pages/mermaid/index.jsx
+++ b/src/pages/mermaid/index.jsx
@@ -16,7 +16,7 @@ import {
   GitBranch,
   Activity,
   Clock,
-  FileCode,
+  FileCode
 } from 'lucide-react'
 import { Button, Tooltip, message, Space, Card, Segmented, theme } from 'antd'
 
@@ -62,7 +62,7 @@ const SAMPLES = {
     2003 : Facebook
     2004 : Google
     2005 : Youtube
-    2006 : Twitter`,
+    2006 : Twitter`
 }
 
 const MermaidDemo = () => {
@@ -104,8 +104,8 @@ const MermaidDemo = () => {
       const blob = await (await fetch(dataUrl)).blob()
       await navigator.clipboard.write([
         new ClipboardItem({
-          [blob.type]: blob,
-        }),
+          [blob.type]: blob
+        })
       ])
       message.success('Image copied to clipboard')
     } catch (err) {
@@ -122,54 +122,60 @@ const MermaidDemo = () => {
 
   return (
     <FixTabPanel>
-      <PageContainer title="Mermaid Live Editor" footer={null}>
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <PageContainer title='Mermaid Live Editor' footer={null}>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
           {/* Editor Section */}
-          <div className="flex flex-col gap-4">
+          <div className='flex flex-col gap-4'>
             <Card
               title={
-                <div className="flex items-center gap-2">
+                <div className='flex items-center gap-2'>
                   <Code2 size={18} />
                   <span>Editor</span>
                 </div>
               }
-              className="flex-1 shadow-sm"
+              className='flex-1 shadow-sm'
               styles={{ body: { padding: 0, height: 'calc(100% - 57px)', display: 'flex', flexDirection: 'column' } }}
             >
-              <div className="relative flex-1" style={{ backgroundColor: token.colorBgLayout }}>
+              <div className='relative flex-1' style={{ backgroundColor: token.colorBgLayout }}>
                 <textarea
-                  className="h-full w-full resize-none bg-transparent p-4 font-mono text-sm leading-relaxed outline-none"
+                  className='h-full w-full resize-none bg-transparent p-4 font-mono text-sm leading-relaxed outline-none'
                   style={{ color: token.colorText }}
                   onChange={(e) => setChart(e.target.value)}
                   value={chart}
                   spellCheck={false}
-                  placeholder="Enter Mermaid code here..."
+                  placeholder='Enter Mermaid code here...'
                 />
               </div>
               <div
-                className="border-t p-3"
+                className='border-t p-3'
                 style={{ borderColor: token.colorBorderSecondary, backgroundColor: token.colorBgContainer }}
               >
-                <p className="mb-2 text-xs font-medium" style={{ color: token.colorTextSecondary }}>
+                <p className='mb-2 text-xs font-medium' style={{ color: token.colorTextSecondary }}>
                   Sample Diagrams:
                 </p>
-                <div className="flex flex-wrap gap-2">
+                <div className='flex flex-wrap gap-2'>
                   {Object.keys(SAMPLES).map((type) => (
                     <Button
                       key={type}
-                      size="small"
+                      size='small'
                       type={activeType === type ? 'primary' : 'default'}
                       onClick={() => handleSampleChange(type)}
                       icon={
-                        type === 'Git' ? (
-                          <GitBranch size={14} />
-                        ) : type === 'Timeline' ? (
-                          <Clock size={14} />
-                        ) : type === 'State' ? (
-                          <Activity size={14} />
-                        ) : (
-                          <FileCode size={14} />
-                        )
+                        type === 'Git'
+                          ? (
+                            <GitBranch size={14} />
+                            )
+                          : type === 'Timeline'
+                            ? (
+                              <Clock size={14} />
+                              )
+                            : type === 'State'
+                              ? (
+                                <Activity size={14} />
+                                )
+                              : (
+                                <FileCode size={14} />
+                                )
                       }
                     >
                       {type}
@@ -181,52 +187,52 @@ const MermaidDemo = () => {
           </div>
 
           {/* Preview Section */}
-          <div className="flex flex-col gap-4">
+          <div className='flex flex-col gap-4'>
             <Card
               title={
-                <div className="flex items-center gap-2">
+                <div className='flex items-center gap-2'>
                   <ImageIcon size={18} />
                   <span>Preview</span>
                 </div>
               }
               extra={
                 <Space>
-                  <Tooltip title="Copy Image">
+                  <Tooltip title='Copy Image'>
                     <Button icon={<Copy size={16} />} onClick={handleCopyImage} />
                   </Tooltip>
-                  <Tooltip title="Download PNG">
+                  <Tooltip title='Download PNG'>
                     <Button icon={<Download size={16} />} onClick={() => handleDownload('png')}>
                       PNG
                     </Button>
                   </Tooltip>
-                  <Tooltip title="Download SVG">
+                  <Tooltip title='Download SVG'>
                     <Button icon={<Download size={16} />} onClick={() => handleDownload('svg')}>
                       SVG
                     </Button>
                   </Tooltip>
                 </Space>
               }
-              className="flex-1 shadow-sm"
+              className='flex-1 shadow-sm'
               styles={{ body: { padding: 0, height: 'calc(100% - 57px)', position: 'relative', overflow: 'hidden' } }}
             >
               <TransformWrapper initialScale={1} minScale={0.5} maxScale={4} centerOnInit wheel={{ step: 0.1 }}>
                 {({ zoomIn, zoomOut, resetTransform }) => (
                   <>
                     <div
-                      className="absolute top-4 right-4 z-10 flex flex-col gap-2 rounded-lg p-1 shadow-md backdrop-blur-sm"
+                      className='absolute top-4 right-4 z-10 flex flex-col gap-2 rounded-lg p-1 shadow-md backdrop-blur-sm'
                       style={{ backgroundColor: token.colorBgContainer }}
                     >
-                      <Tooltip title="Zoom In" placement="left">
-                        <Button type="text" icon={<ZoomIn size={18} />} onClick={() => zoomIn()} />
+                      <Tooltip title='Zoom In' placement='left'>
+                        <Button type='text' icon={<ZoomIn size={18} />} onClick={() => zoomIn()} />
                       </Tooltip>
-                      <Tooltip title="Zoom Out" placement="left">
-                        <Button type="text" icon={<ZoomOut size={18} />} onClick={() => zoomOut()} />
+                      <Tooltip title='Zoom Out' placement='left'>
+                        <Button type='text' icon={<ZoomOut size={18} />} onClick={() => zoomOut()} />
                       </Tooltip>
-                      <Tooltip title="Reset" placement="left">
-                        <Button type="text" icon={<RotateCcw size={18} />} onClick={() => resetTransform()} />
+                      <Tooltip title='Reset' placement='left'>
+                        <Button type='text' icon={<RotateCcw size={18} />} onClick={() => resetTransform()} />
                       </Tooltip>
                     </div>
-                    <div className="h-full w-full cursor-move" style={{ backgroundColor: token.colorBgLayout }}>
+                    <div className='h-full w-full cursor-move' style={{ backgroundColor: token.colorBgLayout }}>
                       <TransformComponent
                         wrapperStyle={{ width: '100%', height: '100%' }}
                         contentStyle={{
@@ -234,10 +240,10 @@ const MermaidDemo = () => {
                           height: '100%',
                           display: 'flex',
                           alignItems: 'center',
-                          justifyContent: 'center',
+                          justifyContent: 'center'
                         }}
                       >
-                        <div ref={previewRef} className="p-8">
+                        <div ref={previewRef} className='p-8'>
                           <MermaidHooks chart={chart} />
                         </div>
                       </TransformComponent>
diff --git a/src/pages/portfilo/index.jsx b/src/pages/portfilo/index.jsx
index 2c7e166dc..3ff518860 100644
--- a/src/pages/portfilo/index.jsx
+++ b/src/pages/portfilo/index.jsx
@@ -16,7 +16,7 @@ import {
   Divider,
   Tooltip,
   Grid,
-  FloatButton,
+  FloatButton
 } from 'antd'
 import { motion, useScroll, useSpring } from 'framer-motion'
 import {
@@ -31,7 +31,7 @@ import {
   ToolOutlined,
   ArrowLeftOutlined,
   XOutlined,
-  MenuOutlined,
+  MenuOutlined
 } from '@ant-design/icons'
 import avatarPng from '@assets/images/w.png'
 
@@ -54,7 +54,7 @@ const Section = ({ id, children, className = '' }) => {
 Section.propTypes = {
   id: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
-  className: PropTypes.string,
+  className: PropTypes.string
 }
 
 const AnimatedCard = ({ children, delay = 0 }) => (
@@ -71,7 +71,7 @@ const AnimatedCard = ({ children, delay = 0 }) => (
 
 AnimatedCard.propTypes = {
   children: PropTypes.node.isRequired,
-  delay: PropTypes.number,
+  delay: PropTypes.number
 }
 
 const MyPortfilo = () => {
@@ -84,7 +84,7 @@ const MyPortfilo = () => {
   const scaleX = useSpring(scrollYProgress, {
     stiffness: 100,
     damping: 30,
-    restDelta: 0.001,
+    restDelta: 0.001
   })
 
   const [targetOffset, setTargetOffset] = useState(80)
@@ -100,7 +100,7 @@ const MyPortfilo = () => {
     { key: 'skills', href: '#skills', title: <span style={{ fontSize: 12 }}>Skills</span> },
     { key: 'projects', href: '#projects', title: <span style={{ fontSize: 12 }}>Work</span> },
     { key: 'experience', href: '#experience', title: <span style={{ fontSize: 12 }}>Exp</span> },
-    { key: 'contact', href: '#contact', title: <span style={{ fontSize: 12 }}>Contact</span> },
+    { key: 'contact', href: '#contact', title: <span style={{ fontSize: 12 }}>Contact</span> }
   ]
 
   const handleAnchorClick = (e, link) => {
@@ -123,7 +123,7 @@ const MyPortfilo = () => {
     { name: 'Tailwind CSS', color: '#38B2AC' },
     { name: 'Next.js', color: '#000000' },
     { name: 'GraphQL', color: '#E10098' },
-    { name: 'Docker', color: '#2496ED' },
+    { name: 'Docker', color: '#2496ED' }
   ]
 
   const projects = [
@@ -131,20 +131,20 @@ const MyPortfilo = () => {
       title: 'Pro React Admin',
       desc: 'A comprehensive enterprise-level admin dashboard template based on React, Ant Design, and Vite.',
       tags: ['React', 'Ant Design', 'Vite'],
-      icon: <LaptopOutlined />,
+      icon: <LaptopOutlined />
     },
     {
       title: 'E-Commerce Platform',
       desc: 'A full-stack e-commerce solution with real-time inventory management and payment integration.',
       tags: ['Next.js', 'Node.js', 'Stripe'],
-      icon: <RocketOutlined />,
+      icon: <RocketOutlined />
     },
     {
       title: 'Data Visualization Dashboard',
       desc: 'Interactive dashboard for visualizing complex datasets using D3.js and ECharts.',
       tags: ['Vue', 'D3.js', 'ECharts'],
-      icon: <CodeOutlined />,
-    },
+      icon: <CodeOutlined />
+    }
   ]
 
   const experiences = [
@@ -152,25 +152,25 @@ const MyPortfilo = () => {
       year: '2023 - Present',
       title: 'Senior Frontend Engineer',
       company: 'Tech Corp',
-      desc: 'Leading the frontend team, architecting scalable solutions, and mentoring junior developers.',
+      desc: 'Leading the frontend team, architecting scalable solutions, and mentoring junior developers.'
     },
     {
       year: '2021 - 2023',
       title: 'Full Stack Developer',
       company: 'StartUp Inc',
-      desc: 'Developed and maintained multiple web applications using React and Node.js.',
+      desc: 'Developed and maintained multiple web applications using React and Node.js.'
     },
     {
       year: '2019 - 2021',
       title: 'Frontend Developer',
       company: 'Web Solutions',
-      desc: 'Collaborated with designers to implement responsive and accessible user interfaces.',
-    },
+      desc: 'Collaborated with designers to implement responsive and accessible user interfaces.'
+    }
   ]
 
   return (
     <div
-      id="portfolio-container"
+      id='portfolio-container'
       ref={containerRef}
       style={{
         backgroundColor: token.colorBgContainer,
@@ -185,7 +185,7 @@ const MyPortfilo = () => {
             ? `radial-gradient(circle at 50% 50%, ${token.colorPrimaryBg} 0%, transparent 50%), radial-gradient(circle at 0% 0%, ${token.colorFill} 0%, transparent 30%), radial-gradient(circle at 100% 100%, ${token.colorFill} 0%, transparent 30%)`
             : `radial-gradient(circle at 50% 50%, ${token.colorPrimaryBg} 0%, transparent 60%), radial-gradient(circle at 100% 0%, ${token.colorFill} 0%, transparent 40%)`,
         backgroundAttachment: 'fixed',
-        backgroundSize: 'cover',
+        backgroundSize: 'cover'
       }}
     >
       {/* Floating Shapes Background */}
@@ -198,19 +198,19 @@ const MyPortfilo = () => {
           height: '100%',
           overflow: 'hidden',
           pointerEvents: 'none',
-          zIndex: 0,
+          zIndex: 0
         }}
       >
         <motion.div
           animate={{
             x: [0, 100, 0],
             y: [0, 50, 0],
-            rotate: [0, 180, 360],
+            rotate: [0, 180, 360]
           }}
           transition={{
             duration: 20,
             repeat: Infinity,
-            ease: 'linear',
+            ease: 'linear'
           }}
           style={{
             position: 'absolute',
@@ -221,19 +221,19 @@ const MyPortfilo = () => {
             borderRadius: '50%',
             background: token.colorPrimary,
             filter: 'blur(100px)',
-            opacity: 0.1,
+            opacity: 0.1
           }}
         />
         <motion.div
           animate={{
             x: [0, -100, 0],
             y: [0, -50, 0],
-            rotate: [0, -180, -360],
+            rotate: [0, -180, -360]
           }}
           transition={{
             duration: 25,
             repeat: Infinity,
-            ease: 'linear',
+            ease: 'linear'
           }}
           style={{
             position: 'absolute',
@@ -244,7 +244,7 @@ const MyPortfilo = () => {
             borderRadius: '50%',
             background: token.colorSuccess,
             filter: 'blur(120px)',
-            opacity: 0.08,
+            opacity: 0.08
           }}
         />
       </div>
@@ -259,7 +259,7 @@ const MyPortfilo = () => {
           height: 4,
           background: token.colorPrimary,
           transformOrigin: '0%',
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
 
@@ -272,13 +272,13 @@ const MyPortfilo = () => {
           position: 'fixed',
           top: 24,
           left: 24,
-          zIndex: 100,
+          zIndex: 100
         }}
       >
-        <Tooltip title="Back to Home">
+        <Tooltip title='Back to Home'>
           <Button
-            shape="circle"
-            size="large"
+            shape='circle'
+            size='large'
             icon={<ArrowLeftOutlined />}
             onClick={() => navigate('/')}
             style={{
@@ -289,83 +289,85 @@ const MyPortfilo = () => {
               boxShadow: token.boxShadowSecondary,
               display: 'flex',
               alignItems: 'center',
-              justifyContent: 'center',
+              justifyContent: 'center'
             }}
           />
         </Tooltip>
       </motion.div>
 
       {/* Navigation */}
-      {!screens.md ? (
-        <FloatButton.Group
-          trigger="click"
-          type="primary"
-          icon={<MenuOutlined />}
-          open={mobileMenuOpen}
-          onOpenChange={(open) => setMobileMenuOpen(open)}
-          style={{ right: 24, bottom: 24 }}
-        >
-          <FloatButton
-            icon={<RocketOutlined />}
-            tooltip="Home"
-            onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#home' })}
-          />
-          <FloatButton
-            icon={<UserOutlined />}
-            tooltip="About"
-            onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#about' })}
-          />
-          <FloatButton
-            icon={<ToolOutlined />}
-            tooltip="Skills"
-            onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#skills' })}
-          />
-          <FloatButton
-            icon={<ProjectOutlined />}
-            tooltip="Work"
-            onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#projects' })}
-          />
-          <FloatButton
-            icon={<CheckCircleOutlined />}
-            tooltip="Exp"
-            onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#experience' })}
-          />
-          <FloatButton
-            icon={<MailOutlined />}
-            tooltip="Contact"
-            onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#contact' })}
-          />
-        </FloatButton.Group>
-      ) : (
-        <div
-          style={{
-            position: 'fixed',
-            top: '50%',
-            right: 24,
-            transform: 'translateY(-50%)',
-            zIndex: 100,
-            backgroundColor: token.colorBgElevated,
-            borderRadius: token.borderRadiusLG,
-            padding: '16px 12px',
-            boxShadow: token.boxShadowSecondary,
-            backdropFilter: 'blur(10px)',
-            border: `1px solid ${token.colorBorderSecondary}`,
-          }}
-        >
-          <Anchor
-            targetOffset={targetOffset}
-            getContainer={() => containerRef.current || document.getElementById('portfolio-container')}
-            direction="vertical"
-            onClick={handleAnchorClick}
-            items={navItems}
-            style={{ backgroundColor: 'transparent' }}
-          />
-        </div>
-      )}
+      {!screens.md
+        ? (
+          <FloatButton.Group
+            trigger='click'
+            type='primary'
+            icon={<MenuOutlined />}
+            open={mobileMenuOpen}
+            onOpenChange={(open) => setMobileMenuOpen(open)}
+            style={{ right: 24, bottom: 24 }}
+          >
+            <FloatButton
+              icon={<RocketOutlined />}
+              tooltip='Home'
+              onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#home' })}
+            />
+            <FloatButton
+              icon={<UserOutlined />}
+              tooltip='About'
+              onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#about' })}
+            />
+            <FloatButton
+              icon={<ToolOutlined />}
+              tooltip='Skills'
+              onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#skills' })}
+            />
+            <FloatButton
+              icon={<ProjectOutlined />}
+              tooltip='Work'
+              onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#projects' })}
+            />
+            <FloatButton
+              icon={<CheckCircleOutlined />}
+              tooltip='Exp'
+              onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#experience' })}
+            />
+            <FloatButton
+              icon={<MailOutlined />}
+              tooltip='Contact'
+              onClick={() => handleAnchorClick({ preventDefault: () => {} }, { href: '#contact' })}
+            />
+          </FloatButton.Group>
+          )
+        : (
+          <div
+            style={{
+              position: 'fixed',
+              top: '50%',
+              right: 24,
+              transform: 'translateY(-50%)',
+              zIndex: 100,
+              backgroundColor: token.colorBgElevated,
+              borderRadius: token.borderRadiusLG,
+              padding: '16px 12px',
+              boxShadow: token.boxShadowSecondary,
+              backdropFilter: 'blur(10px)',
+              border: `1px solid ${token.colorBorderSecondary}`
+            }}
+          >
+            <Anchor
+              targetOffset={targetOffset}
+              getContainer={() => containerRef.current || document.getElementById('portfolio-container')}
+              direction='vertical'
+              onClick={handleAnchorClick}
+              items={navItems}
+              style={{ backgroundColor: 'transparent' }}
+            />
+          </div>
+          )}
 
       <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px', position: 'relative', zIndex: 1 }}>
         {/* Home Section */}
-        <Section id="home" className="flex flex-col items-center justify-center text-center">
+        <Section id='home' className='flex flex-col items-center justify-center text-center'>
           <motion.div
             initial={{ scale: 0, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
@@ -381,22 +383,22 @@ const MyPortfilo = () => {
             <Title level={1} style={{ fontSize: '4rem', marginBottom: 16 }}>
               Hi, I'm <span style={{ color: token.colorPrimary }}>Wkylin</span>
             </Title>
-            <Title level={3} type="secondary" style={{ fontWeight: 300 }}>
+            <Title level={3} type='secondary' style={{ fontWeight: 300 }}>
               Building Digital Experiences with Passion & Code
             </Title>
-            <Space size="large" style={{ marginTop: 32 }}>
+            <Space size='large' style={{ marginTop: 32 }}>
               <Button
-                type="primary"
-                size="large"
-                shape="round"
+                type='primary'
+                size='large'
+                shape='round'
                 icon={<RocketOutlined />}
                 onClick={() => document.getElementById('projects')?.scrollIntoView({ behavior: 'smooth' })}
               >
                 View Work
               </Button>
               <Button
-                size="large"
-                shape="round"
+                size='large'
+                shape='round'
                 icon={<UserOutlined />}
                 onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
               >
@@ -407,11 +409,11 @@ const MyPortfilo = () => {
         </Section>
 
         {/* About Section */}
-        <Section id="about">
-          <Divider titlePlacement="left">
+        <Section id='about'>
+          <Divider titlePlacement='left'>
             <Title level={2}>About Me</Title>
           </Divider>
-          <Row gutter={[48, 48]} align="middle">
+          <Row gutter={[48, 48]} align='middle'>
             <Col xs={24} md={12}>
               <AnimatedCard>
                 <Paragraph style={{ fontSize: 18, lineHeight: 1.8 }}>
@@ -432,16 +434,16 @@ const MyPortfilo = () => {
                   { title: 'Fast Learner', icon: <RocketOutlined /> },
                   { title: 'Team Player', icon: <UserOutlined /> },
                   { title: 'Problem Solver', icon: <ToolOutlined /> },
-                  { title: 'Detail Oriented', icon: <CheckCircleOutlined /> },
+                  { title: 'Detail Oriented', icon: <CheckCircleOutlined /> }
                 ].map((item, index) => (
                   <Col span={12} key={item.title}>
                     <AnimatedCard delay={index * 0.1}>
                       <Card
-                        variant="borderless"
+                        variant='borderless'
                         style={{
                           textAlign: 'center',
                           background: token.colorFillAlter,
-                          borderRadius: token.borderRadiusLG,
+                          borderRadius: token.borderRadiusLG
                         }}
                       >
                         <div style={{ fontSize: 32, color: token.colorPrimary, marginBottom: 8 }}>{item.icon}</div>
@@ -456,8 +458,8 @@ const MyPortfilo = () => {
         </Section>
 
         {/* Skills Section */}
-        <Section id="skills">
-          <Divider titlePlacement="left">
+        <Section id='skills'>
+          <Divider titlePlacement='left'>
             <Title level={2}>Tech Stack</Title>
           </Divider>
           <Row gutter={[16, 16]}>
@@ -471,7 +473,7 @@ const MyPortfilo = () => {
                       fontSize: 16,
                       borderRadius: 20,
                       border: 'none',
-                      marginBottom: 8,
+                      marginBottom: 8
                     }}
                   >
                     {skill.name}
@@ -485,7 +487,7 @@ const MyPortfilo = () => {
             <Row gutter={[24, 24]}>
               <Col xs={24} md={8}>
                 <AnimatedCard>
-                  <Card title="Frontend Development" variant="borderless" className="shadow-sm">
+                  <Card title='Frontend Development' variant='borderless' className='shadow-sm'>
                     <Paragraph>
                       Expertise in building responsive, interactive, and accessible user interfaces using React, Vue,
                       and modern CSS frameworks.
@@ -495,7 +497,7 @@ const MyPortfilo = () => {
               </Col>
               <Col xs={24} md={8}>
                 <AnimatedCard delay={0.2}>
-                  <Card title="Backend Development" variant="borderless" className="shadow-sm">
+                  <Card title='Backend Development' variant='borderless' className='shadow-sm'>
                     <Paragraph>
                       Experience in designing and implementing RESTful APIs, microservices, and database schemas using
                       Node.js and Python.
@@ -505,7 +507,7 @@ const MyPortfilo = () => {
               </Col>
               <Col xs={24} md={8}>
                 <AnimatedCard delay={0.4}>
-                  <Card title="DevOps & Tools" variant="borderless" className="shadow-sm">
+                  <Card title='DevOps & Tools' variant='borderless' className='shadow-sm'>
                     <Paragraph>
                       Proficient in using Git, Docker, CI/CD pipelines, and cloud platforms to ensure smooth deployment
                       and operation.
@@ -518,8 +520,8 @@ const MyPortfilo = () => {
         </Section>
 
         {/* Projects Section */}
-        <Section id="projects">
-          <Divider titlePlacement="left">
+        <Section id='projects'>
+          <Divider titlePlacement='left'>
             <Title level={2}>Featured Projects</Title>
           </Divider>
           <Row gutter={[24, 24]}>
@@ -538,16 +540,16 @@ const MyPortfilo = () => {
                           alignItems: 'center',
                           justifyContent: 'center',
                           fontSize: 64,
-                          color: token.colorPrimary,
+                          color: token.colorPrimary
                         }}
                       >
                         {project.icon}
                       </div>
                     }
                     actions={[
-                      <GithubOutlined key="github" />,
-                      <RocketOutlined key="demo" />,
-                      <ProjectOutlined key="detail" />,
+                      <GithubOutlined key='github' />,
+                      <RocketOutlined key='demo' />,
+                      <ProjectOutlined key='detail' />
                     ]}
                   >
                     <Card.Meta
@@ -571,38 +573,38 @@ const MyPortfilo = () => {
         </Section>
 
         {/* Experience Section */}
-        <Section id="experience">
-          <Divider titlePlacement="left">
+        <Section id='experience'>
+          <Divider titlePlacement='left'>
             <Title level={2}>Experience</Title>
           </Divider>
           <div style={{ maxWidth: 800, margin: '0 auto' }}>
             <Timeline
-              mode="alternate"
+              mode='alternate'
               items={experiences.map((exp, index) => ({
                 title: (
                   <div style={{ marginTop: 8 }}>
-                    <Tag color="blue">{exp.year}</Tag>
+                    <Tag color='blue'>{exp.year}</Tag>
                   </div>
                 ),
                 content: (
                   <AnimatedCard delay={index * 0.2}>
-                    <Card variant="borderless" style={{ background: token.colorFillAlter }}>
+                    <Card variant='borderless' style={{ background: token.colorFillAlter }}>
                       <Title level={5} style={{ margin: 0 }}>
                         {exp.title}
                       </Title>
-                      <Text type="secondary">{exp.company}</Text>
+                      <Text type='secondary'>{exp.company}</Text>
                       <Paragraph style={{ marginTop: 16 }}>{exp.desc}</Paragraph>
                     </Card>
                   </AnimatedCard>
                 ),
-                color: token.colorPrimary,
+                color: token.colorPrimary
               }))}
             />
           </div>
         </Section>
 
         {/* Contact Section */}
-        <Section id="contact" className="flex flex-col items-center justify-center">
+        <Section id='contact' className='flex flex-col items-center justify-center'>
           <motion.div
             initial={{ scale: 0.8, opacity: 0 }}
             whileInView={{ scale: 1, opacity: 1 }}
@@ -614,14 +616,14 @@ const MyPortfilo = () => {
               I'm currently open to new opportunities and collaborations. Whether you have a question or just want to
               say hi, feel free to reach out!
             </Paragraph>
-            <Space size="large">
-              <Button type="primary" size="large" icon={<MailOutlined />} onClick={() => navigate('/contact')}>
+            <Space size='large'>
+              <Button type='primary' size='large' icon={<MailOutlined />} onClick={() => navigate('/contact')}>
                 Email Me
               </Button>
-              <Button size="large" icon={<GithubOutlined />} href="https://github.com/wkylin" target="_blank">
+              <Button size='large' icon={<GithubOutlined />} href='https://github.com/wkylin' target='_blank'>
                 GitHub
               </Button>
-              <Button size="large" icon={<XOutlined />} href="https://x.com/home" target="_blank">
+              <Button size='large' icon={<XOutlined />} href='https://x.com/home' target='_blank'>
                 X
               </Button>
             </Space>