Skip to content

Commit 6985117

Browse files
austinbfraseraustinbfraser
authored
Merge pull request #57 from oslabs-beta/kyler/siteHomeNavBar
feat: Basic site layout
2 parents 1b1d2d5 + 5ac4b3f commit 6985117

File tree

13 files changed

+355
-95
lines changed

13 files changed

+355
-95
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const Button = () => {
2+
return (
3+
<div className='button'>Button</div>
4+
)
5+
}
6+
7+
export default Button

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const Demo = () => {
2+
return (
3+
<div className='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>
17+
);
18+
};
19+
20+
export default Demo;

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

Whitespace-only changes.

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const FeatureCard = () => {
2+
return (
3+
<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>
9+
);
10+
};
11+
12+
export default FeatureCard;

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import FeatureCard from "./FeatureCard";
2+
3+
const Features = () => {
4+
return (
5+
<div className='features'>
6+
<div>MLOps in Javascript, made simple.</div>
7+
<div>Long blurb</div>
8+
<FeatureCard/>
9+
</div>
10+
);
11+
};
12+
13+
export default Features;

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Button from './Button';
2+
3+
const Headline = () => {
4+
return (
5+
<div className='home'>
6+
<div>MLOps workflow for Javascript</div>
7+
<div>Harness MLflow&apos;s MLOps functionality for your Javascript application with MLflow.js</div>
8+
<Button />
9+
</div>
10+
);
11+
};
12+
13+
export default Headline;

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const NavBar = () => {
2+
return (
3+
<div className='navBar'>
4+
<div>MLflow.js</div>
5+
<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>
12+
</div>
13+
</div>
14+
);
15+
};
16+
17+
export default NavBar;

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import TeamCard from './TeamCard';
2+
3+
const Team = () => {
4+
const teamArray = [
5+
{
6+
name: 'Yiqun Zheng',
7+
github: 'https://github.com/yiqunzheng',
8+
linkedIn: 'https://www.linkedin.com/in/yiqunzheng/',
9+
},
10+
{
11+
name: 'Kyler Chiago',
12+
github: 'https://github.com/Kyler-Chiago',
13+
linkedIn: 'https://www.linkedin.com/in/kyler-chiago/',
14+
},
15+
{
16+
name: 'Austin Fraser',
17+
github: 'https://github.com/austinbfraser',
18+
linkedIn: 'http://www.linkedin.com/in/austin-fraser',
19+
},
20+
{
21+
name: 'Stephany Ho',
22+
github: 'https://github.com/seneyu/',
23+
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/',
29+
},
30+
];
31+
32+
return (
33+
<div className='team'>
34+
<div className='centered'>Meet the team</div>
35+
<div className='teamCards'>
36+
{teamArray.map((member, index) => (
37+
<TeamCard
38+
key={index}
39+
name={member.name}
40+
github={member.github}
41+
linkedIn={member.linkedIn}
42+
/>
43+
))}
44+
</div>
45+
</div>
46+
);
47+
};
48+
49+
export default Team;
50+

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import imageNotFound from '../../assets/imageNotFound.jpg'
2+
3+
interface TeamCardProps {
4+
name: string;
5+
github: string;
6+
linkedIn: string;
7+
}
8+
9+
const TeamCard: React.FC<TeamCardProps> = ({
10+
name,
11+
github,
12+
linkedIn,
13+
}) => {
14+
return (
15+
<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> */}
19+
<div>{name}</div>
20+
<div>
21+
<a href={github}>G </a>
22+
<a href={linkedIn}>L </a>
23+
</div>
24+
</div>
25+
);
26+
};
27+
28+
export default TeamCard;

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

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,190 @@ body {
1818
color: var(--foreground);
1919
background: var(--background);
2020
font-family: Arial, Helvetica, sans-serif;
21+
font-size: 1rem;
2122
}
2223

