Skip to content

Commit dfd2da6

Browse files
HeziodeHeziode
committed
initial commit
0 parents  commit dfd2da6

24 files changed

Lines changed: 2611 additions & 0 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: "pages"
16+
cancel-in-progress: false
17+
18+
jobs:
19+
build:
20+
runs-on: ubuntu-latest
21+
steps:
22+
- name: Checkout
23+
uses: actions/checkout@v4
24+
25+
- name: Setup pnpm
26+
uses: pnpm/action-setup@v3
27+
with:
28+
version: 9
29+
30+
- name: Setup Node
31+
uses: actions/setup-node@v4
32+
with:
33+
node-version: 20
34+
cache: 'pnpm'
35+
36+
- name: Install dependencies
37+
run: pnpm install --frozen-lockfile
38+
39+
- name: Build
40+
run: pnpm run build
41+
42+
- name: Setup Pages
43+
uses: actions/configure-pages@v4
44+
45+
- name: Upload artifact
46+
uses: actions/upload-pages-artifact@v3
47+
with:
48+
path: './dist'
49+
50+
deploy:
51+
environment:
52+
name: github-pages
53+
url: ${{ steps.deployment.outputs.page_url }}
54+
runs-on: ubuntu-latest
55+
needs: build
56+
steps:
57+
- name: Deploy to GitHub Pages
58+
id: deployment
59+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
shamefully-hoist=true
2+
strict-peer-dependencies=false

