Skip to content

Repository files navigation

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

React Compiler

The React Compiler is enabled on this template. See this documentation for more information.

Note: This will impact Vite dev & build performances.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);

FEATURES :

  1. DARK MODE / LIGHT MODE BUTTON ON HEADER
  2. SEARCH BUTTON? ON HEADER
  3. TOTAL PAGE VIEW ON HEADER (STILL THINKING IF POSSIBLE)
  4. DISPLAY SKILLS VALUE WHEN HOVER ON SKILL PAGE
  5. VIEW MORE - VIEW LESS BUTTON ON PORTFOLIO PAGE
  6. MEDIA QUERIES ON LIVE DEMO BUTTON ON PORTFOLIO PAGE
  7. DRAG & DROP CARD ON EXPERIENCE PAGE
  8. ADDING TESTIMONIALS PAGE ON BLOG - CONNECT THE BLOG WITH THE TESTIMONIAL PAGE
  9. LINKED TO WEB WHATSAPP ON HIRE ME

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages