Lecture 30 :- Portfolio Website Part-2

Let's continue with Part-2 of creating a portfolio website. In this part, we'll add more sections to the website, including About, Projects, and Contact, and further enhance the design and functionality.

HTML Structure (index.html): Add the additional sections to your HTML file. Below the hero section, create the About, Projects, and Contact sections.

CSS Styling (styles.css): Now, let's add some styling for the new sections and make the website more visually appealing.

Additional Styling: Customize the About, Projects, and Contact sections to your liking. You can add more content, format the text, and apply CSS styles to the project cards and contact form.

Smooth Scrolling: To provide a smooth scrolling experience when clicking on navigation links, add a simple JavaScript code to your HTML file.

This JavaScript code adds a click event listener to each navigation link and smoothly scrolls to the corresponding section when clicked.

Responsive Design: Ensure that your website is responsive and looks good on different screen sizes. Use media queries and other responsive techniques to adapt the layout for mobile, tablet, and desktop devices.

With these updates, your portfolio website should now have a header, hero section, about section, projects section, and contact section. You can add more content, improve the styling, and include your projects in the projects section with project cards or portfolio items. In Part-3, we'll continue enhancing the website with more advanced features, interactivity, and additional sections, such as a resume section and a skills section. Keep building and refining your portfolio website to showcase your skills and projects effectively!

htmlCopy code

<!-- ... (previous HTML code) ... --> <!-- JavaScript for smooth scrolling --> <script>    const navLinks = document.querySelectorAll('nav a');    navLinks.forEach(link => {        link.addEventListener('click', (e) => {            e.preventDefault();            const targetSection = document.querySelector(link.getAttribute('href'));            targetSection.scrollIntoView({ behavior: 'smooth' });        });    }); </script>

cssCopy code

/* ... (previous CSS code) ... */ /* About Section Styles */ .about {    background-color: #f9f9f9;    padding: 60px 0; } /* Projects Section Styles */ .projects {    background-color: #eaeaea;    padding: 60px 0; } /* Contact Section Styles */ .contact {    background-color: #f5f5f5;    padding: 60px 0; } .container {    max-width: 1200px;    margin: 0 auto;    padding: 0 20px; } /* ... (more styles for project cards, contact form, etc.) ... */

htmlCopy code

<!-- ... (previous HTML code) ... --> <!-- About Section --> <section class="about" id="about">    <div class="container">        <h2>About Me</h2>        <p>Add some information about yourself and your skills here.</p>    </div> </section> <!-- Projects Section --> <section class="projects" id="projects">    <div class="container">        <h2>My Projects</h2>        <!-- Add your project cards here -->    </div> </section> <!-- Contact Section --> <section class="contact" id="contact">    <div class="container">        <h2>Contact Me</h2>        <p>Feel free to reach out to me using the form below.</p>        <!-- Add a contact form here -->    </div> </section> <!-- ... (closing body and html tags) ... -->