Giter Club home page Giter Club logo

dev-cv's Introduction

Open Source Love License: MIT

Top contributors

About DevCV

I got many great responses on my article about How To Write A Promising CV - thank you for that.

I've been asked many times which tool is the best to create a CV like mine - easily and for free. So I thought, why not develop our own tool? Together, open source, as part of Hacktoberfest 2022?

Read more about the project in the project's wiki.

Note: Merge reviews are done every Saturday. ๐Ÿ˜‡

Design of the app

Please go to the discussions section of the project where I opened a discussion about the app's design and work together on a great design for the app.

How to contribute

This project aims to be a beginner friendly way to your first contribution to open source. If you are looking to make your first contribution, follow the steps below.

fork this repository

Prerequisites

If you don't have git on your machine, install it. If you don't have node on your machine, install it.

Fork this repository

Fork this repository by clicking on the fork button on the top of this page. This will create a copy of this repository in your account.

Clone the repository

clone this repository

Now clone the forked repository to your machine. Go to your GitHub account, open the forked repository, click on the code button and then click the copy to clipboard icon.

Open a terminal, go to the directory where you want the project to be saved and run the following git command:

git clone "url you just copied"

where "url you just copied" (without the quotation marks) is the url to this repository (your fork of this project). See the previous steps to obtain the url.

copy URL to clipboard

For example:

git clone https://github.com/this-is-you/dev-cv.git

where this-is-you is your GitHub username. Here you're copying the contents of the dev-cv repository on GitHub to your computer.

Create a branch

Change to the repository directory on your computer (if you are not already there):

cd dev-cv

Open the project in Visual Studio Code (or your favorite code editor):

code .

Install the dependencies:

npm install

Run the project:

npm start

Now create a branch using the git checkout -b command:

git checkout -b your-new-branch-name

For example:

git checkout -b name-of-issue

Make necessary changes and commit those changes

git status

If you go to the project directory and execute the command git status, you'll see there are changes.

Add those changes to the branch you just created using the git add command:

git add filename

Now commit those changes using the git commit command:

git commit -m "Name of issue"

Commit message

There are different ways of writing a commit message. For more reference checkout the article about How to write a good commit message.

For this project we are going to use following style:

type-of-issue- + number-of-issue[action you took]

Practical example:

feature-11[Fix typo in README.md]

Push changes to GitHub

Push your changes using the command git push:

git push origin -u <add-your-branch-name>

replacing <add-your-branch-name> with the name of the branch you created earlier.

Submit your changes for review

If you go to your repository on GitHub, you'll see a Compare & pull request button. Click on that button.

create a pull request

Now submit the pull request.

submit pull request

Soon I'll be merging all your changes into the master branch of this project. You will get a notification email once the changes have been merged.

Where to go from here?

Congrats! You just completed the standard fork -> clone -> edit -> pull request workflow that you'll encounter often as a contributor!

Celebrate your contribution and share it with your friends and followers on your social media accounts.

Now let's get you started with your next contribution, wether on this or any other great open source projects on GitHub.

Have fun ๐Ÿ‘ป!

dev-cv's People

Contributors

dugarrishab avatar fomonyuytar-joseph avatar hariscs avatar littlemissbuttons avatar manthan-kuber avatar mohit-aasirwal avatar monicafidalgo avatar musfiqdehan avatar shishusidharth avatar sowmiyeh avatar utkarsh1311 avatar vinitvh avatar yuridevat avatar

Stargazers

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

dev-cv's Issues

[FEATURE] Form Professional Experience

Description

As a User, I want to see a form in which I can add my professional experience.

Create a form with following input elements

  • Title
  • Subtitle
  • City
  • Country
  • Start Date
  • End Date
  • Description
  • Save button
  • Cancel button

Acceptance Criteria (AC) for beginners

  • Create a component called ProfessionalExperience.js and save it in a folder called components in the src directory
  • Heading: Professional Experience
  • Form with above mentioned fields
  • Inputfields must be editable
  • Input fields are accessible
  • Save button does not require functionality
  • No stylings but plain html
  • The new component is imported and displayed in the App.js component
  • Only the new component is displayed

Additional AC if you are more experienced

  • Save data in localStorage

Screenshots

No response

Additional information

Please do not hesitate to ask me about accessible forms in case you are unsure.
Accessibility and your inexperience with this topic should not be the reason you are not work on this issue, but to learn about it.

[FEATURE] Form Certificates

Description

As a User, I want to see a form in which I can add my certificates.

Create a form with following input elements

  • Certificates
  • Additional Information
  • Save Button
  • Cancel Button

Acceptance Criteria (AC) for beginners

  • Create a component called Certificates.js and save it in a folder called components in the src directory
  • Heading: Certificates
  • Form with above mentioned fields
  • Inputfields must be editable
  • Input fields are accessible
  • Save button does not require functionality
  • No stylings but plain html
  • The new component is imported and displayed in the App.js component
  • Only the new component is displayed

