{"id":22783256,"url":"https://github.com/gregolive/cv-builder","last_synced_at":"2026-04-07T08:32:33.089Z","repository":{"id":183622982,"uuid":"473048523","full_name":"gregolive/cv-builder","owner":"gregolive","description":"Build an online resume that adapts to any screen size.","archived":false,"fork":false,"pushed_at":"2022-03-27T15:02:43.000Z","size":2585,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-03T00:38:25.777Z","etag":null,"topics":["javascript","react"],"latest_commit_sha":null,"homepage":"https://gregolive.github.io/cv-builder/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gregolive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-23T05:27:17.000Z","updated_at":"2022-03-27T13:48:46.000Z","dependencies_parsed_at":"2023-09-05T02:15:57.187Z","dependency_job_id":null,"html_url":"https://github.com/gregolive/cv-builder","commit_stats":null,"previous_names":["gregolive/cv-builder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gregolive/cv-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fcv-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fcv-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fcv-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fcv-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregolive","download_url":"https://codeload.github.com/gregolive/cv-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fcv-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31506562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react"],"created_at":"2024-12-11T22:07:27.459Z","updated_at":"2026-04-07T08:32:33.068Z","avatar_url":"https://github.com/gregolive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CV Builder\n\nEnter your information to build an online resume that is beautifully formatted at any screen size.\n\n[Live demo](https://gregolive.github.io/cv-builder/) 👈\n\n## Functionality\n\n- The resume is broken into 5 sections: Personal Information, Personal Statement, Experience, Education, and Skills\n- Personal Information and Personal Statement are treated as 'static sections' and Experience, Education, and skills are 'dynamic sections' that allow users to add additional jobs/degrees/skills\n- Each sections is saved seperately and a button on the top right of each section allows users to swtich between a 'normal mode' where the section and its inputs are formatted like a CV and an 'edit mode' that allows users to edit/delete the inputs\n- The sections entered data (React \u003ccode\u003estate\u003c/code\u003e) is saved in the user's browser via Javascript's Web Storage API \n- Each input group in a dynamic section is assigned a random id key generated via \u003ccode\u003euniqid\u003c/code\u003e\n- Date field's are set using a date-picker input and \u003ccode\u003edate-fns\u003c/code\u003e functions help to format dates in 'normal mode'\n\n## Reflection\n\nThis project represented my first 'big' undertaking with React and was an opportunity to solidify my knowledge of \u003ccode\u003eprops\u003c/code\u003e and \u003ccode\u003estate\u003c/code\u003e. One difficulty I ran into at first was the ability to add multiple job/degree/skill inputs dynamically and correctly implement a \u003ccode\u003ehandleChange\u003c/code\u003e function with multiple inputs. At first I tried using \u003ccode\u003eprevState\u003c/code\u003e and a few other methods that would not allow for the use of \u003ccode\u003esetState\u003c/code\u003e without hard coding a specific object key. Eventually I came across the teachique of storing of storing the object ket in an input's \u003ccode\u003ename\u003c/code\u003e attribute and used the following to handle inputs changes:\n\n````\nhandleChange = (e) =\u003e {\n  this.setState({\n    education: {\n      ...this.state.education, \n      [e.target.name]: e.target.value,\n    }\n  });\n};\n````\n\nEditing inputs that had multiple entries presented a similar problem, but I used a similar technique and matched id values to target the proper input:\n\n````\neditEducation = (e, targetId) =\u003e {\n    this.setState({\n      educations: this.state.educations.map((edu) =\u003e {\n        if (edu.id === targetId) { edu[e.target.name] = e.target.value };\n        return edu; \n      }),\n    });\n  };;\n};\n````\n\nA final roadblock I encountered related to using \u003ccode\u003elocalStorage\u003c/code\u003e and \u003ccode\u003esetState\u003c/code\u003e. Since setting state in React is asynchronous, there were times when the state was not set properly when saving or fetching data with \u003ccode\u003elocalStorage\u003c/code\u003e,. I was able to fix this by when fetching data with:\n\n````\nthis.forceUpdate();\n````\n\nAnd when saving data by implementing the save function in \u003ccode\u003esetState\u003c/code\u003e's callback:\n\n````\n saveEducation = () =\u003e {\n    this.setState({\n      ...\n    }, () =\u003e this.storeState());\n  };\n````\n\nI am unsure, however, if there is a more elegent way of completeing this, especially in the case of using \u003ccode\u003eforceUpdate\u003c/code\u003e.\n\n## Screenshot\n\n\u003cimg src='./screenshot.jpg' alt='CV builder screenshot'\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregolive%2Fcv-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregolive%2Fcv-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregolive%2Fcv-builder/lists"}