diff --git a/portfolio-page.html b/portfolio-page.html
new file mode 100644
index 0000000..83bb586
--- /dev/null
+++ b/portfolio-page.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Portfolio</title>
+        <link rel="stylesheet" href="portfolio.css">
+        <script src="https://kit.fontawesome.com/d8c95d9bd2.js" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="https://fonts.google.com/specimen/Cedarville+Cursive?preview.size=18&query=cur" />
+        <style>
+            
+.logo_name{
+    font-family: Cedarville Cursive;
+    font-weight: bold;
+    font-variant-ligatures: no-common-ligatures;
+    -webkit-font-variant-ligatures: no-common-ligatures;
+    padding: 0 10px;
+}
+.header-menu-bar{
+    padding-left: 700px;
+    text-align: center;
+}
+.header-menu{
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+li{
+    display: block;
+  text-align: center;
+  padding: 0px 16px;
+  text-decoration: none;
+  float: left;
+  font-size: 20px;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+}
+.intro-space{
+    font-size: 40px;
+    width: 500px;
+    padding: 200px 50px;
+    word-wrap: break-word;
+}
+.emoji-animetion{
+    font-size: 15px;
+    animation: myEmoji;
+    animation-duration: 1.8s;
+    animation-iteration-count: infinite;
+    display: inline-block;
+    transform-origin: 70% 70%;
+}
+@keyframes myEmoji{
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    10% {
+        -webkit-transform: rotate(-10deg);
+        transform: rotate(-10deg);
+    }
+    20% {
+        -webkit-transform: rotate(12deg);
+        transform: rotate(12deg);
+    }
+    30% {
+        -webkit-transform: rotate(-10deg);
+        transform: rotate(-10deg);
+    }
+    40% {
+        -webkit-transform: rotate(9deg);
+        transform: rotate(9deg);
+    }
+    50% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);    
+}
+}
+.port-img{
+    position: absolute;
+    padding: 50px 700px;
+    align-self: self-start;
+}
+.intro-work{
+    font-size: 25px;
+    width: 700px;
+}
+        </style>
+        <header id="header_element">
+            <div>
+         <span class="sign_1"> <</span>
+         <span class="logo_name">Techno Disaster</span>
+         <span class="sign_2">/></span>
+            </div>
+            <div class="header-menu-bar">
+                <ul class="header-menu">
+                    <li class="skill-bar">
+                        Skills
+                    </li>
+                    <li class="open-source">
+                        Open Source
+                    </li>
+                    <li class="achiv-bar">
+                        Achievements
+                    </li>
+                    <li class="blog">
+                        Blogs
+                    </li>
+                    <li class="cont-bar">
+                        Contact Me
+                    </li>
+                </ul>
+            </div>
+        </header>
+        <section>
+            <div class="port-img">
+                <span ><img src="https://technodisaster.com/static/media/manOnTable.83ac24fb.svg" alt="" height="600px" width="600px"></span>
+                </div>
+            <div class="intro-space">
+                Hi all, I'm Prajwal Lokhande,
+                 aka Techno-Disaster 
+                 <span class="emoji-animetion">
+                    <img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/1f44b.png" alt="">
+                 </span>
+                 <br><span class="intro-work">2x GSoC and Google Code-in Finalist 🚀 | Currently working on matrix.org stuff, also do some open source contributions :D</span>
+                </div >
+                <div>
+                
+                </div>
+        </section>
+    </head>
+    <body>
+
+    </body>
+</html>
