Portfolio About

网站 · About · 免费
内容预览

**Prompt:** Create an "About Me" section using React, Tailwind CSS, and **framer-motion**. The site uses **Google Font "Kanit"** (weights 300-900) and a dark background `#0C0C0C`. **Section layout:** - Full-width section, `min-h-screen`, flexbox column, centered both axes - Padding: `px-5 sm:px-8 md:px-10 py-20` - Background: `#0C0C0C` (inherited from page) - `position: relative` -- the section has 4 decorative floating images placed absolutely in the corners **4 decorative corner images (absolute positioned, z-0):** 1. **Top-left** -- Moon icon - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png` - Position: `top-[4%] left-[1%] sm:left-[2%] md:left-[4%]` - Size: `w-[120px] sm:w-[160px] md:w-[210px] h-auto` - Fade-in animation: `delay: 0.1`, slides from left (`x: -80, y: 0`), `duration: 0.9` 2. **Bottom-left** -- 3D object - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/p59_1.4659672e.png` - Position: `bottom-[8%] left-[3%] sm:left-[6%] md:left-[10%]` - Size: `w-[100px] sm:w-[140px] md:w-[180px] h-auto` - Fade-in animation: `delay: 0.25`, slides from left (`x: -80, y: 0`), `duration: 0.9` 3. **Top-right** -- Lego icon - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/lego_icon-1.703bb594.png` - Position: `top-[4%] right-[1%] sm:right-[2%] md:right-[4%]` - Size: `w-[120px] sm:w-[160px] md:w-[

……（完整源码请在站内查看）