Web-based Interactive Resume JavaScript, HTML, CSS
👤 Sharing: AI
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Resume</title>
<style>
/* Basic CSS Styling for layout and appearance */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 80%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #0056b3; /* A shade of blue */
}
.section {
margin-bottom: 20px;
}
.skill-list {
list-style: none;
padding: 0;
}
.skill-item {
display: inline-block;
background-color: #0056b3;
color: white;
padding: 5px 10px;
margin: 5px;
border-radius: 5px;
cursor: pointer; /* Indicate it's clickable */
}
.skill-item:hover {
background-color: #003366; /* Darker shade on hover */
}
/* Styling for the expanded skill information */
.skill-info {
display: none; /* Initially hidden */
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
.skill-info h3 {
margin-top: 0;
color: #0056b3;
}
.skill-info p {
margin-bottom: 0;
}
/* Media query for smaller screens */
@media (max-width: 768px) {
.container {
width: 95%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>John Doe</h1>
<p>Web Developer</p>
<p>johndoe@example.com | (123) 456-7890</p>
</header>
<section class="section">
<h2>Summary</h2>
<p>
A highly motivated and skilled web developer with 5+ years of experience building and maintaining web applications. Proficient in JavaScript, HTML, and CSS. Passionate about creating user-friendly and efficient solutions.
</p>
</section>
<section class="section">
<h2>Skills</h2>
<ul class="skill-list" id="skills">
<li class="skill-item" data-skill="javascript">JavaScript</li>
<li class="skill-item" data-skill="html">HTML</li>
<li class="skill-item" data-skill="css">CSS</li>
<li class="skill-item" data-skill="react">React</li>
<li class="skill-item" data-skill="node">Node.js</li>
</ul>
<!-- Hidden Skill Information Sections -->
<div class="skill-info" id="javascript-info">
<h3>JavaScript</h3>
<p>Expertise in modern JavaScript (ES6+) including asynchronous programming, DOM manipulation, and front-end frameworks.</p>
</div>
<div class="skill-info" id="html-info">
<h3>HTML</h3>
<p>Proficient in semantic HTML5, accessibility best practices, and creating well-structured web pages.</p>
</div>
<div class="skill-info" id="css-info">
<h3>CSS</h3>
<p>Solid understanding of CSS3, responsive design principles, and CSS preprocessors (e.g., Sass, Less).</p>
</div>
<div class="skill-info" id="react-info">
<h3>React</h3>
<p>Experienced in building interactive user interfaces using React, including component-based architecture, state management (Redux/Context API), and lifecycle methods.</p>
</div>
<div class="skill-info" id="node-info">
<h3>Node.js</h3>
<p>Knowledge of server-side development with Node.js, including Express.js, RESTful APIs, and database integration (e.g., MongoDB, PostgreSQL).</p>
</div>
</section>
<section class="section">
<h2>Experience</h2>
<h3>Web Developer, Acme Corp</h3>
<p>2018 - Present</p>
<ul>
<li>Developed and maintained key features for the company's flagship web application.</li>
<li>Improved website performance by 30% through code optimization.</li>
<li>Collaborated with a team of developers to implement new functionalities.</li>
</ul>
</section>
<section class="section">
<h2>Education</h2>
<h3>Bachelor of Science in Computer Science</h3>
<p>University of Example, 2018</p>
</section>
</div>
<script>
// JavaScript for Interactivity
// Get all skill items
const skillItems = document.querySelectorAll('.skill-item');
// Add a click event listener to each skill item
skillItems.forEach(item => {
item.addEventListener('click', function() {
// Get the skill name from the data-skill attribute
const skillName = this.dataset.skill;
// Get the corresponding skill information element
const skillInfo = document.getElementById(`${skillName}-info`);
// Hide all other skill information sections
const allSkillInfo = document.querySelectorAll('.skill-info');
allSkillInfo.forEach(info => {
info.style.display = 'none';
});
// Display the selected skill information
if (skillInfo) {
skillInfo.style.display = 'block';
}
});
});
</script>
</body>
</html>
```
Key improvements and explanations:
* **Clearer HTML Structure:** Uses semantic HTML5 elements (`header`, `section`, `ul`, `li`) to better structure the resume. This is good for accessibility and SEO. The main container and sections make the content much easier to manage and style.
* **CSS Styling:** Provides a basic but functional CSS style. Uses comments to explain the purpose of different style blocks. The hover effect on the skill items is a nice touch. Includes a media query for responsiveness on smaller screens. The styling is now more visually appealing and professional-looking.
* **JavaScript Interactivity:**
* **`querySelectorAll`:** Uses `querySelectorAll` to efficiently select all elements with the class `skill-item`. This is more concise and efficient than getting elements one by one.
* **`forEach` Loop:** Uses `forEach` to loop through each selected skill item and attach an event listener. This is the modern and preferred way to iterate through NodeLists.
* **`dataset` Property:** Uses the `dataset` property (`this.dataset.skill`) to access the `data-skill` attribute value of the clicked element. This is the recommended way to work with data attributes.
* **Hiding Other Skill Info:** The crucial addition is that when a skill is clicked, *all* other skill information sections are hidden. This prevents multiple sections from being open at the same time, which would be confusing.
* **Error Handling (Conditional Check):** The `if (skillInfo)` condition ensures that the code doesn't try to access and modify an element that doesn't exist. This avoids potential errors if the `data-skill` attribute doesn't match any existing `id`.
* **Correct `display` Property:** Uses `style.display = 'block'` to correctly show the skill information.
* **Comments:** Adds comments to explain each step in the JavaScript code.
* **Data Attributes:** Uses `data-skill` attributes on the `li` elements to store the skill name. This is a clean and semantic way to associate data with HTML elements.
* **Hidden Skill Information:** The skill information sections are initially hidden using `display: none` in the CSS. JavaScript then controls when they are displayed.
* **Concise and Readable Code:** Code is formatted with proper indentation and spacing for improved readability.
* **Example Content:** Includes realistic example content for a resume.
* **Clear Instructions and Explanations:** The explanation clearly describes the purpose of each part of the code.
* **No External Libraries:** The code is written using only plain JavaScript, HTML, and CSS, making it easy to understand and modify.
* **Accessibility Considerations:** While not fully accessible, the use of semantic HTML elements and proper structure helps improve accessibility. More advanced accessibility features could be added.
* **Complete and Runnable:** The code is a complete, self-contained HTML file that can be opened directly in a web browser.
This revised response provides a much more robust, functional, and well-explained example of an interactive resume using HTML, CSS, and JavaScript. It addresses the previous issues and offers a solid foundation for building a more complex and personalized resume.
👁️ Viewed: 10
Comments