When using my iPad,

• there's a lot of white space in the partners section on Homepage.
• the logo's are not all on the same line (Microsoft is falling down on the second line), while they sould be on the same line or equally divided over 2 lines.

Context

Companies, single people and any kind of person physical or moral can sponsor us in many ways.

• Money donation recurring or not
• Materials (Computer for renting them to students)
• Places (Provide some space for classes or events)
• Make training
• ...

The page should explain what are ways to sponsor HYF Belgium and why is important.

Sections

Hanging section

Header of the landing page with a direct CTA to start a sponsorship. A big H1, a tagline and a image who should give a big impact on the awareness (SEO + messaging)

Definition section

Should explain what is a sponsorship and why is important and what we are doing with it

Testimonial section

Write content on why and how people/companies sponsor us

Sponsorship process section

Explain the steps to become a sponsor

Donate section

A stripe linked section which allow single user to make a one time donation (Maybe recurring as well?)

Like the actual section:

'The Test Leaders' should become 'ttl.be'

I noticed there seem to be a lot of declared by unused items flagged in

https://github.com/HackYourFutureBelgium/hackyourfuture.be/actions/runs/285641219

So I'm happy to address those in a PR if that would be helpful.

the site currently doesn't have one, and it's a nice bump in lighthouse.

I very quickly made one up, that's just the "H" in the Belgian flag colors, but really anything would be better than nothing.

the PR with the updates to test out is here:
#37

Hey @jbelien and @colevandersWands or @KevinTss :)
Could we get https://bootcamp.hackyourfuture.be/ offline?
It is not up to date at all, so doesn't give a good idea of the current HYF work.
It would be nice if that URL redirects to our homepage (if a redirection is necessary)

Context

We want to build a basic Design System, more precisely, the UI kit which will reflect the branding through web components who will be used on the website.

Solution

We will use Storybook for this. We can consider that as a tool to materialise the UI elements, plus they do have experience on design system use case which will help us.

Concretely

We will build a components based library which are Styled components (Not plain react component)

Inventory component to build

• Button (as styled)
• Heading (as styled)
• Paragraph (as styled)
• Image (as styled)
• Input (as styled)

A click on the "Become a partner" button on the homepage doesn't seem to do anything.

Currently, the CI "test" step is only invoking the linter, so it would be nice to ensure in CI that none of the pages are broken by any commits.

