https://github.com/dacrab/solid-studio
Modern portfolio/agency website template built with SolidJS, TypeScript, and TailwindCSS
https://github.com/dacrab/solid-studio
agency animation dark-theme portfolio solidjs tailwindcss template typescript vite website
Last synced: 3 months ago
JSON representation
Modern portfolio/agency website template built with SolidJS, TypeScript, and TailwindCSS
- Host: GitHub
- URL: https://github.com/dacrab/solid-studio
- Owner: dacrab
- Created: 2026-01-25T19:06:17.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-03-02T21:05:04.000Z (3 months ago)
- Last Synced: 2026-03-02T23:29:43.425Z (3 months ago)
- Topics: agency, animation, dark-theme, portfolio, solidjs, tailwindcss, template, typescript, vite, website
- Language: TypeScript
- Homepage: https://solid-studio-zeta.vercel.app
- Size: 159 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 Solid Studio
A modern, animated portfolio/agency website template built with SolidJS.
## ✨ Features
- **Modern Dark Theme** - Sleek, professional design
- **Smooth Animations** - Powered by solid-motionone
- **Projects Showcase** - Case studies with detailed views
- **Responsive Design** - Works on all devices
- **Lazy Loading** - Code-split pages for performance
- **Type Safe** - Full TypeScript support
## 🛠️ Tech Stack
| Technology | Purpose |
|------------|---------|
| [SolidJS](https://www.solidjs.com/) | Reactive UI framework |
| [TypeScript](https://www.typescriptlang.org/) | Type safety |
| [Vite](https://vitejs.dev/) | Build tool & dev server |
| [TailwindCSS](https://tailwindcss.com/) | Styling |
| [solid-motionone](https://motion.dev/) | Animations |
| [@solidjs/router](https://docs.solidjs.com/solid-router) | Client-side routing |
## 🚀 Getting Started
### Prerequisites
- [Bun](https://bun.sh/) (recommended) or Node.js 18+
- npm or bun
### Installation
```bash
# Clone the repository
git clone https://github.com/dacrab/solid-studio.git
cd solid-studio
# Install dependencies
bun install
# Start development server
bun dev
```
### Build for Production
```bash
bun run build
bun run preview
```
## 📁 Project Structure
```
src/
├── App.tsx # Main app with routing
├── index.tsx # Entry point
├── index.css # Global styles & Tailwind
├── data/
│ └── projects.ts # Project data
├── components/
│ ├── Header.tsx # Navigation header
│ ├── Hero.tsx # Landing hero section
│ └── ProjectCard.tsx
└── pages/
├── Home.tsx # Homepage
└── Project.tsx # Project detail page
```
## 🎯 Use Cases
- **Portfolio** - Showcase your work
- **Agency Website** - Present your services
- **Landing Page** - Product or service launch
- **Template** - Starting point for your project
## 📝 Customization
1. **Projects** - Edit `src/data/projects.ts` to add your own work
2. **Styling** - Modify `tailwind.config.js` and `index.css`
3. **Content** - Update text in components
4. **Branding** - Replace logos and colors
## 📄 License
MIT License - feel free to use this template for your own projects.
---
Built with ❤️ using [SolidJS](https://www.solidjs.com/)