diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 14.04.20@2x.png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 14.04.20@2x.png new file mode 100644 index 0000000..e9cbbc9 Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 14.04.20@2x.png differ diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 14.08.09@2x.png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 14.08.09@2x.png new file mode 100644 index 0000000..356f4ef Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 14.08.09@2x.png differ diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.16.16@2x.png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.16.16@2x.png new file mode 100644 index 0000000..27b688a Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.16.16@2x.png differ diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.19.41@2x.png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.19.41@2x.png new file mode 100644 index 0000000..333789c Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.19.41@2x.png differ 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 new file mode 100644 index 0000000..a887556 Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.21.01@2x.png differ diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.22.45@2x.png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.22.45@2x.png new file mode 100644 index 0000000..45f09af Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.22.45@2x.png differ diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x (1).png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x (1).png new file mode 100644 index 0000000..735fbca Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x (1).png 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 new file mode 100644 index 0000000..735fbca Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.26.29@2x.png differ diff --git a/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.28.33@2x.png b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.28.33@2x.png new file mode 100644 index 0000000..a32add9 Binary files /dev/null and b/docs/.gitbook/assets/CleanShot 2023-01-28 at 16.28.33@2x.png differ diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..221eca8 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,20 @@ +# Introduction + +## What is DevsCard? + +DevsCard is a fully customizable template to create your online resume without writing a single line of code. After forking the repository, you only need to update the initial data with your own and deploy the project. + +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. + diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md new file mode 100644 index 0000000..43efdf2 --- /dev/null +++ b/docs/SUMMARY.md @@ -0,0 +1,12 @@ +# Table of contents + +* [Introduction](README.md) +* [Quick setup guide](quick-setup-guide.md) + +## External links + +* [Example resume](https://devscard.netlify.app) + +*** + +* [GitHub repository](https://github.com/KonradSzwarc/devscard) diff --git a/docs/quick-setup-guide.md b/docs/quick-setup-guide.md new file mode 100644 index 0000000..9e3cf1a --- /dev/null +++ b/docs/quick-setup-guide.md @@ -0,0 +1,70 @@ +# Quick setup guide + +## 1. Run the project locally + +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`. + +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-cv`. Generated resume will be placed in `public/cv.pdf` and use the same data as the web one (without testimonials and favorites sections). To customize it, go to the \[PDF customization] docs. + +## 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". + +
+ +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).