Merge pull request #16 from nawazishali/develop

Merge dev into main

app.vue

@@ -6,13 +6,7 @@
       rel="stylesheet"
     />
   </Head>
-  <div class="container max-w-screen-lg px-6 relative pt-24">
-    <ColorModeToggle />
-    <IntroSection />
-    <ProjectsSection />
-    <OpenSourceSection />
-    <Footer/>
-  </div>
+  <NuxtPage/>
 </template>
 
 <script setup lang="ts">

assets/scss/base.scss

@@ -9,6 +9,7 @@ html {
   font-family: var(--font-style);
   @apply antialiased font-medium;
   scroll-behavior: smooth;
+  min-height: 100%;
 }
 
 .light-mode {
@@ -21,6 +22,7 @@ html {
   );
   background-size: 150% 150%;
   background-position: 70% 70%;
+  background-repeat: no-repeat;
   animation: gradient var(--gradient-animation-speed) ease infinite;
 }
 
@@ -34,6 +36,7 @@ html {
   color: var(--p-surface-200);
   background-size: 150% 150%;
   background-position: 80% 80%;
+  background-repeat: no-repeat;
   animation: gradient var(--gradient-animation-speed) ease infinite;
 }
 

content.config.ts

@@ -0,0 +1,23 @@
+import { defineContentConfig, defineCollection, z } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      type: 'page',
+      source: '**/*.md'
+    }),
+    projects: defineCollection({
+      type: 'data',
+      source: 'data/projects.json',
+      schema: z.object({
+        name: z.string(),
+        description: z.string(),
+        invlovement: z.string(),
+        Job: z.string(),
+        imageUrl: z.string(),
+        builtWith: z.string(),
+        link: z.string(),
+      })
+    })
+  }
+})

content/data/projects.json

@@ -0,0 +1,143 @@
+[
+  {
+    "name": "metru.io",
+    "description": "A platform that aims to innovate and improve the remote hiring culture using time shifted video interviews, Video Resumes and AI analysis for better professional match.",
+    "invlovement": "Full-Time",
+    "Job": "Development",
+    "imageUrl": "/images/projects/logos/metru-logo.png",
+    "builtWith": [
+      "HTML5",
+      "CSS3",
+      "SCSS",
+      "Javascript",
+      "Typescript",
+      "TailwindCSS",
+      "Vue.js",
+      "Nuxt.js",
+      "Pinia"
+    ],
+    "link": "https://utm.io"
+  },
+  {
+    "name": "utm.io",
+    "description": "utm.io The best way to build, share and sync UTM link with your team. Stop using messy spreadsheets and get good analytics.",
+    "invlovement": "Full-Time",
+    "Job": "Development",
+    "imageUrl": "/images/projects/logos/utmio.jpg",
+    "builtWith": [
+      "HTML5",
+      "CSS3",
+      "SCSS",
+      "Javascript",
+      "Angular",
+      "MongoDB",
+      "Express.js"
+    ],
+    "link": "https://utm.io"
+  },
+  {
+    "name": "Eyemed",
+    "description": "Eyemed Member Web is your hub for all things vision. See your benefit breakdown, savings snapshot, cost estimator, and a detailed eye doctor search.",
+    "invlovement": "Part-Time",
+    "Job": "Development",
+    "imageUrl": "/images/projects/logos/eyemed.svg",
+    "builtWith": [
+      "HTML5",
+      "CSS3",
+      "SCSS",
+      "Javascript",
+      "Vue.js",
+      "Node.js",
+      "Typescript"
+    ],
+    "link": "https://www.eyemed.com/en-us/member"
+  },
+  {
+    "name": "Cloudnosys",
+    "description": "This cloud security platform provides comprehensive protection with features like risk prioritization, compliance automation, and integrated threat detection and response.",
+    "invlovement": "Full-Time",
+    "Job": "Development",
+    "imageUrl": "/images/projects/logos/cloudnosys.jpg",
+    "builtWith": [
+      "HTML5",
+      "CSS3",
+      "SCSS",
+      "Javascript",
+      "React.js",
+      "Redux",
+      "Express.js",
+      "AWS"
+    ],
+    "link": "https://cloudnosys.com/"
+  },
+  {
+    "name": "procheck.io",
+    "description": "A platform that aims to streamline and improve manufacturing processes by leveraging Internet of Things (IoT) to gather real-time data from various sources across the factory floor.",
+    "invlovement": "Full-Time",
+    "Job": "Development",
+    "imageUrl": "/images/projects/logos/procheck.jpg",
+    "builtWith": [
+      "HTML5",
+      "CSS3",
+      "SCSS",
+      "Javascript",
+      "React.js",
+      "Redux",
+      "Express.js"
+    ],
+    "link": "https://procheck.io"
+  },
+  {
+    "name": "owner.app",
+    "description": "Experience the most efficient way to manage your real estate with OWNER from managing tenants to automatically billing and collecting rent..",
+    "invlovement": "Full-Time",
+    "Job": "Development",
+    "imageUrl": "/images/projects/logos/owner.svg",
+    "builtWith": [
+      "HTML5",
+      "CSS3",
+      "SCSS",
+      "Javascript",
+      "Angular",
+      "MongoDB",
+      "Express.js"
+    ],
+    "link": "https://owner.app/en"
+  },
+  {
+    "name": "BackTable",
+    "description": "An in-depth knowledge base for all things interventional radiology; covering tools, techniques, and expert guidance on more than 30 IR procedures.",
+    "invlovement": "Full-Time",
+    "Job": "Development",
+    "imageUrl": "/images/projects/logos/backtable.jpg",
+    "builtWith": [
+      "HTML5",
+      "CSS3",
+      "SCSS",
+      "Javascript",
+      "Angular",
+      "Ionic 3",
+      "MongoDB",
+      "Express.js",
+      "Loopback.js"
+    ],
+    "link": "https://backtable.com"
+  },
+  {
+    "name": "freeCodeCampKarachi",
+    "description": "A Landing Page for freeCodeCampKarachi built by me to help the group have better online presence.",
+    "invlovement": "Part-Time",
+    "Job": "Development",
+    "imageUrl": "/images/projects/logos/fcckarachi.png",
+    "builtWith": [
+      "HTML5",
+      "CSS3",
+      "SCSS",
+      "Javascript",
+      "JQuery",
+      "Materialize.css",
+      "Parcel.js"
+    ],
+    "link": "https://fcckarachi.github.io"
+  }
+]

content/index.md

@@ -0,0 +1,3 @@
+# My First Page
+
+Here is some content.

pages/content/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())
+
+useSeoMeta({
+  title: home.value?.title,
+  description: home.value?.description
+})
+</script>
+
+<template>
+  <ContentRenderer v-if="home" :value="home" />
+  <div v-else>Home not found</div>
+</template>

pages/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="container max-w-screen-lg px-6 relative pt-24">
+    <ColorModeToggle />
+    <IntroSection />
+    <ProjectsSection />
+    <OpenSourceSection />
+    <Footer/>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+let getProjects = async() => {
+  let data = await queryCollection('projects').all()
+  console.log(data)
+}
+getProjects()
+
+
+</script>