projects page

src/pages/projects.astro

@@ -0,0 +1,87 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    <div class="flex flex-col">
+        <div
+            class="bg-ieee h-[35em] rounded-b-[10%] my-auto flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
+            style="background-image: url('/backgrounds/robocar.png');"
+        >
+            <!-- BLUE BG -->
+            <div class="flex flex-col items-center justify-center text-center">
+                <div class="text-[3.2em] text-white font-bold mb-4 w-[11em]">
+                    Gain hands-on experience to make your resume stand out! No
+                    experience required!
+                </div>
+            </div>
+        </div>
+
+        <!-- white bg -->
+        <div
+            class="bg-white max-h-max my-32 flex flex-col items-center justify-center align-center bg-center"
+        >
+            <!-- Continuous Projects -->
+            <div class="flex sm:flex-col 2xl:flex-row pb-32">
+                <div
+                    class="sm:order-2 2xl:order-1 flex flex-col justify-center items-center"
+                >
+                    <div
+                        class="flex items-center justify-center mb-4 text-ieee font-bold text-[3em]"
+                    >
+                        Continuous Projects
+                    </div>
+                    <div
+                        class="flex items-center justify-center max-w-3xl text-center font-bold text-[1.8em]"
+                    >
+                        Looking to use your developed skills or get involved in
+                        a project that competes with other schools? Annual
+                        projects allow students to become more acquainted with
+                        computer vision and embedded systems while building
+                        connections with other schools and students.
+                    </div>
+                </div>
+                <div
+                    class="sm:order-1 sm:pb-24 2xl: 2xl:order-2 flex flex-col justify-center items-center"
+                >
+                    <img
+                        src="/backgrounds/micromouse.png"
+                        width="75%"
+                        height="75%"
+                    />
+                </div>
+            </div>
+            <!-- Quarterly Projects -->
+            <div class="flex sm:flex-col 2xl:flex-row">
+                <div
+                    class="sm:order-2 2xl:order-1 flex flex-col justify-center items-center"
+                >
+                    <div
+                        class="flex items-center justify-center mb-4 text-ieee font-bold text-[3em]"
+                    >
+                        Quarterly Projects
+                    </div>
+                    <div
+                        class="flex items-center justify-center max-w-3xl text-center font-bold text-[1.8em]"
+                    >
+                        Getting started on hardware development or want to make
+                        your own project? IEEE's Quarterly Projects aims to
+                        provide students with project experience in a span of 10
+                        weeks. During QP, students will acquire skills used in
+                        the industry such as C++ and the prototyping process
+                        with the assistance of our mentors.
+                    </div>
+                </div>
+                <div
+                    class="sm:order-1 sm:pb-24 2xl: 2xl:order-2 flex flex-col justify-center items-center"
+                >
+                    <img
+                        src="/backgrounds/sp22qp.png"
+                        width="75%"
+                        height="75%"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</Layout>