This project serves the purpose of having a simple, self-hosted online-CV outside of LinkedIn, Xing, etc.
For a live demo, you can visit cv.schreck.berlin, for which this project was created initially.
The data for the experience, education, publications, projects, volunteering, and contact sections are configured in a JSON format in /src/app/cv-item/data/cv-items.data.*.ts
.
Please notice the division of the education and publications section, which is applied here. This enables you to re-arrange the the sections to your likings.
In the end, this is just an example of how it can be done. Feel free to take it as a template and adjust everything to your needs.
Here is what you will have to change in order to adapt this project for yourself.
src/app/cv-item/data/cv-items.data.*.ts
contains all the configurable content data for the page
src/assets/img/avatar.jpg
with your profile picture (avatar)src/assets/img/cover.jpg
with an image for your overview page, imagine it as a kind of book coversrc/assets/img/item-thumbnails
and add the ones you need (depending on what you configure in src/app/cv-item/data/cv-items.data.*.ts
)src/assets/attachments
and add the ones you need (depending on what you configure in src/app/cv-item/data/cv-items.data.*.ts
)src/favicon.ico
, it contains the icon your browser displays in the task barIn order to comply with the license of this project and the third-party elements in it, please leave the "About" section unchanged as well as the link to it in the footer.
AngularCV offers some feature toggles (a.k.a. feature switches) to adjust the experience of the website. However, some features are part of the basic functionality and should not be deactivated and thus do not have a feature toggle, e.g. the work experience tab.
The feature toggles are defined in src/app/feature-toggle/feature-toggles.data.ts
. Currently, these feature toggles are implemented:
downloadable_pdf
: whether to offer a PDF version of the data (download button will be placed in the header and on the contact page)tab_publications
: whether to show the "publications" tabtab_projects
: whether to show the "projects" tabtab_volunteering
: whether to show the "volunteering" tabcontact_show_about_section
: whether to show the "about this website" section on the contact pagecontact_email_link
: whether to link the email address on the contact page with mailto:
contact_email_remove_at_sign
: whether to replace the @
sign when displaying the email address on the contact page (in order to make it harder to scrape for a crawler)default_language
: which language to use for the navigation menu entries, page titles, etc.localization
: whether to offer the visitor of the website to switch the localization languageBy switching the default_language
feature toggle (see above), you can define which language to choose for navigation menu entries, page titles, etc. You can also let the user switch the language by activating the localization
feature toggle. You will still need to adjust your data in src/app/cv-item/data/cv-items.data.*.ts
to adapt the same language, where *
is a placeholder for the language you defined as default language before.
To add additional languages you need to perform three steps. If you would like to add support for Italian for example it would be this:
src/app/cv-item/data/
with the name cv-items.data.it.ts
(it
in the filename stands for Italian)
cv-items.data.en.ts
(containing the English version)src/app/cv-item/data/cv-items.data.ts
to let the application know about the new language you addedsrc/app/l10n/l10n.data.ts
, copy one if the existing sections (e.g. EN
for English) to a new section IT
and translate all texts (not the keys!). For Italian this is actually already done.See the Angular basic guide for the basics. For more information, visit the Angular website.
After you cloned/forked this project and adjusted it to your needs (configured with your data), you might want to deploy it in order to make it available to anyone.
See my AWS deployment guide for a possible way how to achieve this with Amazon Web Services (AWS).
Alternatively, you can use Uberspace, see the corresponding Uberspace deployment guide.
As another option, you can use GitHub Pages, see the corresponding GitHub Pages deployment guide.
Similar, you can also use GitLab Pages. For this, see the corresponding GitLab Pages deployment guide.
This project uses a free license for WebStorm by benefiting from JetBrains' open source community support program.
This project uses Angular and the Material Design components for Angular. Furthermore, the following third-party sources are included:
The images in the /src/assets/img/item-thumbnails
directory in this repository are property of their respective right owners and do not fall under the license of this repository. They're included for show-case purposes.