Skip to content

Commit

Permalink
allignment issue resolved
Browse files Browse the repository at this point in the history 
- the allignment issue
- formatting added in index.html
  • Loading branch information
@typhonshambo
typhonshambo committed Oct 28, 2023
1 parent 08d78d1 commit be9ed47
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 53 deletions.
104 changes: 55 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Shambo - Portfolio</title>
</head>

<body>
<!-- Navigation Bar -->
<nav>
Expand All @@ -22,7 +24,10 @@
<section id="intro" class="intro-section">
<div class="intro-left">
<h1>I'm Shambo</h1>
<p>An experienced coder currently studying at IIT Kharagpur. With a strong passion for technology, I specialize in Python and C, and actively contribute to open-source projects. Beyond coding, I'm a photography enthusiast, capturing moments and stories through my lens. Let's explore and innovate together.</p>
<p>An experienced coder currently studying at IIT Kharagpur. With a strong passion for technology, I
specialize in Python and C, and actively contribute to open-source projects. Beyond coding, I'm a
photography enthusiast, capturing moments and stories through my lens. Let's explore and innovate
together.</p>
</div>
<div class="intro-right">
<img src="./images/my-photo.jpg" alt="My Photo">
Expand All @@ -32,54 +37,54 @@ <h1>I'm Shambo</h1>
<!-- My Projects Section -->


<section id="projects" class="projects-section">
<h2>My Projects</h2>
<div class="project-container">
<div class="project-card">
<img src="./images/project-1.png" alt="Project 1">
<h3></h3>
<a href="https://github.com/typhonshambo/vstat-bot/tree/slash" target="_blank">
<button class="visit-button">vstat BOT</button>
</a>
</div>
<section id="projects" class="projects-section">
<h2>My Projects</h2>
<div class="project-container">
<div class="project-card">
<img src="./images/project-1.png" alt="Project 1">
<h3></h3>
<a href="https://github.com/typhonshambo/vstat-bot/tree/slash" target="_blank">
<button class="visit-button">vstat BOT</button>
</a>
</div>

<div class="project-card">
<img src="./images/project-2.png" alt="Project 2">
<a href="https://github.com/typhonshambo/Clara-Music-Bot-Telegram" target="_blank">
<button class="visit-button">Clara BOT</button>
</a>
</div>
<div class="project-card">
<img src="./images/project-2.png" alt="Project 2">
<a href="https://github.com/typhonshambo/Clara-Music-Bot-Telegram" target="_blank">
<button class="visit-button">Clara BOT</button>
</a>
</div>


<div class="project-card">
<img src="./images/project-3.png" alt="Project 3">
<a href="https://github.com/typhonshambo/flipkart-review-scrapper" target="_blank">
<button class="visit-button">Flipkart Scrapper</button>
</a>
</div>
<div class="project-card">
<img src="./images/project-3.png" alt="Project 3">
<a href="https://github.com/typhonshambo/flipkart-review-scrapper" target="_blank">
<button class="visit-button">Flipkart Scrapper</button>
</a>
</div>

<div class="project-card">
<img src="./images/project-4.png" alt="Project 4">
<a href="https://github.com/typhonshambo/valo-shop" target="_blank">
<button class="visit-button">Valo Shop</button>
</a>
</div>
<div class="project-card">
<img src="./images/project-5.png" alt="Project 5">
<a href="https://github.com/typhonshambo/rtfm-bot" target="_blank">
<button class="visit-button">RTFM BOT</button>
</a>
</div>
<div class="project-card">
<img src="./images/project-6.png" alt="Project 6">
<a href="https://github.com/typhonshambo/gas-leakage-detection-system" target="_blank">
<button class="visit-button">eakage detection system</button>
</a>
</div>
<!-- Add 4 more project cards following the same structure -->
<div class="project-card">
<img src="./images/project-4.png" alt="Project 4">
<a href="https://github.com/typhonshambo/valo-shop" target="_blank">
<button class="visit-button">Valo Shop</button>
</a>
</div>
<div class="project-card">
<img src="./images/project-5.png" alt="Project 5">
<a href="https://github.com/typhonshambo/rtfm-bot" target="_blank">
<button class="visit-button">RTFM BOT</button>
</a>
</div>
<div class="project-card">
<img src="./images/project-6.png" alt="Project 6">
<a href="https://github.com/typhonshambo/gas-leakage-detection-system" target="_blank">
<button class="visit-button">eakage detection system</button>
</a>
</div>

</div>
</section>

</div>
</section>



Expand All @@ -92,13 +97,13 @@ <h2>My Skills & Achievements</h2>
<h3>Python</h3>
<p>proficient in python and have done various projects on it.</p>
</div>

<div class="skill-card">
<img src="./images/skill-2.png" alt="Skill 2" width="60">
<h3>C</h3>
<p>have worked on various coding related problems in C and have basic knowledge of it.</p>
<p>have worked on various coding related problems in C and have basic knowledge of it.</p>
</div>

<div class="skill-card">
<img src="./images/skill-3.png" alt="Skill 3" width="60">
<h3>My SQL</h3>
Expand All @@ -110,7 +115,7 @@ <h3>Mongo DB</h3>
<p>worked with MongoDb and it's integration with python using pymongo module</p>
</div>
<!-- Add 4 more skill cards following the same structure -->

</div>
</section>

Expand All @@ -126,4 +131,5 @@ <h2>Contact Me</h2>
</form>
</section>
</body>
</html>

</html>
19 changes: 15 additions & 4 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,11 @@ nav a:hover {
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
margin: 20px;
width: calc(33.33% - 40px); /* Adjust the width based on your layout */
text-align: center;
transition: transform 0.2s;
display: flex;
flex-direction: column;
align-items: center;
}

.project-card:hover {
Expand All @@ -148,27 +152,34 @@ nav a:hover {

.project-card img {
max-width: 100%;
height: 200px; /* Adjust the desired height */
width: 100%; /* Ensure the image takes the full width of the card */
margin-bottom: 10px; /* Add space between the image and title */
}

.project-card h3 {
font-size: 1.5rem; /* Adjust font size for project titles */
color: #333;
margin: 0;
}

.visit-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background: #ff9900;
color: #fff;
text-decoration: none;
border: none;
border-radius: 5px;
font-weight: bold;
transition: background 0.3s;
cursor: pointer;
}

.visit-button:hover {
background: #ff6600;
}




/* Style the skills and achievements section */
.skills-section {
background: #f8f8f8;
Expand Down

0 comments on commit be9ed47

Please sign in to comment.