O objetivo é apenas acrescentar o maior número possível de países à lista

Diretrizes

1. Certifique-se de que o país que deseja adicionar não esteja na lista, verifique em: /helpers/countries.ts

2. Caso não exista, a primeira coisa é adicioná-lo à tabela countries que está em /helpers/countries.ts
   O arquivo modificado deve ter a seguinte aparência :

import type Country from "@/interfaces/country.interface";
import { cmData } from "@/data/cmData";
...
import { [code]Data } from "@/data/[code]Data";

const countries: Country[] = [
  ...,
  {
    name: "Your Country ",
    code: "Code of your country",
    numberCode: "Numero code of your country",
    flag: "/assets/images/[code]/flag.png",
    portfolios: [code]Data
  },
];

export default countries.sort((a, b) => a.name.localeCompare(b.name))

3. Acesse /public/assets/images e crie uma pasta que terá o código (abreviatura) do país, por exemplo: se o país for Camarões você terá que criar um código cm , se o país for Itália será it

4. Na pasta que você acabou de criar você deve adicionar a bandeira do seu país, ela deve ter a extensão .png e deve ser chamada flag , basicamente flag.png

5. No mesmo arquivo, você deve criar um arquivo card-portfolio.png que representará o cartão do país. Para isso, você deve acessar este arquivo do Figma para gerar o cartão em questão. Se você tiver problemas para criar o cartão no figma, deixe uma mensagem para mim no twitter (Ao enviar a mensagem, seja explícito e me diga qual país deseja adicionar e eu criarei o cartão correspondente, depois enviarei para você)

Para modificar o arquivo figma você deve duplicá-la em seu rascunho antes de começar editá-lo

6. Acesse o /data e crie um arquivo [codeCountry]Data.ts. Por exemplo, se o país for a França você terá que criar um frData.ts , se for a Alemanha será deData.ts

7. Neste arquivo escreva isto:

import type CountryData from "@/interfaces/countryData.interface";

const [codeCountry]Data: CountryData[] = [];

export {[codeCountry]Data};

Um exemplo se você adicionar a Alemanha, será esse tipo:

import type CountryData from "@/interfaces/countryData.interface";

const deData: CountryData[] = [];

export {deData};

Se quiser aproveitar para adicionar um portfólio à lista, aconselho que termine primeiro com esta questão que é a adição de um país e depois siga este guia.

8. Prontinho! Agora você dar um push e enviar sua solicitação de pull request

Normally this should return "No portfolios found..."
Because no one has the "Devops" and "Mobile" tags

@Sanix-Darker @Zaker237 good idea ?

At present, each country is represented by a file, which is extremely redundant, because when there are many countries registered, it will be difficult to maintain the application.
The objective is therefore to have a single file, and in this file we'll have the logic that will enable us to know which country data should be returned according to the user's url.

Like this image : public/assets/images/cm/card-portfolio.png

It would be nice to have a banner like for others countries.
The card below is for TG, for example :

Hi guys,

Kind of putting the cart before the horse here. But I thought it would be interesting to make the project statically typed by adding TypeScript support. I think it's a good practice, as it helps improve the code quality and the developer experience.

I've already submitted a PR on that.

Do you guys think it's a good idea?

Extract SVG objects from the UI and store them as assets. This would improve readability and provide a better structure.

From:

...
<svg
  width="46"
  height="46"
  fill="none"
  stroke="#576f7f"
  strokeLinecap="round"
  strokeLinejoin="round"
  strokeWidth="2"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
>
    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5 0-.278-.028-.556-.08-.83A7.72 7.72 0 0 0 23 3Z"></path>
</svg>
...

to:

...
<Image src={logo} alt={media} />
...

The goal is just to add as many countries as possible to the list

Guidelines

1. Make sure that the country you want to add does not already exist, check in: /helpers/countries.ts

2. If it does not exist, the first thing is to add it to the table countries present in /helpers/countries.ts.
   The modified file should look like this :

import type Country from "@/interfaces/country.interface";
import { cmData } from "@/data/cmData";
...
import { [code]Data } from "@/data/[code]Data";

const countries: Country[] = [
  ...,
  {
    name: "Your Country ",
    code: "Code of your country",
    numberCode: "Numero code of your country",
    flag: "/assets/images/[code]/flag.png",
    portfolios: [code]Data
  },
];

export default countries.sort((a, b) => a.name.localeCompare(b.name))

3. Go to /public/assets/images and create a folder that will have the country code name, for example : if the country is Cameroon you will have to create a cm folder if it is Italy it will be it

4. In the folder you just created you must add the flag of your country, it must have for extension a .png and it must be called flag so basically flag.png

5. In the same file, you must create a card-portfolio.png file that will represent the country card. To do this, you must go to this figma file to generate the card in question. If you have trouble creating the card on figma, leave me a message on twitter ( By sending me the message, be explicit and tell me which country you want to add and I will create the corresponding card, then I will send you )

To modify the figma you must duplicate it in your draft before doing so

6. Go to /data and create a [codeCountry]Data.ts. For example, if the country is France you will have to create a frData.ts file, if it is the allenagne it will be deData.ts

7. In this file write this :

import type CountryData from "@/interfaces/countryData.interface";

const [codeCountry]Data: CountryData[] = [];

export {[codeCountry]Data};

An example if you add Germany will be :

import type CountryData from "@/interfaces/countryData.interface";

const deData: CountryData[] = [];

export {deData};

If you want to take the opportunity to add a portfolio to the list, I suggest you follow these instructions : follow this guide.

8. It’s over! You can push and submit your pull request

Migrate the way datas are saved on js code to a more readable and simple format like .csv

EDIT:

Originally idea from : https://x.com/ln_dev7/status/1701336511365496973?s=20

Problem description
Actually, when clicking directly on the link provided on the card, it redirects to the external URL but on the website, it opens the pop-up card meanwhile it was necessarily of any interest. So, one has to first close it before continuing to navigate on the website, making it somehow time-consuming if you want to go through many different portfolios.

Proposition
I think it will be better that when a user directly clicks on the link, it just opens the external URL without the popup card. If the user wants to see more info about a portfolio, then he can click anywhere on the card.

For a better separation of concerns, the code would benefit from extracting the logic handling the theme from the NavBar component into its own context.

From :

  const [theme, setTheme] = useState("light");
  const bodyElement = useRef<HTMLElement>(null!);

  useEffect(() => {
    bodyElement.current = document.body;
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  useEffect(() => {
    if (theme === "light") {
      bodyElement.current.classList.remove("dark");
      bodyElement.current.classList.add("light");
    } else {
      bodyElement.current.classList.remove("light");
      bodyElement.current.classList.add("dark");
    }
  }, [theme]);

  function toggleTheme() {
    setTheme(theme === "light" ? "dark" : "light");
    localStorage.setItem("theme", theme === "light" ? "dark" : "light");
  }

To:

const { theme, toggleTheme } = useContext(ThemeContext);

I was checking the CONTRIBUTING.md file and it would be interesting to add a translation space for other languages, similar to this repository https://github.com/anuraghazra/github-readme-stats

Here in Brazil, English is a very strong language and especially beginners in programming have little affinity with it, so I thought I'd translate it into Portuguese to make it easier for new people to contribute to the project.