Skip to content

Commit

Permalink
Update about page content + misc style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonappah committed Jun 29, 2024
1 parent e8e4500 commit 4feddb4
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 109 deletions.
2 changes: 0 additions & 2 deletions src/components/home/division.astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
---
// TODO: figure out whats wrong with the impulse picture
interface Props {
backgroundImg: string
backgroundPosition: string
Expand Down
68 changes: 19 additions & 49 deletions src/components/navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { Bars3Icon } from '@heroicons/react/24/solid'
import { useEffect, useRef } from 'react'
import { HOME_LINK, discordInvite, instagramURL, mainNavLinks } from '../data'
import { HOME_LINK, discordInvite, mainNavLinks } from '../data'
import useMedia from '../utils/useMediaQuery'

const menuBg = 'var(--text-dark)'
const gradBg = 'linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.00) 100%)'
const styles = `
.nav-links > a:any-link {
color: var(--text);
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.3)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.4));
}
.menubar {
Expand All @@ -31,8 +32,10 @@ const styles = `
display: none;
}`
function Navbar() {
const mobile = useMedia('(max-width: 800px)', true)
const mobile = useMedia('(max-width: 900px)', true)
const detailsRef = useRef<HTMLDetailsElement>(null)

// this effect handles closing the navbar overlay when switching between pages
useEffect(() => {
const listener = () => {
if (!mobile || !detailsRef.current) {
Expand All @@ -55,40 +58,6 @@ function Navbar() {
zIndex: 100,
}}
>
<div
style={{
backgroundColor: 'var(--primary)',
textAlign: 'center',
padding: '1rem',
}}
>
<p>
This site is currently in progress! Feel free to browse around, and
check out our
<a
style={{ fontWeight: 700 }}
href={discordInvite}
target="_blank"
rel="noreferrer"
>
{' '}
Discord
</a>
{' '}
and
<a
style={{ fontWeight: 700 }}
href={instagramURL}
target="_blank"
rel="noreferrer"
>
{' '}
Instagram
</a>
{' '}
for club updates!
</p>
</div>
<style dangerouslySetInnerHTML={{__html: styles}}/>
<div
className="menubar"
Expand All @@ -100,7 +69,7 @@ function Navbar() {
padding: '2rem 4rem',
}}
>
<a href={HOME_LINK.href}>
<a href={HOME_LINK.href} className="no-decoration">
<img
src="/wordmark.png"
style={{
Expand All @@ -110,14 +79,14 @@ function Navbar() {
</a>
{mobile
? (
<details ref={detailsRef}>
{/* TODO: hamburger icon */}
<summary style={{ cursor: 'pointer' }}>
<Bars3Icon/>
</summary>
<NavLinks mobile={mobile} />
</details>
) : (
<details ref={detailsRef}>
<summary style={{ cursor: 'pointer' }}>
<Bars3Icon />
</summary>
<NavLinks mobile={mobile} />
</details>
)
: (
<NavLinks mobile={mobile} />
)}
</div>
Expand All @@ -130,28 +99,29 @@ function NavLinks(props: { mobile: boolean }) {
const { mobile } = props
return (
<nav
className='nav-links'
className="nav-links"
style={{
display: 'flex',
flexDirection: mobile ? 'column' : 'row',
gap: '2rem',
backgroundColor: mobile ? menuBg : 'transparent',
position: mobile ? 'absolute' : 'inherit',
top: mobile ? 200 : 'inherit',
top: mobile ? 100 : 'inherit',
left: mobile ? 0 : 'inherit',
zIndex: mobile ? 90 : 'inherit',
width: mobile ? '100vw' : 'min-content',
height: mobile ? 'calc(100vh - 200px)' : 'inherit',
height: mobile ? 'calc(100vh - 100px)' : 'inherit',
alignItems: 'center',
fontFamily: '\'Mashine\', sans-serif',
}}
>
{mainNavLinks.map(link => (
<a key={`nav-${link.name}`} href={link.href}>
<a className="no-decoration" key={`nav-${link.name}`} href={link.href}>
{link.name}
</a>
))}
<a
className="no-decoration"
style={{
backgroundColor: 'var(--primary)',
padding: '0.5rem 1rem',
Expand Down
87 changes: 75 additions & 12 deletions src/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const HOME_LINK: LinkType = { name: 'Home', href: '/' }
const mainNavLinks: LinkType[] = [
HOME_LINK,
{ name: 'About', href: '/about' },
// { name: "Projects", href: "#" },
// { name: "Projects", href: "/projects" },
{ name: 'Contact', href: '/links' },
]

Expand All @@ -30,23 +30,86 @@ const sponsorLinks: LinkWithIconType[] = [
href: 'https://www.bettercnc.com/',
icon: '/sponsors/bettercnc.png',
},
// {
// name: 'Fingertech Robotics',
// href: 'https://www.fingertechrobotics.com/',
// icon: '/sponsors/fingertech.png'
// },
// {
// name: 'SendCutSend',
// href: 'https://sendcutsend.com/',
// icon: '/sponsors/sendcutsend.png'
// },
{
name: 'Repeat Robotics',
href: 'https://www.repeat-robotics.com/',
icon: '/sponsors/repeat-robotics.png',
},
]

interface Person {
name: string
role: string
}

const generalOfficers: Person[] = [
{
name: 'Om Davra',
role: 'President'
},
{
name: 'Jaime Contreras',
role: 'Vice President'
},
{
name: 'Mason Thomas',
role: 'Director of Marketing'
},
{
name: 'Jason Antwi-Appah',
role: 'Director of Events'
},
{
name: 'Blessy Kim',
role: 'Director of Finance'
},
{
name: 'Alyssa Su',
role: 'Director of Outreach'
},
]
const projectOfficers: Person[] = [
{
name: 'Natalie Stromberg',
role: 'Director of Combat Robotics'
},
{
name: 'Neil Blatzheim',
role: 'Director of Combat Robotics'
},
{
name: 'Colin Wong',
role: 'Director of Competitive Robotics'
},
{
name: 'Ryan Hirasaki',
role: 'Director of Competitive Robotics'
}
]

const projectManagers: Person[] = [
{
name: 'David von Paumgartten',
role: 'Solis Rover Project',
},
{
name: 'David Brock',
role: 'Blended Donut, Misc. Combat Projects'
},
{
name: 'Jude Onyenze',
role: 'VEX U'
},
{
name: 'Evan Wu',
role: 'Sumo Bots'
},
{
name: 'Dylan Brose',
role: 'Chess Bots'
}
]

const clubEmail = '[email protected]'
const discordInvite = 'https://discord.gg/dTGwav3PVM'

Expand Down Expand Up @@ -150,4 +213,4 @@ const combatTeams = [
},
]

export { mainNavLinks, HOME_LINK, footerLinks, socialLinks, clubEmail, sponsorLinks, discordInvite, makerspaceMap, websiteRepo, linksPageLinks, instagramURL, competitiveTeams, combatTeams }
export { mainNavLinks, HOME_LINK, footerLinks, socialLinks, clubEmail, sponsorLinks, discordInvite, makerspaceMap, websiteRepo, linksPageLinks, instagramURL, competitiveTeams, combatTeams, generalOfficers, projectManagers, projectOfficers }
73 changes: 54 additions & 19 deletions src/layouts/markdown.astro
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,78 @@ import Join from '../components/join.astro'
import type { MarkdownLayoutProps } from 'astro';
type Props = MarkdownLayoutProps<{
// Define frontmatter props here
title: string;
subtitle: string;
}>;
const { title, subtitle } = Astro.props.frontmatter || Astro.props;
---
const toc = Astro.props.headings.filter(h=>h.depth == 1)
const renderTOC = toc.length > 1
---
<BaseLayout title={title}>
<div
class="main-container"
style="padding-top: 120px; display: flex; background: linear-gradient(#230508 70%, var(--text-dark)); flex-direction: column;"
style="padding: 120px 2rem; display: flex; background: linear-gradient(#230508 70%, var(--text-dark)); flex-direction: column; text-align: center;"
>
<div
style="display: flex; flex-direction:column; margin: auto; align-items: center;"
style="display: flex; flex-direction:column; margin: auto; gap: 0.5rem; align-items: center;"
>
<h1 class="font-unbounded">{title}</h1>
<h3 class="font-unbounded" style="opacity: 80%;">
<h3 class="font-unbounded" style="font-weight: 400; color: #E1AAAF;">
{subtitle}
</h3>
</div>
<div
class="md-container"
style="margin: auto; margin-top: 5em;max-width: 100em; width: 100%; display: flex; flex-direction: column; gap: 2em; padding: 2em 2em; background-color: white; border-radius: 1em;"
<div class="md-container"
>
<style is:global>
.md-container > h1 {
color: var(--primary);
font-family: 'Mashine', sans-serif;
}

.md-container > p, .md-container > h2, .md-container > h3, .md-container > h4, .md-container > h5, .md-container > h6 {
color: var(--text-dark);
}
</style>
<style is:global>
.md-container {
text-align: left;
background-color: var(--text);
margin: auto;
margin-top: 5em;
min-width: 10rem;
max-width: 75rem;
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 3.5em;
background-color: white;
border-radius: 1em;
}

.md-container > h1 {
color: var(--primary);
padding-top: 1rem;
font-family: 'Mashine', sans-serif;
}

.md-container > p, .md-container > h2, .md-container > h3, .md-container > h4, .md-container > h5, .md-container > h6, .md-container > ol, .md-container > ul {
color: var(--text-dark);
}

.md-container > p, .md-container > ol, .md-container > ul {
font-size: 1.33rem;
line-height: 1.5;
}

.md-container > h2, .md-container > h3, .md-container > h4, .md-container > h5, .md-container > h6 {
font-family: 'Unbounded Variable', sans-serif;
font-weight: 500;
}

.end {
margin: 2rem 0;
background-color: var(--primary);
width: 2rem;
height: 0.5rem;
}
</style>
<slot />
<span class="end"/>
</div>
<Join theme="dark" />
</div>
<Join theme="dark" />
</BaseLayout>
Loading

0 comments on commit 4feddb4

Please sign in to comment.