hackyourfuturebelgium / hackyourfuture.be Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://hackyourfuturebelgium.be
License: MIT License
Home Page: https://hackyourfuturebelgium.be
License: MIT License
First things first, congratulations on the new website : it's WAYYY better ๐คฉ
Here are some insights to improve this repository structure:
master
branch to gh-pages
branch (since it's the branch deployed by GitHub Pages)dev
branch in master
branch (since it's the main branch we have to work on)dev
branch:
.cache
folder (+ add to .gitignore
)public
folder (useless since the deployed files are in current master
branch) (+ add to .gitignore
unless some of the files are needed)CNAME
file, it's only necessary in the branch deployed by GitHub Pageshackyourfuture.be
it doesn't really make sense to call our repository HackYourFutureBelgium.github.io
, I would use some as simple as website
)master
branch from current dev
branch ; unfortunately it failed for the last 3 commits
master
branch (adding the necessary CNAME
file is of course an exception)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 ๐
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 Test Leaders' should become 'ttl.be'
This page should be the first impression of HYF Belgium
This page should be findable through some SEO researches.
Logo -> Image redirect sur home
Navigation
Image background + tagline
3 blocks section
[see current block OUR IMPACT
]
Caroussel with testimonials
Like now or just
Mail form + map
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.
The objective of this issue is to add Typescript to the project and configure the necessary tooling to support it.
@types/node
, @types/react
, @types/react-dom
, and typescript
as devDependencies.tsconfig.json
file using npx tsc --init
or use the one from gatsby-minimal-starter-ts
.gatsby clean
to remove any old artifacts.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
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.
this appears to be covered by a Gatsby plugin, it's in their docs.
Companies, single people and any kind of person physical or moral can sponsor us in many ways.
The page should explain what are ways to sponsor HYF Belgium and why is important.
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)
Should explain what is a sponsorship and why is important and what we are doing with it
Write content on why and how people/companies sponsor us
Explain the steps to become a sponsor
A stripe linked section which allow single user to make a one time donation (Maybe recurring as well?)
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.
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.
We will build a components based library which are Styled components (Not plain react component)
A click on the "Become a partner" button on the homepage doesn't seem to do anything.
Would be nice to be able to click on our partners logo to access their website.
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
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.
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
<button>
HTML elementsmall
and medium
default
, primary
, secondary
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;
}
import { Button } form '...'
const Component = () => (
<div>
<Button onClick={...}>
Discover more
<RightArrowIcon />
</Button>
</div>
)
To make the donation form more attractive, we want to add a 'message box' to it.
What do we need:
Frontend
Backend
@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.
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" ] }').
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.
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)
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.
Donation form doesn't seem to work : it redirects to https://hackyourfuture.be/?support=on when I click on "Donate" button
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.
The images take way too long to load ... and rightfully so, one of the image is 16Mo !
This page should target students (Potential or alumni)
Work in progress
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.