stars and optimizations

Catniped · Nov 12, 2023 · 94f6490 · 94f6490
1 parent f630b55
commit 94f6490
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 15 deletions.
diff --git a/blog.html b/blog.html
@@ -4,7 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="styles/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet">
     <title>Catniped - Blog</title>
+    <meta content="Catniped - Blog" property="og:title" />
+    <meta content="my blog posts!" property="og:description" />
+    <meta content="https://ferkokrc5.github.io/blog.html" property="og:url" />
+    <meta content="#B174F7" data-react-helmet="true" name="theme-color" />
   </head>
   <body style="background-color: rgb(82, 82, 138); margin: 0 0 0 0;">
 

diff --git a/index.html b/index.html
@@ -4,13 +4,16 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="styles/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet">
     <title>Catniped - Home</title>
     <meta content="Catnipeds portfolio" property="og:title" />
     <meta content="my projects, blogs, and other silliness" property="og:description" />
     <meta content="https://ferkokrc5.github.io/" property="og:url" />
     <meta content="#B174F7" data-react-helmet="true" name="theme-color" />
   </head>
-  <body style="background-color: rgb(82, 82, 138); margin: 0 0 0 0;">
+  <body class="stars" style="background-color: rgb(82, 82, 138); margin: 0 0 0 0;">
 
     <div class="navbar">
       <a class="active" href="index.html">Homepage</a>
@@ -22,19 +25,16 @@
         <p class="title" style="margin-right: 0.5vw; margin-bottom: 0; margin-top: 0;">Hi, i'm Catniped</p>
         <img class="image1" style="margin-bottom: 0;" src="https://cdn.discordapp.com/attachments/1117747399356583989/1129380857132625980/Untitled37_20230625230043.png" alt="My pfp"> 
     </div>
-    <p class="subtext" style="margin-left: 10%; margin-top: 0.1svw;">mobile users begone</p>
+    <p class="subtext" style="margin-left: 10%; margin-top: 0.1svw;">interesting quote here</p>
     <p class="content">i do things, check them out:</p><br>
-    <p class="content"><a href="projects.html">project list </a></p><br>
-      <div class="content" style="display: flex; margin-left: 10%;">
-      <a href="posts/metal-3dp-journey-1.html">3D printing metal blog post</a><img class="image3" src="posts/hp45_assembled.jpg"></div>
-
-
-
 
-    <br>
+    <div class="content" style="display: flex;">
+    <div><a href="projects.html">project list</a><br>
+    <a href="posts/metal-3dp-journey-1.html">3D printing metal blog post</a></div>
+    <img class="image3" src="posts/hp45_assembled.jpg">
+    </div>
 
     <hr class="divider1">
-
     <center>
         <p class="subtext">bottom text</p>
     </center>

diff --git a/posts/metal-3dp-journey-1.html b/posts/metal-3dp-journey-1.html
@@ -4,14 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="../styles/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet">
     <title>Catniped - Blog</title>
     <meta content="the journey to 3D printing metal - part 1" property="og:title" />
     <meta content="3D printing metals, ceramics, sugar, chocolate, and all other kinds of weird powdered substances cheaply at home! the first blog post about the grungler, a binder jetting 3D printer developed by me and a few friends." property="og:description" />
     <meta content="https://ferkokrc5.github.io/posts/metal-3dp-journey-1.html" property="og:url" />
     <meta content="https://cdn.discordapp.com/attachments/1117747399356583989/1173014479626317834/20231110_204935.jpg?ex=656269dd&is=654ff4dd&hm=174d2d6072f3cedde41d4d7dbfabb39a08419e4351ffa2be40e336af8253f37d&" property="og:image" />
     <meta content="#B174F7" data-react-helmet="true" name="theme-color" />
   </head>
-  <body style="background-color: rgb(82, 82, 138); margin: 0 0 0 0;">
+  <body style="background-color: rgb(82, 82, 138); margin: 0 0 0 0; font-family: Poppins;">
 
     <div class="navbar">
       <a href="../index.html">Homepage</a>

diff --git a/posts/templatearticle.html b/posts/templatearticle.html
@@ -4,7 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="../styles/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet">
     <title>Catniped - Blog</title>
+    <meta content="Title" property="og:title" />
+    <meta content="Description" property="og:description" />
+    <meta content="link" property="og:url" />
+    <meta content="image" property="og:image" />
+    <meta content="#B174F7" data-react-helmet="true" name="theme-color" />
   </head>
   <body style="background-color: rgb(82, 82, 138); margin: 0 0 0 0;">
 

