Skip to content

Commit a57f6d4

Browse files
ypatel2022ypatel2022
committed
format code
1 parent 990f482 commit a57f6d4

22 files changed

+2197
-1428
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,6 @@ Thumbs.db
4040
# keep dependency manifests in git
4141
!package.json
4242
!package-lock.json
43+
44+
# Coding agents
45+
.claude/

‎index.html‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,72 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta
7-
name="description"
8-
content="Machine Learning made visual."
9-
/>
10-
<meta
11-
name="keywords"
12-
content="Gradient, learn data science, learn ai, learn machine learning, machine learning, data science, AI education, open-source education platform"
13-
/>
14-
<meta name="author" content="Gradient" />
15-
<meta name="robots" content="index, follow" />
16-
<meta name="theme-color" content="#f7f3ea" />
17-
<meta name="application-name" content="Gradient" />
18-
<meta name="apple-mobile-web-app-title" content="Gradient" />
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="Machine Learning made visual." />
7+
<meta
8+
name="keywords"
9+
content="Gradient, learn data science, learn ai, learn machine learning, machine learning, data science, AI education, open-source education platform"
10+
/>
11+
<meta name="author" content="Gradient" />
12+
<meta name="robots" content="index, follow" />
13+
<meta name="theme-color" content="#f7f3ea" />
14+
<meta name="application-name" content="Gradient" />
15+
<meta name="apple-mobile-web-app-title" content="Gradient" />
1916

20-
<link rel="canonical" href="https://aryan-cs.github.io/gradient/" />
21-
<link rel="icon" type="image/svg+xml" href="./assets/icons/logo.svg" />
17+
<link rel="canonical" href="https://aryan-cs.github.io/gradient/" />
18+
<link rel="icon" type="image/svg+xml" href="./assets/icons/logo.svg" />
2219

23-
<meta property="og:site_name" content="Gradient" />
24-
<meta property="og:type" content="website" />
25-
<meta property="og:locale" content="en_US" />
26-
<meta property="og:title" content="Gradient" />
27-
<meta
28-
property="og:description"
29-
content="Machine Learning made visual."
30-
/>
31-
<meta property="og:url" content="https://aryan-cs.github.io/gradient/" />
32-
<meta
33-
property="og:image"
34-
content="https://aryan-cs.github.io/gradient/assets/images/welcome.png"
35-
/>
36-
<meta
37-
property="og:image:secure_url"
38-
content="https://aryan-cs.github.io/gradient/assets/images/welcome.png"
39-
/>
40-
<meta property="og:image:type" content="image/png" />
41-
<meta property="og:image:width" content="2998" />
42-
<meta property="og:image:height" content="1558" />
43-
<meta property="og:image:alt" content="Welcome to Gradient" />
20+
<meta property="og:site_name" content="Gradient" />
21+
<meta property="og:type" content="website" />
22+
<meta property="og:locale" content="en_US" />
23+
<meta property="og:title" content="Gradient" />
24+
<meta
25+
property="og:description"
26+
content="Machine Learning made visual."
27+
/>
28+
<meta
29+
property="og:url"
30+
content="https://aryan-cs.github.io/gradient/"
31+
/>
32+
<meta
33+
property="og:image"
34+
content="https://aryan-cs.github.io/gradient/assets/images/welcome.png"
35+
/>
36+
<meta
37+
property="og:image:secure_url"
38+
content="https://aryan-cs.github.io/gradient/assets/images/welcome.png"
39+
/>
40+
<meta property="og:image:type" content="image/png" />
41+
<meta property="og:image:width" content="2998" />
42+
<meta property="og:image:height" content="1558" />
43+
<meta property="og:image:alt" content="Welcome to Gradient" />
4444

45-
<meta name="twitter:card" content="summary_large_image" />
46-
<meta name="twitter:title" content="Gradient" />
47-
<meta
48-
name="twitter:description"
49-
content="Machine Learning made visual."
50-
/>
51-
<meta
52-
name="twitter:image"
53-
content="https://aryan-cs.github.io/gradient/assets/images/welcome.png"
54-
/>
45+
<meta name="twitter:card" content="summary_large_image" />
46+
<meta name="twitter:title" content="Gradient" />
47+
<meta
48+
name="twitter:description"
49+
content="Machine Learning made visual."
50+
/>
51+
<meta
52+
name="twitter:image"
53+
content="https://aryan-cs.github.io/gradient/assets/images/welcome.png"
54+
/>
5555

