{"id":16544852,"url":"https://github.com/lucafaggianelli/resume-stack","last_synced_at":"2025-06-12T00:34:33.892Z","repository":{"id":180988834,"uuid":"665163528","full_name":"lucafaggianelli/resume-stack","owner":"lucafaggianelli","description":"The easiest way to design and maintain your resume with web technologies and generate a PDF from it.","archived":false,"fork":false,"pushed_at":"2023-08-07T07:56:03.000Z","size":1136,"stargazers_count":26,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-08T20:48:08.361Z","etag":null,"topics":["alpinejs","codespaces","css","github-actions","html","pdf","resume","resume-template","scss","tailwindcss","vitejs"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/lucafaggianelli.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":"2023-07-11T15:16:45.000Z","updated_at":"2025-02-14T01:49:11.000Z","dependencies_parsed_at":"2025-02-13T14:44:21.084Z","dependency_job_id":null,"html_url":"https://github.com/lucafaggianelli/resume-stack","commit_stats":null,"previous_names":["lucafaggianelli/resume-stack"],"tags_count":5,"template":true,"template_full_name":null,"purl":"pkg:github/lucafaggianelli/resume-stack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafaggianelli%2Fresume-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafaggianelli%2Fresume-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafaggianelli%2Fresume-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafaggianelli%2Fresume-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucafaggianelli","download_url":"https://codeload.github.com/lucafaggianelli/resume-stack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafaggianelli%2Fresume-stack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259371128,"owners_count":22847522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["alpinejs","codespaces","css","github-actions","html","pdf","resume","resume-template","scss","tailwindcss","vitejs"],"created_at":"2024-10-11T19:04:51.930Z","updated_at":"2025-06-12T00:34:33.872Z","avatar_url":"https://github.com/lucafaggianelli.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Resume Stack\n\nThe easiest way to design your resume with Tailwind\nand automatically export it to PDF via Github Actions.\n\n![An overview of Resume Stack](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/hero.png)\n\n🖐 Don't forget to 🌟 star this repo if you like it!\n💥 More templates are coming!\n\n## 🚀 Get Started\n\n### Codespaces (Quickest ⚡)\n\n\u003e [Codespaces](https://github.com/features/codespaces) is a Github feature that\n\u003e « Spin up fully configured dev environments in the cloud that start in seconds »\n\nClick on the *Code* button in this repo, then on the *Codespaces* tab\nand *Create a Codespace on main*.\n\n![Create a new Codespace](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/create-codespace.png)\n\nA new tab will open in your browser, just wait few seconds and a code editor\nand a preview pane with the resume will appear.\n\n![A Codespace environment with a preview pane](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/codespaces.png)\n\nIf you edit the `resume.json` file, changes will be reflected in the UI.\n\n### Local dev (The standard way)\n\nTo develop your resume locally on your PC you need:\n- [git](https://git-scm.com/downloads)\n- A recent version of [NodeJS](https://nodejs.org/en)\n- The [`yarn`](https://yarnpkg.com/getting-started/install) package manager\n\n1. Create a new repository using `resume-stack` as template,\n    clicking on the green *Use this template* button and then\n    *Create a new repository*.\n    Or, as a shortcut, click on [this link](https://github.com/new?template_name=resume-stack\u0026template_owner=lucafaggianelli).\n\n    ![Create a repo from a template](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/use-this-template.png)\n\n2. Clone the newly created repository via [git](https://git-scm.com/downloads)\n    or equivalent tools (i.e. Github Desktop, etc.) or obtain the source code\n    downloading it as a zip file.\n\n3. Install the project dependencies:\n\n```bash\n# Run this in a terminal\nyarn\n```\n\n4. Run the development server and click on the link printed in the terminal,\n    typically [http://localhost:5173](http://localhost:5173):\n\n```bash\n# Run this in a terminal\nyarn dev\n```\n\n![Browser window with the project running](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/browser-window.png)\n\n\n## Usage\n\nOnce you have the project running, either on Codespaces,\non your computer or anywhere else, you can finally edit\nand export your resume.\n\n### ✍ Content\n\nEdit the `resume.json` file modifying the existing properties.\nIf you don't need something, that is, a specific property or\neven an entire section, you can delete it.\n\n### 📷 Images\n\nTo use images you need to specify their URLs in the `resume.json`\nfile.\n\nIf you have the image yourself, you can add it anywhere into the\n`public/` folder like the `public/logo/company-1.svg` image, in that\ncase the URL of the image is a *relative* one and is equivalent\nto the file path starting after `public`, so in the previous example\nit would be `/logo/company-1.svg`.\n\nImage URLs can also be *absolute*, that is starting with `http://` or `https://`\nlike the one used as an example profile picture\n`https://i.pravatar.cc/150?u=myprofile`, in this case the image\nis hosted by someone else on a server.\n\n### 📃 Export to PDF\n\nTo export your resume in PDF just print the browser page\nfrom the browser menu or\nhitting `Ctrl + P` (win, linux) or `⌘ + P` (mac) on the keyboard.\nThen be sure to select these options:\n\n- PDF format\n- No margins\n- Include background graphics\n\n*(the specific naming may vary depending on OS and browser)*\n\n![Chrome print options](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/print-options.png)\n\n\n### 🎨 Styling\n\nThe resume design can be customized in 2 ways: via a user-friendly\nUI (the *Resume Designer*) or changing the HTML and CSS\nsource code of the resume itself.\n\n#### 🎮 Resume Designer\n\nThe *Resume Designer* provides some styling options in a\nuser friendly UI, the available options depend on the\nspecific resume template in use:\n\n![Resume Designer UI](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/resume-designer-ui.png)\n\nOnce you're happy with the new settings, click on the\n*Copy CSS to clipboard* button and paste the content\ninto the `styles/main.scss` file, you'll find some helpful\ncomment to understand where to paste the code.\n\n#### 👩‍💻 Modify the resume template\n\nIf you want to customize your resume more than what is possible\nvia the Resume Designer, then you need to modify the source code\nitself.\n\nA resume template is defined by an HTML file that contains the\nstructure of the resume and by 1 or more (S)CSS files that contain\nthe styling, specifically these files are:\n\n- `index.html`\n- `styles/main.scss`\n\n\u003e ℹ SCSS is an extension over the CSS language as it provides more\nadvanced features than plain CSS, you're not obliged to use it\nthough!\n\nFor more information on how to customize these files, check the\nsection [Creating a template](#-creating-a-template)\n\n## 🌟 Automatic PDF Export\n\nIf you want to step-up your game and love automations, then you'll\nlove this!\n\nResume Stack includes a Github Actions *Workflow*\nthat automatically generates a PDF from your resume everytime\nyou push a code change to your Github repo.\n\nThe exported PDFs are available as *Releases* in your repo, the\nrelease name is the date of the release, so you can easily\nfind different versions of your resume:\n\n![Resume latest release](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/resume-latest-release.png)\n\nTo download the PDF, just click on the release and find the PDF\namong the assets:\n\n![Download release's PDF](https://raw.githubusercontent.com/lucafaggianelli/resume-stack/main/docs/images/resume-release-details.png)\n\n\n### Setup Github Actions\n\nWhen you create a Github repo from a template or you fork\nanother repo, Github disables the workflows for security\nreasons, so the Workflow included with Resume Stack must be\nmanually enabled:\n\n1. click on the *Actions* tab in your repository\n2. click the *Enable workflow* button\n3. click on the *Settings* tab\n4. in the left-side menu, click on *Actions* \u003e *General*\n5. in *Workflow permissions* choose *Read and write permissions*\n6. save the settings\n\n\u003e 👉 *Read and write permissions* are required by the workflow\n  for creating the releases\n\n## 🤷‍♀️ What's a stack?\n\nIn the software jargon a *stack* is a set of components used to execute an\napplication or more generally a system.\n\nAnd that's what Resume Stack is, an ensemble of HTML, CSS,\n[TailwindCSS](https://tailwindcss.com/) and *invisible* 👻 JavaScript\nto give you a resume!\n\n\u003e Invisible 🙄 … well behind the scene there's some JavaScript into the stack:\n[AlpineJS](https://alpinejs.dev/) to *connect* the content of your resume\nto the HTML page and [Vite](https://vitejs.dev/)\nto reflect changes in the code to the browser in realtime.\nThough you won't see and you won't write any JavaScript!\n\n## 👩‍🎨 Creating a template\n\n\u003e A more detailed guide on how to create templates is coming\n\nThe `index.html` file support is an [AlpineJS](https://alpinejs.dev/) template,\ncheck their website for the syntax.\n\nThe resume content is available as the `resume` variable in the AlpineJS template.\n\nYou can use [TailwindCSS](https://tailwindcss.com/) classes and custom CSS/SCSS\nstyles, just modify the `styles/main.scss` or create a new file and import it\nin `main.scss`.\n\nThe Resume Designer is setup automatically, it picks the CSS variables defined\nin `main.scss`, you can add other variables to the rule `:root[designer-params] {}`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucafaggianelli%2Fresume-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucafaggianelli%2Fresume-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucafaggianelli%2Fresume-stack/lists"}