MY PORTFOLIO
1. HTML Structure
HTML forms the skeleton of the webpage and organizes the content into meaningful sections. In
the given program, the portfolio consists of the following sections:
HTML Structure
<!DOCTYPE html>
• Declares the document type and version of HTML (HTML5 in this case).
<html lang="en">
• Starts the HTML document, specifying the language as English for accessibility.
<head>
Contains meta-information, links to external stylesheets, and internal CSS.
Side Bar
<div class="aside">
<div class="nav-toggler"></div>
</div>
• Purpose: The sidebar is a navigation menu where users can access different sections of
your portfolio.
• Key Elements:
– <div class="aside">: Container for the sidebar.
– <div class="nav-toggler">: Button to toggle (show/hide) the sidebar on
smaller screens for better responsiveness.
About Me
<div class="about">
<h1>About Me</h1>
<p>Your bio or professional introduction goes here.</p>
</div>
• Purpose: Introduces you and your professional background to visitors.
• Key Elements:
– <h1>: The main heading for the section.
– <p>: A paragraph to describe yourself concisely.
Education
<div class="education">
<h2>Education</h2>
<ul>
<li><strong>Degree:</strong> Your degree details.</li>
<li><strong>Institution:</strong> School/University name.</li>
</ul>
</div>
• Purpose: Showcases your educational qualifications.
• Key Elements:
– <ul>: Unordered list to display each degree or certificate.
– <li>: Individual list items representing education details.
Work Experience
<div class="work">
<h2>Work Experience</h2>
<div class="job">
<h3>Job Title</h3>
<p>Brief description of the role.</p>
</div>
</div>
• Purpose: Highlights your professional experiences and roles.
• Key Elements:
– <div class="job">: Container for each job entry.
– <h3>: Job title or position.
Skills
<div class="skills">
<h2>Skills</h2>
<div class="skill">
<span>Skill Name</span>
<div class="skill-bar" style="width: 80%;"></div>
</div>
</div>
• Purpose: Showcases your technical or soft skills with a progress bar.
• Key Elements:
– <span>: Skill name.
– <div class="skill-bar">: A visual representation of your skill level.
Certificates
<div class="certificates">
<h2>Certificates</h2>
<div class="certificate">
<img src="certificate1.jpg" alt="Certificate">
<p>Certificate Title</p>
</div>
</div>
• Purpose: Displays your professional certifications.
• Key Elements:
– <img>: Certificate image.
– <p>: Certificate title.
Projects
<div class="projects">
<h2>Projects</h2>
<div class="project">
<h3>Project Title</h3>
<p>Brief description of the project.</p>
</div>
</div>
• Purpose: Highlights your major projects with descriptions.
• Key Elements:
– <div class="project">: Container for each project.
– <h3>: Project title.
Contact
<div class="contact">
<h2>Contact</h2>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>
</div>
• Purpose: Provides your contact details for inquiries or connections.
• Key Elements:
– <p>: Email and phone details.
2. CSS Styling
CSS enhances the appearance of the webpage, applying colors, spacing, alignment, and other
visual properties.
1. General Styling
• body:
Defines the overall style of the webpage with a dark theme (background-color:
#1e1e1e), smooth scrolling (scroll-behavior: smooth), and a default font
(Arial).
2. Aside (Sidebar Navigation)
• .aside:
A fixed vertical sidebar on the left with a light background (#fdf9ff) and smooth
transitions for animations (transition: all 0.3s ease). It serves as the
primary navigation.
• .aside .logo:
Highlights the brand or personal logo using "Comic Sans MS" for a fun and unique
style.
• .nav-toggler:
A button for toggling the sidebar visibility, styled for visibility and consistency with
the sidebar theme.
3. Side Navigation
• .side-nav:
A hidden vertical navigation menu styled with a dark background (#3d3d3d) that
slides in from the left.
• Links (.side-nav a):
Styled with gradient red-colored icons and a hover effect that changes color
(color: #ff4a4a) and slightly enlarges the links for a modern, interactive feel.
• Active Links:
Styled to highlight the current section (font-weight: bold) with a red accent
color.
4. Content and Section Styling
• .container and .section:
Defines a centralized layout with consistent padding and spacing for readability.
Ensures all sections have a clean and professional appearance.
• Headings and Paragraphs (h1, h2, h3, p):
Standardizes typography with consistent margins and padding, emphasizing
readability and structure.
5. Profile Image
• .profile-image:
Displays a circular profile picture with a shadow effect for a polished and professional
presentation.
6. About Section
• .about-content:
Aligns content to the left for easy reading, with a bulleted list and enhanced readability
through font size adjustments.
7. Skills Section
• .skills-container and .skill:
A vertical list of skills with interactive progress bars. The skill bar fills dynamically
(transition: width 0.5s ease) to visually represent proficiency levels.
8. Certificates Section
• .certificates-container and .certificate-item:
Creates a responsive grid for certificates, ensuring images are displayed without
cropping (object-fit: contain) and have proper spacing for neat organization.
9. Projects Section
• .projects-container and .project-item:
A flexible grid layout showcasing projects. Images are centered and fit naturally within
their containers for a clean display.
10. Contact Section
• .contact-container:
A centralized layout for contact information, with text aligned to the left for easy
scanning.
• Links (.contact-info a):
Styled with a gradient hover effect for interactive and aesthetic appeal.
• Social Icons (.social-icons):
Circular icons with hover effects that slightly enlarge (transform: scale(1.1))
for a modern touch.
11. Additional Features
• .menu-icon:
A prominent button for toggling the side navigation.
• .resume-button:
A call-to-action button styled with a gradient and hover effect to encourage user
interaction.
• Tables (.detail-box):
Styled for use in detailed data presentation, with a gradient header and row dividers
for better readability.
Purpose and Achievements
The CSS creates a modern, responsive portfolio with a dark theme and interactive elements.
Key objectives include:
• Visual Consistency: Unified styles for all sections.
• Readability: Adequate spacing, font sizes, and layouts enhance clarity.
• Interactivity: Hover effects, transitions, and animations provide a dynamic user
experience.
• Responsiveness: Grid layouts ensure proper display
on various screen sizes.
3. JavaScript Interactivity
JavaScript makes the portfolio interactive, handling events like scrolling and clicks.
Navigation Handling
document.querySelector('.nav-toggler').addEventListener('click',
function() {
const sideNav = document.querySelector('.aside');
sideNav.style.left = sideNav.style.left === '0px' ? '-250px' :
'0px';
});
• Functionality: Toggles the visibility of the sidebar on smaller screens.
• How It Works:
– Click Event: Triggers when the nav-toggler is clicked.
– Toggle Logic: Changes the sidebar’s position between visible (0px) and hidden (-
250px).
Image Redirection
document.querySelectorAll('.certificate img').forEach(img => {
img.addEventListener('click', function() {
window.open(https://drive.google.com/file/d/1hEJx1njCGv6NN3P0FN-
cmKH9qIVGy0ge/view?usp=sharing, '_blank');
});
});
• Functionality: Opens the certificate image in a new tab when clicked.
• How It Works:
– Click Event: Attaches to all certificate images.
– window.open: Opens the image URL in a new browser tab.
Summary
1. HTML organizes content into clear sections for easy navigation.
2. CSS styles the content to create an attractive and cohesive layout.
3. JavaScript adds interactivity, such as toggling menus, animating elements, and
redirecting images.
