diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..6ad3029 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/Header.css b/src/Header.css new file mode 100644 index 0000000..9e32c08 --- /dev/null +++ b/src/Header.css @@ -0,0 +1,26 @@ +.emph-btn { + background-color: #34cd3c; + color: white; + padding: 0.5em 2em; + border-radius: 0.5em; + font-size: 1.5em; + font-weight: bold; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: fit-content; + margin-left: auto; + margin-right: auto; + transition: all 0.1s; +} + +.emph-btn:hover { + color: white; + scale: 110%; +} + +.emph-btn:focus { + background-color: #2a9630; +} + diff --git a/src/Header.jsx b/src/Header.jsx index 0d2518b..92d2257 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -1,5 +1,6 @@ import Sponsor from './Sponsor'; import { Launch, Link } from '@mui/icons-material'; +import "./Header.css"; function Header() { return ( @@ -9,6 +10,9 @@ function Header() {
Code Network logo

Join the community

+
+ ✨ Can you design our new website? ✨ +
Sign up

diff --git a/src/assets/CNLogo.svg b/src/assets/CNLogo.svg new file mode 100644 index 0000000..6ad3029 --- /dev/null +++ b/src/assets/CNLogo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/CountdownSection/index.jsx b/src/components/CountdownSection/index.jsx index 188bd3f..dfc8010 100644 --- a/src/components/CountdownSection/index.jsx +++ b/src/components/CountdownSection/index.jsx @@ -1,12 +1,11 @@ import React, { useState, useEffect } from 'react'; import './index.css'; -const CountdownSection = () => { - const initialDate = '2024-07-12T18:00:00+10:00'; - const newTargetDate = '2024-07-14T15:00:00+10:00'; // Sunday showcase date at 3 PM +const CountdownSection = (initialDate) => { + // const initialDate = '2024-07-12T18:00:00+10:00'; - const calculateTimeLeft = (targetDate) => { - const difference = +new Date(targetDate) - +new Date(); + const calculateTimeLeft = (initialDate) => { + const difference = +new Date(initialDate.initialDate) - +new Date(); let timeLeft = {}; if (difference > 0) { @@ -23,18 +22,18 @@ const CountdownSection = () => { const [targetDate, setTargetDate] = useState(initialDate); const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(initialDate)); - const [heading, setHeading] = useState(""); + const [heading, setHeading] = useState("Until the competition closes"); useEffect(() => { const timer = setTimeout(() => { const newTimeLeft = calculateTimeLeft(targetDate); setTimeLeft(newTimeLeft); - if (Object.keys(newTimeLeft).length === 0 && targetDate === initialDate) { - setTargetDate(newTargetDate); - setHeading("Time until presentations"); - setTimeLeft(calculateTimeLeft(newTargetDate)); - } + // if (Object.keys(newTimeLeft).length === 0 && targetDate === initialDate) { + // setTargetDate(newTargetDate); + // setHeading("Time until presentations"); + // setTimeLeft(calculateTimeLeft(newTargetDate)); + // } }, 1000); return () => clearTimeout(timer); @@ -51,13 +50,13 @@ const CountdownSection = () => { }); if (timerComponents.length === 0) { - return null; + return null; } return (

{heading}

-
{timerComponents}
+
{timerComponents}
); }; diff --git a/src/routes/DesignCompetition.jsx b/src/routes/DesignCompetition.jsx index 1043f96..64f9bc9 100644 --- a/src/routes/DesignCompetition.jsx +++ b/src/routes/DesignCompetition.jsx @@ -1,10 +1,11 @@ +import CountdownSection from "@/components/CountdownSection"; import "@/styles/design-comp.css" import { Alert, Button, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tabs } from "@mui/material" -import { useState } from "react" +import { useState, useEffect } from "react" function CompetitionTab({ children, index, currentIndex }) { return ( -
+
{children}
) @@ -12,26 +13,58 @@ function CompetitionTab({ children, index, currentIndex }) { export default function DesignCompetitionPage() { const [value, setValue] = useState(0); + const [showEnterButton, setShowEnterButton] = useState(false); + + const openDateStr = '2024-11-18T00:00:00+10:00'; + const openDate = new Date(openDateStr); + const dueDateStr = '2025-02-10T00:00:00+10:00'; + const dueDate = new Date(dueDateStr) + + useEffect(() => { + document.title = "Website Redesign Competition | Code Network"; + + const checkTime = () => { + const now = new Date(); + + if (now >= dueDate) { + setShowEnterButton(false); + return; + } + if (now >= openDate) { + setShowEnterButton(true); + } + }; + + checkTime(); + const timer = setInterval(checkTime, 1000); // Check every second + + return () => clearInterval(timer); + }, [dueDate]); return (

Code Network Website Re-Design Competition

- Express your interest - }>Expressions of interest now open! + {showEnterButton && + <> + Enter your design here + }>Competition entries now open! + + + }

What's this all about?

Code Network's website is where we showcase who our club is, why we exist, and what we do. We need to communicate this information to: -

    -
  • Students - who want to know why they should join our community and how they can get involved
  • -
  • Members - who want to see what our upcoming events are
  • -
  • Academics at QUT - who want to share our club with their students
  • -
  • People in the industry - who want to know why they should support our club
  • -

+
    +
  • Students - who want to know why they should join our community and how they can get involved
  • +
  • Members - who want to see what our upcoming events are
  • +
  • Academics at QUT - who want to share our club with their students
  • +
  • People in the industry - who want to know why they should support our club
  • +

Code Network is planning to rebuild this website in 2025 as part of our transition towards more open club projects. We feel that this would be a great opportunity for our members to contribute to a real-world project. @@ -47,13 +80,17 @@ export default function DesignCompetitionPage() { value={value} onChange={(e, val) => setValue(val)} textColor="inherit" - variant="fullWidth" + variant="scrollable" + scrollButtons + allowScrollButtonsMobile > + + @@ -67,23 +104,27 @@ export default function DesignCompetitionPage() { - + Expressions of Interest Open 21 October until 15 November 2024 - People who would be interested in participating in the competition are asked to express their interest during this time period.
- Express your interest here! + People who would be interested in participating in the competition are asked to express their interest during this time period.
- + Entries Open 18 November 2024 until 10 February 2025 - Submissions to be made via a Google Form. Link to be provided soon! + Submissions to be made via {showEnterButton ? this link : a link to be provided soon!}
Please note the 48 hour late submission period does not apply for this competition!
+
+ + Entrant Judging + 11 to 15 February 2025 + All entries will be judged by our judging panel, which will be comprised of key stakeholders from our Executive Team. Shortlist Announced 16 February 2025 - The top 10 candidates will be announced and will be voted on by the community. + The Top 10 entrants from the judging phase will be shortlisted and put to a community vote. Community Vote @@ -101,10 +142,16 @@ export default function DesignCompetitionPage() {

Please note, this timeline is subject to change at the discretion of the Executive Team. Please check back regularly for the latest details.

+

Competition Eligibility

+

To enter this competition, you must be a current student at the Queensland University of Technology as of Semester 2, 2024.

+

We are happy to accept submissions from students who are graduating at the end of Semester 2, 2024.

+
+

Design Mock-ups

  • Can be of any format, but we strongly recommend using Figma.
  • Can be of any level of fidelity, but preference will be given to high-fidelity designs
  • +
  • Please provide a version of the design for both desktop and mobile users.
  • We are looking for wireframes that will be relevant to our website. Some suggestions are below, but you are not required to design all of these, and you are encouraged to add your own pages that you see are relevant. @@ -118,7 +165,7 @@ export default function DesignCompetitionPage() { - Home Page + Home Page This should act as the cover page to Code Network, and should provide any visitors to our site with a good indication of what our club is like overall. This is where your creativity should shine! @@ -157,6 +204,13 @@ export default function DesignCompetitionPage() { on the current home page for inspiration. + + General Content + + If our club needs to publish a page with general information, how would the page look? Show us the typesetting and formatting + that we would expect to see. + + Anything Else @@ -168,15 +222,63 @@ export default function DesignCompetitionPage() {
-

Responsive Layout

-

For each page, please provide a mobile device-responsive version.

Explanation of Design Choices

You will be asked to provide a brief statement to explain your overall design choices in your wireframes.

- -

Judging criteria coming soon!

-
+

+ All entries will be judged along the following criteria by our judging panel (excluding community vote). +

+ +
+ + + Criteria + Question + Weighting + + + + + Creativity + How well does the design incorporate creative elements that make it stand out? + 20% + + + Usability + How well organised is the site content? How easy is the site to navigate and understand? + 20% + + + Brand Identity + How easily can a visitor tell that this is the Code Network website? + 20% + + + Responsiveness + How well does the prototype respond to / work with different form factors? + 10% + + + Cohesiveness + How cohesive is the design overall? Does it all feel like one website promoting Code Network? + 10% + + + Presentation + How well did the entrant explain their design choices and thought process? + 10% + + + Community Vote + Members of the Code Network Community will be asked to rank the designs. Each shortlisted design will receive a score reflective of their average ranking. + 10% + + +
+ + + @@ -199,9 +301,39 @@ export default function DesignCompetitionPage() {

Other prizes may also be announced at the discretion of the Executive Team.

- +

Please direct any questions to hello@codenetwork.co.

We would be happy to answer any questions relating to the competition or about what we would like to see from the website.

+

You are also welcome to contact us if you would like some feedback on your draft design.

+
+ +

Logo

+ + +

Colour Scheme

+

These are the colours we generally use around our website and marketing resources. Please do not feel restricted to these!

+
+
+ Dark Blue #0A0D2A +
+
+
+ Medium Blue #101139 +
+
+
+ Light Blue #212154 +
+
+
+ Accent Green #34CD3C +