Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josh-mchugh/reactjs-resume
Create a clean looking resume with React and Tailwindcss with a web view of a A4 paper.
https://github.com/josh-mchugh/reactjs-resume
fontawesome html reactjs tailwindcss
Last synced: 8 days ago
JSON representation
Create a clean looking resume with React and Tailwindcss with a web view of a A4 paper.
- Host: GitHub
- URL: https://github.com/josh-mchugh/reactjs-resume
- Owner: josh-mchugh
- Created: 2023-03-23T02:48:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-03T00:55:03.000Z (about 1 year ago)
- Last Synced: 2024-04-24T11:55:49.654Z (7 months ago)
- Topics: fontawesome, html, reactjs, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 975 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://codecov.io/gh/josh-mchugh/html-resume)
# ReactJS Resume
> Data Driven ReactJS and Tailwindcss Resume
Create a clean looking resume with ReactJS and Tailwindcss with a web view of a A4 paper.
## Example Image
## Installation
Run npm install to install dependencies.
```bash
$ npm install
```
## Run App
Hot reload and live reload with Vite
```bash
$ npm run dev
```
### Save as PDF
To save as a PDF, use the browsers print functionality but make sure he destination field has `Save to PDF` selected. Also make sure to have `Print backgrounds` enabled so it saves correctly with the background colors.
Save to PDF configuration
Print backgrounds configuration
## Example Data Structure
```json
[
{
"page": 1,
"sideContent": [
{
"templateId": "nameTemplate",
"data": {
"name": "John Doe",
"title": "Web and Graphic Designer"
}
},
{
"templateId": "headerTemplate",
"data": {
"title": "Summary",
"color": "white",
"margins": "mt-10"
}
},
{
"templateId": "objectiveTemplate",
"data": {
"objective": "Rock Star/Ninja can you ballpark the cost per unit for me, for touch base disband the squad but rehydrate as needed sacred cow."
}
},
{
"templateId": "headerTemplate",
"data": {
"title": "CONTACT",
"color": "white",
"margins": "mt-10"
}
},
{
"templateId": "contactTemplate",
"data": {
"phone": "(123) 456-8899",
"email": "[email protected]",
"location": "New York, New York"
}
},
{
"templateId": "headerTemplate",
"data": {
"title": "SOCIAL",
"color": "white",
"margins": "mt-12"
}
},
{
"templateId": "socialTemplate",
"data": [
{
"name": "Facebook",
"icon": "fa-brands fa-facebook",
"url": "https://facebook.com/profile"
},
{
"name": "Twitter",
"icon": "fa-brands fa-twitter",
"url": "https://twitter.com/profile"
},
{
"name": "LinkedIn",
"icon": "fa-brands fa-linkedin",
"url": "https://linkedin.com/profile"
}
]
}
],
"content": [
{
"templateId": "headerTemplate",
"data": {
"title": "WORK EXPERIENCE",
"color": "gray-700",
"margins": ""
}
},
{
"templateId": "experienceTemplate",
"data": {
"experiences": [
{
"name": "Company Name Here",
"title": "Senior Web Developer",
"duration": "Jan 2023 - Present",
"location": "Remote",
"descriptions": [
"Efficiently unleash cross-media information without cross-media value.",
"Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.",
"Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas"
],
"technologies": [
"Photoshop",
"HTML",
"CSS",
"Illustrator",
"PHP",
"JavaScript"
]
},
{
"name": "Company Name Here",
"title": "Senior Web Developer",
"duration": "Jan 2022 – Dec 2022",
"location": "Remote",
"descriptions": [
"Collaboratively administrate empowered markets via plug-and-play networks.",
"Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.",
"Completely pursue scalable customer service through sustainable potentialities."
],
"technologies": [
"Photoshop",
"HTML",
"CSS",
"Illustrator",
"PHP",
"JavaScript"
]
},
{
"name": "Company Name Here",
"title": "Senior Web Developer",
"duration": "Jan 2021 – Dec 2021",
"location": "Remote",
"descriptions": [
"Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce.",
"Proactively envisioned multimedia based expertise and cross-media growth strategies.",
"Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. "
],
"technologies": [
"Photoshop",
"HTML",
"CSS",
"Illustrator",
"PHP",
"JavaScript"
]
}
]
}
},
{
"templateId": "headerTemplate",
"data": {
"title": "PROFESSIONAL SKILLS",
"color": "gray-700",
"margins": "mt-6"
}
},
{
"templateId": "skillsTemplate",
"data": {
"skills": [
{
"name": "",
"showGauge": true,
"items": [
{
"name": "Photoshop",
"value": 4
},
{
"name": "JavaScript",
"value": 4
},
{
"name": "Illustrator",
"value": 2
},
{
"name": "PHP",
"value": 2
},
{
"name": "HTML",
"value": 3
},
{
"name": "WORDPRESS",
"value": 3
},
{
"name": "CSS",
"value": 3
},
{
"name": "JOOMLA",
"value": 3
}
]
}
]
}
},
{
"templateId": "headerTemplate",
"data": {
"title": "EDUCATION",
"color": "gray-700",
"margins": "mt-6"
}
},
{
"templateId": "educationTemplate",
"data": {
"certifications": [
{
"title": "Master Degree in Studies",
"name": "Name of University",
"location": "New York, NY",
"year": "2012"
}
]
}
}
]
}
]
```