‎README.md‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
# Multi-Layer Shadow Text Designer
2+
3+
Create stunning multi-layer shadow text effects with customizable fonts, colors, angles, and depth. Design beautiful typography with Tailwind CSS colors and share your creations via URL.
4+
5+
![Multi-Layer Shadow Text Designer](https://img.shields.io/badge/version-1.0.0-blue.svg)
6+
![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
7+
8+
## 🎨 Features
9+
10+
- **Custom Text**: Enter any text to preview with your chosen effects
11+
- **Multi-Layer Shadows**: Configure 1-6 layers of shadow for depth and dimension
12+
- **Shadow Customization**:
13+
- Adjustable angle (0-360°)
14+
- Variable distance between layers (1-10px)
15+
- Direction control (darken/lighten)
16+
- Shadow depth adjustment (0-3)
17+
- **Extensive Color Palette**: Full Tailwind CSS 4 color palette including:
18+
- 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose)
19+
- 11 shades per color (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)
20+
- Black and white
21+
- **266 total colors available**
22+
- **Font Manager**: Add Google Fonts on the fly and compare them instantly
23+
- **Light/Dark Theme Previews**: See your designs in both light and dark contexts
24+
- **URL Sharing**: All settings are stored in the URL for easy sharing
25+
- **Copy CSS Style**: One-click copy of the complete CSS for each design
26+
- **Reset to Defaults**: Quickly start fresh with default settings
27+
28+
## 🚀 Getting Started
29+
30+
### Online Version
31+
32+
Simply open the `alire-logo-explorer3.html` file in your web browser. No installation or build process required!
33+
34+
### Local Usage
35+
36+
1. Clone this repository:
37+
```bash
38+
git clone https://github.com/Heziode/multi-layer-shadow-text-designer.git
39+
cd multi-layer-shadow-text-designer
40+
```
41+
42+
2. Open `alire-logo-explorer3.html` in your web browser
43+
44+
That's it! The tool runs entirely in the browser.
45+
46+
## 📖 How to Use
47+
48+
### Basic Workflow
49+
50+
1. **Enter Your Text**: Type the text you want to design in the "Display Text" field
51+
2. **Adjust Shadow Settings**:
52+
- Set the number of shadow layers
53+
- Choose the shadow angle (direction)
54+
- Adjust the distance between layers
55+
3. **Choose Colors**:
56+
- Select text color from the Tailwind CSS palette
57+
- Choose shadow color
58+
- Adjust shadow depth and direction (darken/lighten)
59+
4. **Add Fonts**: Enter Google Font names to preview your design with different typefaces
60+
5. **Preview**: Scroll down to see your text rendered with both light and dark backgrounds
61+
6. **Copy & Share**:
62+
- Click "Copy Style" to get the CSS code
63+
- Click "Copy Share Link" to share your configuration
64+
65+
### URL Parameters
66+
67+
All settings are automatically saved to the URL, making it easy to share your designs. Parameters include:
68+
69+
- `text`: Display text
70+
- `layers`: Number of shadow layers (1-6)
71+
- `angle`: Shadow angle (0-360)
72+
- `distance`: Shadow distance (1-10)
73+
- `lightText`: Light theme text color
74+
- `lightShadow`: Light theme shadow color
75+
- `lightDepth`: Light theme shadow depth (0-3)
76+
- `lightDirection`: Light theme shadow direction (darken/lighten)
77+
- `darkText`: Dark theme text color
78+
- `darkShadow`: Dark theme shadow color
79+
- `darkDepth`: Dark theme shadow depth (0-3)
80+
- `darkDirection`: Dark theme shadow direction (darken/lighten)
81+
- `fonts`: Comma-separated list of fonts
82+
- `colorExpanded`: Whether color section is expanded (true/false)
83+
84+
**Example URL:**
85+
```
86+
alire-logo-explorer3.html?text=Hello&layers=4&angle=135&distance=3&lightText=blue-600&lightShadow=cyan-300
87+
```
88+
89+
### Copying CSS Styles
90+
91+
Each preview card has a "Copy Style" button that copies the complete CSS to your clipboard:
92+
93+
```css
94+
font-family: 'Geist', sans-serif;
95+
color: var(--color-purple-600);
96+
text-shadow: 2px 2px 0 var(--color-yellow-300), 4px 4px 0 var(--color-yellow-400), 6px 6px 0 var(--color-yellow-500);
97+
```
98+
99+
**Note:** To use the Tailwind CSS color variables in your project, you'll need Tailwind CSS configured with the appropriate color palette.
100+
101+
## 🛠️ Technologies Used
102+
103+
- **Vue.js 3**: Reactive UI framework
104+
- **Tailwind CSS 4**: Styling and color system
105+
- **Google Fonts API**: Dynamic font loading
106+
- **Vanilla JavaScript**: No build process required
107+
108+
## 🎯 Use Cases
109+
110+
- Logo design and branding
111+
- Header and title typography
112+
- Social media graphics
113+
- Web design mockups
114+
- Typography experimentation
115+
- Teaching CSS text-shadow effects
116+
- Creating retro or 3D text effects
117+
118+
## 📋 Browser Support
119+
120+
Works in all modern browsers that support:
121+
- ES6+ JavaScript
122+
- CSS custom properties
123+
- CSS Grid
124+
- Clipboard API
125+
126+
Tested on:
127+
- Chrome/Edge 90+
128+
- Firefox 88+
129+
- Safari 14+
130+
131+
## 🤝 Contributing
132+
133+
Contributions are welcome! Feel free to:
134+
135+
- Report bugs
136+
- Suggest new features
137+
- Submit pull requests
138+
- Improve documentation
139+
140+
## 📄 License
141+
142+
This project is licensed under the MIT License - see below for details:
143+
144+
```
145+
MIT License
146+
147+
Copyright (c) 2025
148+
149+
Permission is hereby granted, free of charge, to any person obtaining a copy
150+
of this software and associated documentation files (the "Software"), to deal
151+
in the Software without restriction, including without limitation the rights
152+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
153+
copies of the Software, and to permit persons to whom the Software is
154+
furnished to do so, subject to the following conditions:
155+
156+
The above copyright notice and this permission notice shall be included in all
157+
copies or substantial portions of the Software.
158+
159+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
160+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
161+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
162+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
163+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
164+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
165+
SOFTWARE.
166+
```
167+
168+
## 🙏 Acknowledgments
169+
170+
- [Tailwind CSS](https://tailwindcss.com/) for the amazing color system
171+
- [Vue.js](https://vuejs.org/) for the reactive framework
172+
- [Google Fonts](https://fonts.google.com/) for the extensive font library
173+
174+
## 📞 Support
175+
176+
If you have any questions or need help, please open an issue on GitHub.
177+
178+
---
179+
180+
Made with ❤️ for designers and developers

‎SETUP.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# Setup Instructions
2+
3+
## Prerequisites
4+
5+
- Node.js 18+ installed
6+
- PNPM 9+ installed
7+
8+
## Installation
9+
10+
1. Navigate to the project directory:
11+
```bash
12+
cd multi-layer-shadow-text-designer
13+
```
14+
15+
2. Install dependencies:
16+
```bash
17+
pnpm install
18+
```
19+
20+
## Development
21+
22+
Run the development server:
23+
```bash
24+
pnpm dev
25+
```
26+
27+
The app will be available at `http://localhost:5173`
28+
29+
## Build for Production
30+
31+
Build the project:
32+
```bash
33+
pnpm build
34+
```
35+
36+
Preview the production build:
37+
```bash
38+
pnpm preview
39+
```
40+
41+
## Deploy to GitHub Pages
42+
43+
### Prerequisites
44+
1. Create a GitHub repository named `multi-layer-shadow-text-designer`
45+
2. Enable GitHub Pages in repository settings (Settings → Pages → Source: GitHub Actions)
46+
47+
### Deployment
48+
The project includes a GitHub Actions workflow that automatically deploys to GitHub Pages on every push to the `main` branch.
49+
50+
To deploy:
51+
```bash
52+
git add .
53+
git commit -m "Initial commit"
54+
git push origin main
55+
```
56+
57+
The site will be available at: `https://heziode.github.io/multi-layer-shadow-text-designer/`
58+
59+
## Project Structure
60+
61+
```
62+
multi-layer-shadow-text-designer/
63+
├── .github/
64+
│ └── workflows/
65+
│ └── deploy.yml # GitHub Actions workflow
66+
├── public/ # Static assets
67+
├── src/
68+
│ ├── components/ # Vue components
69+
│ │ ├── ActionButtons.vue
70+
│ │ ├── ColorControls.vue
71+
│ │ ├── FontGrid.vue
72+
│ │ ├── FontManager.vue
73+
│ │ ├── Footer.vue
74+
│ │ ├── ShadowSettings.vue
75+
│ │ └── ThemeColorPicker.vue
76+
│ ├── utils/ # Utility functions
77+
│ │ ├── colors.js # Color palette
78+
│ │ └── urlSync.js # URL synchronization
79+
│ ├── App.vue # Main app component
80+
│ ├── main.js # Entry point
81+
│ └── style.css # Global styles
82+
├── index.html # HTML entry point
83+
├── package.json # Dependencies
84+
├── vite.config.js # Vite configuration
85+
├── tailwind.config.js # Tailwind CSS configuration
86+
└── postcss.config.js # PostCSS configuration
87+
```
88+
89+
## Technologies Used
90+
91+
- **Vue 3**: Progressive JavaScript framework
92+
- **Vite**: Next-generation frontend tooling
93+
- **Tailwind CSS 4**: Utility-first CSS framework
94+
- **PNPM**: Fast, disk space efficient package manager
95+
96+
## Troubleshooting
97+
98+
### Port already in use
99+
If port 5173 is already in use, Vite will automatically try the next available port.
100+
101+
### Dependencies installation fails
102+
Make sure you have PNPM installed:
103+
```bash
104+
npm install -g pnpm@9
105+
```
106+
107+
### Build fails
108+
Clear the cache and reinstall:
109+
```bash
110+
rm -rf node_modules pnpm-lock.yaml
111+
pnpm install
112+
```

‎index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="Create stunning multi-layer shadow text effects with customizable fonts, colors, angles, and depth. Design beautiful typography with Tailwind CSS colors and share your creations via URL." />
8+
<title>Multi-Layer Shadow Text Designer</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
</head>
12+
<body>
13+
<div id="app"></div>
14+
<script type="module" src="/src/main.js"></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)