![image](https://private-user-images.githubusercontent.com/2790845/291106180-81305f37-96de-4770-8034-59ac44041303.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNjE4MC04MTMwNWYzNy05NmRlLTQ3NzAtODAzNC01OWFjNDQwNDEzMDMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Zjg2MzczYTVlMzUyNjAwMjBlMzMyZWM2NTQzNGM5MTVjYzFjNGFjMjA3MGI1YTczMjQ3NmY0ZDM4ZGNlMDBmMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.9G0lQVgHruSQt6zNbBdnJJTy8vm2tOXCpX5u29mKVBM)
Writing a Resume
isn't easy, and doing it in Word isn't fun. So html and css make it easy. React
and Tailwindcss
make it even easier and enjoyable.
At localhost:3000/
is your Resume
, open src/app/page.tsx and change the layout, move things around.
At localhost:3000/cover-letter
is your cover letter
- src/app/cover-letter/layout.tsx contain the header, it uses the same
Title
andContact
components of youResume
. - src/app/cover-letter/page.tsx is the letter content.
![image](https://private-user-images.githubusercontent.com/2790845/291106538-9496a227-8353-4682-a31c-f84158ce5a06.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNjUzOC05NDk2YTIyNy04MzUzLTQ2ODItYTMxYy1mODQxNThjZTVhMDYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzA2Nzk2ZjQ0OGEzMzdlYjA2NGMwODhiYWE0MjdmNTI2OTE0ZTgxZmEwNjYzYmNiOWQwMjQ4NjQyODQ3ZjllNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ma85KAfdyh0ZYTy1Sj2a-2lSsO2uk5FaViQ9Rf7VdOU)
![image](https://private-user-images.githubusercontent.com/2790845/291108474-7be3f99f-18e0-4951-9c15-cbdeaac6a174.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwODQ3NC03YmUzZjk5Zi0xOGUwLTQ5NTEtOWMxNS1jYmRlYWFjNmExNzQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTFmYWVlOWVhZmY1ZGUxZTZhOWMyMzAzYjA5YzA4MWU1N2MwMzIxNjc3ODdkZmZkZTQwMGJkOWMwZWNmZDgxYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ttYL6QtFJ7b9Ywf8DiHjRL97w0LIziU8AnSykWvUY7c)
![image](https://private-user-images.githubusercontent.com/2790845/291106414-2d4d4e96-8967-4e4b-88ea-f1a98de2d80f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNjQxNC0yZDRkNGU5Ni04OTY3LTRlNGItODhlYS1mMWE5OGRlMmQ4MGYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Mjk4ZDMzNGJlMzc5NzliZGE0OTRmNmY0MDA1ZDI0ZmU2Yzc4NDE4N2NhYzU4YjUzYTg5MWYxZTA0NGVkODdmZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.X6mp1A1njp6uObW3FAWcs0yAZht_m44LBnZJECKZoY0)
IMPORTANT!: I'm using the premise that resume
should have one page. You can change src/app/globals.css with a percentage that works better for you. I'm using 83%, and I think it should not be bellow 80%.
:root {
font-size: 83%;
}
![image](https://private-user-images.githubusercontent.com/2790845/291106638-ae884384-965a-49f8-833c-cacd6558b4ef.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNjYzOC1hZTg4NDM4NC05NjVhLTQ5ZjgtODMzYy1jYWNkNjU1OGI0ZWYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGU4ZjZmOTE4ODE0YzFiNjJkMjFiYmI1ZmI0YzYyOTZhODQ3ZGRlYTM2NGIwZjdmOWIwZTdkM2QyMmQ1NDQwZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.IzHbUBSenmIT79F7Bk7QjR37St27s1PGCf8QOXj4IYw)
Replace my avatar public/avatar.jpg and remember to keep it small.
Avatar should be around 50KB, otherwise the PDF will be big.
Turn off avatar in the src/data/config.ts
export const config = {
avatar: false,
};
![image](https://private-user-images.githubusercontent.com/2790845/291106920-7490668e-41ba-4501-a219-13a437fe6eea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNjkyMC03NDkwNjY4ZS00MWJhLTQ1MDEtYTIxOS0xM2E0MzdmZTZlZWEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NjRmMjJjOTgzZTliZGY1YjZhZjgyMDI1YTc1NGFmMTE3ODc0NTdlNThlZTE3MDljNjViOTJhYjhlZjdhNTk2YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.YY0RF87rtDkelqcpX9FT6sFr_DodLsf7n8JmbAWEU3E)
Your name and position your are applying.
export const titleData = {
name: "Rafael Ricardo Vieceli",
headline: "Fullstack developer",
};
![image](https://private-user-images.githubusercontent.com/2790845/291106834-48cb6ba2-5682-4d22-a384-e6396341f6f9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNjgzNC00OGNiNmJhMi01NjgyLTRkMjItYTM4NC1lNjM5NjM0MWY2ZjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjM4MzRkMmRkN2RhMmQ2OGQ5OTI0MjBhNDY4OTRmMmE1NTNjM2FmODEyODMyOWYxOTE2ZmQyM2E1OWM4MDcwZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.T8POYm8oVwfeu0X4Aor3b7AVkMO6RyCljTwAOML5D3E)
Your introduction
export const profileData: Paragraph[] = [
{
type: "paragraph",
value: "Experienced FullStack Developer with...",
},
];
I used the concept of some text editors. You can look how it is rendered in the Content component.
I'm working on a better way to add log texts
![image](https://private-user-images.githubusercontent.com/2790845/291106996-a740c8d7-dc40-4dee-ae1f-40b957ae76d6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNjk5Ni1hNzQwYzhkNy1kYzQwLTRkZWUtYWUxZi00MGI5NTdhZTc2ZDYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzRiMjU3YWI1MmIxYmU5Yzk5NTQ0NDJjNGVhYjA3Mjk0ZTlkMGE5Mzg4M2Q0ZjM4YjQ2MmQ0Mjc3NTUwNTYxZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.M0b8UD86dQTOsDt6cIk7hd2fJk0Onbrf9BABh7awrhg)
Your contacts, phone, email, github, linkedin and more.
Current we have 4 types of contacts
interface BaseContact {
type: "phone" | "text" | "email";
icon: IconDefinition;
value: string;
}
interface LinkContact extends Omit<BaseContact, "type"> {
type: "link";
href: string;
}
export const contactData: ContactType[] = [
{
type: "email",
icon: faSquareEnvelope,
value: "your_email_@gmail.com",
},
{
type: "phone",
icon: faSquarePhone,
value: "your phone number",
},
{
type: "link",
icon: faSquareGithub,
value: "github.com/rvieceli",
href: "https://github.com/rvieceli",
},
];
Why? I added link for everything, Email has href=mailto:email
and phone has href=tel:+1..
You can look how it is rendered in the ContactItem component.
If you want to add something else, like Instagram
import {
faSquareGithub,
faLinkedin,
faInstagram, // << here
} from "@fortawesome/free-brands-svg-icons";
and then add it to profile.data.ts
export const contactData: ContactType[] = [
...,
{
type: "link",
icon: faInstagram,
value: "instagram/rvieceli",
href: "https://www.instagram.com/rvieceli",
},
]
![image](https://private-user-images.githubusercontent.com/2790845/291107024-e85a3356-c370-4459-a33d-f1ec2faf64c5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzAyNC1lODVhMzM1Ni1jMzcwLTQ0NTktYTMzZC1mMWVjMmZhZjY0YzUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmM1MzZiMWFhNTIyOTA0ZDA1MTlhMWE3N2YyOTI1NDZlZDVmNDM0YTRhOTI0YjY0MTJlZjBhM2QzZjBiNDAyMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.12aeVSELjnekq7RUiP3T15JHShFvfUbASzTw3PqA9JE)
This details are like contact, but they're hard to describe with an icon, So it is a Label/Value list.
Open src/data/personal-details.data.ts
export const personalDetailsData: LabelValue[] = [
{
label: "Nationality",
value: "Brazilian, Italian",
},
{
label: "Location",
value: "Ivrea, Italy",
},
];
Nationality is relevant since I can work in Europe without a visa. But you can leave it empty and it will be hidden.
![image](https://private-user-images.githubusercontent.com/2790845/291107050-19882dac-284a-47f9-9d92-ab44be854c8d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzA1MC0xOTg4MmRhYy0yODRhLTQ3ZjktOWQ5Mi1hYjQ0YmU4NTRjOGQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2JhN2Y5ZjU4ODc3ZGYyYzk4MGQ0MzM3MDE1YzdkOWE3YTMyYzRkZDI3YTE5ODQ2NDg2OGQwNTliYWJkY2YyMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Nddm-vH-9Djt4hSYewcMxFuExoyT6ajKdYOY0mrPSLU)
Languages you speak, for an international position is a must have.
Open src/data/languages.data.ts
export const languagesData: Language[] = [
{
language: "Portuguese",
level: "native",
},
{
language: "English",
level: "advanced",
},
];
You can leave it empty and it will be hidden.
![image](https://private-user-images.githubusercontent.com/2790845/291107209-c4720c70-2124-402c-8e3b-1db2136a6ee3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzIwOS1jNDcyMGM3MC0yMTI0LTQwMmMtOGUzYi0xZGIyMTM2YTZlZTMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzJiYzg4MmU2MTUwOTJjODJmNjMxODFiOTE2MTExMmY4MDdhMjMzOTg2Y2RmOTIyNGI2OWJmOTk1NzU3NDhmYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.bREOXFd7CdP49wE8xUSsVPTKNxBSXw4EBTOzSokHlKc)
It's all of your skills, an array of string.
export const skillsData: string[] = [
"JavaScript",
"TypeScript",
"AWS",
"React",
"React Native",
"GraphQL",
"Node.js",
...
]
It could get from work experience and filter duplications, but You can remove or add something as need. You can leave it empty and it will be hidden.
![image](https://private-user-images.githubusercontent.com/2790845/291107229-24ee0376-c390-48cc-b219-ce981ba49a3d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzIyOS0yNGVlMDM3Ni1jMzkwLTQ4Y2MtYjIxOS1jZTk4MWJhNDlhM2QucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2VlNjNhZmVkYjg1ZTdiZjcwMThjZTQ2YzA5ZjBhOWM2ZmFkMDViYTI2OGI2OWI3Y2YyOTI5OWQ4NjA3ZGVhOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.y4N7WH3fpD_kvoJ4aXyKj1mJGKIbMhMgod1arYrBnkc)
Certifications has 3 relevant information, name
, year
(because it expires) and the credentialUrl
, people might want to check.
Open src/data/certifications.data.ts
export const certificationsData: Certification[] = [
{
name: "AWS Certified Cloud Practitioner",
year: "2023",
credentialUrl:
"https://www.credly.com/badges/f3853a19-e3a9-4880-9d04-0eff8aeddf2d/public_url",
},
];
You can leave it empty and it will be hidden.
![image](https://private-user-images.githubusercontent.com/2790845/291107352-f9061e30-278b-411d-92bd-1213ea0c83c6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzM1Mi1mOTA2MWUzMC0yNzhiLTQxMWQtOTJiZC0xMjEzZWEwYzgzYzYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NjBlZWZkNDlkMmY0NDM5M2Y5MGFkYTNmNmQ4ZDc4ODU3OGM4YmM5NmU2NWVmZDU3ZDE2ODU4ZWU2Y2VmNmViMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.3b1NGZC5t7UZbdL0J59puIjdynLoDOYtbVd7pJoeAwQ)
Open src/data/work-experience.data.ts
Each work experience is divided is two parts, header (title
, company
and period
) and optional details (details
).
export interface Company {
name: string;
url: string;
}
export interface Period {
start: string;
end?: string;
}
export interface Position {
title: string;
company: Company;
period: Period;
details?: Content[];
}
This an example.
export const workExperienceData: Position[] = [
{
title: "FULLSTACK SOFTWARE DEVELOPER",
company: {
name: "FOODBARRIO, Switzerland (part-time, remote)",
url: "https://foodbarrio.com/en/",
},
period: {
start: "Jul 2023",
},
},
{
title: "SENIOR FULLSTACK SOFTWARE DEVELOPER",
company: {
name: "HYPERTING, Italy (remote)",
url: "https://www.hyperting.com/",
},
period: {
start: "May 2022",
end: "Apr 2023",
},
details: [
{
type: "paragraph",
value: "Worked on a software house",
},
{
type: "list",
items: ["Item 1;", "Item 2;"],
},
{
type: "tags",
items: ["React", "Node.JS", "TypeScript"],
},
],
},
];
You can look how it is rendered in the WorkExperienceItem and Content component.
content can be ordered as you want, you can add tags first, or you can just use a list. There is no rules here. You can leave it empty and it will be hidden.
![image](https://private-user-images.githubusercontent.com/2790845/291107367-33816426-e9a0-4f0f-98a6-5d1b6bc7acc0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzM2Ny0zMzgxNjQyNi1lOWEwLTRmMGYtOThhNi01ZDFiNmJjN2FjYzAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OWE4MTMyYTE0ZDRlNTA1ZWJjMDhhOWUyOWZjYmIzYjhlYzk5MjI0YjAzMDE3ZjdhMjljN2ViODA4NzhjODY1ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.-AvtdFsSVFq2W77deCY7MLK2G3URSJdsjHDcaQcZ2I0)
It's similar to Work Experiences.
Open src/data/education.data.ts
The differences area school
(replacing company
) and period.end
that is required (add the future date, like LinkedIn)
export interface School {
name: string;
url?: string;
}
export interface Period {
start: string;
end: string; // future date if in progress
}
export interface Education {
degree: string;
school: School;
period: Period;
details?: Content[];
}
And here is an example:
export const educationData: Education[] = [
{
degree: "Bachelor of Technology Management",
school: {
name: "FAEC INESUL, Brazil",
},
period: {
start: "2007",
end: "2019",
},
details: [
{
type: "paragraph",
value: "I've studied a lot.",
},
{
type: "tags",
items: ["Networking"],
},
],
},
];
You can rename the Education component as
Courses
or duplicate it. You can leave it empty and it will be hidden.
I add a config to change highlight color and toggle avatar.
Open src/data/config.ts
export const config = {
avatar: false,
highlight_color: {
bg: "bg-blue-700", // bg-[#00f] for arbitrary color}
text: "text-blue-700", // text-[#00f] for arbitrary color}
},
};
![image](https://private-user-images.githubusercontent.com/2790845/291107743-89a8dff3-774e-4732-b451-845a93e78ba4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzc0My04OWE4ZGZmMy03NzRlLTQ3MzItYjQ1MS04NDVhOTNlNzhiYTQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTBlNjA2MjNjNzdiNzA4MWM0NDk1MjE1NjM0MWE0ZDFlMzU2N2YyYjkxNGJkMDFhZDcyNTc5NGQ4YzAzMjA0ZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.5CzSf7SQwGSFDOEzipwpFMkENzNO1dQ6hxYNtun2F-g)
![image](https://private-user-images.githubusercontent.com/2790845/291107801-386f0c16-fb86-40fb-851e-b2a4c98e999f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzgwMS0zODZmMGMxNi1mYjg2LTQwZmItODUxZS1iMmE0Yzk4ZTk5OWYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NWYxMjcwOTI4MWMxNmQ4YjliOGFjMDQxYWRkODkxYzJmMjUyNWZkM2QyMTMxYWI4Y2ZiYTE1Y2I3ZThkN2YwMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.FCCMNrsQzvk9B6Wt6Uji0FpOtV6PX9qjgi1i0_GwXhw)
![image](https://private-user-images.githubusercontent.com/2790845/291107848-535eea07-5aaf-4c7b-a747-dda6feaa4d5b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzg0OC01MzVlZWEwNy01YWFmLTRjN2ItYTc0Ny1kZGE2ZmVhYTRkNWIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDRhNzc1ZmEyZDYwNjBjYmNjNzViYzc5NWM2NTI0NGEwYjA0NWQ0MmY4MzA0YWM4NTIyN2FkNTU4NDJmZDI1OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.wQes7VMBM_8hxuQBO_TuNPDq7rxqfwzKTACTcC3DCTM)
![image](https://private-user-images.githubusercontent.com/2790845/291108001-fbcb3fad-5219-4678-b948-363d0ca95bd9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwODAwMS1mYmNiM2ZhZC01MjE5LTQ2NzgtYjk0OC0zNjNkMGNhOTViZDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDg1MzYzZGVlMTc0ZmU3OGZlZTY5YmYwMTc1M2UwOTExNzZhYmNlNGU4YzdiNmQ1NTQwNTk3OThlNGJmNWU5ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.8rpBHucy5bZcty48x7yLoS2ztVO3wkGvyJnXdtjaaOI)
When you print, you can set A4
or Letter
.
Set Margins
to None
Disable Print headers and footers
Enable Print backgrounds
The save as PDF, in this way all links will work fine.
![image](https://private-user-images.githubusercontent.com/2790845/291107419-6ebc5243-d0de-4ee9-8605-d7e32cd16741.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzQxOS02ZWJjNTI0My1kMGRlLTRlZTktODYwNS1kN2UzMmNkMTY3NDEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODQ3MGVmNDdiODQ3NWMzN2I3NDU2MWM3MzcwOWE2ZWEyOTU4YmE0ZDcxYmUzMjQ2ZTlmMWQ0ZmRkNjgyZjk0NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Rbv6zhZF6n-vF9YnSQ_I4n7FyxT9NJLcPhrXFCIBiYg)
![image](https://private-user-images.githubusercontent.com/2790845/291107550-efe4e9b7-9559-454b-acef-ff538ae2bba2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyODIwOTAsIm5iZiI6MTcyMDI4MTc5MCwicGF0aCI6Ii8yNzkwODQ1LzI5MTEwNzU1MC1lZmU0ZTliNy05NTU5LTQ1NGItYWNlZi1mZjUzOGFlMmJiYTIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMTYwMzEwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmFkZmViOWQ4MTlmYjFlN2YwNjE2ZGQwY2FkNzM1ZmVhMTY0MzkzNTIzNGFiNDNiMWQ1M2U0NTMzZjFkODcxMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.4ONX5aM80D4v2gZ67amXrYHwnApvllanZnkrzFy7nsg)
To get a local copy up and running, please follow these simple steps.
Here is what you need to be able to run Next-Resume
- Node.js (Version: >=18.x)
- Npm
- Repository is a
template
, just .
Click on
Use this template
and thenCreate a new repository
Add an available name and use it asPrivate
, You might want to addphone
.
-
Then you can clone in your local computer or use
codespaces
. -
Install packages with yarn
npm install
-
Run
npm run dev