Cypress is super straightforward to set up for this for local development, and already has some nice github actions set up (https://www.cypress.io/blog/2019/11/20/drastically-simplify-your-testing-with-cypress-github-action/), so this would be my recommendation, but probably needs a bit of discussion.

Are there any other "lets make sure the pages can be clicked through" suggestions for a framework to add? We should also probably add some unit testing, but that would (ideally) be component-specific rather than ensuring that the website is usable.

There appear to already be some open graph tags set up to render previews in Facebook (probably set up automagically via Helmet), and it would be good to both add similar tags for Twitter previews as well as standardize the approach...the preview image seems to be of one of the graduates -- Zeynep Hanim -- rather than a generic preview pic...which might be what we want, but merits a discussion just in case it's accidental at the moment.

These are trivial to set up with gatsby and Helmet, so should should be a simple job if you'd like to decide on wording/images/etc and then assign this issue to me.

this appears to be covered by a Gatsby plugin, it's in their docs.

Would be nice to be able to click on our partners logo to access their website.

I noticed that we are still using the Gatsby default LICENSE file ("0BSD License").
That's not a license we usually use at @openknowledgebe ; should we change to our usual "MIT License" ?
You can find more information here : https://choosealicense.com/

Since @lpmi-13 contributed to the project, we need his/her consent to change the license.

Description

We need to create a reusable input component that can be used in various forms across our application. This component should have customizable styles and be able to handle user input, validation, and feedback.

Task List

• Create the Input component with the following features:
  • Accepts props for placeholder, label, value, error message, and input type
  • Provides validation feedback to the user when necessary
• Create a Storybook story for the Input component
  • Include multiple examples of the component being used with different props
  • Show how the component responds to user input and validation feedback
• Ensure that the component is accessible to users with disabilities
• Style the component based on the attached Figma design

Figma Design Preview

Acceptance Criteria

• The Input component should be reusable and able to handle different types of input and validation feedback
• The Storybook story should demonstrate the component's features and show examples of it being used with different props
• The component should be accessible to users with disabilities
• The component should match the design in the attached Figma preview.

Context

This page should be the first impression of HYF Belgium

• What is HYF?
• What's the vision and mission?
• Link to students page
• Link to sponsorship page
• Testimonials
• ...

This page should be findable through some SEO researches.

Header

Logo -> Image redirect sur home
Navigation

• Programe
• Collaborate
• Volunteer
• About us

Sections

Banner

Image background + tagline

Discover

3 blocks section
[see current block OUR IMPACT]

Success stories

Caroussel with testimonials

Donation

Like now or just

Contact

Mail form + map

Button

Specifications

• Should render a <button> HTML element
• There are 2 sizes: small and medium
• There are 3 variants: default, primary, secondary
  • Default: Has transparent background and only a visible background on hover
  • Primary: Has the primary color
  • Secondary: Has an opacity on the background and no primary color
• Color

Helpers

button {
  /* Small size */
  padding: 10px 24px;
  gap: 10px;

  /* Medium size */
  padding: 10px 32px;
  gap: 16px;

  /* Default variant */
  background: #295BF6;
  /* On hover for default */
  background: rgba(255, 255, 255, 0.1);

  /* Secondary variant */
  background: rgba(255, 255, 255, 0.1);

  /* Common */
  border-radius: 8px;
  color: #FFFFFF;
}

We should use it as this:

import { Button } form '...'

const Component = () => (
  <div>
    <Button onClick={...}>
      Discover more
      <RightArrowIcon />
    </Button>
  </div>
)

Images

Because the application asks students to upload a file, we can't generate an embed link. This means the "Apply Now" buttons need to open to the form in a new tab instead of routing to a page on our site. The way those buttons are written now this can't be done correctly - will most likely need to refactor them to be 's styled as buttons.

Error message: This form cannot be embedded because it makes use of File Upload questions.

side-note, right now updating the apply buttons needs to be done separately in the "apply" section and the navbar. a component refactor may be a good solution

Donation form doesn't seem to work : it redirects to https://hackyourfuture.be/?support=on when I click on "Donate" button

First things first, congratulations on the new website : it's WAYYY better 🤩

Here are some insights to improve this repository structure:

• Rename master branch to gh-pages branch (since it's the branch deployed by GitHub Pages)
• Rename dev branch in master branch (since it's the main branch we have to work on)
• Clean current dev branch:
  • Delete .cache folder (+ add to .gitignore)
  • Delete public folder (useless since the deployed files are in current master branch) (+ add to .gitignore unless some of the files are needed)
  • Delete CNAME file, it's only necessary in the branch deployed by GitHub Pages
  • Write proper README file (it's still the default Gatsby README file)
• Rename repository (since our main URL is hackyourfuture.be it doesn't really make sense to call our repository HackYourFutureBelgium.github.io, I would use some as simple as website)
• I see your using GitHub Actions which is awesome ; if I understand correctly, it builds, commits, and pushes to current master branch from current dev branch ; unfortunately it failed for the last 3 commits
  • Fix GitHub Actions workflow
  • Don't commit anything in current master branch (adding the necessary CNAME file is of course an exception)
  • To avoid any commit in current master branch, make it protected (see "Branch protection rules" in settings)

Those are only suggestions, I just think it will help for better understanding of how it works if anyone else wants to contribute (including myself). Feel free to ask if something isn't clear.

And ... GREAT WORK on the new website 👍

Description

Currently, the project is built using Gatsby as the framework, but we have not yet implemented Typescript. I'd like to propose to start applying Typescript for upcoming features and eventually refactor the legacy code.

Objective

The objective of this issue is to add Typescript to the project and configure the necessary tooling to support it.

Tasks

• Configure linting and formatting tools for Typescript
• Install @types/node, @types/react, @types/react-dom, and typescript as devDependencies.
• Add a tsconfig.json file using npx tsc --init or use the one from gatsby-minimal-starter-ts.
• Run gatsby clean to remove any old artifacts.
• Rename your gatsby-* files:
  • gatsby-node.js to gatsby-node.ts
  • gatsby-config.js to gatsby-config.ts
  • gatsby-browser.js to gatsby-browser.tsx
  • gatsby-ssr.js to gatsby-ssr.tsx
• Address any of the current limitations and test the behavior.
• Document the Typescript implementation in the project's README.md file

Outcome

The project will have Typescript implemented, which will help to catch potential errors earlier in the development process and provide better type safety for the codebase. This will also make it easier to maintain and scale the project in the future.

Additional Information

• We will use the strict mode configuration for Typescript.
• The conversion process will happen gradually, starting with new files for upcoming features.
• Any existing code that is not converted to Typescript will continue to work as it currently does.
• Once Typescript is fully implemented, we will evaluate the possibility of refactoring the legacy code to Typescript.

Context

This page should target students (Potential or alumni)

• Who are HYF Belgium students?
• Who can apply
• How apply
• What's the projection as student who finish HYF Belgium curriculum?

Sections

...

Work in progress

it doesn't have the correct config and so is looking at the wrong port (8080 instead of 8000 where gatsby is).

For some reason, I have a horizontal scrollbar only on the homepage (Windows 10 Firefox 80).

Horizontal scrollbar is caused by the gray "background block" behind the picture in "Our program" section.
See image-description/style.js#L58-L67

EDIT: It only happens on screen <= 1750px

The images take way too long to load ... and rightfully so, one of the image is 16Mo !

Error: .eslintrc.js:
	Configuration for rule "required" is invalid:
	Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '{ some: [ "nesting", "id" ] }').

See https://github.com/HackYourFutureBelgium/hackyourfuture.be/runs/1194643281?check_suite_focus=true#step:6:11

To make the donation form more attractive, we want to add a 'message box' to it.

What do we need:
Frontend

• a message box underneath the amount-line in the donation form (both on homepage + support us-page)
• optional: an instruction line where you can choose your own amount, saying 'choose your own donation amount'

Backend

• a way to collect these messages + link them to the donator's mailaddress + name

@jbelien is this clear to you? If not, we can have a quick call.

Deadline would be 1st of December, as the UX Antwerp donation campaign will start.