diff --git a/components/MiniTechTalkCard.module.css b/components/MiniTechTalkCard.module.css new file mode 100644 index 00000000..01741c1a --- /dev/null +++ b/components/MiniTechTalkCard.module.css @@ -0,0 +1,40 @@ +.card { + display: flex; + flex-direction: row; + box-sizing: border-box; + padding: calc(16rem / 16); + color: var(--purple-2); + font-size: 1rem; +} + +.card aside { + max-width: calc(142rem / 16); + margin-right: calc(45rem / 16); + display: flex; + justify-content: center; + align-items: center; +} + +.card aside img { + max-width: calc(142rem / 16); + max-height: 100%; + object-fit: cover; +} + +.content { + padding: calc(4rem / 16); +} + +.content h1 { + margin: 0; + margin-top: calc(4rem / 16); + font-size: calc(18rem / 16); +} + +.card section { + padding-bottom: 0; +} + +.spacer { + margin-top: calc(76rem / 16); +} diff --git a/components/MiniTechTalkCard.tsx b/components/MiniTechTalkCard.tsx new file mode 100644 index 00000000..86e069b3 --- /dev/null +++ b/components/MiniTechTalkCard.tsx @@ -0,0 +1,22 @@ +import { DEFAULT_MIN_VERSION } from "node:tls"; +import React from "react"; +import { Image } from "./Image"; +import styles from "./MiniTechTalkCard.module.css"; + +interface MiniTechTalkProps { + name: string; + short: string; + poster?: string; +} + +export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) { + return ( +
+ +
+

{name}

+

{short}

+
+
+ ); +} diff --git a/components/TechTalkCard.module.css b/components/TechTalkCard.module.css new file mode 100644 index 00000000..34dbaf9d --- /dev/null +++ b/components/TechTalkCard.module.css @@ -0,0 +1,34 @@ +.card { + display: flex; + flex-direction: row; + box-sizing: border-box; +} + +.card aside { + flex: 0 0 calc(287rem / 16); + margin-right: calc(24rem / 16); +} + +.card aside img { + width: 100%; + margin-bottom: 1rem; +} + +.spacer { + margin-top: calc(76rem / 16); +} + +.card h1 { + font-size: calc(24rem / 16); + font-weight: 700; + font-style: normal; + margin-top: 0; + margin-bottom: 0; + color: var(--blue-2); +} + +@media only screen and (max-width: calc(768rem / 16)) { + .card { + flex-direction: column; + } +} diff --git a/components/TechTalkCard.tsx b/components/TechTalkCard.tsx new file mode 100644 index 00000000..d3fe9a1a --- /dev/null +++ b/components/TechTalkCard.tsx @@ -0,0 +1,24 @@ +import React, { ReactNode } from "react"; +import { Image } from "./Image"; +import styles from "./TechTalkCard.module.css"; + +interface TechTalkProps { + name: string; + poster?: string; + children: ReactNode; +} + +export function TechTalkCard({ name, poster, children }: TechTalkProps) { + return ( +
+ +
+

{name}

+
{children}
+
+
+ ); +} diff --git a/components/playground.module.css b/components/playground.module.css index 47be0feb..b5b41d3d 100644 --- a/components/playground.module.css +++ b/components/playground.module.css @@ -87,6 +87,10 @@ font-size: calc(24rem / 16); } +.miniTechTalkDemo > *:nth-child(odd) { + background: var(--background-teal-2); +} + @media only screen and (max-width: calc(768rem / 16)) { .newsDemo, .eventDescriptionCardDemo { diff --git a/components/playground.tsx b/components/playground.tsx index c03e169a..58db985c 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -38,6 +38,10 @@ import CodeyInfo, { metadata as codeyMetadata, } from "../content/playground/codey.team-member.mdx"; +import TempTechTalk, { + metadata as tempTechTalkMetadata, +} from "../content/playground/temp.talk.mdx"; + import { MiniEventCard } from "./MiniEventCard"; import { NewsCard } from "./NewsCard"; import { Link } from "./Link"; @@ -47,6 +51,9 @@ import { TeamMember } from "./TeamMember"; import { TeamMemberCard } from "./TeamMemberCard"; import { OrganizedContent, LinkProps } from "./OrganizedContent"; import { Button } from "./Button"; +import { Footer } from "./Footer"; +import { TechTalkCard } from "./TechTalkCard"; +import { MiniTechTalkCard } from "./MiniTechTalkCard"; const events = [ { Content: OOTBReact, metadata: OOTBReactEventMetadata }, @@ -217,3 +224,29 @@ export function OrganizedContentDemo() { ); } + +export function TechTalkDemo() { + return ( +
+ + + +
+ ); +} + +export function MiniTechTalkDemo() { + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/content/playground/temp.talk.mdx b/content/playground/temp.talk.mdx new file mode 100644 index 00000000..85612530 --- /dev/null +++ b/content/playground/temp.talk.mdx @@ -0,0 +1,19 @@ +export const metadata = { + name: "Tech Talk Title", + short: "Learn how React works and make your own version!", + poster: "/images/playground/alt-tab.jpg", +}; + +You've got a game, but you didn't write it. You're running it by emulating the machine it was meant to run on, and the machine it was +meant to run on never had support for networking. Now, you want to play with your friend, over the Internet. Oh, and it's not +acceptable to incur any latency between your controller and the game while we're at it. Surely that can't be possible, right? +Wrong. This talk will discuss the re-emulation technique for netplay used commercially by a system called GGPO and freely in +an emulator frontend called RetroArch, and how similar techniques can be applied to make networking work in other scenarios +it was never meant for. This will be an unprepared, impromptu talk with no slides, so it should either be a fascinating dive +into a little-heard-of technique, or an impenetrable mess of jargon and algorithms. Either way, it should be fun. Professor +Richards is the maintainer of the netplay infrastructure for RetroArch, a popular emulator frontend for multiple platforms. + +# Download + +- BitTorrent:[Netplay in Emulators (mp4)] +- HTTP (web browser):[Netplay in Emulators (mp4)] diff --git a/next-env.d.ts b/next-env.d.ts index ffde38ef..f9764f3f 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -63,6 +63,20 @@ declare module "*.section.mdx" { export default ReactComponent; } +declare module "*.talk.mdx" { + import { ComponentType } from "react"; + + interface TalkMetadata { + name: string; + short: string; + poster?: string; + } + + const ReactComponent: ComponentType; + + export const metadata: TalkMetadata; + export default ReactComponent; +} declare module "*.mdx" { import { ComponentType } from "react"; diff --git a/pages/_app.css b/pages/_app.css index 0763d20c..948b4449 100644 --- a/pages/_app.css +++ b/pages/_app.css @@ -23,6 +23,7 @@ body { #1481e3 -17.95%, #4ed4b2 172.82% ); + --background-teal-2: rgb(78, 212, 178, 0.2); /* used in mobile navbar background */ --navbar-gray: #787878b2; /* used in home page */ diff --git a/pages/playground.mdx b/pages/playground.mdx index af488e24..20b77a19 100644 --- a/pages/playground.mdx +++ b/pages/playground.mdx @@ -8,9 +8,11 @@ import { TeamMemberCardDemo, OrganizedContentDemo, ButtonDemo, + TechTalkDemo, + MiniTechTalkDemo, } from "../components/playground"; -import { ConnectWithUs } from "../components/ConnectWithUs" -import { EmailSignup } from "../components/EmailSignup" +import { ConnectWithUs } from "../components/ConnectWithUs"; +import { EmailSignup } from "../components/EmailSignup"; import { TeamMemberCard } from "../components/TeamMemberCard"; @@ -93,6 +95,21 @@ The `` component is used on various pages such as Meet the Team! and Our --- +## `` + +The `` component is used on the Resources page to display information +about Tech Talks. + + + +--- + +## `` + +The `` component is used on the Resources page to display condensed +information about Tech Talks. + + ## `` The `` component is used on various pages such as the About page and the Get Involved Page!