Created
September 18, 2023 13:34
-
-
Save adrianhajdin/32800814aa94d753f6d249d796a422ff to your computer and use it in GitHub Desktop.
How I Made My Website Load in 0.364 Seconds | Build and Deploy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}]`; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 */ | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** @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")], | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Amazing🚀🚀🚀🚀