Skip to content

Commit 07f18d1

Browse files
austinbfraseraustinbfraser
committed
merging in latest changes from dev
2 parents 72e6aeb + 64e16ee commit 07f18d1

File tree

10 files changed

+160
-58
lines changed

10 files changed

+160
-58
lines changed

‎mlflow-site/public/assets/GithubLogo.png

7.69 KB
Loading

‎mlflow-site/public/assets/LinkedInLogo.png

14.2 KB
Loading

‎mlflow-site/src/assets/imageNotFound.jpg renamed to ‎mlflow-site/public/assets/imageNotFound.jpg

File renamed without changes.

‎mlflow-site/public/assets/kylerpfp.png

799 KB
Loading

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

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,26 @@
1+
'use client';
2+
13
const Button = () => {
2-
return (
3-
<div className='button'>Button</div>
4-
)
5-
}
6-
7-
export default Button
4+
return (
5+
<div className='button'>
6+
<button
7+
onClick={() => {
8+
window.location.assign('https://github.com/oslabs-beta/mlflow-js');
9+
}}
10+
className='homeButton homeButtonDownload text-white'
11+
>
12+
Download
13+
</button>
14+
<button
15+
onClick={() => {
16+
window.location.assign('https://github.com/oslabs-beta/mlflow-js/tree/dev/mlflow/docs');
17+
}}
18+
className='homeButton homeButtonRead'
19+
>
20+
Read the Docs
21+
</button>
22+
</div>
23+
);
24+
};
25+
26+
export default Button;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import Button from './Button';
22