56-
<title>Gradient</title>
56+
<title>Gradient</title>
5757

58-
<script type="application/ld+json">
59-
{
60-
"@context": "https://schema.org",
61-
"@type": "WebSite",
62-
"name": "Gradient",
63-
"url": "https://aryan-cs.github.io/gradient/",
64-
"description": "Machine Learning made visual."
65-
}
66-
</script>
67-
</head>
68-
<body>
69-
<div id="root"></div>
70-
<script type="module" src="/src/main.jsx"></script>
71-
</body>
58+
<script type="application/ld+json">
59+
{
60+
"@context": "https://schema.org",
61+
"@type": "WebSite",
62+
"name": "Gradient",
63+
"url": "https://aryan-cs.github.io/gradient/",
64+
"description": "Machine Learning made visual."
65+
}
66+
</script>
67+
</head>
68+
<body>
69+
<div id="root"></div>
70+
<script type="module" src="/src/main.jsx"></script>
71+
</body>
7272
</html>

‎src/components/InfoCard.css‎

Lines changed: 71 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,85 @@
11
.info-card-screen {
2-
min-height: 100%;
3-
height: 100%;
4-
display: flex;
5-
align-items: center;
6-
justify-content: center;
7-
padding: clamp(1rem, 3vw, 2rem);
8-
background: transparent;
9-
overflow: hidden;
2+
min-height: 100%;
3+
height: 100%;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
padding: clamp(1rem, 3vw, 2rem);
8+
background: transparent;
9+
overflow: hidden;
1010
}
1111

1212
.info-card-shell {
13-
--info-card-max-height: calc((100vh - var(--screen-closed-height)) * 0.75);
14-
--info-card-deal-tilt: 0deg;
15-
--info-card-rest-tilt-scale: 0.56;
16-
--info-card-entry-tilt-scale: 1.85;
17-
--info-card-mid-tilt-scale: 0.45;
18-
width: min(calc(var(--info-card-max-height) * 1.3333333), calc(100vw - 2.5rem));
19-
height: min(var(--info-card-max-height), calc((100vw - 2.5rem) * 0.75));
20-
aspect-ratio: 4 / 3;
21-
border: var(--frame-strong);
22-
background: var(--surface);
23-
box-shadow: var(--underlay-shadow);
24-
border-radius: 0.5rem;
25-
padding: var(--info-card-padding, clamp(1.3rem, 3.2vw, 2.25rem));
26-
display: flex;
27-
flex-direction: column;
28-
align-items: center;
29-
justify-content: center;
30-
gap: var(--info-card-gap, clamp(0.375rem, 0.825vw, 0.5rem));
31-
text-align: center;
32-
transform-origin: center 115%;
33-
animation: info-card-deal-in 820ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
34-
will-change: transform;
13+
--info-card-max-height: calc((100vh - var(--screen-closed-height)) * 0.75);
14+
--info-card-deal-tilt: 0deg;
15+
--info-card-rest-tilt-scale: 0.56;
16+
--info-card-entry-tilt-scale: 1.85;
17+
--info-card-mid-tilt-scale: 0.45;
18+
width: min(
19+
calc(var(--info-card-max-height) * 1.3333333),
20+
calc(100vw - 2.5rem)
21+
);
22+
height: min(var(--info-card-max-height), calc((100vw - 2.5rem) * 0.75));
23+
aspect-ratio: 4 / 3;
24+
border: var(--frame-strong);
25+
background: var(--surface);
26+
box-shadow: var(--underlay-shadow);
27+
border-radius: 0.5rem;
28+
padding: var(--info-card-padding, clamp(1.3rem, 3.2vw, 2.25rem));
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
justify-content: center;
33+
gap: var(--info-card-gap, clamp(0.375rem, 0.825vw, 0.5rem));
34+
text-align: center;
35+
transform-origin: center 115%;
36+
animation: info-card-deal-in 820ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
37+
will-change: transform;
3538
}
3639

3740
@media (min-width: 901px) {
38-
.info-card-shell {
39-
--info-card-rest-tilt-scale: 1;
40-
--info-card-entry-tilt-scale: 3.4;
41-
--info-card-mid-tilt-scale: 0.86;
42-
}
41+
.info-card-shell {
42+
--info-card-rest-tilt-scale: 1;
43+
--info-card-entry-tilt-scale: 3.4;
44+
--info-card-mid-tilt-scale: 0.86;
45+
}
4346
}
4447

4548
@keyframes info-card-deal-in {
46-
0% {
47-
transform: translate3d(0, 120vh, 0) rotate(calc(var(--info-card-deal-tilt) * var(--info-card-entry-tilt-scale)));
48-
}
49-
72% {
50-
transform: translate3d(0, -0.8rem, 0) rotate(calc(var(--info-card-deal-tilt) * var(--info-card-mid-tilt-scale)));
51-
}
52-
100% {
53-
transform: translate3d(0, 0, 0) rotate(calc(var(--info-card-deal-tilt) * var(--info-card-rest-tilt-scale)));
54-
}
49+
0% {
50+
transform: translate3d(0, 120vh, 0)
51+
rotate(
52+
calc(
53+
var(--info-card-deal-tilt) *
54+
var(--info-card-entry-tilt-scale)
55+
)
56+
);
57+
}
58+
72% {
59+
transform: translate3d(0, -0.8rem, 0)
60+
rotate(
61+
calc(
62+
var(--info-card-deal-tilt) * var(--info-card-mid-tilt-scale)
63+
)
64+
);
65+
}
66+
100% {
67+
transform: translate3d(0, 0, 0)
68+
rotate(
69+
calc(
70+
var(--info-card-deal-tilt) *
71+
var(--info-card-rest-tilt-scale)
72+
)
73+
);
74+
}
5575
}
5676

5777
@media (prefers-reduced-motion: reduce) {
58-
.info-card-shell {
59-
animation: none;
60-
transform: rotate(calc(var(--info-card-deal-tilt) * var(--info-card-rest-tilt-scale)));
61-
will-change: auto;
62-
}
78+
.info-card-shell {
79+
animation: none;
80+
transform: rotate(
81+
calc(var(--info-card-deal-tilt) * var(--info-card-rest-tilt-scale))
82+
);
83+
will-change: auto;
84+
}
6385
}

‎src/components/InfoCard.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ const RECENT_TILT_WINDOW = 5;
88
const recentTiltMagnitudes = [];
99

1010
function sampleTiltMagnitude() {
11-
return DEAL_TILT_MIN_DEG + Math.random() * (DEAL_TILT_MAX_DEG - DEAL_TILT_MIN_DEG);
11+
return (
12+
DEAL_TILT_MIN_DEG + Math.random() * (DEAL_TILT_MAX_DEG - DEAL_TILT_MIN_DEG)
13+
);
1214
}
1315

1416
function generateCardTilt(dealIndex) {
@@ -24,7 +26,8 @@ function generateCardTilt(dealIndex) {
2426

2527
while (attempt < 12) {
2628
const isTooCloseToRecent = recentTiltMagnitudes.some(
27-
(recentMagnitude) => Math.abs(recentMagnitude - magnitude) < DEAL_TILT_MIN_DELTA_DEG
29+
(recentMagnitude) =>
30+
Math.abs(recentMagnitude - magnitude) < DEAL_TILT_MIN_DELTA_DEG,
2831
);
2932
if (!isTooCloseToRecent) {
3033
break;
@@ -63,7 +66,12 @@ function InfoCard({
6366

6467
return (
6568
<main className={screenClassNames} aria-live="polite">
66-
<section className={cardClassNames} role={role} aria-label={ariaLabel} style={cardStyle}>
69+
<section
70+
className={cardClassNames}
71+
role={role}
72+
aria-label={ariaLabel}
73+
style={cardStyle}
74+
>
6775
{children}
6876
</section>
6977
</main>

0 commit comments

Comments
 (0)