Adding basic structure for the site

starrlord1 · Jul 6, 2024 · 3aed760 · 3aed760
1 parent 2d04847
commit 3aed760
Show file tree

Hide file tree

Showing 16 changed files with 584 additions and 13 deletions.
diff --git a/public/techmurda-logo.jpeg b/public/techmurda-logo.jpeg
diff --git a/src/Layouts/BaseLayout.astro b/src/Layouts/BaseLayout.astro
@@ -0,0 +1,40 @@
+---
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import "../styles/global.css";
+const { pageTitle } = Astro.props;
+---
+
+
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/jpeg" href="/techmurda-logo.jpeg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{pageTitle}</title>
+
+
+
+
+    <link
+      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+
+
+    <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css?family=Roboto"/>
+
+
+
+  <body>
+    <Header/>
+    <h1>{pageTitle}</h1>
+    <slot />
+    <Footer/>
+    <script>
+    </script>
+  </body>
+</html>
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
@@ -0,0 +1,6 @@
+---
+const { title, url } = Astro.props
+---
+<li>
+    <a href={url}>{title}</a>
+</li>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -0,0 +1,25 @@
+---
+---
+
+<style>
+    footer {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 7rem;
+    }
+  </style>
+
+  <footer>
+    <div class="social-media">
+      <a href="https:www.twitter.com/techmurda" style="--i:1;"
+        ><i class="bx bxl-twitter"></i></a
+      >
+      <a
+        href="https://www.linkedin.com/in/william-h-0a62382a8?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"
+        style="--i:2;"><i class="bx bxl-linkedin"></i></a
+      >
+      <a href="https://t.me/techmurdablog" style="--i:3;"
+        ><i class="bx bxl-telegram"></i></a
+      >
+  </div>
+  </footer>
diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
@@ -0,0 +1,5 @@
+<div class="hamburger">
+    <span class="line"></span>
+    <span class="line"></span>
+    <span class="line"></span>
+  </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -0,0 +1,13 @@
+---
+import Hamburger from "./Hamburger.astro";
+import Navigation from "./Navigation.astro";
+import ThemeIcon from "./ThemeIcon.astro";
+---
+
+<header>
+  <nav>
+    <Hamburger />
+    <ThemeIcon />
+    <Navigation />
+  </nav>
+</header>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -0,0 +1,6 @@
+<div class="nav-links">
+    <a href="/" style="--i:1;">Home</a>
+    <a href="/blog" style="--i:2;">Blog</a>
+    <a href="/about" style="--i:3;">About</a>
+    <a href="/contact" style="--i:3;">Contact</a>
+</div>
diff --git a/src/components/Social.astro b/src/components/Social.astro
@@ -0,0 +1,6 @@
+---
+const { platform, username } = Astro.props;
+---
+
+<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
+
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
@@ -0,0 +1,70 @@
+---
+---
+
+<button id="themeToggle">
+    <svg width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        class="sun"
+        fill-rule="evenodd"
+        d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+      ></path>
+      <path
+        class="moon"
+        fill-rule="evenodd"
+        d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+      ></path>
+    </svg>
+  </button>
+
+  <style>
+     #themeToggle {
+      border: 0;
+      background:none;
+    }
+
+    .sun {
+      fill:rgb(162, 185, 216);
+    }
+    .moon {
+      fill: transparent;
+    }
+
+    :global(.dark) .sun {
+      fill: transparent;
+    }
+    :global(.dark) .moon {
+      fill: rgb(147, 170, 201);
+    }
+  </style>
+
+  <script is:inline>
+    const theme = (() => {
+      if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+        return localStorage.getItem("theme");
+      }
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+      }
+      return "light";
+    })();
+
+    if (theme === "light") {
+      document.documentElement.classList.remove("dark");
+    } else {
+      document.documentElement.classList.add("dark");
+    }
+
+    window.localStorage.setItem("theme", theme);
+
+    const handleToggleClick = () => {
+      const element = document.documentElement;
+      element.classList.toggle("dark");
+
+      const isDark = element.classList.contains("dark");
+      localStorage.setItem("theme", isDark ? "dark" : "light");
+    };
+
+    document
+      .getElementById("themeToggle")
+      .addEventListener("click", handleToggleClick);
+  </script>
diff --git a/src/pages/Topics.astro b/src/pages/Topics.astro
@@ -0,0 +1,15 @@
+---
+import BaseLayout from "../Layouts/BaseLayout.astro";
+---
+
+
+<BaseLayout>
+
+    <section class="topic">
+        <div class="topic-content">
+             <h1>Explore Topics</h1>
+             <p><b>Under Development</b></p>
+        </div>
+    </section>
+
+</BaseLayout>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -0,0 +1,59 @@
+---
+import BaseLayout from "../Layouts/BaseLayout.astro";
+
+const pageTitle = "About Me";
+const identity = {
+  firstName: "Will",
+  country: "America",
+  occupation: "Technical Writer",
+};
+
+const skills = ["Certified in Cybersecurity", "Customer Service Management", "CRM & Data Management", "Certfied Cryptocurrency Expert", "Hospitality Management", "POS Systems", "HTML,CSS", "Sales & Lead Generation", "Team Leadership & Collaboration"];
+
+const fontWeight = "bold";
+const textCase = "uppercase";
+---
+
+<style define:vars={{fontWeight, textCase }}>
+  .skill {
+    color: rgb(195, 112, 255);
+    font-weight: var(--fontWeight);
+    text-transform: var(--textCase);
+  }
+</style>
+
+<BaseLayout pageTitle={pageTitle}>
+  <h2>TechMurda Founder</h2>
+  <p>
+    I unofficially founded <b>TechMurda</b> at the age of 14 producing instrumentals. I started producing music not out of passion for it, but as a tool to channel the energy within that I was curious to understand. I was able to see some success in selling these instrumentals via the internet which provided me food and other essentials. I eventually lost interest and began to focus on a career in hospitality which is how I worked my way into hospitality management out of High School. I had to undergo various transformations to get to who I am today, and for that I am gratful. 
+  </p>
+
+
+      <p>The <b>vision</b> overtime is to transform this organization into a conglomerate, focusing on providing IT Services such as:      </p>
+      <li>Cybersecurity Support</li> <li>Blockchain Consulting</li> <li>Semiconductor Manufacturing</li> <li>A.I Consulting</li> <li>Defense Contracting</li> <li>Cloud Storage Solutions</li> <li>Decentralized Physical Infrastructure</li>
+
+
+
+      <p><b>TechMurda</b> will strive vigoursly to become a leader in providing educational resources to children in underserved areas who are interested in a career in growing fields such as Blockchain, A.I, & Cybersecurity. The aim would be to address future work shortages in these areas.<br>
+        <br>This would be achieved by collaborating with other organizations & developing an affilated Non-Profit organization with its entire infrastructure on the blockchain.  Donations made through the Non-Profit will be tracked via the blockchain, and contributors would be able to see exactly where the funds are going, who they're going to, as well as any updates in regards to how the funds were used.</p>
+
+
+
+  <p>Here are a few facts about me:</p>
+  <ul>
+    <li>My name is {identity.firstName}.</li>
+    <li>I live in {identity.country} working as a {identity.occupation}.</li>
+    <li>I am not an expert in anything. I am constantly learning, growing & evolving.</li>
+    <li>  
+    <p>
+      Currently expanding my technical and communication skills both spoken and written. My experience is predominatly customer service focused with an emphasis in hospitality management.
+    </p>
+    </li>
+    {
+
+    }
+  </ul>
+  <p>Skills & Certifications Include:</p><p></p><ul>
+    {skills.map((skill) => <li class="skill">{skill}</li>)}
+  </ul>
+</BaseLayout>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -0,0 +1,13 @@
+---
+import BaseLayout from "../Layouts/BaseLayout.astro";
+import BlogPost from "../components/BlogPost.astro";
+const pageTitle = "TechMurda Blog";
+const allPosts = await Astro.glob("../pages/posts/*.md");
+---
+
+<BaseLayout pageTitle={pageTitle}>
+  <p>v1.0</p>
+  <ul>
+    {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
+  </ul>
+</BaseLayout>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -0,0 +1,53 @@
+---
+const pageTitle = "Contact";
+import "../styles/global.css";
+import BaseLayout from "../Layouts/BaseLayout.astro";
+---
+
+<BaseLayout pageTitle={pageTitle}>
+  <div class="contact-box">
+    <form action="/">
+      <label for="fname">First Name</label>
+      <input
+        type="text"
+        id="fname"
+        name="firstname"
+        placeholder="Your First Name..."
+      />
+
+      <br />
+
+      <label for="lname">Last Name</label>
+      <input
+        type="text"
+        id="lname"
+        name="lastname"
+        placeholder="Last Name..."
+      />
+
+      <br />
+      <br />
+      <label for="country">Country</label>
+      <select id="country" name="country">
+        <option value="australia">Europe</option>
+        <option value="canada">Canada</option>
+        <option value="usa">USA</option>
+      </select>
+
+      <label for="subject">Subject</label>
+      <textarea
+        id="subject"
+        name="subject"
+        placeholder="Write something.."
+        style="height:80px"
+      >
+      </textarea>
+
+      <input type="submit" value="Submit" />
+    </form>
+  </div>
+
+  <p>
+    Please reach out via social media links below as this contact page is still under development.
+  </p>
+</BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,16 +1,26 @@
 ---
-
+import BaseLayout from "../Layouts/BaseLayout.astro";
 ---
+<BaseLayout>
+
+
+<section class="home">
+    <div class="home-content">
+         <h1>TechMurda</h1>
+         <h3>"The Vision"</h3>
+         <p>
+           <b>TechMurda</b> is all about empowering the future generations with the
+           knowledge and skills required to navigate the digital landscape, fostering
+           a secure and ethical digital space. This ensures a future where technology
+           will serve and guard humanity.
+         </p>
+         <a href="/Topics" class="btn">Explore Topics</a>
+    </div>
+</section>
+
+</BaseLayout>
+
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>
+<div class="logo">
+    <img src = "/techmurda-logo.jpeg" alt="TechMurda Logo">
+</div>
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
@@ -0,0 +1,22 @@
+---
+layout: ../../Layouts/MarkdownPostLayout.astro
+title: 'The Ghost in the Machine'
+pubDate: 2024-06-01
+description: "Exploring the idea of A.I conciousness, the future of the technology and its relationship to humanity."
+author: "William Halsey"
+image:
+  url: "/techmurda-logo.jpeg"
+  alt: "techmurda-logo"
+tags: ["techmurda", "blogging", "blockchain", "cryptocurrency", "artificial intelligence", "technical writing", "tech murda", "cybersecurity", "blockchain security", "web3"]
+
+---
+
+## The Ghost in the Machine: Can Humans Understand How Machines Think?
+
+Published on: 2022-07-01
+
+## I: Introduction
+
+LOADING
+
+## II: The Elusive Nature of Conciousness