diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 1e97e47..21077ba 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -56,6 +56,17 @@ export default function Navbar() { Creators + + + Open Dev + + { flexWrap: 'nowrap', gap: '$4' }}> - {/* Display featured articles here */} - - {articles.filter((article) => featuredArticleTitles.includes(article.title)).map((article: ArticleType, index: number) => ( - - ))} + {articles + .filter((article) => featuredArticleTitles.includes(article.title)) + .map((article: ArticleType, index: number) => ( + + ))} {/* diff --git a/pages/opendev.tsx b/pages/opendev.tsx new file mode 100644 index 0000000..78d7fe4 --- /dev/null +++ b/pages/opendev.tsx @@ -0,0 +1,526 @@ +import ArticleLayout from 'components/ArticleLayout' +import { Box } from 'components/Box' +import { Flex } from 'components/Flex' +import { Text } from 'components/Text' +import { Card } from 'components/Card' +import { Table } from 'components/Table' +import type { NextPage } from 'next' +import Head from 'next/head' +import Image from 'next/image' + +const OpenDevTwo: NextPage = () => { + return ( + + + Open Dev Series – CSESoc Learn + + + Open Dev Series + + + +

+ In 22T3, CSESoc will be running a new "Open Dev Series" initiative + involving weekly sessions every Wednesday 2-4pm in Quad G040. +

+

+ Over the course of the term, you'll learn how to build your own + project with the popular MERN stack through workshops with + interactive exercises and help sessions where experienced student + developers give you guidance on new coding exercises based on the + the workshops. +

+

+ These workshops are beginner-friendly and students of all skill + levels are welcome. +

+

+ We encourage you to attend as many workshops as you can as it will + form a complete set of skills to allow you to build your own + projects. +

+

Scroll down to see the full schedule. See you soon!

+ + + + + + + + + HTML + CSS + JS + + + + Recording   + + + + + + + + Slides   + + + + + + + + Exercises   + + + + + + {/* + + Slides   + + + + + */} + + + + + + + Basic ReactJS + + + + Recording   + + + + + + + + Slides   + + + + + + + + Exercises   + + + + + + + + + + + + Advanced ReactJS + + + + Recording   + + + + + + + + Slides   + + + + + + + + Exercises   + + + + + + + + + + + + MongoDB + ExpressJS + + + + Recording   + + + + + + + + Slides   + + + + + + + + Exercises   + + + + + + + + + Schedule + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WeekEventDateTime & Location
Week 1HTML + CSS + JS Workshop14 Sep 20222pm-4pm, Quad G040
Week 2Beginner ReactJS Workshop21 Sep 20222pm-4pm, Quad G040
Week 3Beginner ReactJS Dev Session28 Sep 20222pm-4pm, Quad G040
Week 4Advanced ReactJS Workshop5 Oct 20222pm-4pm, Quad G040
Week 5Advanced ReactJS Dev Session12 Oct 20222pm-4pm, Quad G040
Week 6 + Flexibility Week – No Event +
Week 7MongoDB + ExpressJS Workshop26 Oct 20222pm-4pm, Quad G040
Week 8MongoDB + ExpressJS Dev Session2 Nov 20222pm-4pm, Quad G040
Week 9Project Dev Session9 Nov 20222pm-4pm, Quad G040
Week 10Project Dev Session16 Nov 20222pm-4pm, Quad G040
+ + ) +} + +export default OpenDevTwo diff --git a/public/images/opendev/advanced-react.png b/public/images/opendev/advanced-react.png new file mode 100644 index 0000000..70c6e00 Binary files /dev/null and b/public/images/opendev/advanced-react.png differ diff --git a/public/images/opendev/basic-react.png b/public/images/opendev/basic-react.png new file mode 100644 index 0000000..9ac3e7b Binary files /dev/null and b/public/images/opendev/basic-react.png differ diff --git a/public/images/opendev/html-css-js.png b/public/images/opendev/html-css-js.png new file mode 100644 index 0000000..0e0f166 Binary files /dev/null and b/public/images/opendev/html-css-js.png differ diff --git a/public/images/opendev/mongo-express.png b/public/images/opendev/mongo-express.png new file mode 100644 index 0000000..6519540 Binary files /dev/null and b/public/images/opendev/mongo-express.png differ diff --git a/styles/styles.css b/styles/styles.css index a4d7ed7..79315be 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -26,3 +26,19 @@ a { a:hover { color: #69a2f3; } + +table { + border-collapse: collapse; +} + +th, +td { + /* border: 1px solid black; */ + padding: 8px; +} + +.vertically-centered { + position: relative; + top: 50%; + transform: translateY(-50%); +}