vinitshahdeo · Maameyaa007 · May 31, 2023
diff --git a/template/maameyaa/images/Memmoji.png b/template/maameyaa/images/Memmoji.png
diff --git a/template/maameyaa/images/memoji.png b/template/maameyaa/images/memoji.png
diff --git a/template/maameyaa/images/profile.png b/template/maameyaa/images/profile.png
diff --git a/template/maameyaa/index.html b/template/maameyaa/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Website Portfolio</title>
+    <!-- Include a Google Fonts stylesheet -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+    <!-- Include Boxicons stylesheet for icons -->
+    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+    <!-- Include your own custom stylesheet -->
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <!-- Wrapper section -->
+    <section class="wrapper">
+        <!-- Circles for decoration -->
+        <div class="circle1"></div>
+        <div class="circle2"></div>
+        <div class="cirlce3"></div>
+        <div class ="cirlce4"></div>
+
+        <!-- Content section -->
+        <div class="content">
+            <!--Title, name can be found in the script file-->
+            <h1>Hi, I am <span id="name"></span> <span class="waving">👋🏾</span></h1>
+            <!-- Introduction paragraph -->
+            <p>Hey, I am a 21-year-old creative computing student. My current interest lies in user interaction and design, and exploring how we can make technology more friendly. 😀</p>
+            <!-- Link to your work -->
+            <p class="p1">Here is a link to some of my <a href="https://creativemaking.tumblr.com/" target="_blank"><span class="work">work</span></a></p>
+
+            <!-- Social media links -->
+            <!-- replace the # with your own social media links -->
+            <div class="social-media">
+                <p class="p2">Feel free to connect</p>
+                <a href="#"><i class='bx bxl-facebook'></i></a>
+                <a href="#"><i class='bx bxl-instagram'></i></a>
+                <a href="#"><i class='bx bxl-linkedin'></i></a>
+            </div>
+            <!-- Button to download your resume -->
+            <a href="#" class="button">Download Resume</a>
+        </div>
+
+
+        <!-- Profile image section -->
+        <div class="profile">
+            <img src="images/Memmoji.png" alt="memoji image">
+        </div>
+    </section>
+
+    <!-- Include your JavaScript file -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/template/maameyaa/script.js b/template/maameyaa/script.js
@@ -0,0 +1,17 @@
+// Initialize variables
+var i = 0; // Counter for tracking the current position in the name string
+var txt = 'Maameyaa'; // Replace 'Maameyaa' with your own name here
+var speed = 160; // Speed of typing animation (in milliseconds)
+
+// Function for typing animation
+function typeWriter() {
+  if (i < txt.length) {
+    // Check if there are still characters to be typed
+    // Add the next character to the innerHTML of the element with the ID "name"
+    document.getElementById("name").innerHTML += txt.charAt(i);
+    i++; 
+    setTimeout(typeWriter, speed); 
+  }
+}
+
+window.onload = typeWriter; // Call the typeWriter function when the window is fully loaded
diff --git a/template/maameyaa/style.css b/template/maameyaa/style.css
@@ -0,0 +1,164 @@
+/* Global styles for all elements */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+/* Styles for the body element */
+body {
+    background-color: #FAF7F3;
+    color: #5B4040;
+}
+
+/* Styles for the wrapper section */
+.wrapper {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 70px 10% 0;
+}
+
+.cirlce3 {
+    width: 180px;
+    height: 85px; 
+    background-color: #69aa99;
+    border-radius: 0 0 85px 85px;
+    position: absolute;
+    top: 0;
+    left: 80%;
+    transform: translateX(-50%);
+    z-index: -1;
+}
+
+
+
+
+
+/* Styles for the second circle */
+.circle2 {
+    width: 200px;
+    height: 200px;
+    background-color: #2B4F79;
+    border-radius: 50%;
+    position: absolute;
+    top: -90px;
+    left: -90px;
+}
+
+/* Styles for the first circle */
+.circle1 {
+    width: 180px;
+    height: 85px;
+    background-color: #BED8C2;
+    border-radius: 85px 85px 0 0;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* Styles for the content section */
+.content {
+    max-width: 500px;
+}
+
+/* Styles for the name element */
+#name {
+    color: #917F51;
+}
+
+/* Styles for the heading within the content section */
+.content h1 {
+    font-size: 35px;
+    font-weight: 700;
+    margin: 10px 0;
+}
+
+/* Styles for the profile image */
+.profile img {
+    max-width: 450px;
+}
+
+/* Styles for the social media links */
+.social-media a {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    border: 2px solid #917F51;
+    border-radius: 50%;
+    color: #917F51;
+    text-decoration: none;
+    margin: 30px 15px 30px 0;
+    transition: .5s ease;
+}
+
+.social-media a:hover {
+    background: #917F51;
+    color: #FAF7F3;
+    box-shadow: 0 0 20px #917F51;
+}
+
+/* Styles for paragraphs within the content section */
+.p1 {
+    margin: 10px 0;
+}
+
+.p2 {
+    margin: 10px 0;
+}
+
+/* Styles for the "work" link */
+.work {
+    font-weight: bold;
+}
+
+.work:hover {
+     color: cornflowerblue;
+    text-decoration: none;
+}
+
+/* Styles for the button */
+.button {
+    display: inline;
+    padding: 12px 28px;
+    background: #917F51;
+    border-radius: 40px;
+    box-shadow: 0 0 10px #917F51;
+    font-size: 16px;
+    color: #FAF7F3;
+    letter-spacing: 1px;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+/* Keyframe animations */
+
+/* Styles for the waving animation */
+.waving {
+    animation-name: waving-animation;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    transform-origin: 70% 70%;
+    display: inline-block;
+}
+
+/* Keyframes for the waving animation */
+@keyframes waving-animation {
+    0% { transform: rotate(0.0deg); }
+    10% { transform: rotate(14.0deg); }
+    20% { transform: rotate(-8.0deg); }
+    30% { transform: rotate(14.0deg); }
+    40% { transform: rotate(-8.0deg); }
+    50% { transform: rotate(10.0deg); }
+    60% { transform: rotate(0.0deg); }
+    100% { transform: rotate(0.0deg); }
+}
+