This is a simple Resume/CV application built with pure JavaScript and Tailwind CSS. It fetches data from various endpoints and displays it on the web page. Timeouts are used to simulate loading spinners. This project is for fun and to practice pure JavaScript. It reflects my experience, skills, and personal details.
https://htmlpreview.github.io/?https://github.com/adamrosloniec/resume/blob/main/index.html
- Pure JavaScript: Used for fetching data from endpoints and updating the DOM.
- Tailwind CSS: Used for styling the application.
- JSON: Data format used for the endpoints.
- Avatar: Displays the user's avatar image.
- Name: Fetches and displays the user's name.
- Role: Fetches and displays the user's role.
- Skills: Fetches and displays a list of the user's skills.
- About: Fetches and displays a brief about section.
- Interests: Fetches and displays a list of the user's interests.
- Experience: Fetches and displays the user's work experience.
- Education: Fetches and displays the user's education history.
- Social Links: Fetches and displays links to the user's social profiles (LinkedIn, GitHub).
-
Clone the repository:
git clone https://github.com/adamrosloniec/readme.git
-
Open
index.html
in your preferred web browser.
The main script file fetches data from various JSON endpoints and updates the HTML content accordingly. Below is a brief overview of the main parts of the code:
The getData
function is a helper function to fetch data from an endpoint and update the DOM with the fetched data. It takes three parameters:
url
: The URL of the JSON endpoint.updateFn
: The function to update the DOM with the fetched data.delay
(optional): A delay to simulate loading time.
Several functions handle updating different parts of the DOM with the fetched data:
getAvatar()
: Updates the avatar image.getInterests(data)
: Updates the interests list.getSocial(data)
: Updates the social links.getExperience(data)
: Updates the experience list.getEdu(data)
: Updates the education list.getName(data)
: Updates the name.getRole(data)
: Updates the role.getAbout(data)
: Updates the about section.getSkills(data)
: Updates the skills list.
The showContent
function is called when the page is fully loaded. It hides the loading spinner and displays the main content. It also initiates data fetching for all sections.
Timeouts are used to simulate loading delays for different sections of the page, creating a fake-loading spinner effect for demonstration purposes.
This project is open source and available under the MIT License.