DEV Community: Yusuf Cengiz

🚀 Open Source: Svelte 5 + GSAP Creative Agency Template

Yusuf Cengiz — Tue, 21 Apr 2026 21:22:25 +0000

Hey everyone 👋

I recently built and open-sourced a Svelte 5 + GSAP template focused on creating modern, animated landing pages (Awwwards-style).

👉 GitHub: https://github.com/YusufCeng1z/svelte-gsap-template

✨ Why I built this

While working with Svelte, I noticed that integrating GSAP can get messy:

You need to manually bind DOM elements
Run animations inside onMount
Handle cleanup yourself

Even though GSAP is powerful, the setup friction is real.

So I wanted to create a clean starter template that already includes:

Smooth scroll experience
Scroll-triggered animations
Reusable animation patterns
Modern UI structure

⚙️ Tech Stack

Svelte 5 (Runes)
GSAP (ScrollTrigger, timelines)
Tailwind CSS v4
Optional: Lenis for smooth scrolling

🎬 Features

⚡ Smooth scrolling experience
🎯 Scroll-triggered animations
🧱 Sticky & layered sections
💎 Glassmorphism UI elements
📱 Fully responsive design
🌙 Dark mode ready
🚀 Pre-rendered & fast

🧠 Key Idea

Instead of scattering GSAP logic everywhere, the template:

Keeps animations structured and reusable
Makes it easier to scale animation-heavy UIs
Reduces boilerplate for every new project

📸 Use Cases

Portfolio websites
Creative agency landing pages
Product showcases
Experimental UI projects

🧩 Why GSAP with Svelte?

Svelte has built-in animations, but:

They’re great for simple transitions
GSAP shines for complex timelines & scroll effects

This template tries to combine the best of both worlds.

💬 Feedback

This is still evolving, so feedback is super welcome 🙌

If you find bugs, have ideas, or want improvements — feel free to open an issue or PR.

⭐ If you like it, consider starring the repo!

Thanks!

Svelte Bash: A Lightweight Terminal Component for Svelte 5 (Autoplay, VFS, Themes, Custom Commands)

Yusuf Cengiz — Thu, 11 Dec 2025 01:17:31 +0000

If you're building with Svelte 5 and you’ve ever needed a clean, lightweight, fully-typed terminal UI, I built something you might like.

Meet Svelte Bash — a zero-dependency, ~4kb gzipped, highly customizable terminal emulator component made specifically for Svelte 5 applications.

It includes everything you expect from a terminal component (and more):
Autoplay mode, virtual file system, custom commands, deep theming, history navigation, accessibility, and full TypeScript support.

GitHub : https://github.com/YusufCeng1z/svelte-bash

- Live : https://svelte-bash.netlify.app/

🌟 Why I Built Svelte Bash

I needed a terminal component for demos, documentation, and interactive tutorials — something lightweight, theme-able, and easy to embed in any Svelte page.
Most solutions were either too heavy or not Svelte-native.

So I built Svelte Bash from scratch with these goals:

Modern Svelte 5 features
Zero dependencies
Small enough for landing pages
Realistic terminal behavior
Easily extendable with your own commands

⚡ Key Features

✅ 1. Autoplay Mode (Scripted Demos)

Perfect for landing pages, tutorials, and docs.
Commands type and execute automatically.

<Terminal 
  autoplay={[
    { command: 'git status' },
    { command: 'git commit -m "wip"', output: '...' }
  ]}
/>

✅ 2. Virtual File System (VFS)

Svelte Bash includes a mini virtual file system with real commands:

ls
cd
pwd
cat

You define your structure like this:

<script>
  const fileSystem = {
    'readme.md': '# Hello World',
    src: {
      'app.js': 'console.log("Hi")'
    }
  };
</script>

<Terminal structure={fileSystem} />

✅ 3. Custom Commands

Add your own CLI commands — sync or async.

<Terminal
  commands={{
    hello: () => "Hello from Svelte Bash!",
    echo: (args) => args.join(' '),
    fetchdata: async () => {
      const res = await fetch('https://api.example.com');
      return await res.text();
    }
  }}
/>

✅ 4. Deep Theming (Dark, Light, Dracula, Matrix + Custom Themes)

Use built-in presets or provide your own colors:

<Terminal 
  theme={{
    background: '#1a1b26',
    foreground: '#a9b1d6',
    prompt: '#7aa2f7',
    cursor: '#c0caf5'
  }}
/>

✅ 5. Fully Typed with TypeScript

Every prop, command, and VFS entry includes precise TypeScript definitions.

✅ 6. Lightweight & Fast

Zero dependencies
~4kb gzipped
Optimized for Svelte 5 runes
No runtime overhead

Ideal for production sites, documentation, and portfolio sections.

📦 Installation

npm install svelte-bash

🧩 Basic Usage

<script>
  import { Terminal } from "svelte-bash";
</script>

<Terminal user="guest" machine="dev" />

🧭 Use Cases

Developer portfolios
Landing page demos
Interactive documentation
Web-based CLI tools
Coding tutorials
Onboarding experiences

⭐ If You Like It, Please Star the GitHub Repo

Open-source projects grow with community support.
If Svelte Bash helps you in any way, a GitHub star would mean a ton to me — it boosts the project’s visibility and helps more Svelte developers discover it.

👉 GitHub: https://github.com/YusufCeng1z/svelte-bash

Thank you in advance! ❤️

💬 Feedback & Contributions

I’d love to hear your suggestions, feature ideas, or bug reports.
Issues and PRs are always welcome.

🚀 Build a Production-Ready Blog with SvelteKit in 5 Minutes

Yusuf Cengiz — Mon, 08 Dec 2025 02:08:27 +0000

Modern, fast, customizable — and fully open source.

Creating a blog with SvelteKit can be incredibly fun… until you start dealing with SEO, dark mode, styling, content setup, authors, tags, routing, RSS, sitemap, and more.

I’ve been there.

That’s why I built the SvelteKit Shadcn Blog Starter — a clean and production-ready template that lets you launch a modern blog in minutes instead of hours.

👉 GitHub: https://github.com/YusufCeng1z/sveltekit-shadcn-blog-starter

✨ What You Get Out of the Box

⚡ 5-minute setup
📝 Write posts in Markdown
🎨 Beautiful UI with shadcn-svelte
🔍 SEO-ready (RSS, Sitemap, OG tags)
🌙 Dark mode included
📱 Fully responsive
🔎 Built-in search
👤 Multi-author support

Whether you're building a personal blog, a dev blog, or a content-heavy site — this starter gives you everything you need.

💡 Why I Built This Starter

When I built my first SvelteKit blog, I spent days:

choosing a UI library
setting up MDsveX
configuring SEO
building tag pages
adding dark mode
writing RSS feed + sitemap logic

It took way too long.

So I built a starter that handles all this for you.
Clone → write content → deploy. That’s it.

🚧 Features Overview

📝 Content Management

Write posts using Markdown + Svelte components
Automatic tag pages
Multi-author setup
Built-in search
SEO-friendly slugs

🎨 Design & UX

shadcn-svelte UI components
Tailwind CSS styling
Dark/light theme detection
Fully mobile-friendly layout

🔍 SEO & Performance

Auto-generated sitemap.xml
Auto-generated RSS
Perfect Open Graph metadata
SvelteKit optimizations by default
TypeScript everywhere

🚀 Quick Start

# Clone the repository
git clone https://github.com/YusufCeng1z/sveltekit-shadcn-blog-starter.git
cd sveltekit-shadcn-blog-starter

# Install dependencies
npm install

# Run the dev server
npm run dev

Open http://localhost:5173 and start creating your content.

🗂 Project Structure

sveltekit-blog-starter/
├── src/
│   ├── lib/
│   │   ├── components/     # UI + shared components
│   │   └── config/         # Site config
│   ├── posts/              # Markdown blog posts
│   └── routes/
│       ├── blog/           # Blog list + blog post pages
│       ├── authors/        # Author pages
│       ├── tags/           # Tag archive pages
│       ├── sitemap.xml/    # Sitemap generator
│       └── rss.xml/        # RSS feed generator
└── static/                 # Images & assets

✍️ Creating Your First Post

Create a new Markdown file under src/posts/:

---
title: "My First Blog Post"
description: "A short description of the post"
date: "2025-12-08"
tags: ["tutorial", "getting-started"]
author: "your-author-id"
---

# Welcome!

Start writing your content here…

Everything updates automatically:

Blog page
Tags
Author route
RSS + sitemap

