Skip to content

Commit d86ff3d

Browse files
Kyler-ChiagoKyler-Chiago
authored
Merge pull request #62 from oslabs-beta/austin-site-css
feat: Demo.tsx Features.tsx DemoCard.tsx FeatureCard.tsx
2 parents 1cf23a4 + 786f3a8 commit d86ff3d

File tree

10 files changed

+138
-435
lines changed

10 files changed

+138
-435
lines changed

‎mlflow-site/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
# misc
2020
.DS_Store
21+
../.DS_Store
2122
*.pem
2223

2324
# debug

‎mlflow-site/next.config.mjs‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
/** @type {import('next').NextConfig} */
2-
const nextConfig = {};
2+
const nextConfig = {
3+
images: {
4+
remotePatterns: [
5+
{
6+
protocol: 'https',
7+
hostname: 'i.giphy.com'
8+
},
9+
],
10+
},
11+
};
312

413
export default nextConfig;

‎mlflow-site/src/app/components/Demo.tsx‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,28 @@
1+
import DemoCard from "./DemoCard";
2+
13
const Demo = () => {
4+
const demos = [];
5+
const demoCardHeaders = [
6+
'Demo 1',
7+
'Demo 2',
8+
'Demo 3'
9+
];
10+
const demoCardBlurbs = [
11+
'Description for what\'s happening in Demo 1. This block of text will contain all the info needed to understand the demo.',
12+
'Description for what\'s happening in Demo 2. This block of text will contain all the info needed to understand the demo.',
13+
'Description for what\'s happening in Demo 3. This block of text will contain all the info needed to understand the demo.'
14+
];
15+
for (let i = 0; i < 3; i++) {
16+
demos.push(
17+
<DemoCard
18+
key={`demoCard${i}`}
19+
header={demoCardHeaders[i]}
20+
blurb={demoCardBlurbs[i]}
21+
/>
22+
);
23+
}
224
return (
3-
<div className='demo' id='demo'>
4-
<div className='demoSplit'>
5-
<div>Img 1</div>
6-
<div>Demo 1</div>
7-
</div>
8-
<div className='demoSplit'>
9-
<div>Demo 2</div>
10-
<div>Img 2</div>
11-
</div>
12-
<div className='demoSplit'>
13-
<div>Img 3</div>
14-
<div>Demo 3</div>
15-
</div>
16-
</div>
25+
<div className='demo' id='demo'>{demos}</div>
1726
);
1827
};
1928

‎mlflow-site/src/app/components/DemoCard.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Image from "next/image";
2+
3+
const DemoCard = ({ header, blurb }: {
4+
key: string,
5+
blurb: string,
6+
header: string
7+
}) => {
8+
return (
9+
<div className='demoCard'>
10+
<Image
11+
src='https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW9tcWttZ3R0YTVpNWxwcGJ4M2YyZ2ExcmxlazN5N3JyenF0ajl4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FqdGGgugkC4Xm/giphy.gif'
12+
alt=''
13+
width={700}
14+
height={475}
15+
sizes="100vw"
16+
style={{
17+
width: "100%",
18+
height: "auto",
19+
}}
20+
/>
21+
<div className='demoCardHeader'>{header}</div>
22+
{blurb}
23+
</div>
24+
);
25+
};
26+
27+
export default DemoCard;
28+

