https://github.com/yanguadotdev/scrollfolio
✨ Horizontal scroll section built with pure HTML, CSS & JS — perfect for portfolios and creative web projects.
https://github.com/yanguadotdev/scrollfolio
Last synced: 9 months ago
JSON representation
✨ Horizontal scroll section built with pure HTML, CSS & JS — perfect for portfolios and creative web projects.
- Host: GitHub
- URL: https://github.com/yanguadotdev/scrollfolio
- Owner: yanguadotdev
- Created: 2025-08-18T12:03:22.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-18T12:22:56.000Z (10 months ago)
- Last Synced: 2025-08-18T14:25:52.092Z (10 months ago)
- Language: JavaScript
- Size: 56.5 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ✨ Scrollfolio
A sleek **horizontal scroll section** built with pure **HTML, CSS & JavaScript** — no libraries, no frameworks.
Perfect for showcasing your projects in a more elegant way inside a **portfolio** or creative website. 🚀
---
## 🌟 Features
* 📜 Smooth vertical-to-horizontal scroll animation
* 🎨 Fully responsive using CSS custom properties
* ⚡ 100% vanilla implementation (no dependencies)
* 🔧 Easy to drop into any webpage, portfolio, or framework (React, Astro, etc.) ✨
---
## 📂 Project Structure
```plaintext
.
├── index.html # Base HTML structure
├── style.css # Styling and responsive layout
├── script.js # Scroll & animation logic
├── cards.js # Card creation logic
└── utils.js # Helper functions (DOM selectors, lerp, etc.)
```
---
## 🚀 Getting Started
1. Clone this repository:
```bash
git clone https://github.com/yanguadotdev/scrollfolio.git
```
2. Open `index.html` in your browser — no build tools required. 🎉
👉 Because it’s **pure JavaScript**, you can also integrate it easily in frameworks like **React** or **Astro** without modifications.
---
## 💡 Why use this?
Most portfolios use the same **vertical scroll with static grids**. This project helps you stand out:
* Showcase your work in a **dynamic horizontal gallery**
* Keep the implementation **lightweight and dependency-free**
* Works in **any project setup** (plain HTML, React, Astro, etc.)
* Customize it easily for your own projects ✨
---
## 📣 Author
Made with ❤️ by [yanguadotdev](https://www.linkedin.com/in/yanguadotdev)
GitHub: [@yanguadotdev](https://github.com/yanguadotdev)