Description

Find a nice readme example and implement it

Please suggest your solution here before opening a PR

ACs

• Updated readme

Description

The image is for now a bare image import, it should be separated into a React component and make it more reliable (accept different formats, not working with non-squared image, additional properties like: withBorder, show, etc)

Open to suggestions!

ACs

• Suggest improvements and technical solution
• Implement technical solution for Image component

Description

Currently the generation is quite manual and "techy": filling the data.json, running the server and running the pdf script.
We should think about a user interface, for example inputs and a button to generate PDF ?

Open to suggestions, ideas and design!

ACs

• Specs defined and issues created

Description

Long but interesting task, investigate how to implement storybook.

Maybe auto-deploy the storybook on PR for deployment preview? 👀

ACs

• Working POC with Storybook

Description

The header component and data header.resume were lamely built using \n to force a new line. We can do better than this!

Tip

To find quickly type issues you can run npm run typecheck.
To force a git ignored file, you can git add ignoredfile.json -f

Acceptance criteria

• Header component accepting an array of lines
• Changes needed in data.json and types

Description

Colors variables name are currently linked to their name (--light-grey), this should change with the introduction of templates/themes.

To prepare this change we need to change the name of those variables with more "meaning".

Acceptance criteria

• Learn about CSS color naming (accent, values like 100 to 900, etc) and prepare a quick presentation about it to share your knowledge about it (blog post, or quick demo)
• Change all the CSS color variable names (for example --light-grey should become may become --color-300 or --color-accent (depending on your findings)

Description

ESlint has some nice rules and possible plugins/rules set, find ones that are suitable for the project.

Please suggest here before opening a PR

ACs

• Investigate possible rules and implement them

Description

Some bullet point were added directly as a character in the data.json, we should have a better way to do it.

Feel free to suggest ideas!

• A react component for the bullet point? To make it very customizable
• A new property within the data.json? For example lines: string[] would become lines: { text: string; bulletPoint?: boolean }[]

ACs

• Implement bullet points in React component that might use it
• Update data.json and types

Description

The project doesn't have Prettier yet.

ACs

• Install prettier as a dev dependency
• Create a simple prettier config (it can be an empty .prettierrc file)
• Add a command to run prettier in npm scripts

Description

This component is for now in Profile.tsx, it should be extracted and have some additional features (for example: showing abbreviation? showing full name? etc).

Open to suggestion for additional features

ACs

• Single component with new features

Description

Currently we have a single format (profile on the right, etc), we should be able to implement different templates.

The solution should not change the data schema (breaking change) and work with CSS variables and React components.

Open to suggestions and ideas

ACs

• Working POC for templates

Description

JSDoc works very well with TypeScript, learn about it and implement it (even for props!). This could be a good topic to present (blog post, or tech presentation).

Bonus point for use of @see and similar tags.

ACs

• Implement JSDoc

Description

To enforce best practices, like conventional commits, or typechecking before commiting, we should use something like commitlint and husky.

Learn about it and suggest solutions. This could be a nice topic for a blog post or tech presentation.

Please suggest in this issue before opening a PR.

ACs

• Implement a solution to enforce good commits

Description

With the project growing, we should protect the current features with regression testing, especially for the future user interface.

Investigate possible solutions for testing and running it on CI (Github Actions).

Some libraries to investigate:

• Playwright with UI visual regression (screenshot comparison)
• Testing Library for simple component

The implementation will be done in another Issue once the testing strategy is defined

ACs

• Issues with specs created

Description

For rapid prototyping, we used a normalize.css and let the original index.css.
Normalize is targeting some things that we don't need, we should have only what is needed in index.css

ACs

• normalize.css removed and refactored into index.css

Description

Links is currently inside Profile.tsx, this should be extracted and with new features (for example adding website? mastodon?)

A refactor might be needed + types/data.json changes

ACs

• Single Link component
• Update types/data/etc

Description

Find a nice CONTRIBUTING.md example and how to show contributors (readme?).

Please suggest here before opening a PR.

ACs

• CONTRIBUTING.md created
• An easy way to manage the list of contributors and show them

Description

To change any spacing/color/etc, it's currently needed to go into the component themselves. With the introduction of the templates/themes, the only viable way would be to have CSS variables.

Note: This might be broken down into several PRs/Issues.

Example:

.bubble {
  border: 1px solid var(--light-grey);
}

should become

.bubble {
  border: var(--bubble-border);
}

with

:root {
  /* Main colors first*/
  --color-700: rgb(94, 90, 94);
  
  --bubble-border: 1px solid var(--color-700);
}

(Color variables naming will change with this issue)

Acceptance criteria

• Every hardcoded values that could be part of a design system (borders, gaps, padding, colors, etc.. almost everything minus the alignments like flex) should be converted to CSS variables

Description

Native english speaker required

Probably some variables could have better names, both semantic and english.
For example Bubble may have a better name, like chip? Feel free to use Material.io for component names.

Open to suggestion, possibly do it in the Issue before opening a PR.

ACs

• Double check variable naming and semantic