My résumé, built with NuxtJS and Tailwind CSS
All of the content of this résumé is sourced from
resume-data.json. This file loosely adheres to the
resume.json schema (with some additional properties for display purposes). See the resume.json section below for more info about
resume-data.private.json file can be created alongside
resume-data.json. This file is
.gitignore-ed; its contents will be merged into
resume-data.json when building this résumé. This is used to protect personal info such as phone numbers and addresses, while still allowing this data to appear in locally-generated résumés.
This project's visual style was heavily inspired by the Universal Résumé Template.
As part of the CI pipeline, a
resume.json file that conforms to the
resume.json schema is extracted from
resume-data.json and automatically pushed to a GitLab Snippet and a GitHub Gist. The
ci/generate-resume.json.js script is responsible for this work.
You can view the rendered result at https://registry.jsonresume.org/nfriend.
To generate a résumé locally, simply start the dev server (
yarn dev) and print the web page (⌘/Ctrl+P) as a PDF. In fact, this is exactly how the PDF is generated by the pipeline. Since the pipeline uses headless Chrome, printing the résumé locally using Chrome will provide the most consistent result.
The pipeline generates a PDF using only the public information found in
resume-data.json and does not include any private data specified in
resume-data.private.json. (For example, phone numbers.)
# install dependencies $ yarn # serve with hot reload at localhost:3000 $ yarn dev # generate static project $ yarn generate
For other useful commands, check out the
scripts defined in
yarn script in particular -
yarn html-lint - requires some setup before it will run:
bundle installat the root of this project
yarn generateto generate a production build in
Once these prerequisites have been completed, running
yarn html-lint will run
html-proofer on the output
*.html. This is particularly useful for validating that all external links are still valid.
During deployment, all Nuxt-related
<script> elements are stripped from the compiled HTML. This is accomplished by the
yarn strip-scripts command, which calls
ci/strip-script-elements.js. This works because this application is fully rendered at build time and requires no client-side hydration.
For detailed explanation on how things work, check out Nuxt.js docs.
All résumé content in
resume-data.json (or generated by
ci/generate-resume.json.js) is Copyright Nathan Friend © 2020 and may not be reused without my permission.
All other directories and files are MIT Licensed. If you make use of any code found in this project, a link back to https://gitlab.com/nfriend/nuxt-resume would be appreciated, but is not required.
Icons were sourced from Font Awesome (license). No changes were made to the icons.
Source code: https://github.com/williamhatcher/williamhatcher
License: MIT license
Want to develop a website or re-design using CSS Development?
We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.
For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS
#hire css developer #css development company #css development services #css development #css developer #css
In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.
By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.
Here’s the table of contents for this tutorial for Tailwind CSS:
Read the full tutorial from Themesberg.
#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source
By reading this article you will browse a list of the most popular plugins and extensions for the utility-first CSS framework, Tailwind CSS. Although the default code base of the framework already covers a lot of the needs when building user interfaces, you can never get enough plugins and extensions powered by the open-source community.
One of the requirements for a plugin to appear on this list is to be open-source with no other strings attached so that the developers browsing this list can stay assured that they can use the plugin for their Tailwind CSS powered project.
Check out the list of Tailwind CSS Plugins and Extensions on Themesberg.
#tailwindcss #tailwind #tailwind-css #tailwind-css-plugins #themesberg
Master Tailwind CSS with this Cheatsheet.
Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS.
Just like other CSS libraries like Bootstrap, Tailwind also has responsive classes that we only need to specify in our application.
This article will get you up and started quickly with Tailwind to make beautiful websites and UIs.
Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything.
On top of that, we don’t have to worry about responsivity as all is taken care of by Tailwind on different devices.
A utility-first CSS framework packed with classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. From Tailwind.com.
In this article, we will see the most basic CSS classes and their relative properties in CSS.
#tailwind #css #tailwind-css #tailwindcss #web-development
Tailwind v2.1 was just released with a new JIT Engine, Filter and Backdrop-filter Utilities, and more. Let’s take a look at some of the new features.
A few weeks ago, the Tailwind team released a package they were using to expiriment with a just-in-time compiler for Tailwind. With the release of Tailwind v2.1, the JIT compiler is included in Tailwind core. Just add
mode: 'jit' to your Tailwind config file and configure the
purge property to scan your markup.
#news #tailwind #tailwind css #tailwind css v2.1