How I Made My Website Load in 0.364 Seconds | Build and Deploy

buildQuery.ts

export function buildQuery(params: BuildQueryParams) {
  const { type, query, category, page = 1, perPage = 20 } = params;

  const conditions = [`*[_type=="${type}"`];

  if (query) conditions.push(`title match "*${query}*"`);

  if (category && category !== "all") {
    conditions.push(`category == "${category}"`);
  }

  // Calculate pagination limits
  const offset = (page - 1) * perPage;
  const limit = perPage;

  return conditions.length > 1
    ? `${conditions[0]} && (${conditions
        .slice(1)
        .join(" && ")})][${offset}...${limit}]`
    : `${conditions[0]}][${offset}...${limit}]`;
}

globals.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  font-family: "Poppins", sans-serif;
}

@layer utilities {
  .paddle-checkout {
    @apply min-h-screen w-full py-10 md:py-20 lg:w-1/2;
  }

  .hero-height {
    @apply min-h-[calc(100vh-100px)];
  }

  .text-gradient {
    background: linear-gradient(90deg, #4ca5ff 2.34%, #b673f8 100.78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .heading1 {
    @apply text-[64px] leading-[67.2px] font-bold;
  }

  .heading2 {
    @apply font-bold text-[48px] leading-[50.4px];
  }

  .heading3 {
    @apply font-bold sm:text-[32px] sm:leading-[33.6px] text-[28px] leading-[40px] tracking-[-0.25%];
  }

  .base-regular {
    @apply text-[24px] font-normal leading-[31.2px];
  }

  .base-bold {
    @apply text-[24px] font-semibold leading-[31.2px];
  }

  .paragraph-regular {
    @apply text-[20px] font-normal leading-[26px];
  }

  .paragraph-semibold {
    @apply text-[20px] font-semibold leading-[26px];
  }

  .body-regular {
    @apply text-[16px] font-normal leading-[20.8px];
  }

  .body-semibold {
    @apply text-[16px] font-semibold leading-[20.8px];
  }

  .body-medium {
    @apply text-[16px] font-medium leading-[22.4px];
  }

  .small-regular {
    @apply text-[14px] font-normal leading-[17.5px];
  }

  .small-bold {
    @apply text-[14px] font-semibold leading-[17.5px];
  }

  .heading4 {
    @apply font-semibold text-[20px] leading-[26px] tracking-[0.25%];
  }

  .body-text {
    @apply text-[16px] leading-[22px] font-normal;
  }

  .nav-padding {
    @apply pt-[98px];
  }

  .paddings {
    @apply sm:p-16 xs:p-8 px-6 py-12;
  }

  .y-paddings {
    @apply sm:py-16 py-12;
  }

  .x-paddings {
    @apply sm:px-16 px-6;
  }

  .career-paddings {
    @apply sm:p-28 xs:p-8 px-6 py-12;
  }

  .flex-between {
    @apply flex justify-between items-center;
  }

  .flex-center {
    @apply flex justify-center items-center;
  }

  .flex-start {
    @apply flex justify-start items-start;
  }

  .flex-end {
    @apply flex justify-end;
  }

  .inner-width {
    @apply 3xl:max-w-[1280px] w-full mx-auto;
  }

  .inter-width {
    @apply lg:w-[80%] w-[100%];
  }

  .no-focus {
    @apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
  }
}

.frame {
  border-style: inset;
  border: 1px solid #40a0ff;
  position: relative;
}

.sm-box {
  width: 25px;
  height: 25px;
  position: absolute;
  border: 1px solid #40a0ff;
}

.sm-box-1 {
  top: -15px;
  left: -15px;
}

.sm-box-2 {
  top: -15px;
  right: -15px;
}

.sm-box-3 {
  bottom: -15px;
  right: -15px;
}

.sm-box-4 {
  bottom: -15px;
  left: -15px;
}

.sm-box-5 {
  bottom: 50%;
  left: -15px;
}

.sm-box-6 {
  bottom: 50%;
  right: -15px;
}

.sm-box-7 {
  bottom: -15px;
  left: 50%;
}

.sm-box-8 {
  top: -15px;
  left: 50%;
}

@media screen and (max-width: 500px) {
  .sm-box-5,
  .sm-box-6,
  .sm-box-7,
  .sm-box-8 {
    display: none;
  }

  .frame {
    border-radius: 10px;
  }
}

.text-gradient_purple-blue {
  background: linear-gradient(90deg, #4c73ff 0%, #73e0f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.gradient_blue-purple {
  background: linear-gradient(90deg, #4ca5ff 0%, #b573f8 100%);
}

.text-gradient_blue {
  background: linear-gradient(90deg, #4c73ff 2.34%, #389bff 100.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.gradient_purple {
  background: linear-gradient(90deg, #854cff 0%, #b573f8 100%);
}

.text-gradient_blue-purple {
  background: linear-gradient(90deg, #4ca5ff 0%, #b573f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    screens: {
      xs: "400px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1220px",
      "2xl": "1440px",
      "3xl": "1700px",
    },
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        poppins: ["Poppins", "sans-serif"],
        inter: ["Inter", "sans-serif"],
      },
      colors: {
        primary: "#2190FF",
        black: {
          DEFAULT: "#000",
          100: "#0D1117",
          200: "#161B22",
          300: "#1F2428",
          400: "#242C38",
        },
        grey: {
          100: "#969BA5",
          200: "#55616D",
        },
        white: {
          DEFAULT: "#FFF",
          400: "#A3B3BC",
          500: "#A4B8D5",
          800: "#D0DFFF",
        },
        purple: "#8C7CFF",
        pink: "#ED5FBD",
        violet: "#F16565",
        orange: "#FF964B",
      },
      backgroundImage: {
        banner: "url('/jsm_resources_banner.svg')",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};