‎mlflow-site/src/app/components/FeatureCard.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
const FeatureCard = () => {
1+
const FeatureCard = ({ header, blurb }: {
2+
key: string,
3+
blurb: string,
4+
header: string
5+
}) => {
26
return (
37
<div className='featureCard'>
4-
<div>FeatureCard1 hello how are you doing?</div>
5-
<div>FeatureCard2</div>
6-
<div>FeatureCard3</div>
7-
<div>FeatureCard4</div>
8+
<div className='featureCardHeader'>{header}</div>
9+
{blurb}
810
</div>
911
);
1012
};

‎mlflow-site/src/app/components/Features.tsx‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,38 @@
11
import FeatureCard from "./FeatureCard";
22

33
const Features = () => {
4+
const featureHeader = 'MLOps in Javascript, made simple.';
5+
const featureLongBlurb = `
6+
Longer blurb about MLFlow.js\'s feature set. Longer blurb about MLFlow.js\'s feature set. Longer blurb about MLFlow.js\'s feature set. Longer blurb about MLFlow.js\'s feature set. Longer blurb about MLFlow.js\'s feature set. Longer blurb about MLFlow.js\'s feature set.
7+
`;
8+
const cards = [];
9+
const featureCardHeaders = [
10+
'Feature 1',
11+
'Feature 2',
12+
'Feature 3',
13+
'Feature 4',
14+
];
15+
const featureCardBlurbs = [
16+
'Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. ',
17+
'Feature Card Blurb 2. Feature Card Blurb 2. Feature Card Blurb 2. Feature Card Blurb 2. ',
18+
'Feature Card Blurb 3. Feature Card Blurb 3. Feature Card Blurb 3. Feature Card Blurb 3. ',
19+
'Feature Card Blurb 4. Feature Card Blurb 4. Feature Card Blurb 4. Feature Card Blurb 4. '
20+
21+
];
22+
for (let i = 0; i < 4; i++) {
23+
cards.push(
24+
<FeatureCard
25+
key={`featureCard${i}`}
26+
header={featureCardHeaders[i]}
27+
blurb={featureCardBlurbs[i]}
28+
/>
29+
);
30+
}
431
return (
532
<div className='features' id='features'>
6-
<div>MLOps in Javascript, made simple.</div>
7-
<div>Long blurb</div>
8-
<FeatureCard/>
33+
<div className='featureHeader'>{featureHeader}</div>
34+
<div className='featureLongBlurb'>{featureLongBlurb}</div>
35+
<div className=''>{cards}</div>
936
</div>
1037
);
1138
};

‎mlflow-site/src/app/globals.css‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -175,28 +175,60 @@ body {
175175
grid-column: 2/5;
176176
grid-row: 3;
177177
width: 100%;
178-
background-color: rgb(176, 47, 107);
179178
display: grid;
180179
place-items: center;
180+
padding: 0.5rem;
181+
margin-bottom: 5rem;
182+
text-align: center;
183+
color: black;
184+
background-color: white;
185+
}
186+
187+
.featureHeader {
188+
font-size: 1.875rem;
189+
margin-bottom: 0.5rem;
190+
}
191+
192+
.featureLongBlurb {
193+
margin-bottom: 0.5rem;
181194
}
182195

183196
.featureCard {
197+
color: black;
184198
width: 100%;
185-
background-color: rgb(122, 144, 167);
199+
background-color: rgb(217, 225, 210);
186200
display: grid;
187201
grid-template-columns: 100%;
188202
grid-template-rows: min-content;
189-
text-align: center;
203+
padding: 0.5rem;
204+
margin-bottom: 0.5rem;
205+
}
206+
207+
.featureCardHeader {
208+
font-size: 1.5rem;
190209
}
191210

192211
.demo {
193212
grid-column: 2/5;
194213
grid-row: 3;
195214
width: 100%;
196-
background-color: rgb(47, 176, 101);
197215
display: grid;
198216
grid-template-columns: 100%;
199217
grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3);
218+
color: black;
219+
background-color: white;
220+
margin-bottom: 5rem;
221+
}
222+
223+
.demoCard {
224+
gap: 1.25rem;
225+
padding: 0.25rem;
226+
margin-bottom: 5rem;
227+
text-align: center;
228+
}
229+
230+
.demoCardHeader {
231+
font-size: 1.5rem;
200232
}
201233

202234
.demoSplit {

‎mlflow-site/src/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const geistMono = localFont({
1515
});
1616

1717
export const metadata: Metadata = {
18-
title: "Create Next App",
19-
description: "Generated by create next app",
18+
title: "MLflow.js",
19+
description: "MLflow.js",
2020
};
2121

2222
export const viewport: Viewport = {

‎mlflow/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ node_modules/
33

44
# Misc
55
.DS_Store
6+
../.DS_Store
67

78
# Python / MLflow specific
89
.venv/

0 commit comments

Comments
 (0)