Giter Club home page Giter Club logo

angularcv's Introduction

AngularCV

Build Status Codacy Badge Codacy Badge License Latest Release

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.

Configuration

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.

Set Your Own Data

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
    • You can use the current version as a template, but you will need to replace the data with your own
    • There are different use cases configured, so you can see different sets of data, which will be displayed differently in the rendered page
    • Some fields are required, for others there are checks in the frontend. Please try it yourself
    • I recommend sorting the items by descending end-date, so the newest item will be shown on top
  • Replace src/assets/img/avatar.jpg with your profile picture (avatar)
  • Replace src/assets/img/cover.jpg with an image for your overview page, imagine it as a kind of book cover
  • Please delete all images in src/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)
  • Please delete all files in src/assets/attachments and add the ones you need (depending on what you configure in src/app/cv-item/data/cv-items.data.*.ts)
  • Replace src/favicon.ico, it contains the icon your browser displays in the task bar

In 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.

Feature Toggles

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" tab
  • tab_projects: whether to show the "projects" tab
  • tab_volunteering: whether to show the "volunteering" tab
  • contact_show_about_section: whether to show the "about this website" section on the contact page
  • contact_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 language

Localization

By 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.

Add data for another language

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:

  • Create a new file in src/app/cv-item/data/ with the name cv-items.data.it.ts (it in the filename stands for Italian)
    • the easiest way would be to copy an existing file, e.g. cv-items.data.en.ts (containing the English version)
    • translate all the items in the file for the new language
    • you could also choose to show different items or in a different order - but this is not recommended
  • Adjust src/app/cv-item/data/cv-items.data.ts to let the application know about the new language you added
  • In src/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.

Angular Basics

See the Angular basic guide for the basics. For more information, visit the Angular website.

Deployment to Production

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.

Acknowledgments

This project uses a free license for WebStorm by benefiting from JetBrains' open source community support program.

Third Party Stuff

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.

angularcv's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar mellab avatar oyale avatar semantic-release-bot avatar stegschreck avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

angularcv's Issues

Ability to maintain CV data in multiple languages

Follow up for #5

  • display the right localization according to selected language by the visitor (or default from feature-toggle.data)
  • think of fallbacks if the selected language is not available for the CV data

handle bottom margin for thumbnails with height-to-width-ratio > 0.84

e.g.
forced maximum width: 100 px
calculated image height: 93 px
height-to-width-ratio = 0.93

Alternative 1: The bottom 7px for this case should trigger the cv-item mat-card to increase its height by 7px.

Alternative 2: limit image height to 84px. but this will cause the image to be left aligned and not be centered anymore

Alternative 3: set cv-item mat-card min-height to 148px instead of 136px

Deployment Guide for GitHub Pages

Hey @mellab,
I noticed that you successfully adapted this project for yourself. I would be interested in getting your feedback. Therefore, I would kindly ask you to write down the necessary steps you needed to perform in order to use AngularCV in combination with GitHub Pages. I would like to let other interested people profit form your experiences.

Thanks in advance!

multi-language support

Basic idea for the application context (not individual's cv data):

  • having a JSON or properties file per language containing the translated keywords
    • open question: 1 file per language per component or 1 file per language for the entire application?
    • keywords should represent application structure, e.g. education.languages.title
  • depending on which files are present, fill a selection dropdown
  • selection dropdown to be placed in the header
    • header title text placement boundaries to be adjusted
    • language selection is a state. where to store? cookie?

For the individual's CV data (e.g. current employer's name and description) a different approach could be taken.

  • copy of cv-items.data.ts containing same items (or even different?!?) but in different language
  • enriching the structure of existing cv-items.data.ts with a layer representing the language chosen by selected language (see above)

Inspiration

Fix test execution in CI pipeline

From the GitHub Actions logs:

One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: kaios 2.5, op_mini all
- Generating browser application bundles (phase: setup)...
    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
✔ Browser application bundle generation complete.
21 12 2022 00:02:58.422:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
21 12 2022 00:02:58.424:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
21 12 2022 00:02:58.428:INFO [launcher]: Starting browser ChromeHeadless
21 12 2022 00:02:59.347:INFO [Chrome Headless 109.0.5412.0 (Linux x86_64)]: Connected on socket CFawzzlWMFaUyBynAAAB with id 1926[39](https://github.com/StegSchreck/AngularCV/actions/runs/3745353087/jobs/6359701606#step:4:40)30
21 12 2022 00:03:29.351:WARN [Chrome Headless 109.0.5[41](https://github.com/StegSchreck/AngularCV/actions/runs/3745353087/jobs/6359701606#step:4:42)2.0 (Linux x86_64)]: Disconnected (0 times) , because no message in 30000 ms.
Chrome Headless 109.0.5412.0 (Linux x86_64) ERROR
  Disconnected , because no message in 30000 ms.

Chrome Headless 109.0.5412.0 (Linux x86_64) ERROR
  Disconnected , because no message in 30000 ms.
Chrome Headless 109.0.5412.0 (Linux x86_64) ERROR
  Disconnected , because no message in 30000 ms.


✔ Browser application bundle generation complete.
Chrome Headless 109.0.[54](https://github.com/StegSchreck/AngularCV/actions/runs/3745353087/jobs/6359701606#step:4:55)12.0 (Linux x86_64): Executed 0 of 0 DISCONNECTED (30.004 secs / 0 secs)

✔ Browser application bundle generation complete.
Error: Process completed with exit code 1.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.