initial commit

components/Container.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps({
+  center: Boolean,
+});
+</script>
+
+<template>
+  <div :class="['container', { center: center }]">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: space-between;
+  max-width: var(--max-width);
+  width: 100%;
+  gap: 2rem;
+}
+@media screen and (max-width: 600px) {
+  .container {
+    flex-direction: column;
+  }
+}
+.center {
+  align-items: center;
+}
+</style>

components/Navbar.vue

@@ -0,0 +1,64 @@
+<template>
+    <nav>
+      <div class="content">
+        <NuxtLink class="header" to="/">| brynblack |</NuxtLink>
+        <div class="links">
+          <NuxtLink to="/">Home</NuxtLink>
+          <NuxtLink to="/blog">Blog</NuxtLink>
+        </div>
+      </div>
+    </nav>
+  </template>
+  
+  <style scoped>
+  nav {
+    
+    backdrop-filter: blur(16px);
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    width: 100dvw;
+  
+    .content {
+      display: flex;
+      justify-content: space-between;
+      max-width: calc(var(--max-width) + 4rem);
+      padding: 2rem;
+      width: 100%;
+  
+      a {
+        text-decoration: none;
+        color: inherit;
+  
+        &:hover {
+          color: var(--accent);
+        }
+      }
+  
+      .router-link-exact-active {
+        color: var(--accent);
+        font-weight: bold;
+      }
+  
+      .header {
+        color: var(--fg);
+        font-weight: normal;
+  
+        &:hover {
+          color: var(--accent);
+        }
+      }
+  
+      @media (prefers-color-scheme: light) {
+        .header {
+          color: var(--bg);
+        }
+      }
+  
+      .links {
+        display: flex;
+        gap: 2rem;
+      }
+    }
+  }
+  </style>

components/ProjectCard.vue

@@ -0,0 +1,56 @@
+<script setup>
+const props = defineProps({
+  src: String,
+  href: String,
+  heading: String,
+  description: String
+});
+</script>
+
+<template>
+    <a class="image-container" :href="props.href">
+        <img class="image" :src="props.src" :alt="props.heading" style="width:100%;">
+        <div class="content">
+            <h2>{{props.heading}}</h2>
+            <p>{{props.description}}</p>
+        </div>
+    </a>
+    
+</template>
+
+<style>
+    .image-container{
+        position: relative;
+        text-align: center;
+        margin: 10px;
+        border-radius: 5px;
+        overflow: hidden;
+        color: white;
+
+    }
+
+    .content{
+        position: absolute;
+        bottom: 8px;
+        left: 16px;
+        text-align: left ;
+    }
+
+    .image{
+        filter: brightness(100%) blur(0px);
+        /* filter: blur(2px); */
+    }
+    .content{
+            visibility:hidden;
+    }
+
+    .image-container:hover{
+        .image{
+            filter: brightness(40%) blur(2px);
+        }
+        .content{
+            visibility:visible;
+        }
+        
+    }
+</style>

components/Purple.vue

@@ -0,0 +1,11 @@
+<template>
+    <span class="purple">
+      <slot />
+    </span>
+  </template>
+  
+  <style scoped>
+  .purple {
+    color: var(--accent);
+  }
+  </style>

components/Social.vue

@@ -0,0 +1,24 @@
+<script setup>
+const props = defineProps({
+  src: String,
+  href: String,
+});
+</script>
+
+<template>
+  <a :href="props.href" class="icon2">
+    <img :src="props.src" class="icon" />
+  </a>
+</template>
+
+<style scoped>
+.icon {
+  width: 48px;
+  
+}
+
+.icon2{
+  width: 48px;
+  
+}
+</style>

components/Socials.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="socials">
+      <slot />
+    </div>
+  </template>
+  
+  <style>
+  .socials {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  
+    a {
+      width: 1.75rem;
+  
+      &:hover {
+        transform: translateY(-5px);
+      }
+    }
+  }
+  </style>

components/TextCard.vue

@@ -0,0 +1,57 @@
+<script setup>
+const props = defineProps({
+  href: String,
+  heading: String,
+  description: String
+});
+</script>
+
+<template>
+    <a class="text-container" :href="props.href">
+        
+        <div class="text-content">
+            <h2>{{props.heading}}</h2>
+            <p>{{props.description}}</p>
+        </div>
+    </a>
+    
+</template>
+
+<style>
+    .text-container{
+        position: relative;
+        text-align: center;
+        margin: 10px;
+        border-radius: 5px;
+        overflow: hidden;
+        color: white;
+        background-color: rgb(62, 0, 104);
+        width: 300px;
+        height: 200px
+        
+    }
+
+    .text-content{
+        position: absolute;
+        bottom: 8px;
+        left: 16px;
+        text-align: left ;
+        
+    }
+
+    .text-image{
+        filter: brightness(100%) blur(0px);
+        /* filter: blur(2px); */
+    }
+    .text-content{
+            visibility:visible;
+    }
+
+    .text-container:hover{
+        background-color: var(--accent-dark);
+        .text-content{
+            visibility:visible;
+        }
+        
+    }
+</style>