Additional AC if you are more experienced

  • Save data in localStorage

Screenshots

No response

Additional information

Please do not hesitate to ask me about accessible forms in case you are unsure.
Accessibility and your inexperience with this topic should not be the reason you are not work on this issue, but to learn about it.

Download button

Description

Why download button is present at header we can remove it and put it in the end

Screenshots

No response

Additional information

No response

[FEATURE] Add a Prettier config file

Description

The project currently doesn't have a style convention for the contributors to follow. Due to this, code from different contributors can have different styles.

Adding a Prettier config will have the following benefits:

  • Establish a uniform coding style across the project.
  • Helps developers to write code in a similar manner.
  • Helps in reducing unnecessary lines breaks, indentation, spaces etc.
  • Makes it easy to automatically format code in editors like VS Code.

Screenshots

No response

Additional information

No response

App Design

What would you like to share?

All the input box should be styled to look cool.

Additional information

Input boxes with label can be styled with MUI to look cool.

[FEATURE] Add empty component in DIN A4 format to store values

Description

There has to be an empty component where all the data of the form can be stored.

Acceptance Criteria (AC)

  • Create a component called CV.js and save it in a folder called components in the src directory
  • The component is in format of DIN A4 (ratio, of course it can be smaller)
  • Additional styling: Only a border is added to showcase the component
  • The new component is imported and displayed in the App.js component

Screenshots

No response

Additional information

No response

[FEATURE] Form Personal Information

Description

As a User, I want to see a form in which I can add my personal information.

Create a form with following input elements

  • Fullname (required)
  • Job Title
  • Email
  • Phone number
  • Address (simplified)
  • Link to GitHub (recommended)
  • Link to Portfolio (optional)
  • Link to Linkedin (optional)
  • Save button
  • Cancel button

Acceptance Criteria (AC) for beginners

  • Create a component called PersonalInformation.js and save it in a folder called components in the src directory
  • Heading: Personal Information
  • Form with above mentioned fields
  • Inputfields must be editable
  • Fullname throws error when not filled out
  • Input fields are accessible
  • Save button does not require functionality
  • No stylings but plain html
  • The new component is imported and displayed in the App.js component
  • Only the new component is displayed

Additional AC if you are more experienced

  • Save data in localStorage

Screenshots

No response

Additional information

Please do not hesitate to ask me about accessible forms in case you are unsure.
Accessibility and your inexperience with this topic should not be the reason you are not work on this issue, but to learn about it.

Destructuring Header Component: Download button not visible

Description

Currently, the download button is not visible but lies under the header component. Also, the header component has no header tag and is therefore not accessible.

Acceptance criteria

  • change the nav to header tag (since there is no navigation the nav would be inaccurate to use)
  • delete all unnecessary tags
  • wrap logo and name into the same tag
  • set the alt text of the logo image to alt=""
  • change h2 of Name to span, with no className
  • add DownloadButton.js into the Header.js component, after the logo
  • use display: flex, and justify-content: space-between to let the logo appear on the left and the DownloadButton appear on the right side
  • delete all unused CSS for this component
  • move and adjust the inline style of the button into the index.css file.
  • move content of Header.css to index.css (and delete the now empty component)
  • change backgroung-color of nav to white and set a box-shadow

Write className like
header, header-logo, button-download

Screenshots

Header component

Header component with a logo and name placeholder. Download button cannot be seen

Source code

Source code of header component and download button

Additional information

Please make sure your fork has the latest updates before opening a pull request (PR).

[FEATURE] Logo Design

Description

Create a Logo DevCV which will be showcased later on in the Header and/or Footer as well as Icon.

Acceptance Criteria

  • The Logo's color is accessible. For more information check out WebAIM's article about color contrast.
  • The Logo is saved as SVG called logo.svg
  • The Icon is saved as favicon.ico
  • A folder is created in the public directory and called "images"
  • The Logo is saved in the new folder called "images"
  • The old favicon from react is replaced by the new created favicon

Screenshots

No response

Additional information

If you do not know how to use git, no worries. I will help you with it to make sure you get the Hacktoberfest-accepted badge.

Add space to main to avoid being cut off from Header

Description

Since the position of the header is fixed it cuts off part of the main content. Add space to the main content in be fully visible.

Acceptance criteria

  • Space is added to avoid main content from being cut off
  • After some research the most appropriate CSS attribute is chosen (margin, padding, ..)

Screenshots

Header cuts off main content

Additional information

No response

[FEATURE] Button Download

Description

Create a button called Download with an icon next to the text.

