Skip to content

Commit e534397

Browse files
adriandarianadriandarian
committed
Projects Page Initial Setup
1 parent 343df8f commit e534397

11 files changed

Lines changed: 892 additions & 10 deletions

File tree

‎src/app/app.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ import { DataService } from "./services/data.service";
6262
MembersComponent,
6363
AccountComponent,
6464
WorkshopCardComponent,
65-
ProjectsDisplayComponent
65+
ProjectsDisplayComponent,
6666
LoginComponent,
6767
SignUpComponent
6868
],

‎src/app/components/projects-display/projects-display.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit } from "@angular/core";
22
import { Projects } from "src/app/models/projects";
3+
34
@Component({
45
selector: "app-projects-display",
56
templateUrl: "./projects-display.component.html",

‎src/app/containers/coffee-n-code/coffee-n-code.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div id="coffee">
2-
<div class="sm:text-center lg:text-left ml-56 w-2/3">
2+
<div class="ml-8 w-20 lg:text-left sm:text-center md:ml-56 md:w-2/3">
33
<h2
44
class="cnc-title text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-5xl"
55
>

‎src/app/containers/coffee-n-code/coffee-n-code.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@ $shadow: #FFA265;
110110
border-radius: 50%;
111111
background-color: $white;
112112

113+
@media only screen and (max-width: 610px) {
114+
right: 3%;
115+
}
116+
113117
&__s {
114118
position: absolute;
115119
top: 10px;

‎src/app/containers/home/home.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
</div>
4747
</div>
4848
<div
49-
class="hidden lg:block lg:absolute lg:bottom-0 lg:w-2/5 xl:w-1/3 home-img"
49+
class="hidden lg:block lg:absolute lg:bottom-0 lg:w-2/5 xl:w-1/3 home-img h-0"
5050
>
5151
<img
5252
src="assets/img/undraw_social_distancing.svg"

‎src/app/containers/projects/projects.component.html‎

Lines changed: 316 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,317 @@
1+
<!-- Projects Heading -->
2+
<div class="home-heading static bg-white overflow-hidden mt-24">
3+
<div class="max-w-screen-xl mx-auto ">
4+
<div
5+
class="relative pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"
6+
>
7+
<div
8+
class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"
9+
>
10+
<div class="sm:text-center lg:text-left">
11+
<h2
12+
class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-5xl"
13+
>
14+
Projects
15+
</h2>
16+
<p
17+
class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"
18+
>
19+
ACM @ UCM is dedicated to provided project based <b>Research and Development</b> free and with nore prerequirements to all UC Merced Students!
20+
</p>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
<div
26+
class="hidden lg:block lg:absolute lg:bottom-0 lg:w-2/5 xl:w-1/3 home-img h-0"
27+
>
28+
<img src="assets/img/undraw_progressive_app.svg" alt="social distancing" />
29+
</div>
30+
</div>
131

2-
<app-projects-display></app-projects-display>
32+
<!-- How to Join -->
33+
<div class="py-12 bg-white">
34+
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
35+
<div class="lg:text-center">
36+
<p
37+
class="about-us-title text-base leading-6 font-semibold tracking-wide uppercase"
38+
>
39+
How to Join
40+
</p>
41+
<h3
42+
class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
43+
>
44+
Are you interested in joining a project?
45+
</h3>
46+
<p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 lg:mx-auto">
47+
Setup the Following 4 tools to get started!
48+
</p>
49+
</div>
50+
51+
<div class="mt-10">
52+
<ul class="md:grid md:grid-cols-2 md:col-gap-8 md:row-gap-10">
53+
<li>
54+
<div class="flex">
55+
<div class="flex-shrink-0">
56+
<div
57+
class="about-us-icons flex items-center justify-center h-12 w-12 rounded-md text-white"
58+
>
59+
<svg
60+
class="h-6 w-6"
61+
stroke="currentColor"
62+
fill="none"
63+
viewBox="0 0 24 24"
64+
>
65+
<path
66+
stroke-linecap="round"
67+
stroke-linejoin="round"
68+
stroke-width="2"
69+
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
70+
/>
71+
</svg>
72+
</div>
73+
</div>
74+
<div class="ml-4">
75+
<h5 class="text-lg leading-6 font-medium text-gray-900">
76+
GitHub
77+
</h5>
78+
<p class="mt-2 text-base leading-6 text-gray-500">
79+
Make sure you have a GitHub account and either have <a href="https://desktop.github.com/">GitHub Desktop</a>, <a href="https://www.gitkraken.com/invite/fvfKix5o">GitKraken</a> <b>(the recommended software)</b>, or <a href="https://git-scm.com/">Git CLI</a> installed on your machine.
80+
</p>
81+
</div>
82+
</div>
83+
</li>
84+
<li class="mt-10 md:mt-0">
85+
<div class="flex">
86+
<div class="flex-shrink-0">
87+
<div
88+
class="about-us-icons flex items-center justify-center h-12 w-12 rounded-md text-white"
89+
>
90+
<svg
91+
class="h-6 w-6"
92+
stroke="currentColor"
93+
fill="none"
94+
viewBox="0 0 24 24"
95+
>
96+
<path
97+
stroke-linecap="round"
98+
stroke-linejoin="round"
99+
stroke-width="2"
100+
d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"
101+
/>
102+
</svg>
103+
</div>
104+
</div>
105+
<div class="ml-4">
106+
<h5 class="text-lg leading-6 font-medium text-gray-900">
107+
Asana
108+
</h5>
109+
<p class="mt-2 text-base leading-6 text-gray-500">
110+
Create an <a href="https://asana.com/">Asana</a> account, because all tasks will be placed onto our SCRUM board.
111+
</p>
112+
</div>
113+
</div>
114+
</li>
115+
<li class="mt-10 md:mt-0">
116+
<div class="flex">
117+
<div class="flex-shrink-0">
118+
<div
119+
class="about-us-icons flex items-center justify-center h-12 w-12 rounded-md text-white"
120+
>
121+
<svg
122+
class="h-6 w-6"
123+
stroke="currentColor"
124+
fill="none"
125+
viewBox="0 0 24 24"
126+
>
127+
<path
128+
stroke-linecap="round"
129+
stroke-linejoin="round"
130+
stroke-width="2"
131+
d="M13 10V3L4 14h7v7l9-11h-7z"
132+
/>
133+
</svg>
134+
</div>
135+
</div>
136+
<div class="ml-4">
137+
<h5 class="text-lg leading-6 font-medium text-gray-900">
138+
Text Editor
139+
</h5>
140+
<p class="mt-2 text-base leading-6 text-gray-500">
141+
For which IDE you want to work in is completely optional. However, we strongly recommend <a href="https://code.visualstudio.com/">Visual Studio Code</a>, especially if you are working with multiple languages.
142+
</p>
143+
</div>
144+
</div>
145+
</li>
146+
<li class="mt-10 md:mt-0">
147+
<div class="flex">
148+
<div class="flex-shrink-0">
149+
<div
150+
class="about-us-icons flex items-center justify-center h-12 w-12 rounded-md text-white"
151+
>
152+
<svg
153+
class="h-6 w-6"
154+
stroke="currentColor"
155+
fill="none"
156+
viewBox="0 0 24 24"
157+
>
158+
<path
159+
stroke-linecap="round"
160+
stroke-linejoin="round"
161+
stroke-width="2"
162+
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
163+
/>
164+
</svg>
165+
</div>
166+
</div>
167+
<div class="ml-4">
168+
<h5 class="text-lg leading-6 font-medium text-gray-900">
169+
Communications
170+
</h5>
171+
<p class="mt-2 text-base leading-6 text-gray-500">
172+
All conversations between project teams will exist on <a class="text-blue-300 cursor-pointer hover:text-blue-800" href="https://join.slack.com/t/ucm-acm/shared_invite/zt-cyj63j4n-uZbfahTOTrlyJvKIRyEAdA">Slack</a> and <a class="text-blue-300 hover:cursor-pointer hover:text-blue-800" href="https://discord.gg/PFgPtMD">discord</a> in their respective team channels.
173+
</p>
174+
</div>
175+
</div>
176+
</li>
177+
</ul>
178+
</div>
179+
</div>
180+
</div>
181+
182+
<!-- Project Cards -->
183+
<main class="py-4">
184+
<div class="px-4">
185+
<div class="block md:flex md:-mx-2">
186+
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
187+
<div class="bg-white rounded-lg overflow-hidden shadow relative">
188+
<img
189+
class="h-56 w-full object-cover object-center"
190+
src="assets/img/chapter_website.jpg"
191+
alt=""
192+
/>
193+
<div class="p-4 h-auto md:h-40 lg:h-48">
194+
<a
195+
href="#"
196+
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg"
197+
>
198+
Chapter Website
199+
</a>
200+
<div
201+
class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm"
202+
>
203+
UC Merced's Official ACM Chapter Website
204+
</div>
205+
<div
206+
class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block"
207+
>
208+
<a
209+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
210+
href="#"
211+
>Full Stack</a
212+
>
213+
<a
214+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
215+
href="#"
216+
>RESTful APIs</a
217+
>
218+
<a
219+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
220+
href="#"
221+
>MicroService Architecture</a
222+
>
223+
</div>
224+
</div>
225+
</div>
226+
</div>
227+
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
228+
<div class="bg-white rounded-lg overflow-hidden shadow relative">
229+
<img
230+
class="h-56 w-full object-cover object-center"
231+
src="assets/img/cnn.svg"
232+
alt=""
233+
/>
234+
<div class="p-4 h-auto md:h-40 lg:h-48">
235+
<a
236+
href="#"
237+
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg"
238+
>
239+
Video Game CNN
240+
</a>
241+
<div
242+
class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm"
243+
>
244+
🐦Build a controlled neural network to allow an ai to win every time at flappy bird, pacman, space invaders 🐤
245+
</div>
246+
<div
247+
class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block"
248+
>
249+
<a
250+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
251+
href="#"
252+
>CNN</a
253+
>
254+
<a
255+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
256+
href="#"
257+
>Tensorflow</a
258+
>
259+
</div>
260+
</div>
261+
</div>
262+
</div>
263+
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
264+
<div class="bg-white rounded-lg overflow-hidden shadow relative">
265+
<img
266+
class="h-56 w-full object-cover object-center"
267+
src="assets/img/handwriting_ml.jpg"
268+
alt=""
269+
/>
270+
<div class="p-4 h-auto md:h-40 lg:h-48">
271+
<a
272+
href="#"
273+
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg"
274+
>
275+
Handwriting ML
276+
</a>
277+
<div
278+
class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm"
279+
>
280+
Determining what written text says regardless of the language it is written in.
281+
</div>
282+
<div
283+
class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block"
284+
>
285+
<a
286+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
287+
href="#"
288+
>Machine Learning</a
289+
>
290+
<a
291+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
292+
href="#"
293+
>OCR</a
294+
>
295+
<a
296+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
297+
href="#"
298+
>Neural Networks</a
299+
>
300+
<br>
301+
<a
302+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
303+
href="#"
304+
>Image Recognition</a
305+
>
306+
<a
307+
class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
308+
href="#"
309+
>Classification</a
310+
>
311+
</div>
312+
</div>
313+
</div>
314+
</div>
315+
</div>
316+
</div>
317+
</main>

0 commit comments

Comments
 (0)