My WeCoded Landing Page

On the forefront, I have incorporated a landing that covers a number of people, from different genders, races and religions. The idea is to let people feel welcome, and united, the first step to inclusivity.

NOTE: For now, if you go through the code, only male and female genders are used as those are the designs from Humaaans but these can be updated using more inclusive designs.

The later sections are ripped off from the current landing page, with an addition of Winners section as we have a challenge this year.

How I Built It

The following technologies and assets are used to make the landing:

React (Vite/TS)

TailwindCSS

[Asset] Humaaans Illustration Set (by Pablo Stanley)

[Asset] Illustrations from Freepik

The app is hosted on Github Pages, with the demo embedded in StackBlitz. For better experience, go to the site: https://deathcrafter.github.io/wecoded-landing

Repository:

deathcrafter / wecoded-landing

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also…

View on GitHub

Aspects Covered:

Look and feel.

Functionality.

Aspects Not covered (I am a bit short on time):

Responsiveness

ARIA-based accessibility.

Small things like navbar and footer as I felt like those are supposed to be handled by the platform, e.g. would be identical to the one in primary site.