first commit

main.css

@@ -0,0 +1,140 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: rgb(40, 40, 40);
+    /* font-family: arial, sans-serif; */
+    font-family: 'Roboto', sans-serif;
+    color: white;
+    overflow-x: hidden; /* Hide horizontal scrollbar */
+}
+
+/* variables */
+:root {
+    /* navbar settings */
+    --logo_margin: 4px;
+    --logo_height: 40px;
+    --navbar_height: calc(var(--logo_height) + var(--logo_margin) * 2);
+}
+
+/* everything in the navbar */
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    height: var(--navbar_height);
+    background-color: #333;
+}
+
+nav li {
+    float: left;
+    height: calc(var(--logo_height) + var(--logo_margin) * 2);
+}
+
+nav img {
+    width: auto;
+    height: var(--logo_height);
+    margin: var(--logo_margin);
+    margin-left: 16px;
+    margin-right: 16px;
+    border-radius: 15px; /* rounded corners */
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
+    transition: 0.3s;
+}
+
+nav img:hover {
+    transform: scale(1.1);
+    border-radius: 5px; /* rounded corners */
+    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+nav a {
+    display: block;
+    color: white;
+    /* make text fill up emtire li space */
+    display:inline-block;
+    height:100%;
+    /* make padding on the left and right of the text */
+    padding: 0 12px;
+    /* center text verticaly */
+    line-height: var(--navbar_height);
+    text-decoration: none;
+}
+
+nav a:hover {
+    background-color: #444;
+}
+
+/* make div with class "over_render" to be on top of three js render canvas */
+#over_render {
+    position: absolute;
+    width: 100%;
+    height: 512px; /* height of the render canvas */
+    top: var(--navbar_height);
+    /* verticaly center everything in that div */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+
+#main_box {
+    /* center everything in div horizontally*/
+    text-align: center;
+
+    padding: 10px 30px;
+
+    /* rounded corners */
+    border-radius: 8px;
+
+    /* blurry, transparent glass */
+    backdrop-filter: blur(100px);
+    background-image: url(assets/textures/noise.png);
+
+    /* make text look like overexposed blue neon */
+    color: rgb(247, 255, 230);
+    text-shadow: 0px 0px 8px rgb(223, 255, 153);
+
+    font-size: 50px;
+    line-height: 20px;
+}
+
+.projects_box {
+    /* rounded corners */
+    border-radius: 8px;
+
+    background-color: rgb(30, 30, 30);
+
+    width: 80%;
+
+    /* aling div in the center of the screen */
+    margin: auto;
+    
+    margin-top: 40px;
+
+    padding: 1px 40px 30px;
+}
+
+.projects_box h1 {
+    /* make font bigger and cyan */
+    font-size: 60px;
+    color: rgb(51, 156, 255);
+}
+
+footer {
+    height: 50px;
+    background-color: #333;
+    text-align: center;
+
+    margin: 50px 0px 0px;
+
+    /* vertcaly center text */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+footer img {
+    width: auto;
+    height: 40px;
+    margin-left: 20px;
+}