33
const Headline = () => {
44
return (
5-
<div className='home'>
6-
<div>MLOps workflow for Javascript</div>
5+
<div className='home' id='headline'>
6+
<div className='bigHeadline'>MLOps workflow for Javascript</div>
77
<div>Harness MLflow&apos;s MLOps functionality for your Javascript application with MLflow.js</div>
88
<Button />
99
</div>

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

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,52 @@
1+
'use client';
2+
3+
import Image from 'next/image';
4+
15
const NavBar = () => {
26
return (
37
<div className='navBar'>
4-
<div>MLflow.js</div>
8+
<div className='navBarMlflow'>MLflow.js</div>
59
<div className='navBarLinks'>
6-
<div>Home</div>
7-
<div className='navBarLinksFeatures'>Features</div>
8-
<div className='navBarLinksDemo'>Demo</div>
9-
<div className='navBarLinksTeam'>Team</div>
10-
<div className='navBarLinksGithub'>G</div>
11-
<div className='navBarLinksLinkedIn'>L</div>
10+
<button
11+
onClick={() => {
12+
const element = document.getElementById('headline');
13+
element?.scrollIntoView({ behavior: 'smooth' });
14+
}}
15+
>
16+
Home
17+
</button>
18+
<button
19+
onClick={() => {
20+
const element = document.getElementById('features');
21+
element?.scrollIntoView({ behavior: 'smooth' });
22+
}}
23+
>
24+
Features
25+
</button>
26+
<button
27+
onClick={() => {
28+
const element = document.getElementById('demo');
29+
element?.scrollIntoView({ behavior: 'smooth' });
30+
}}
31+
className='navBarLinksDemo'
32+
>
33+
Demo
34+
</button>
35+
<button
36+
onClick={() => {
37+
const element = document.getElementById('team');
38+
element?.scrollIntoView({ behavior: 'smooth' });
39+
}}
40+
className='navBarLinksTeam'
41+
>
42+
Team
43+
</button>
44+
<a
45+
href='https://github.com/oslabs-beta/mlflow-js'
46+
className='navBarLinksGithub'
47+
>
48+
<Image src={'/assets/GithubLogo.png'} width={24} height={24} alt='G' />
49+
</a>
1250
</div>
1351
</div>
1452
);

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,49 @@ const Team = () => {
66
name: 'Yiqun Zheng',
77
github: 'https://github.com/yiqunzheng',
88
linkedIn: 'https://www.linkedin.com/in/yiqunzheng/',
9+
pfp: '',
910
},
1011
{
1112
name: 'Kyler Chiago',
1213
github: 'https://github.com/Kyler-Chiago',
1314
linkedIn: 'https://www.linkedin.com/in/kyler-chiago/',
15+
pfp: '/assets/kylerpfp.png',
1416
},
1517
{
1618
name: 'Austin Fraser',
1719
github: 'https://github.com/austinbfraser',
1820
linkedIn: 'http://www.linkedin.com/in/austin-fraser',
21+
pfp: '',
1922
},
2023
{
2124
name: 'Stephany Ho',
2225
github: 'https://github.com/seneyu/',
2326
linkedIn: 'https://www.linkedin.com/in/stephanyho/',
24-
},
25-
{
26-
name: 'Winston Ludlam',
27-
github: 'https://github.com/winjolu/',
28-
linkedIn: 'https://www.linkedin.com/in/wjludlam/',
27+
pfp: '',
2928
},
3029
];
3130

3231
return (
33-
<div className='team'>
34-
<div className='centered'>Meet the team</div>
32+
<div className='team' id='team'>
33+
<div className='centered teamHead'>Meet the team</div>
3534
<div className='teamCards'>
3635
{teamArray.map((member, index) => (
3736
<TeamCard
3837
key={index}
3938
name={member.name}
4039
github={member.github}
4140
linkedIn={member.linkedIn}
41+
pfp={member.pfp}
4242
/>
4343
))}
4444
</div>
45+
<TeamCard
46+
key={'soloCard'}
47+
name={'Winston Ludlam'}
48+
github={'https://github.com/winjolu/'}
49+
linkedIn={'https://www.linkedin.com/in/wjludlam/'}
50+
pfp={''}
51+
/>
4552
</div>
4653
);
4754
};

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

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
import imageNotFound from '../../assets/imageNotFound.jpg'
1+
import Image from 'next/image';
22

33
interface TeamCardProps {
44
name: string;
55
github: string;
66
linkedIn: string;
7+
pfp: string;
78
}
89

9-
const TeamCard: React.FC<TeamCardProps> = ({
10-
name,
11-
github,
12-
linkedIn,
13-
}) => {
10+
const TeamCard: React.FC<TeamCardProps> = ({ name, github, linkedIn, pfp }) => {
1411
return (
1512
<div className='teamcard'>
16-
{/* <div style={{ backgroundImage: 'url(../../assets/imageNotFound.jpg)' }} className='teamCardImg'></div> */}
17-
<img src={imageNotFound} alt='Miss'></img>
18-
{/* <img src={require('../../assets/imageNotFound.jpg')} alt="Test"></img> */}
13+
<Image src={pfp} width={70} height={70} alt='No Image' />
1914
<div>{name}</div>
20-
<div>
21-
<a href={github}>G </a>
22-
<a href={linkedIn}>L </a>
15+
<div className='teamcardLinks'>
16+
<a href={github} className='teamCardLink1'>
17+
<Image
18+
src={'/assets/GithubLogo.png'}
19+
width={20}
20+
height={20}
21+
alt='G'
22+
/>
23+
</a>
24+
<a href={linkedIn} className='teamCardLink2'>
25+
<Image
26+
src={'/assets/LinkedInLogo.png'}
27+
width={20}
28+
height={20}
29+
alt='L'
30+
/>
31+
</a>
2332
</div>
2433
</div>
2534
);

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

Lines changed: 53 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,12 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
8-
}
9-
10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
15-
}
16-
175
body {
186
color: var(--foreground);
197
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
8+
font-family: Inter;
219
font-size: 1rem;
10+
color: rgb(0, 0, 0);
2211
}
2312

2413
@layer utilities {
@@ -74,15 +63,14 @@ body {
7463
grid-row: 1;
7564
display: grid;
7665
grid-template-columns: 0.7rem 1.3rem 1fr 1.3rem 0.7rem;
77-
grid-template-rows: 1.3rem 2.8rem 1fr min-content 1.3rem;
66+
grid-template-rows: 1.3rem min-content 1fr min-content 1.3rem;
7867
}
7968

8069
.navBar {
8170
grid-column: 2/5;
8271
grid-row: 2;
8372
width: 100%;
8473
height: 100%;
85-
background-color: #0a0a0a;
8674
display: grid;
8775
grid-template-columns: auto auto;
8876
grid-template-rows: 100%;
@@ -94,8 +82,9 @@ body {
9482
width: 100%;
9583
height: 100%;
9684
display: grid;
97-
grid-template-columns: repeat(calc(100%/6), 6);
85+
grid-template-columns: repeat(calc(100%/5), 5);
9886
grid-template-rows: 100%;
87+
align-items: center;
9988
}
10089

10190
.navBarLinksFeatures {
@@ -114,40 +103,63 @@ body {
114103
grid-column: 5;
115104
}
116105

117-
.navBarLinksLinkedIn {
118-
grid-column: 6;
106+
.navBarMlflow {
107+
color: rgb(66, 107, 31);
108+
font-size: 1.2rem;
109+
font-family: Newsreader;
110+
display: flex;
111+
align-items: center;
112+
}
113+
114+
.bigHeadline {
115+
font-size: 1.7rem;
116+
font-family: Newsreader;
119117
}
120118

121119
.mobileInnerWrapper {
122120
grid-column: 3;
123121
grid-row: 3;
124122
width: 100%;
125123
height: 100%;
126-
background-color: aqua;
127124
}
128125

129126
.team {
130127
grid-column: 2/5;
131128
grid-row: 4;
132129
width: 100%;
133130
height: fit-content;
134-
background-color: yellow;
135131
display: flex;
136132
justify-content: center;
137133
align-items: center;
138134
flex-direction: column;
139135
}
140136

141137
.home {
138+
margin-top: 0.3rem;
142139
grid-column: 2/5;
143140
grid-row: 3;
144141
width: 100%;
145-
background-color: rgb(102, 102, 54);
142+
}
143+
144+
.homeButton {
145+
padding: 3px;
146+
padding-left: 6px;
147+
padding-right: 6px;
148+
border-radius: 5px;
149+
font-size: 0.8rem;
150+
margin-right: 8px;
151+
}
152+
153+
.homeButtonDownload {
154+
background-color: rgb(66, 107, 31);
155+
}
156+
157+
.homeButtonRead {
158+
background-color: rgb(204, 204, 204);
146159
}
147160

148161
.button {
149162
width: 100%;
150-
background-color: rgb(14, 69, 129);
151163
}
152164

153165
.features {
@@ -183,16 +195,19 @@ body {
183195
grid-template-rows: min-content;
184196
}
185197

198+
.teamHead {
199+
font-size: 1.35rem;
200+
}
201+
186202
.teamCards {
187203
width: 100%;
188204
display: grid;
189205
grid-template-columns: 50% 50%;
190206
grid-template-rows: repeat(calc(100%/3), 3);
191-
/* border: #0a0a0a; */
192-
background-color: red;
193207
}
194208

195209
.teamcard {
210+
margin-top: 0.5rem;
196211
display: flex;
197212
flex-direction: column;
198213
justify-content: center;
@@ -202,4 +217,18 @@ body {
202217
.teamCardImg {
203218
width: 50px;
204219
height: 50px;
220+
}
221+
222+
.teamcardLinks {
223+
display: grid;
224+
grid-template-columns: 45% 10% 45%;
225+
grid-template-rows: 100%;
226+
}
227+
228+
.teamCardLink1 {
229+
grid-column: 1;
230+
}
231+
232+
.teamCardLink2 {
233+
grid-column: 3;
205234
}

0 commit comments

Comments
 (0)