SakuraLinkTree is a beautiful cherry blossom-themed personal link tree web application. Built with React and Tailwind CSS, it features a dark mode and unique cherry blossom animations.
- 🌸 Cherry blossom theme design
- 🌙 Dark mode support
- 🍃 Cherry blossom petal animation effects
- 📱 Responsive design
- 🔗 Customizable link list
- Node.js (v14 or later)
- npm or yarn
-
Clone the repository:
git clone https://github.com/waylake/tree-waylake.git -
Navigate to the project directory:
cd tree-waylake -
Install dependencies:
npm installor
yarn install
npm run dev
or
yarn dev
You can now view the application at http://localhost:5173.
.
├── public/
│ ├── background.svg
│ ├── favicon.svg
│ └── profile.png
├── src/
│ ├── App.jsx
│ ├── Background.jsx
│ ├── LinkList.jsx
│ ├── ProfileCard.jsx
│ ├── Sakura.jsx
│ ├── SakuraLinkTree.jsx
│ ├── ThemeToggle.jsx
│ ├── index.css
│ └── main.jsx
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── vite.config.js
src/LinkList.jsx: Modify the link list to add your own social media and website links.public/profile.png: Replace with your own profile im 6649 age.src/ProfileCard.jsx: Edit to include your personal information and introduction.
- React
- Vite
- Tailwind CSS
- Lucide React (for icons)
Contributions are welcome! Please feel free to submit a Pull Request.
- Waylake (DoYeon Hwang) - GitHub
🌸 Create your own beautiful link page with SakuraLinkTree! 🌸