Improved Portfolio

catMeooww · Nov 22, 2024 · ea23831 · ea23831
1 parent 227323c
commit ea23831
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 16 deletions.
diff --git a/about.html b/about.html
@@ -2,6 +2,7 @@
 
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
@@ -11,13 +12,21 @@
 </head>
 
 <body background="Icons/StoneBg.png">
-    <h1 class="title">ABOUT ME</h1>
-    <hr>
-    <div class="col-md-6">
-        <img src="Icons/CatMeooww.jpg" width="600">
+    <div class="menu">
+        <a href="index.html">CatMeooww10 Page</a>
+        <span>|</span>
+        <a href="catmeoowwProjects.html">CatMeooww10 Projects</a>
+    </div>
+    <div class="titlecontainer">
+        <h1 class="title">ABOUT ME</h1>
     </div>
-    <div class="col-md-6">
-        <center>
+    <hr>
+    <center>
+        <div class="col-sm-12 col-md-6">
+            <img src="Icons/CatMeooww.jpg" style="width: 80%;">
+        </div>
+        <div class="col-sm-12 col-md-6">
+
             <p style="color: #ddeeff;">My name is Cat Meooww, I Started to develop at 13 years old. I Created some
                 cool websites: like Minecraft Lists, Minecraft World Community, Minecraft Utilities. I Created some
                 games too: Jumping Around, Survival Plains (still in development). Some Minecraft Mods: Crafty World.
@@ -26,9 +35,9 @@ <h1 class="title">ABOUT ME</h1>
             <p style="color: #ddeeff;">You can see that many of my projects are related to Minecraft, this is because it
                 is my favourite game!</p>
 
-            <p>Also, visit me in Crafty Hub</p>
-        </center>
-    </div>
+            <a href="https://catmeooww.github.io/Crafty-Hub/craftyUsers.html">Also, visit me in Crafty Hub</a>
+        </div>
+    </center>
 </body>
 
 </html>
diff --git a/catmeoowwProjects.html b/catmeoowwProjects.html
@@ -12,11 +12,13 @@
 </head>
 
 <body background="Icons/StoneBg.png">
-        <div style="background-color: rgba(0, 0, 0, 0.500);border: outset 5px rgba(0, 0, 0, 0.500);text-align: center;">
-                <a href="index.html">About CatMeooww10</a>
+        <div class="menu">
+                <a href="index.html">CatMeooww10 Page</a>
+                <span>|</span>
+                <a href="about.html">About CatMeooww10</a>
         </div>
         <hr>
-        <div style="background-color: rgba(0, 0, 0, 0.500);border: outset 5px rgba(0, 0, 0, 0.500);">
+        <div class="titlecontainer">
                 <h1 class="title">CATMEOOWW10 WEB PROJECTS!</h1>
         </div>
         <hr>
@@ -50,12 +52,16 @@ <h1 class="title">CATMEOOWW10 WEB PROJECTS!</h1>
                                 src="otherSites/aicraft_bg.png" class="MCSites" width="300" height="200"></a>
         </center>
         <br><br>
-        <div style="background-color: rgba(0, 0, 0, 0.500);border: outset 5px rgba(0, 0, 0, 0.500);">
+        <div class="titlecontainer">
                 <h1 class="title">CATMEOOWW10 GAMES</h1>
         </div>
         <hr>
-        <div style="border: inset 2px green;text-align: center;width: 90%;margin:5%;background-color: black;padding: 5px;">
+        <div style="border: inset 2px green;text-align: center;width: 90%;margin:5%;background-color: black;padding: 10px;">
                 <a href="https://catmeooww.github.io/CatMeooww-GamingArea/">View CatMeooww Games Page!</a>
+                <button onclick="showGames()" id="showGames" style="float: right;background-color: black;color: green;">+</button>
+        </div>
+        <div id="showingGames" style="text-align: center;visibility: hidden;">
+
         </div>
         <hr>
         <b id="catlabel" style="float: right;">@CatMeooww</b>
@@ -64,6 +70,19 @@ <h1 class="title">CATMEOOWW10 GAMES</h1>
                 g = Math.floor(Math.random()*230) + 25;
                 b = Math.floor(Math.random()*230) + 25;
                 document.getElementById("catlabel").style.color = "rgb("+r+","+g+","+b+")";
+
+                function showGames(){
+                        visible = document.getElementById("showingGames").style.visibility;
+                        if (visible == "hidden"){
+                                document.getElementById("showingGames").innerHTML = "<iframe style='border: goldenrod inset 2px;width: 85%;height: 300px;' src='https://catmeooww.github.io/CatMeooww-GamingArea/index.html#gameBox'></iframe>";
+                                document.getElementById("showingGames").style.visibility = "visible";
+                                document.getElementById("showGames").innerHTML = "-";
+                        }else{
+                                document.getElementById("showingGames").innerHTML = "";
+                                document.getElementById("showingGames").style.visibility = "hidden";
+                                document.getElementById("showGames").innerHTML = "+";
+                        }
+                }
         </script>
 </body>
 

diff --git a/index.html b/index.html
@@ -12,18 +12,23 @@
 </head>
 
 <body style="background-color: #5656DA">
+    <div class="menu">
+        <a href="catmeoowwProjects.html">CatMeooww10 Projects</a>
+        <span>|</span>
+        <a href="about.html">About CatMeooww10</a>
+    </div>
     <div id="page">
         <center>
             <h1>The Developer - CatMeooww10</h1>
             <hr>
-            <div id="catmeowdiv" class="col-md-6">
+            <div id="catmeowdiv" class="col-sm-12 col-md-6">
                 <img src="Icons/CatMeooww.jpg" width="376">
                 <p>My name is Cat Meooww, I am a developer of Minecraft mods, websites and games</p>
                 <div class="Projects">
                     <a href="about.html">More About Me</a>
                 </div>
             </div>
-            <div id="projects" class="col-md-6">
+            <div id="projects" class="col-sm-12 col-md-6">
                 <h3>My Projects</h3>
                 <div class="Projects">
                     <a href="https://catmeooww.github.io/Minecraft-Listing/" target="_blank">Minecraft Listing</a>

diff --git a/style.css b/style.css
@@ -7,12 +7,31 @@ body{
     font-family: Minecraft;
 }
 
+.menu{
+    background-color: rgba(0, 0, 0, 0.500);
+    border: outset 5px rgba(0, 0, 0, 0.500);
+    text-align: center;
+    z-index: 10;
+    top: 0;
+    position: sticky;
+}
+
+.menu:hover{
+    background-color: rgba(0, 0, 0, 0.800);
+    padding: 5px;
+}
+
 .title{
     color: #009000;
     text-shadow: 3px 3px 3px #007000;
     text-align: center;
 }
 
+.titlecontainer{
+    background-color: rgba(0, 0, 0, 0.500);
+    border: outset 5px rgba(0, 0, 0, 0.500);
+}
+
 #page{
     background: linear-gradient(#0a0a1f 0%, #5656DA 100%);
     border: #5656DA ridge 5px;
@@ -29,6 +48,7 @@ body{
     height: 50px;
     background-color: #0000ff60;
     border: #aa00aa ridge 3px;
+    cursor: pointer;
 }
 .Projects:hover{
     width: 500px;