diff --git a/template/maameyaa/images/Memmoji.png b/template/maameyaa/images/Memmoji.png new file mode 100644 index 0000000..3485f2d Binary files /dev/null and b/template/maameyaa/images/Memmoji.png differ diff --git a/template/maameyaa/images/memoji.png b/template/maameyaa/images/memoji.png new file mode 100644 index 0000000..f0c2de1 Binary files /dev/null and b/template/maameyaa/images/memoji.png differ diff --git a/template/maameyaa/images/profile.png b/template/maameyaa/images/profile.png new file mode 100644 index 0000000..633464a Binary files /dev/null and b/template/maameyaa/images/profile.png differ diff --git a/template/maameyaa/index.html b/template/maameyaa/index.html new file mode 100644 index 0000000..aab5d92 --- /dev/null +++ b/template/maameyaa/index.html @@ -0,0 +1,54 @@ + + + + + Website Portfolio + + + + + + + + + + +
+ +
+
+
+
+ + +
+ +

Hi, I am 👋🏾

+ +

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. 😀

+ +

Here is a link to some of my work

+ + + + + + Download Resume +
+ + + +
+ memoji image +
+
+ + + + + diff --git a/template/maameyaa/script.js b/template/maameyaa/script.js new file mode 100644 index 0000000..5d43caa --- /dev/null +++ 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 new file mode 100644 index 0000000..936c984 --- /dev/null +++ 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); } +} +