Acceptance Criteria (AC)

  • Create a component called DownloadButton.js and save it in a folder called components in the src directory
  • The icon has to be an svg
  • Create a folder in the public directory and call it "images"
  • Save the svg in the new folder called "images"
  • Button does not require functionality
  • No stylings but plain html
  • The new component is imported and displayed in the App.js component
  • Only the new component is displayed

Screenshots

No response

Additional information

Please do not hesitate to ask me about accessible forms in case you are unsure.
Accessibility and your inexperience with this topic should not be the reason you are not work on this issue, but to learn about it.

Personal Information Accessibility Issue

Description

  1. Make sure all input fields are accessible.

Currently, the axe DevTools are showing that

Issue Description

Ensures every id attribute value used in ARIA and in labels is unique

To reproduce the issue, install the axe DevTools extension and run it.

Screenshots

No response

Additional information

For further instructions on how to make the component accessible, please read the following:

Add "skip to main" link

Description

Add a skip to main link to the project by following the instructions of WebAIM on how to do so.

Acceptance criteria (AC)

  • content (all the form components) is wrapped into a main tag
  • the skip link should be invisible and only appears when using the tab key

Screenshots

No response

Additional information

Suggestion on how to hide the skip link and make it visible when receiving focus. Should be tested.

.skip-link {
  left: 0;
  padding: 8px;
  position: absolute;
  top: -50px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

[FEATURE] Form Programming Expertise

Description

As a User, I want to see a form in which I can add my programming expertise.

Create a form with following input elements

  • Title
  • Subtitle
  • City
  • Country
  • Start Date
  • End Date
  • Description
  • Save button
  • Cancel button

Acceptance Criteria (AC) for beginners

  • Create a component called ProgrammingExpertise.js and save it in a folder called components in the src directory
  • Heading: Programming Expertise
  • Form with above mentioned fields
  • Inputfields must be editable
  • Input fields are accessible
  • Save button does not require functionality
  • No stylings but plain html
  • The new component is imported and displayed in the App.js component
  • Only the new component is displayed

Additional AC if you are more experienced

  • Save data in localStorage

Screenshots

No response

Additional information

Please do not hesitate to ask me about accessible forms in case you are unsure.
Accessibility and your inexperience with this topic should not be the reason you are not work on this issue, but to learn about it.

[FEATURE] Form Education

Description

As a User, I want to see a form in which I can add my education.

Create a form with following input elements

  • Degree
  • School
  • GPA
  • City
  • Country
  • Start Date
  • End Date
  • Description
  • Save button
  • Cancel button

Acceptance Criteria (AC) for beginners

  • Create a component called Education.js and save it in a folder called components in the src directory
  • Heading: Education
  • Form with above mentioned fields
  • Inputfields must be editable
  • Input fields are accessible
  • Save button does not require functionality
  • No stylings but plain html
  • The new component is imported and displayed in the App.js component
  • Only the new component is displayed

Additional AC if you are more experienced

  • Save data in localStorage

Screenshots

No response

Additional information

Please do not hesitate to ask me about accessible forms in case you are unsure.
Accessibility and your inexperience with this topic should not be the reason you are not work on this issue, but to learn about it.

[FEATURE] Form Skills

Description

As a User, I want to see a form in which I can add my skills.

Create a form with following input elements

  • Technical skills
  • Business Skills
  • Programming Languages
  • Tools
  • Languages
  • Save button
  • Cancel button

Acceptance Criteria (AC) for beginners

  • Create a component called Skills.js and save it in a folder called components in the src directory
  • Heading: Skills
  • Form with above mentioned fields
  • Inputfields must be editable
  • Input fields are accessible
  • Save button does not require functionality
  • No stylings but plain html
  • The new component is imported and displayed in the App.js component
  • Only the new component is displayed

Additional AC if you are more experienced

  • Save data in localStorage

Screenshots

No response

Additional information

Please do not hesitate to ask me about accessible forms in case you are unsure.
Accessibility and your inexperience with this topic should not be the reason you are not work on this issue, but to learn about it.

[FEATURE] Add Tailwind CSS for styling and responsiveness

Description

This app doesn't have any styling and it's not responsive on small screens.
i suggest we should add tailwind CSS to it for styling. tailwind is easy to set up and there are a lot of developers using it.

Screenshots

No response

Additional information

No response

[FEATURE] Header

Description

Create a Header with any logo as a placeholder until #1 is finished. (Will be another issue).

Acceptance Criteria (AC)

  • Create a component called Header.js and save it in a folder called components in the src directory
  • A header is shown with a logo and the name in it
  • Plain HTML, no styling added
  • The header meets accessibility standards like semantic HTML
  • The header is fixed (stays at its position even when scrolling)
  • The new component is imported and displayed in the App.js component
  • Only the new component is displayed

Screenshots

No response

Additional information

No response

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.