diff --git a/projects.html b/projects.html
@@ -4,7 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="styles/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet">
     <title>Catniped - Projects</title>
+    <meta content="Catniped - Projects" property="og:title" />
+    <meta content="my projects!" property="og:description" />
+    <meta content="https://ferkokrc5.github.io/projects.html" property="og:url" />
+    <meta content="#B174F7" data-react-helmet="true" name="theme-color" />
   </head>
   <body style="background-color: rgb(82, 82, 138); margin: 0 0 0 0;">
 
@@ -14,7 +21,7 @@
       <a class="active" href="projects.html">Projects</a>
     </div><br>
 
-    <div onclick="location.href='';" onmouseover="this.style.boxShadow = '0 10px 36px 0 rgba(0,0,0,0.2),0 6px 40px 0 rgba(0,0,0,0.19)';" onmouseout="this.style.boxShadow = '0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)';" class="post-container">
+    <div onclick="location.href='posts/metal-3dp-journey-1.html';" onmouseover="this.style.boxShadow = '0 10px 36px 0 rgba(0,0,0,0.2),0 6px 40px 0 rgba(0,0,0,0.19)';" onmouseout="this.style.boxShadow = '0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)';" class="post-container">
       <p id="title">the grungler / affordable powder 3DP </p><p id="content">a cheap 3D printer utilizing the binder jetting/3DP process, which allows for printing of a huge amount of materials via proper binder/powder material combinations.</p><br>
     </div><br>
 

diff --git a/styles/style.css b/styles/style.css
@@ -1,5 +1,23 @@
 /* Common styles */
 
+body {
+	background-image: 
+	  radial-gradient(2px 2px at 20px 30px, rgb(192, 158, 232), rgba(0, 0, 0, 0)),
+	  radial-gradient(2px 2px at 40px 70px, rgb(192, 158, 232), rgba(0,0,0,0)),
+	  radial-gradient(2px 2px at 50px 160px, rgb(192, 158, 232), rgba(0,0,0,0)),
+	  radial-gradient(2px 2px at 90px 40px, rgb(192, 158, 232), rgba(0,0,0,0)),
+	  radial-gradient(2px 2px at 130px 80px, rgb(192, 158, 232), rgba(0,0,0,0)),
+	  radial-gradient(2px 2px at 160px 120px, rgb(192, 158, 232), rgb(82, 82, 138));
+	background-repeat: repeat;
+	background-size: 200px 200px;
+	overflow-x: hidden;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+  }
+
 .title {
 	-webkit-text-fill-color: aliceblue;
 	font-family: Poppins;
@@ -64,7 +82,6 @@ a {
 
 .navbar {
 	width: 100%;
-	height: 20%;
 	background-color: rgb(140, 74, 255);
 	padding: 0.2vw;
 	box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
@@ -95,7 +112,6 @@ a {
 
 .post-container {
     width:50%;
-	height:40%;
 	margin:0.1vw;
 	padding-left: 1vw;
 	padding-top: 0.5vw;
@@ -104,7 +120,7 @@ a {
     background: rgb(63, 5, 188);
 	border-style: solid;
 	border-color: rgb(106, 108, 249);
-	border-radius: 25px;
+	border-radius: 2vw;
 	box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
 	display: block;

diff --git a/test.html b/test.html
@@ -0,0 +1,34 @@
+<html>
+ <head>
+  <title>Testing a starfield</title>
+  <style>
+#space, .stars {
+
+}
+
+.stars {
+  background-image: 
+    radial-gradient(2px 2px at 20px 30px, rgb(192, 158, 232), rgba(0, 0, 0, 0)),
+    radial-gradient(2px 2px at 40px 70px, rgb(192, 158, 232), rgba(0,0,0,0)),
+    radial-gradient(2px 2px at 50px 160px, rgb(192, 158, 232), rgba(0,0,0,0)),
+    radial-gradient(2px 2px at 90px 40px, rgb(192, 158, 232), rgba(0,0,0,0)),
+    radial-gradient(2px 2px at 130px 80px, rgb(192, 158, 232), rgba(0,0,0,0)),
+    radial-gradient(2px 2px at 160px 120px, rgb(192, 158, 232), rgb(82, 82, 138));
+  background-repeat: repeat;
+  background-size: 200px 200px;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+  </style>
+ </head>
+ <body>
+  <div id="space">
+   <div class="stars"></div>
+  </div>
+ </body>
+</html>