lactf / lactf-website Goto Github PK

Speaker card unable to handle variations in blurb text side. Example below.

• make the text section fixed width and height
• make the text section scrollable
• make sure that the scroll bar is hidden to prevent from the div looking like an iframe
• ensure that it is cross compatible across browsers (https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp)

Create a custom 404 page that is not the default Next.js 404.

• Create ```pages/404.js``
• Implement main content including links back to index.js
• Test for 404

Look into potentially hosting the website at lac.tf

Currently, there are no media queries for the smallest mobile view size.

• add media queries for that mobile view size
• adjust margin and padding for paragraph text
• ensure that site conforms to mobile view

With some updated content to the site, the Navbar's links are not correct.

• update Navbar's links to correct corresponding sections of the page
• add additional links to Navbar based on new content
• ensure that it is responsive across media queries and mobile views

Implement sponsors section.

• add default message for now
• add finance contact link (ask LA CTF finance team for details)

Countdown clock is not reactive and not exactly centered.

• update styling with flexbox to center timer
• adjust styling to make design responsive to mobile views
• use media queries if necessary

The hamburger menu designed for mobile views is not properly sized to allow smooth transitions between the larger frame views and the mobile views.

• adjust sizing of mobile views and navbar height
• adjust drop down animation to ensure that it conforms to proper height
• adjust background color of dropdown menu from back to color that's design conformant (check with marketing team on updated color design)

The countdown timer is causing these console warnings. Essentially, the countdown timer attempts client side rendering whereas Next.js is meant for server side rendering. Look into solutions for this bug.

Update some site elements to reflect current design specifications.

• update navigation bar design to reflect styling of mockup on Figma
• update site header to contain information about the event date and updated rectangular logo (ask LA CTF Design team for most up to date version of the asset)
• implement the event countdown timer to display the time until the start of the event. See Figma for design outline. Recommend using Date.now() and taking difference with February, 10th 8 pm PST.

Update site information to reflect current design.

• implement the About section to contain photo of ACM Cyber and description. See Figma for details.
• Implement Prizes section to contain temporary message.
• Implement Contacts section to contain information about the various contacts for LA CTF. Include links.

All of the Open Graph SEO metadata is not being applied on searches and embeds. Need to investigate why this is.

update the README to better reflect the overall project of this site development

• add information about LA CTF
• mention the connection to Cyber + Psi Beta Rho
• explain how to deploy locally
• misc. information

• refactor footer from main page into its own component
• create Footer.js
• remove footer code from index.js and move it into component
• create Footer.module.css
• refactor css for footer into module CSS file

Implement a component for cards related to the various speakers attending the event.

• implement component card in JSX
• stylize it with CSS
• add temporary data
• create a /data folder and input the particular relevant sample speaker data in there

Confirmed sponsors for LA CTF 2024:

• Sandia National Labs
• OtterSec
• LatticeWork
• Google Cloud
• Lockheed Martin
• TryHackMe
• TrailOfBits

When a sponsor has been added to the website and platform code, check it off. Keep this issue open to track which sponsors have been added and which still need to be added.

• add robots.txt in /public and update to improve SEO
• include a hidden flag/secret message/easter egg in robots.txt
• add sitemap.xml in /public and update to improve SEO
• include a hidden flag/secret message/easter egg in sitemap.xml

Implement media resizing to reflect the widths of the site on different devices such as mobile phones.

• add media queries for each of the different sections
• reflect design based on specifications put together by design team (ask them for their availability for a design)
• implement media queries to adjust content to better fit smaller screens

Improve site's metadata and SEO

• update meta description
• implement NextSEO

After some observation, a lot of styling issues especially those with dynamic sizing could be solved with global variables for things such as width, font size, color, etc.

• add global variables for font size, width, etc.
• refactor sizes to be relative to these base variables
• adjust media queries to resize base variables to allow for changes in styling across different views.

The "About" link the Navbar is not correctly positioning the About section. Possible solution is adjust position of the id or adjust CSS to have different padding and whatnot.

Figma Design:

Current Site:

Update the current site to conform to the Figma's design for the middle text section.

• export SVGs from Figma
• update text content
• most likely use flexbox to allow for dynamic and accurate centering
• ensure that it confirms on mobile views
• add onhover animation for SVGs to make it pop :)

i 4gor

In order to increase event traffic, add Google Analytics to get a better assessment of traffic. Attached is documentation for how to integrate Google Analytics with Next.js. https://nextjs.org/docs/messages/next-script-for-ga

• fix navbar links to reflect updated production domain
• test links

Implement a component for the navigation bar for the singular page navigation.

• implement component with JSX
• add styling with CSS
• add anchor links for each section heading on the page for easy navigation
• implement a return to the top button (extra)