⚙️ Configuration

Modify the site config at:

src/lib/config/site.ts

export const siteConfig = {
    name: "My SvelteKit Blog",
    url: "https://yourdomain.com",
    description: "A modern blog built with SvelteKit",
    links: {
        twitter: "https://twitter.com/yourusername",
        github: "https://github.com/yourusername",
    },
};

☁️ Deployment

✨ Recommended: Netlify

Just push to GitHub → Click New site from Git → Deploy.

Works great with zero config.

Other supported adapters:

Vercel
Cloudflare Pages
Node.js
Static adapters

Simply install the correct SvelteKit adapter.

🔧 Customization

Customize UI with Tailwind classes
Edit or extend shadcn components
Replace layout styles
Add your brand colors
Add or remove sections easily

The starter is intentionally simple and flexible.

⭐ Show Your Support

If this starter saved you time (and headaches), consider starring the repo — it really helps others find it:

👉 https://github.com/YusufCeng1z/sveltekit-shadcn-blog-starter

❤️ Built by Yusuf Cengiz

Have suggestions or ideas?
Open an issue or reach out on GitHub!

From Next.js to SvelteKit 5 + Tailwind CSS v4: Building a High-Performance Landing Page Template

Yusuf Cengiz — Sat, 06 Dec 2025 03:07:04 +0000

🚀 The Motivation: Why Port a Next.js Template to SvelteKit?

I’ve always admired the clean, modern look of Cruip's popular Next.js landing page template. While Next.js is a fantastic framework, SvelteKit's promise of minimal output, nearly zero client-side JS, and superior raw performance was too compelling to ignore.

This project was born out of the desire to take a beloved Next.js design and rebuild it entirely using the latest and fastest components of the SvelteKit ecosystem—specifically Svelte 5 Runes and Tailwind CSS v4. It demonstrates just how simple and fast it is to build a truly production-ready page with SvelteKit.

🌟 Introducing: Simple SvelteKit Landing Page Template

I've preserved Cruip's original design while completely reconstructing the architecture using SvelteKit's best practices. This wasn't just a visual copy; it was an exercise in leveraging SvelteKit's newest features.

✨ Key Features and Tech Stack Highlights

Category	Technology / Feature	Description
Framework	SvelteKit	File-based routing, excellent SSR/SSG support, and built-in tooling.
Reactivity	Svelte 5 Runes	Built with Svelte 5's new reactivity primitives: `$props()`, `$state()`, and `$derived()`.
Styling	Tailwind CSS v4	Utilizes the new Oxide engine and CSS-first configuration for speed and cleaner setup.
Animation	AOS (Animate On Scroll)	Integrated for smooth reveal effects as the user scrolls down the page.
Architecture	Route Groups	Isolated layouts for authentication pages (`src/routes/(auth)`) for clear separation of concerns.
Performance	Optimized Output	Minimal JavaScript bundle size resulting in outstanding performance metrics.

🛠️ The Next.js to SvelteKit Migration Process

The core steps in the migration involved:

Component Translation: Converting the Next.js/React components into native Svelte components (.svelte). This required mapping props to Svelte's $props() or export let, and local state management to the powerful Svelte 5 $state().
Routing Adaptation: Moving from the Next.js routing logic (whether pages or app directory) to SvelteKit's src/routes structure using +page.svelte and +layout.svelte. Crucially, I implemented Route Groups ((auth)) to isolate the sign-in/sign-up layout.
Styling Setup: Configuring Tailwind CSS v4 according to its new specification and integrating it seamlessly within the SvelteKit global styles structure.

This journey reaffirmed how logical and developer-friendly SvelteKit's approach to routing and component architecture is.

💻 Getting Started

You can clone and run the template immediately:

Clone the Repository:

git clone https://github.com/YusufCeng1z/sveltekit-tailwind-landing-page-template.git
cd sveltekit-tailwind-landing-page-template

Install Dependencies:
```
npm install
```
Start the Development Server:
```
npm run dev
```

🔗 Resources

Find the full source code, a live demo, and more details here:

GitHub Repository: YusufCeng1z/sveltekit-tailwind-landing-page-template
Live Demo: svelte-landing-page.netlify.app

I hope this project inspires the SvelteKit community and serves as a fast, high-quality starting point for your next venture! Feel free to drop your comments and feedback below.