added about_me page support

rishabhgokhe · Dec 16, 2023 · 79285da · 79285da
1 parent ebd5fa2
commit 79285da
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/about_me.css b/about_me.css
@@ -0,0 +1,67 @@
+body {
+    background: black;
+}
+
+#nav-bar {
+    background: black;
+}
+
+.heading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+}
+.logo {
+    filter: invert(1);
+}
+
+.titles h1 {
+    font-size: 5rem;
+    color: D0F288;
+    font-family: 'Caveat', cursive;
+    font-family: 'Libre Baskerville', serif;
+    font-family: 'Rubik', sans-serif;
+    font-weight: bold;
+}
+
+.contact-div {
+    color: white;
+    width: 50%;
+    position: relative;
+    left: 35%;
+    font-size: 1.5rem;
+}
+
+.about-me {
+    display: flex;
+    flex-direction: column;
+}
+
+.heading p {
+    color: white;
+    font-size: 1.7rem;
+    width: 50%;
+    position: relative;
+    left: 25%;
+}
+
+.project-button {
+    border-width: 0;
+    border-radius: 20px;
+    font-size: 2rem;
+    padding-left: 10px;
+    padding-right: 10px;
+    color: white;
+    background-color: #7962bd;
+}
+
+.project-button img {
+    margin-bottom: 8px;
+}
+
+.project-button:hover {
+    border-color: white;
+    border-width: 2px;
+    color: white;
+}
diff --git a/about_me.html b/about_me.html
@@ -0,0 +1,90 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact - Rishabh</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="./about_me.css">
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+
+<!-- Navigation bar -->
+<section id="nav-bar" class="gradient-backgroun">
+    <div class="container">
+        <header class="d-flex flex-wrap justify-content-center py-3 border-bottom">
+          <a href="./index.html" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
+            <img src="./person_vcard.svg" class="logo person_vcard" alt="github">
+            <span class="fs-4 text-light">Rishabh Gokhe</span>
+          </a>
+
+          <ul class="nav nav-pills">
+            <li class="nav-item"><a href="https://github.com/rishabhgokhe" class="nav-link"><img src="./github.svg" class="logo github" alt="github"></a></li>
+            <li class="nav-item"><a href="https://instagram.com/rishabh_gokhe?igshid=OGQ5ZDc2ODk2ZA%3D%3D&utm_source=qr" class="nav-link"><img class="logo instagram" src="./instagram.svg" alt="instagram"></a></li>
+            <li class="nav-item"><a href="https://www.reddit.com/u/DiscoversOther9152/s/kS20bBPbSF" class="nav-link"><img class="logo reddit" src="./reddit.svg" alt="reddit"></a></li>
+            <li class="nav-item"><a href="https://www.linkedin.com/in/rishabh-gokhe-22168b287" class="nav-link"><img class="logo linkedin" src="./linkedin.svg" alt="linkedin"></a></li>
+            <li class="nav-item"><a href="https://twitter.com/rishabhgokhe?s=21&t=Flej6ro1R2UhXzVpOMJTdg" class="nav-link"><img class="logo twitter" src="./twitter.svg" alt="twitter"></a></li>
+          </ul>
+        </header>
+      </div>
+</section>
+
+<!-- About Me -->
+<section class="heading about-me">
+    <div class="titles">
+        <h1>About Me</h1><br>
+    </div>
+    <div>
+        <p>Hello! I'm <span>Rishabh Gokhe</span>,proficient in development, 3D modeling, and UI design, this website serves as a showcase of my work. I'm excited about the possibility of collaborating with you.
+           <br>Currently Bachelor of Technology Computer Science Student 
+           <br>Based in Nagpur
+           <br>Skills - Python, Xcode, Web Development, Blender
+        </p>
+    </div>
+    <div>
+        <button class="btn project-button" onclick="myProjectPage()"><img class="logo" src="./arrow-right-circle-fill.svg" alt=""> See Projects</button>
+    </div>
+</section>
+
+<!-- heading content -->
+<section class="heading">
+    <div class="titles">
+        <h1>Contact Me</h1>
+    </div>
+</section>
+
+<!-- Information Container -->
+<section class="contact-div">
+    <div class="container contact-list">
+        <ul>
+            <li>Email : [email protected]</li>
+            <li>Phone : +919098447696</li>
+        </ul>
+    </div>
+</section>
+
+<!-- Footer -->
+<section id="Footer">
+    <div class="container">
+      <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+        <div class="col-md-4 d-flex align-items-center">
+          <a href="./index.html" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
+            <img class="logo box_seam_fill" src="./box_seam_fill.svg" alt="">
+          </a>
+          <span class="mb-3 mb-md-0 text-light">© 2023 by Rishabh</span>
+        </div>
+
+        <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
+          <li class="ms-3"><a class="text-body-secondary about_me" href="./about_me.html"><img class="logo about_me" src="./file_earmark_person_fill.svg" alt="About Me"></a></li>
+          <li class="ms-3"><a class="text-body-secondary contact_me" href="./about_me.html"><img class="logo contact_me" src="./envelope_arrow_up_fill.svg" alt="Contact me"></a></li>
+          <li class="ms-3"><a class="text-body-secondary feedback" href="#"><img class="logo chat_square_heart" src="./chat_square heart.svg" alt="feedback"></a></li>
+        </ul>
+      </footer>
+    </div>
+  </section>
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+<script src="./main.js"></script>
+</body>
+</html>
diff --git a/arrow-right-circle-fill.svg b/arrow-right-circle-fill.svg