open dev resources 23T2 Wk1-3 (#240)

Author: dqna64

components/Flex.tsx

@@ -50,6 +50,9 @@ export const Flex = styled('div', {
       },
       between: {
         justifyContent: 'space-between'
+      },
+      around: {
+        justifyContent: 'space-around'
       }
     },
     wrap: {

pages/opendev/index.tsx

@@ -12,6 +12,7 @@ import { Button } from 'components/Button'
 import { ArrowSquareOut } from 'phosphor-react'
 import { styled } from '@stitches/react'
 import { constants } from 'os'
+import Centerer from 'components/Centerer'
 
 const DisabledExternLink = styled(Flex, {
   display: 'flex',
@@ -32,6 +33,14 @@ const EnabledExternLink = styled(Flex, {
   paddingBottom: '$2'
 })
 
+const LinksContainer = styled(Flex, {
+  width: '60%',
+  maxWidth: '600px',
+  margin: '0 auto',
+  justifyContent: 'space-between',
+}
+)
+
 const OpenDevTwo: NextPage = () => {
   return (
     <ArticleLayout>
@@ -73,9 +82,10 @@ const OpenDevTwo: NextPage = () => {
             form a complete set of skills to allow you to build your own
             projects.
           </p>
-          <p>Scroll down to see the full schedule. See you soon!</p>
+          <p>Scroll down to see the slides, code and exercises for all weeks!</p>
         </Text>
       </Box>
+
       <Text
         size="headline"
         css={{
@@ -84,15 +94,62 @@ const OpenDevTwo: NextPage = () => {
           padding: '$2',
           alignSelf: 'center',
           marginTop: '1rem',
-        }}>
-        Resources
-      </Text>
-      <Text size="info"><p>The workshop slides for Week 1 can be found here:&nbsp;
-        <a href="https://www.canva.com/design/DAFLpV21DLY/5GP43_9-0QocXmk7aNAurw/view?utm_content=DAFLpV21DLY&utm_campaign=designshare&utm_medium=link&utm_source=viewer" target="_blank">
-          Week 1 Workshop Slides</a>
-      </p></Text>
+        }}>Week 1</Text>
+      <LinksContainer justify="around">
+        <a href="https://www.canva.com/design/DAFLpV21DLY/5GP43_9-0QocXmk7aNAurw/view?utm_content=DAFLpV21DLY&utm_campaign=designshare&utm_medium=link&utm_source=viewer" target="_blank">Slides</a>
+        <a href="https://codepen.io/xylo274/pen/jOQrQQE" target="_blank">Code</a>
+        <a href="https://www.notion.so/CSESoc-Open-Dev-HTML-CSS-JavaScript-Exercises-7085baebc47e49a0b1710212eebf4b30" target="_blank">Exercises</a>
+      </LinksContainer>
       <a href="https://www.canva.com/design/DAFLpV21DLY/5GP43_9-0QocXmk7aNAurw/view?utm_content=DAFLpV21DLY&utm_campaign=designshare&utm_medium=link&utm_source=viewer" target="_blank">
-        <Image src="/images/opendev/opendev-23t2-wk1-cover-slide.png" alt="Week 1" width="800" height="450" />
+        <Centerer>
+          <Image src="/images/opendev/opendev-23t2-wk1-cover-slide.png" alt="Week 1 Slides" width="480" height="270" />
+
+        </Centerer>
+      </a>
+
+      <Text
+        size="headline"
+        css={{
+          color: '$slate12',
+          fontWeight: '600',
+          padding: '$2',
+          alignSelf: 'center',
+          marginTop: '1rem',
+        }}>Week 2</Text>
+      <LinksContainer justify="around">
+        <a href="https://www.canva.com/design/DAFj64DPw5g/-h9rLyCEeLi3QzZgVpQFrQ/view?utm_content=DAFj64DPw5g&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink" target="_blank">Slides</a>
+        <a href="https://codepen.io/parvyyy/pen/qBJgxwK" target="_blank">Javascript Code</a>
+        <a href="https://github.com/BinaryGamer/open-dev/tree/main/WEEK2" target="_blank">ReactJS Code</a>
+      </LinksContainer>
+      <Text as='body' css={{
+        marginTop: '1rem',
+        fontSize: '0.8rem',
+        textAlign: 'center',
+      }}>No exercises for week 2</Text>
+      <a href="https://www.canva.com/design/DAFj64DPw5g/-h9rLyCEeLi3QzZgVpQFrQ/view?utm_content=DAFj64DPw5g&utm_campaign=designshare&utm_medium=link&utm_source=viewer" target="_blank">
+        <Centerer>
+          <Image src="/images/opendev/opendev-23t2-wk2-cover-slide.png" alt="Week 2 Slides" width="480" height="270" />
+        </Centerer>
+      </a>
+
+      <Text
+        size="headline"
+        css={{
+          color: '$slate12',
+          fontWeight: '600',
+          padding: '$2',
+          alignSelf: 'center',
+          marginTop: '1rem',
+        }}>Week 3</Text>
+      <LinksContainer justify="around">
+        <a href="https://www.canva.com/design/DAFlvj_OQsE/jVRyWqpHGUuW7rdlkBYJyA/view?utm_content=DAFlvj_OQsE&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink" target="_blank">Slides</a>
+        <a href="https://github.com/BinaryGamer/open-dev/tree/main/WEEK3" target="_blank">Code</a>
+        <a href="https://terrie.notion.site/Intro-to-React-Part-1-Exercises-f960c27b17b94115b87c50bdfc4bbb3b" target="_blank">Exercise</a>
+      </LinksContainer>
+      <a href="https://www.canva.com/design/DAFlvj_OQsE/jVRyWqpHGUuW7rdlkBYJyA/view?utm_content=DAFlvj_OQsE&utm_campaign=designshare&utm_medium=link&utm_source=viewer" target="_blank">
+        <Centerer>
+          <Image src="/images/opendev/opendev-23t2-wk3-cover-slide.png" alt="Week 3 Slides" width="480" height="270" />
+        </Centerer>
       </a>
       <Text
         size="headline"