Skip to content

README.md

Latest commit

 

History

History
87 lines (65 loc) · 2.49 KB

README.md

File metadata and controls

87 lines (65 loc) · 2.49 KB
Raw

Award-winning-website

A Vite + React single-page website built with Tailwind CSS and GSAP animations.

Quick overview

  • Framework: React 18 (Vite)
  • Styling: Tailwind CSS + PostCSS + custom fonts
  • Animations: GSAP (GreenSock)
  • Build tool: Vite

Install & run

  1. Ensure Node.js (>=16) and npm are installed.

  2. Install dependencies:

    npm install

  3. Run development server:

    npm run dev

  4. Build for production:

    npm run build

  5. Preview production build locally:

    npm run preview

  6. Linting:

    npm run lint

Available npm scripts (from package.json)

  • dev: vite
  • build: vite build
  • preview: vite preview
  • lint: eslint .

Libraries used

Dependencies (runtime)

  • @gsap/react ^2.1.1 — React bindings for GSAP
  • gsap ^3.12.5 — animation library
  • clsx ^2.1.1 — conditional classNames helper
  • react ^18.3.1
  • react-dom ^18.3.1
  • react-icons ^5.3.0 — icon components
  • react-use ^17.5.1 — useful React hooks

DevDependencies (development)

  • vite ^5.4.10
  • @vitejs/plugin-react ^4.3.3
  • tailwindcss ^3.4.14
  • postcss ^8.4.49
  • autoprefixer ^10.4.20
  • eslint ^9.14.0 and related plugins
  • prettier ^3.3.3
  • @types/react, @types/react-dom

(Exact versions in package.json)

Project structure (key files)

  • index.html — app entry, mounts #root
  • src/main.jsx — React bootstrap
  • src/App.jsx — main layout composing components
  • src/index.css — Tailwind + custom fonts + utility classes
  • src/components/* — UI components (Navbar, Hero, About, Features, Story, Contact, Footer, etc.)
  • vite.config.js — Vite config (uses @vitejs/plugin-react)
  • tailwind.config.js — Tailwind content paths, theme extensions
  • postcss.config.js — PostCSS setup (tailwindcss + autoprefixer)

Styling & fonts

  • Tailwind configured to scan index.html and src/**/*.{js,ts,jsx,tsx}
  • Custom fonts loaded from /fonts/*.woff2 and an external CDN for General Sans
  • Many utility classes and custom components are defined in src/index.css using @layer utilities and base

Notes & tips

  • package.json is the source of truth for dependencies and scripts.
  • Use Node.js 16+ for compatibility with Vite 5.
  • Fonts in /fonts should be present for exact typography; fallback to CDN font is included.
  • .gitignore excludes node_modules and dist folders.

Contributing

Open an issue or submit a PR. Run npm run lint and ensure formatting with Prettier before committing.

If you want, a more detailed README can be generated that includes screenshots, a component map, or deployment steps (Netlify/Vercel).