my-portfolio-project

Welcome to my Professional Portfolio! This project showcases my journey in web development as I apply what I've learned in HTML, CSS, and JavaScript. Here, you'll find my work, skills, and background, along with a glimpse into my transition from accounting to technology.

🚀 Live Demo

[Check out the portfolio live:] (https://my-portfolio-project-navy.vercel.app/)

---

##📌 Sections of the Site

###🏠 Home Page (index.html):

• Introduction: A brief introduction to who I am and my background in both accounting and technology.

• Links: Links to my GitHub and LinkedIn profiles to showcase my ongoing work and connect with me professionally.

-Skills: A list of technical skills that I’m actively learning, including HTML, CSS, JavaScript, Java, Git, and more.

---

###👤About Me Page (about.html):

• Personal Story: I share my professional journey, detailing my background in accounting and my transition into technology.

• Skills and Goals: A deeper dive into my skills, goals, and aspirations in the tech field.

• Portfolio Image: A professional image to provide a personal touch to the page.

---

##🏗️ HTML Structure (index.html & about.html):

I used **semantic HTML** for better accessibility and maintainability. The main elements used include:
<main>  <!-- Contains core content (introduction, links, etc.) -->
<section>  <!-- Used to group related content within the main body, such as presentation descriptions, skills lists, and more. -->
<div>  <!-- Used to group elements for specific styling in CSS. -->
-<a>  <!-- Used to create clickable links that guide users to different sections or external sites like my GitHub and LinkedIn. -->
<nav>  <!-- The navigation menu that links between the pages of the portfolio (from Home to About Me, and vice versa). -->

---

##🎨 CSS Styling (style.css):

• @import: Imported fonts from Google Fonts for improved typography.
• :root: Defined CSS variables for reuse, including colors that help maintain design consistency across the site.
• Universal Selector (*): To ensure that all elements across the page have no margin or padding by default, helping with consistent layout design.
• body: Define global styles such as background color, text color, and general layout settings (using flexbox).
• Box Model and Flexbox: Use the box-sizing property to ensure that the width and height of elements are calculated correctly.
• display: flex Helps with aligning and distributing space within containers.

Key CSS Classes & Flexbox Properties:

• flex-direction: Defines the direction in which elements are placed inside a flex container (row, column, or reverse).
• justify-content: Aligns elements horizontally, for example, centering navigation links in the header.
• gap: Defines the spacing between elements in a flex container.

.header__menu {
    display: flex;
    justify-content: space-between;```
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
} 

---

##📱 Responsive Design I used media queries to ensure the site is mobile-friendly and adapts to different screen sizes:

@media screen and (max-width: 1200px) {
    .presentation {
        flex-direction: column;
    }
}

---

🎯 Thank you for checking out my portfolio! 🚀