diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.21.01@2x.png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.21.01@2x.png deleted file mode 100644 index a887556..0000000 Binary files a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.21.01@2x.png and /dev/null differ diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x.png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x.png deleted file mode 100644 index 735fbca..0000000 Binary files a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x.png and /dev/null differ diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 14.08.09@2x.png b/docs/.gitbook/assets/clone-repository.png similarity index 100% rename from docs/.gitbook/assets/CleanShot 2023-01-28 at 14.08.09@2x.png rename to docs/.gitbook/assets/clone-repository.png diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 14.04.20@2x.png b/docs/.gitbook/assets/fork-repository.png similarity index 100% rename from docs/.gitbook/assets/CleanShot 2023-01-28 at 14.04.20@2x.png rename to docs/.gitbook/assets/fork-repository.png diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x (1).png b/docs/.gitbook/assets/netlify-build-settings.png similarity index 100% rename from docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x (1).png rename to docs/.gitbook/assets/netlify-build-settings.png diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.19.41@2x.png b/docs/.gitbook/assets/netlify-connect-github.png similarity index 100% rename from docs/.gitbook/assets/CleanShot 2023-01-28 at 16.19.41@2x.png rename to docs/.gitbook/assets/netlify-connect-github.png diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.28.33@2x.png b/docs/.gitbook/assets/netlify-deployed-site.png similarity index 100% rename from docs/.gitbook/assets/CleanShot 2023-01-28 at 16.28.33@2x.png rename to docs/.gitbook/assets/netlify-deployed-site.png diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.16.16@2x.png b/docs/.gitbook/assets/netlify-import-project.png similarity index 100% rename from docs/.gitbook/assets/CleanShot 2023-01-28 at 16.16.16@2x.png rename to docs/.gitbook/assets/netlify-import-project.png diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.22.45@2x.png b/docs/.gitbook/assets/netlify-pick-repository.png similarity index 100% rename from docs/.gitbook/assets/CleanShot 2023-01-28 at 16.22.45@2x.png rename to docs/.gitbook/assets/netlify-pick-repository.png diff --git a/docs/README.md b/docs/README.md index 221eca8..e61191f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -6,15 +6,14 @@ DevsCard is a fully customizable template to create your online resume without w Apart from the website template, DevsCard offers you plenty of additional features that will make it easier to take care of your online and offline presence, including: -* **✍️ Intellisense** — provide your data in TypeScript files, getting autocompletion and description of each property right in your IDE. -* **📱 Responsiveness** — the resume is created and automatically tested to look great on mobile and desktop devices. -* **🌠 Assets optimization** — all images in your CV are minimized and resized automatically at build time. -* **⚡️ Performance** — get 100 for all Lighthouse metrics, ensuring a great experience for visitors and a high score for search engines. -* **📄 PDF generation** — generate an accompanying PDF version of your CV with one command. -* **🔶 Built-in icon sets** — choose from over 100 000 [Iconify](https://iconify.design/) icons to represent your skills. -* **🌍 I18n** — customize your resume's locale, date formatting, and used translations. -* **🔎 SEO friendly** — the entire website is designed with SEO in mind. All SEO-related config properties are required and well-described. -* **🏭 Favicons generation** — invoke one command to generate all favicons and full app manifest for your website. -* **🛠 Data helpers** — use built-in helpers to define your skills/socials once and reuse them across the configuration. -* **🔀 Data transformers** — utilize type-safe data transformers to create multiple variants of your resume without duplicating your data. - +- **✍️ Intellisense** — provide your data in TypeScript files, getting autocompletion and description of each property right in your IDE. +- **📱 Responsiveness** — the resume is created and automatically tested to look great on mobile and desktop devices. +- **🌠 Assets optimization** — all images in your CV are minimized and resized automatically at build time. +- **⚡️ Performance** — get 100 for all Lighthouse metrics, ensuring a great experience for visitors and a high score for search engines. +- **📄 PDF generation** — generate an accompanying PDF version of your CV with one command. +- **🔶 Built-in icon sets** — choose from over 100 000 [Iconify](https://iconify.design/) icons to represent your skills. +- **🌍 I18n** — customize your resume's locale, date formatting, and used translations. +- **🔎 SEO friendly** — the entire website is designed with SEO in mind. All SEO-related config properties are required and well-described. +- **🏭 Favicons generation** — invoke one command to generate all favicons and full app manifest for your website. +- **🛠 Data helpers** — use built-in helpers to define your skills/socials once and reuse them across the configuration. +- **🔀 Data transformers** — utilize type-safe data transformers to create multiple variants of your resume without duplicating your data. diff --git a/docs/quick-setup-guide.md b/docs/quick-setup-guide.md index 9e3cf1a..cf26d46 100644 --- a/docs/quick-setup-guide.md +++ b/docs/quick-setup-guide.md @@ -4,11 +4,11 @@ 1\. Create a fork of the [project repository](https://github.com/KonradSzwarc/devscard). -
+
2\. Go to the forked repository and clone it to your local machine. -
+
3\. Open the cloned project in your IDE of choice and run `npm install`. @@ -20,18 +20,18 @@ 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. +- `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. +- 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) @@ -49,22 +49,22 @@ As the resume is entirely static, you can deploy it to any hosting provider. In 3\. Go to the "Sites" tab and choose "Import from Git". -
+
4\. Connect Netlify with your GitHub account. -
+
5\. Pick a repository with your forked project -
+
6\. On the last step, go with the default settings suggested by Netlify and click "Deploy site". -
+
7\. After around one minute, your resume will be live 🎉 -
+
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).