From 56662223c08019b609377841d5f38d7f480f0f51 Mon Sep 17 00:00:00 2001
From: yuvi-mittal <128018763+yuvi-mittal@users.noreply.github.com>
Date: Tue, 29 Oct 2024 16:45:32 +0000
Subject: [PATCH] yuvi-portfolio

---
 yuvi.html | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 yuvi.html
diff --git a/yuvi.html b/yuvi.html
new file mode 100644
index 0000000..c991e11
--- /dev/null
+++ b/yuvi.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Yuvu's Portfolio</title>
+    <style>
+        /* CSS Reset */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Arial', sans-serif;
+            color: #333;
+            background: linear-gradient(to bottom, #3a6073, #16222a);
+            overflow-x: hidden;
+        }
+
+        .header {
+            background: #1d4350;
+            padding: 30px;
+            text-align: center;
+            color: #f5f5f5;
+            font-size: 24px;
+            font-weight: bold;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+        }
+
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 40px 20px;
+            max-width: 800px;
+            margin: auto;
+        }
+
+        .profile-pic {
+            border-radius: 50%;
+            width: 150px;
+            height: 150px;
+            border: 5px solid #f5f5f5;
+            box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);
+            margin-bottom: 20px;
+        }
+
+        .info {
+            text-align: center;
+            color: #f5f5f5;
+        }
+
+        .info h1 {
+            font-size: 36px;
+            color: #e2f1f9;
+            margin-bottom: 10px;
+        }
+
+        .info h3 {
+            font-size: 20px;
+            color: #e0e0e0;
+            margin-bottom: 20px;
+        }
+
+        .bio {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 20px;
+            border-radius: 10px;
+            color: #f0f0f0;
+            font-size: 18px;
+            line-height: 1.6;
+            max-width: 600px;
+        }
+
+        .projects {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            margin-top: 40px;
+        }
+
+        .project-card {
+            background: #213942;
+            color: #f5f5f5;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+            width: calc(50% - 20px);
+            transition: transform 0.3s;
+        }
+
+        .project-card:hover {
+            transform: scale(1.05);
+        }
+
+        .project-card h3 {
+            font-size: 22px;
+            color: #e2f1f9;
+            margin-bottom: 10px;
+        }
+
+        .project-card p {
+            font-size: 16px;
+            line-height: 1.4;
+        }
+
+        footer {
+            background: #1d4350;
+            color: #f5f5f5;
+            padding: 20px;
+            text-align: center;
+            margin-top: 50px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="header">Yuvu's Portfolio</div>
+
+    <div class="container">
+        <img src="https://via.placeholder.com/150" alt="Profile Picture" class="profile-pic">
+        <div class="info">
+            <h1>Yuvu</h1>
+            <h3>Mechanical Engineering Student<br>Birla Institute of Technology</h3>
+            <p class="bio">Hi! I'm Yuvu, a passionate Mechanical Engineering student with an interest in exploring the realms of technology and design. I’m always eager to learn and work on meaningful projects that challenge me and drive me toward growth. Let's make something awesome together!</p>
+        </div>
+
+        <div class="projects">
+            <div class="project-card">
+                <h3>Project Title 1</h3>
+                <p>A brief description of the project goes here. This is an example of a project I've worked on.</p>
+            </div>
+            <div class="project-card">
+                <h3>Project Title 2</h3>
+                <p>A brief description of another project goes here. Showcasing my skills in mechanical engineering.</p>
+            </div>
+            <!-- Add more projects as needed -->
+        </div>
+    </div>
+
+    <footer>
+        &copy; 2024 Yuvu - Birla Institute of Technology
+    </footer>
+
+</body>
+</html>