2324
@layer utilities {
2425
.text-balance {
2526
text-wrap: balance;
2627
}
2728
}
29+
30+
.fullScreen {
31+
position: fixed;
32+
width: 100%;
33+
height: 100%;
34+
left: 0;
35+
top: 0;
36+
}
37+
38+
.wrapper {
39+
position:absolute;
40+
background: rgb(51, 51, 58);
41+
width: 100%;
42+
height: 100%;
43+
display: grid;
44+
grid-template-columns: 1fr 360px 1fr;
45+
grid-template-rows: 1fr;
46+
overflow-y: auto;
47+
}
48+
49+
::-webkit-scrollbar {
50+
height: 10px;
51+
width: 10px;
52+
}
53+
54+
/* Track */
55+
::-webkit-scrollbar-track {
56+
background: #262626;
57+
}
58+
59+
/* Handle */
60+
::-webkit-scrollbar-thumb {
61+
background: #3c3c3c;
62+
}
63+
64+
/* Handle on hover */
65+
::-webkit-scrollbar-thumb:hover {
66+
background: #1b1b1b;
67+
}
68+
69+
.mobileWrapper {
70+
background: rgb(255, 255, 255);
71+
width: 100%;
72+
height: 100%;
73+
grid-column: 2;
74+
grid-row: 1;
75+
display: grid;
76+
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;
78+
}
79+
80+
.navBar {
81+
grid-column: 2/5;
82+
grid-row: 2;
83+
width: 100%;
84+
height: 100%;
85+
background-color: #0a0a0a;
86+
display: grid;
87+
grid-template-columns: auto auto;
88+
grid-template-rows: 100%;
89+
}
90+
91+
.navBarLinks {
92+
grid-column: 2;
93+
grid-row: 1;
94+
width: 100%;
95+
height: 100%;
96+
display: grid;
97+
grid-template-columns: repeat(calc(100%/6), 6);
98+
grid-template-rows: 100%;
99+
}
100+
101+
.navBarLinksFeatures {
102+
grid-column: 2;
103+
}
104+
105+
.navBarLinksDemo {
106+
grid-column: 3;
107+
}
108+
109+
.navBarLinksTeam {
110+
grid-column: 4;
111+
}
112+
113+
.navBarLinksGithub {
114+
grid-column: 5;
115+
}
116+
117+
.navBarLinksLinkedIn {
118+
grid-column: 6;
119+
}
120+
121+
.mobileInnerWrapper {
122+
grid-column: 3;
123+
grid-row: 3;
124+
width: 100%;
125+
height: 100%;
126+
background-color: aqua;
127+
}
128+
129+
.team {
130+
grid-column: 2/5;
131+
grid-row: 4;
132+
width: 100%;
133+
height: fit-content;
134+
background-color: yellow;
135+
display: flex;
136+
justify-content: center;
137+
align-items: center;
138+
flex-direction: column;
139+
}
140+
141+
.home {
142+
grid-column: 2/5;
143+
grid-row: 3;
144+
width: 100%;
145+
background-color: rgb(102, 102, 54);
146+
}
147+
148+
.button {
149+
width: 100%;
150+
background-color: rgb(14, 69, 129);
151+
}
152+
153+
.features {
154+
grid-column: 2/5;
155+
grid-row: 3;
156+
width: 100%;
157+
background-color: rgb(176, 47, 107);
158+
display: grid;
159+
place-items: center;
160+
}
161+
162+
.featureCard {
163+
width: 100%;
164+
background-color: rgb(122, 144, 167);
165+
display: grid;
166+
grid-template-columns: 100%;
167+
grid-template-rows: min-content;
168+
text-align: center;
169+
}
170+
171+
.demo {
172+
grid-column: 2/5;
173+
grid-row: 3;
174+
width: 100%;
175+
background-color: rgb(47, 176, 101);
176+
display: grid;
177+
grid-template-columns: 100%;
178+
grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3);
179+
}
180+
181+
.demoSplit {
182+
width: 100%;
183+
display: grid;
184+
grid-template-columns: 100%;
185+
grid-template-rows: min-content;
186+
}
187+
188+
.teamCards {
189+
width: 100%;
190+
display: grid;
191+
grid-template-columns: 50% 50%;
192+
grid-template-rows: repeat(calc(100%/3), 3);
193+
/* border: #0a0a0a; */
194+
background-color: red;
195+
}
196+
197+
.teamcard {
198+
display: flex;
199+
flex-direction: column;
200+
justify-content: center;
201+
align-items: center;
202+
}
203+
204+
.teamCardImg {
205+
width: 50px;
206+
height: 50px;
207+
}

0 commit comments

Comments
 (0)