Demo:
First react project that builds interactive Resume web app.
Features
- Change of palette and Resume layout in Personalization menu.
- A bar to clear Resume or reveal a sample.
- Download Resume
- Hide Resume to get larger Interface to Input.
- Real-time feedback of what input is expected (from animated placeholders)
- Two input fields for respective sections (Education & Profession). More than two can disrupt Resume UI, so it's intentional.
- Icons that are still visible in dark mode.
- Appealing UI
To solidify concepts of React Fundamentals
in JavaScript.
Developers, users, recruiters.
Note
Users can install all dependencies using package.json
file via:
npm install
Invert
File | Description |
---|---|
src/* |
Source files that are bundled into the output directory dist/ . |
src/index.jsx |
The main JavaScript entry point that bundling begins. |
src/App.jsx |
Main component where overall structure and other layout components of the app are contained. |
src/assets/* |
All assets(imgs, icons, vids) used in website. |
src/components/animateText.js |
Animates placeholders, required and optional status. |
src/components/getNodes.js |
Selects nodes from DOM. |
src/components/sample.js |
Updates Resume when cleared or revealed in Navigation. |
src/components/nav.js |
Responsible for every logic in Nav, including dialog. |
src/components/responsiveTyping.js |
Adds real-time update of Resume from inputs. |
src/components/inputFields.js |
Responsible for every logic in input fields. |
src/styles/App.css |
Main stylesheet for entire website. |
dist/* |
Output files from bundling of files in directory src/ . |
dist/main.js |
Main JavaScript output file that contains the bundled JavaScript code, minified and optimized for deployment. |
package* |
Contains details of project and dependencies versions. |
algorithm.txt |
Algorithm for JavaScript . |
readme-assets/* |
Live demo and different screen views used in README.md . |
Invert
File | Description |
---|---|
src/assets/profile.jpg |
Photo created by Shubham Dhage on Unsplash. |
src/assets/unknown.jpg |
Photo created by Stephan Müller on Pexels. |
Invert
- Use real components with .jsx extension that return jsx.
- Uncomment Skills html, add its input, animated placeholder and make it responsive in Resume.
- Make download occur once at click.
- Downloaded Resume should be visibly the same as on website.
- Add languages.
- Add night mode.
- Add real time feedback when user is typing.
- Add audio in Nav to read Resume.
- Use correct date input formats (Year for Education, Month-Year for Profession).
- Transition input fields section smoothly when Resume is hidden.
- Transition layouts smoothly.
- Add top-align to Layout in Personalization and make Layout a slider.
- Make nav sticky
- Fix inconsistency in placeholder animation cause when tab is changed. (Can restart animation whenever focus on the site changed. Focus also shifts when download button is pressed in phone.)
Important
Seek contributor's consent for any code usage.