# Setup guide

## 1. Run the project locally

1\. Create a fork of the [project repository](https://github.com/KonradSzwarc/devscard).

<figure><img src="https://3007810712-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfiRSARj1dkEdneoGliug%2Fuploads%2FUlcnliZ7hoRiMzLvU8vK%2FCleanShot%202023-01-28%20at%2014.04.20%402x.png?alt=media&#x26;token=ff071efd-26b1-4004-af40-6f5384809c62" alt=""><figcaption></figcaption></figure>

2\. Go to the forked repository and clone it to your local machine.

<figure><img src="https://3007810712-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfiRSARj1dkEdneoGliug%2Fuploads%2FQV0CJq8hXbwG2spDvn4e%2FCleanShot%202023-01-28%20at%2014.08.09%402x.png?alt=media&#x26;token=0d7f03a7-07b0-4197-850a-85b4bdb1d760" alt=""><figcaption></figcaption></figure>

3\. Open the cloned project in your IDE of choice and run `npm install`.

4\. Invoke `npm run dev` in the project's root directory and go to `http://localhost:3000`. You should see a resume website filled with initial data.

## 2. Provide your data

#### Basics

To fill the CV with your data, go to the `src/data` directory. There you should focus on three places:

* `config.ts` — use it to provide metadata of your website and set up its locales.
* `sections` — contains files with data for each section of the resume.
* `helpers` — helper functions you can utilize to reduce the amount of repetitiveness when setting up your socials and skills.
  * `links.ts` — functions that ensure you always use the same icon and name when providing links to external websites. We provide the most popular socials out-of-the-box, so there is a chance you won't edit anything in this file.
  * `skills.ts` — one place where you define your skills to reuse them in multiple sections. You can remove the skills used in the example template and replace them with your own.

#### **Tips**

* You can hover over each configuration property to get its description.
  * Some property descriptions start with `[WEB]` or `[PDF]`. It means those properties are used only in the web/pdf version of the resume.
* Although you can provide URLs for images, we highly recommend putting all images in the `src/assets` directory and importing them using the `import` statement. This way, images will be auto-optimized, so you won't have to worry about their dimensions.
  * To know the aspect ratio of an image, hover over the `image` property.

## 3. Generate PDF (optional)

Within the main section, you will find an `action` property. It allows you to provide a pdf resume to download. If you don't have one, feel free to use our CV generator by invoking `npm run generate-pdf`. Generated resume will be placed in `public/cv.pdf` and use the same data as the web one. You can learn more about PDF generation [here](pdf-generation).

## 4. Deploy to Netlify

{% hint style="info" %}
As the resume is entirely static, you can deploy it to any hosting provider. In this guide, we use Netlify as it's free and easy to set up.
{% endhint %}

1\. Create a commit for your CV updates and push it to GitHub.

2\. Create a [Netlify](https://www.netlify.com/) account.

3\. Go to the "Sites" tab and choose "Import from Git".

<figure><img src="https://3007810712-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfiRSARj1dkEdneoGliug%2Fuploads%2FK5TaGLfqC2WgNPHZQ0IX%2FCleanShot%202023-01-28%20at%2016.16.16%402x.png?alt=media&#x26;token=e092560d-82c1-4c32-a731-cb4274306325" alt=""><figcaption></figcaption></figure>

4\. Connect Netlify with your GitHub account.

<figure><img src="https://3007810712-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfiRSARj1dkEdneoGliug%2Fuploads%2FSpJcGFa6oM5yBsx1SQiC%2FCleanShot%202023-01-28%20at%2016.19.41%402x.png?alt=media&#x26;token=839950dc-0e65-44e9-918c-5a02a5073e6c" alt=""><figcaption></figcaption></figure>

5\. Pick a repository with your forked project

<figure><img src="https://3007810712-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfiRSARj1dkEdneoGliug%2Fuploads%2FMdwQm5tQIiQl3GfEYhUZ%2FCleanShot%202023-01-28%20at%2016.22.45%402x.png?alt=media&#x26;token=4f6b6ef7-4b9c-44a3-b73a-df6bb16518df" alt=""><figcaption></figcaption></figure>

6\. On the last step, go with the default settings suggested by Netlify and click "Deploy site".

<figure><img src="https://3007810712-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfiRSARj1dkEdneoGliug%2Fuploads%2F0rg9NZymJ2MNcc5fKG8E%2FCleanShot%202023-01-28%20at%2016.26.29%402x.png?alt=media&#x26;token=24d7c7bc-f193-45b2-9e8e-0f1f09ee68f4" alt=""><figcaption></figcaption></figure>

7\. After around one minute, your resume will be live 🎉

<figure><img src="https://3007810712-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfiRSARj1dkEdneoGliug%2Fuploads%2F03lGkycMsCzfy8zYIcZt%2FCleanShot%202023-01-28%20at%2016.28.33%402x.png?alt=media&#x26;token=4a988d3a-565f-4e48-a41a-b752f718d41f" alt=""><figcaption></figcaption></figure>

From now on, each push to `main` branch will cause redeploy of the Netlify website. You may want to go to the "Site settings" tab to update your site name or even [set up your domain](https://youtu.be/bY7Tkh9Vz8I).
