designing features and built with pages

This commit is contained in:
Amruth Pillai
2020-03-29 11:42:03 +05:30
parent 29abae8c5e
commit 75506420e8
11 changed files with 63 additions and 2 deletions

View File

@ -4,5 +4,46 @@ title: Built With
# Built With
- React
- Tailwind CSS
## ReactJS + Hooks 🎉
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Hooks solve a wide variety of seemingly unconnected problems in React that weve encountered over five years of writing and maintaining tens of thousands of components. Whether youre learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
[Learn more → ](https://reactjs.org/)
## Tailwind CSS
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
[Learn more → ](https://tailwindcss.com/)
## Lodash
A modern JavaScript utility library delivering modularity, performance & extras. Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.
[Learn more → ](https://lodash.com/)
## Google Fonts
Google Fonts is a great repository of open type fonts that are allowed to be used on the web. Reactive Resume uses Google Fonts to load different font families and allow the user to choose which font he/she would like on their resume.
[Learn more → ](https://fonts.google.com/)
## Material Icons
Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.
[Learn more → ](https://material.io/resources/icons/)
## PostCSS
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
[Learn more → ](https://postcss.org/)
## PurgeCSS
PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.
[Learn more → ](https://github.com/FullHuman/purgecss)

View File

@ -6,34 +6,54 @@ title: Features
I've tried to maintain some core principles to the app that will always remain unchanged, just to set a fixed direction in which development and ideas can move forward.
<p style="text-align: center">
<iframe width="100%" height="420" src="https://www.youtube.com/embed/4OM0LEPzDO8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
## Secure
![](./images/4.png)
It is entirely secure, as in, your information never leaves the browser, powered by web technologies (HTML5 Local Storage API) that allow for data to be stored locally and quickly.
## Offline
![](./images/7.png)
The app is a PWA and also has no connection to any servers, thus keeping it entirely offline. It survives refreshes, disconnections, and can also be exported or imported through JSON.
## Customizable
![](./images/9.png)
Choose your fonts, play with the colors, pick any layout by merely enabling/disabling sections. A simple and easy to use interface that helps you get a resume in no time!
## Templates
![](./images/8.png)
I've been continuously designing new templates and will be releasing new ones as I have the time. Please support development by using the app and leaving a like/comment or sharing it with your peers.
## Portable
![](./images/2.png)
Your information can be exported to JSON and imported back into the application from anywhere, all you need is your JSON file. This feature makes it easy to update your resume, upload your file (or have it preloaded from local storage), edit the resume and download it again or print it as PDF.
## Minimalistic Design
![](./images/1.png)
As a designer, I felt I had to put this over the top of all other features. Built with minimalism and minimal interaction in mind, it looks clean, is simple to use, and I only hope to make the process more streamlined through your inputs and feedback.
## Progressive Web App
![](./images/4.png)
The web app is responsive, which means you can edit your resume on your phone as well and even install it as an app if you're on Android/Chrome. The app is quick to load and would also work if your internet is disconnected.
## Free and Open-Source
![](./images/7.png)
As with all my projects, I made the app only to help others, so it will always remain free, and I would not be monetizing on it at any point. But if you do feel generous, [I'm open to donations](https://opencollective.com/reactive-resume).

BIN
docs/features/images/1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

BIN
docs/features/images/2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

BIN
docs/features/images/3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 KiB

BIN
docs/features/images/4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 KiB

BIN
docs/features/images/5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

BIN
docs/features/images/6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

BIN
docs/features/images/7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 535 KiB

BIN
docs/features/images/8.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 404 KiB

BIN
docs/features/images/9.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB