Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mummanajagadeesh
Mummanajagadeesh authored Sep 29, 2024
1 parent 4d2e858 commit be6fb98
Showing 1 changed file with 57 additions and 31 deletions.
88 changes: 57 additions & 31 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# [Jagadeesh Mummana - Portfolio](https://mummanajagadeesh.github.io/P3R50N4L-P0R7F0L10/)

#### Video Demo: [Watch here](https://youtu.be/bhk5Z-jfDsY)

#### Video Demo: https://youtu.be/bhk5Z-jfDsY
---

## Description

#### Description:
Welcome to the portfolio of Jagadeesh Mummana! This portfolio showcases my projects and skills in robotics and artificial intelligence. The site is designed to be both visually appealing and functional, enabling visitors to easily navigate through my work and get in touch with me. Below, I will explain the various elements of the code used to create this portfolio.
Welcome to my personal portfolio! This website showcases my skills and projects, offering a blend of aesthetic appeal and functionality. You can explore various projects I've worked on, learn about the technologies I use, and contact me directly. This portfolio adheres to [CS50's Academic Honesty Policy](https://cs50.harvard.edu/x/2023/honesty/) and includes some use of AI-assisted features, which are clearly marked where applicable.

---

Expand All @@ -15,28 +17,30 @@ Welcome to the portfolio of Jagadeesh Mummana! This portfolio showcases my proje
- [HTML Overview](#html-overview)
- [CSS Breakdown](#css-breakdown)
- [JavaScript Functionality](#javascript-functionality)
- [AI Assistance](#ai-assistance)
- [Deployment Instructions](#deployment-instructions)
- [Contact](#contact)

---

## Technologies Used

- HTML5
- CSS3
- JavaScript
- Google Fonts
- Icons from Icons8
- **HTML5**
- **CSS3**
- **JavaScript**
- **Google Fonts**
- **Icons from Icons8**
- **AI-Powered Features** (Used responsibly, adhering to CS50's policy)

---

## Code Structure

The code is organized into three main sections:
The portfolio is structured into three core sections:

1. **HTML**: Defines the structure of the web page.
2. **CSS**: Provides styling for the elements, ensuring a cohesive look and feel.
3. **JavaScript**: Adds interactivity to the portfolio, enhancing user experience.
1. **HTML**: Provides the basic structure and layout of the website.
2. **CSS**: Adds style and responsiveness, making the site visually engaging.
3. **JavaScript**: Handles interactive and dynamic content for a better user experience.

### HTML Overview

Expand All @@ -60,14 +64,14 @@ The code is organized into three main sections:
</html>
```

- **DOCTYPE Declaration**: The document begins with `<!DOCTYPE html>`, indicating it is an HTML5 document.
- **HTML Language Attribute**: The `lang` attribute in the `<html>` tag specifies the language of the document, which is set to English.
- **Head Section**: Contains meta tags for character set and viewport settings, a title for the page, and links to external stylesheets.
- **Body Section**: This is where all visible elements of the portfolio are defined, including the navigation bar, content sections, and social media links.
- **DOCTYPE Declaration**: Identifies the document as HTML5.
- **HTML Language Attribute**: Specifies English as the language of the document.
- **Head Section**: Contains metadata such as character encoding, viewport settings, title, and external stylesheets.
- **Body Section**: Holds the visual elements of the page like the navigation bar, project sections, and contact details.

### CSS Breakdown

The CSS is embedded within a `<style>` tag in the head section of the HTML. Here are some key components:
The styling is located within an external stylesheet, linked in the `<head>` tag. Key elements include:

```css
* {
Expand All @@ -94,18 +98,20 @@ nav {
}
```

- **Universal Selector**: The universal selector `*` is used to remove default margin and padding from all elements.
- **Body Styling**: Sets the font family, background color, and text color for the entire page. It also prevents horizontal scrolling with `overflow-x: hidden;`.
- **Navigation Bar**: The `nav` element is fixed to the top right of the page, creating a consistent and accessible navigation experience as the user scrolls.
- **Universal Selector**: Resets margin and padding to zero for consistency.
- **Body Styling**: Defines the site's font, background color, and prevents horizontal scrolling.
- **Navigation Bar**: Styled to be fixed at the top-right for ease of access throughout the page.

#### Additional CSS Features

- **Responsive Design**: Media queries are used to adjust the layout for smaller screens, ensuring the portfolio is mobile-friendly.
- **Hover Effects**: CSS transitions are employed for interactive elements such as links and project cards, enhancing user experience.
- **Grid Layout for Projects**: The `.projects-grid` class uses CSS Grid to create a responsive grid layout for displaying project cards.
- **Responsive Design**: Media queries ensure the site is mobile-friendly, adjusting elements for smaller screen sizes.
- **Hover Effects**: Subtle transitions add smooth hover effects to buttons, links, and project cards.
- **CSS Grid**: Utilized to create a flexible grid layout for displaying project thumbnails.

### JavaScript Functionality

The site features JavaScript for smooth animations and interactive behavior, including a mobile menu toggle and section animations.

```javascript
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
Expand All @@ -120,25 +126,45 @@ sections.forEach(section => {
});
```

- **Intersection Observer**: This script enables animations for each section when they come into the viewport, creating a smooth scrolling effect.
- **Mobile Menu Toggle**: JavaScript is used to toggle the visibility of navigation links on smaller screens when the menu icon is clicked.
- **Intersection Observer**: This feature animates sections as they enter the viewport, creating a dynamic scrolling effect.
- **Mobile Menu**: JavaScript toggles the visibility of the navigation menu on smaller devices, improving accessibility.

### AI Assistance

In this project, AI was used to enhance certain elements responsibly:

- **AI-generated content suggestions**: Some sections of text were enhanced or suggested using AI, but final review and edits were done manually to ensure the content aligns with my vision and the guidelines of CS50's Academic Honesty Policy.
- **Interactive components**: AI-assisted tools were used to fine-tune user interaction features, like the responsiveness of the site and smooth scroll animations.

All instances of AI assistance were verified to comply with the policy, and I made sure to fully understand and modify the outputs where necessary to align with my personal understanding and project goals.

---

### Deployment Instructions

To deploy this portfolio:
To set up this portfolio locally or deploy it online:

1. **Clone the Repository**:

```bash
git clone https://github.com/Mummanajagadeesh/portfolio.git
cd portfolio
```

1. **Clone the Repository**: Use Git to clone the project repository to your local machine.
2. **Open in a Web Browser**: Simply open the `index.html` file in any modern web browser.
3. **Host Online (Optional)**: You can host this portfolio on platforms like GitHub Pages, Netlify, or Vercel for online accessibility.
2. **Open in Browser**: Open the `index.html` file in a modern web browser.
3. **Hosting Online**: You can easily deploy this project using platforms like GitHub Pages, Netlify, or Vercel for live hosting.

---

### Contact

For inquiries or collaboration opportunities, feel free to reach out through any of my social media platforms or email:
If you'd like to get in touch for collaborations or questions, feel free to reach out:

- **Email**: [mummanajagadeesh97@gmail.com](mailto:mummanajagadeesh97@gmail.com)
- **LinkedIn**: [Jagadeesh Mummana](https://www.linkedin.com/in/jagadeeeshmummana)
- **GitHub**: [Mummanajagadeesh](https://github.com/Mummanajagadeesh)
- **Instagram**: [jagadeesh__97__](https://www.instagram.com/jagadeesh__97__)

Thank you for visiting my portfolio! I look forward to connecting with you.
---

Thank you for visiting my portfolio! Looking forward to connecting with you.

0 comments on commit be6fb98

Please sign in to comment.