A modern React app showcasing smooth, high‑fidelity animations with GSAP. Built on Vite, styled with Tailwind, and instrumented with Sentry for visibility.
Tip: Add a short screen capture GIF of the hero animations for an eye‑catching preview.
- Framework: React 19, React DOM
- Animations: GSAP 3, @gsap/react
- Build Tool: Vite 7
- Styling: Tailwind CSS 3, PostCSS, Autoprefixer
- DX & Quality: ESLint (React Hooks, React Refresh),
react-icons,react-use - Observability: Sentry (Vite plugin for sourcemaps, React profiler wrapper)
.
├─ public/
│ ├─ img/ # Static images (logo, gallery, artwork)
│ ├─ videos/ # MP4 clips for sections and features
│ ├─ fonts/ # Custom webfonts
│ └─ audio/ # Audio assets
├─ src/
│ ├─ components/ # Hero, About, Features, Story, Contact, Navbar, etc.
│ ├─ App.jsx # Root app (export wrapped with Sentry.withProfiler)
│ ├─ main.jsx # React entry
│ └─ index.css # Tailwind entry + global styles
├─ index.html # Vite HTML template
├─ vite.config.js # Vite + Sentry plugin (sourcemaps enabled)
├─ tailwind.config.js# Tailwind theme & tokens
├─ eslint.config.js # Linting rules
└─ package.json # Scripts & deps- Prerequisites
- Node.js >= 18
- npm >= 9
- Install
npm install
- Run Dev Server
Open the local URL that Vite prints (often http://localhost:5173).
npm run dev
npm run dev— Start dev server with HMRnpm run build— Production build todist/npm run preview— Preview production build locallynpm run lint— Lint codebase
Sourcemaps are enabled in vite.config.js and the Sentry Vite plugin is configured with org/project.
- To upload sourcemaps during CI/CD builds, set an auth token and build:
$env:SENTRY_AUTH_TOKEN = "<your_token_with_project:releases>" npm run build
- You can also provide
SENTRY_ORGandSENTRY_PROJECTas env vars if you prefer not to hardcode them. - The app export uses
Sentry.withProfiler(App)for performance tracing. Add DSN/init if you want runtime error reporting.
- Branching
- Create feature branches from
main:feat/your-feature,fix/bug-name,chore/task
- Create feature branches from
- Develop
- Run
npm run dev; keep changes small and focused - Prefer functional components, React hooks, and GSAP timelines for motion
- Run
- Quality Gate
- Run
npm run lintand fix warnings/errors
- Run
- Commit
- Use clear messages, e.g.
feat(hero): add staggered title animation
- Use clear messages, e.g.
- Pull Request
- Open a PR with a brief description and screen capture
- Review & Merge
- Address feedback; squash or rebase to keep history clean
- Release
npm run build; ensure Sentry sourcemaps upload if configured
Pro tip: Keep animation code isolated in small components/hooks so it’s testable and easy to tweak.
- Tailwind CSS utilities for layout/spacing/typography
- Custom fonts and colors configured in
tailwind.config.js - Prefer semantic component classes and minimal custom CSS
- Hero: headline animations and intro video
- Features: motion‑enhanced cards/sections
- Story: narrative with subtle transitions
- Contact: form/CTA
- Navbar/Footer: site chrome with smooth interactions
- Dev server not starting? Ensure Node ≥ 18 and reinstall deps (
rm -rf node_modules && npm ion Unix, or delete folder on Windows). - Sourcemaps missing in Sentry? Confirm
SENTRY_AUTH_TOKENis set in the build environment and builds run in CI. - Animations janky? Check for heavy reflows; use GSAP timelines and
will-changewhere appropriate.
- Fork the repo and create a feature branch
- Keep PRs focused and include screenshots for UI changes
- Ensure lint passes and add comments where logic is non‑trivial
Add your license text or a link here (e.g., MIT). If unspecified, the code is considered proprietary by default.
If you’d like, I can add a short CI example (GitHub Actions) and a demo GIF to make this README even more stunning.