Merge pull request #10 from vignesh-gupta/content-dyanamic

Updated the Content dynamically with Sanity

app/(root)/layout.tsx

@@ -2,6 +2,82 @@ import clsx from "clsx";
 import Navbar from "@/components/sections/Navbar";
 import Footer from "@/components/sections/Footer";
 import { preahvihear } from "@/components/constants/designConstants";
+import { Metadata } from "next";
+import { m } from "framer-motion";
+
+export const metadata: Metadata = {
+  title: "Portfolio | Vignesh Gupta",
+  themeColor: [
+    {
+      color: "#11071f",
+    },
+    {
+      color: "#7127ba",
+    },
+    {
+      color: "#1a0b2e",
+    },
+    {
+      color: "#CCD6F6",
+    },
+  ],
+  description: "Vignesh Gupta's Portfolio",
+  authors: {
+    name: "Vignesh Gupta",
+    url: "https://vigneshgupta.vercel.app/",
+  },
+  colorScheme: "dark",
+  creator: "Vignesh Gupta",
+  publisher: "Vignesh Gupta",
+  keywords: [
+    "vignesh",
+    "gupta",
+    "hcl",
+    "front end developer",
+    "react developer",
+    "full stack",
+    "product developer",
+    "software project",
+    "full stack developer",
+    "developer",
+    "software engineer",
+    "software developer",
+    "react create app",
+    "web developer",
+  ],
+  openGraph: {
+    type: "website",
+    url: "https://vigneshgupta.vercel.app/",
+    title: "Portfolio | Vignesh Gupta",
+    description: "Vignesh Gupta's Portfolio",
+    siteName: "Vignesh Gupta Portfolio",
+    emails: ["vighneshgupta32@gmail.com"],
+    locale: "en_US",
+    images: [
+      {
+        url: "https://vigneshgupta.vercel.app/_next/image?url=%2Fhero.png&w=256&q=75",
+        width: 256,
+        height: 75,
+        alt: "Vignesh Gupta's Portfolio",
+      },
+    ],
+  },
+  twitter: {
+    creator: "@VighneshGupta9",
+    creatorId: "twitter.com/VighneshGupta9",
+    site: "https://vigneshgupta.vercel.app/",
+    title: "Portfolio | Vignesh Gupta",
+    images: [
+      {
+        url: "https://vigneshgupta.vercel.app/_next/image?url=%2Fhero.png&w=256&q=75",
+        width: 256,
+        height: 75,
+        alt: "Vignesh Gupta's Portfolio",
+      },
+    ]
+  },
+  metadataBase: new URL("https://vigneshgupta.vercel.app"),
+};
 
 const HomeLayout = ({ children }: { children: React.ReactNode }) => {
   return (

components/Project.tsx

@@ -2,7 +2,14 @@ import clsx from "clsx";
 import Image from "next/image";
 import React from "react";
 
-const Project = ({ isEven }: { isEven: boolean }) => {
+type ProjectProps = {
+  title: string;
+  isEven: boolean;
+  description: string;
+  imgUrl: string;
+};
+
+const Project = ({ isEven, title, description, imgUrl }: ProjectProps) => {
   return (
     <div
       className={clsx(
@@ -17,27 +24,27 @@ const Project = ({ isEven }: { isEven: boolean }) => {
         )}
       >
         <p className="font-bold text-primary-text">Featured Project</p>
-        <h4 className="text-3xl text-secondary-text">Project Name</h4>
+        <h4 className="text-3xl text-secondary-text">{title}</h4>
 
         <div
           className={clsx(
             " p-6 z-10 bg-blue-300 rounded-md backdrop-filter backdrop-blur-lg bg-opacity-10 self-start ",
             isEven ? "lg:-mr-12" : "lg:-ml-12"
           )}
         >
-          <p>
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-            Voluptates, enim voluptatum quos ab, earum commodi ut vel molestias
-            eos dolores labore a mollitia debitis amet soluta praesentium
-            temporibus ratione rem.
-          </p>
+          <p>{description}</p>
         </div>
       </div>
 
       <div className="lg:p-10 p-6  relative w-full basis-auto flex-grow bg-[#2B0B3A] rounded-lg">
-        <div className={clsx("radial-gradient brightness-50 h-full rounded-full blur-sm absolute w-full top-0 lg:block hidden" , isEven? "-left-1/3 " : "left-1/3")} />
+        <div
+          className={clsx(
+            "radial-gradient brightness-50 h-full rounded-full blur-sm absolute w-full top-0 lg:block hidden",
+            isEven ? "-left-1/3 " : "left-1/3"
+          )}
+        />
         <Image
-          src="https://dummyimage.com/600x400/ffffff/7027ba.png"
+          src={imgUrl}
           className="transform rounded-lg object-cover w-full h-full shadow-xl"
           alt="project name"
           width={300}

components/SkillsCircle.tsx

@@ -1,10 +1,10 @@
 import Image from 'next/image'
 import React from 'react'
 
-const SkillsCircle = () => {
+const SkillsCircle = ({name , icon} : {name: string , icon: string}) => {
   return (
     <div className='w-20 h-20 p-2 flex justify-center items-center rounded-full bg-secondary'>
-      <Image loading='lazy' src="/hero.png" alt="Vignesh Gupta" width={50} height={50} />
+      <Image loading='lazy' src={icon} alt={name} width={50} height={50} className='rounded-full object-contain' />
     </div>
   )
 }

components/sections/Projects.tsx

@@ -1,22 +1,29 @@
-import React from "react";
+"use client";
+
+import React, { useEffect, useState } from "react";
 
 import Project from "../Project";
 import clsx from "clsx";
 import { poppins } from "../constants/designConstants";
-
+import { getProjects } from "@/sanity/utils";
 
 const Projects = () => {
+  const [projects, setProjects] = useState<any[]>([]);
+
+  useEffect(() => {
+    getProjects(true)
+      .then((res) => setProjects(res))
+      .catch(console.error);
+  }, []);
   return (
     <div
       className={clsx("w-full my-10 flex flex-col gap-10", poppins.className)}
     >
       {/* TODO: Fetch Project and display */}
 
-      {Array<number>(3)
-        .fill(0)
-        .map((_, i) => (
-          <Project key={i} isEven={i % 2 === 0} />
-        ))}
+      {projects.map((project, i) => (
+        <Project title={project.title} description={project.description} imgUrl={project.imgUrl} key={i} isEven={i % 2 === 0} />
+      ))}
     </div>
   );
 };

components/sections/Skills.tsx

@@ -1,8 +1,21 @@
-import React from "react";
+"use client";
+
+import React, { useEffect, useState } from "react";
 import SkillsCircle from "../SkillsCircle";
 import Image from "next/image";
+import { getSkills } from "@/sanity/utils";
 
 const Skills = () => {
+  // const data = await client.fetch(`*[_type == "skills"]`)
+
+  const [skills, setSkills] = useState<any[]>([]);
+
+  useEffect(() => {
+    getSkills()
+      .then((res) => setSkills(res))
+      .catch(console.error);
+  }, []);
+
   return (
     <div className="w-full">
       <p className="lg:text-2xl md:text-xl text-lg w-full text-center mb-5">
@@ -16,14 +29,11 @@ const Skills = () => {
 
       {/* TODO: Fetch Skills Dynamically */}
       <div className="flex justify-center items-center gap-3 flex-wrap">
-        {Array(9)
-          .fill(0)
-          .map((val, i) => (
-            <SkillsCircle key={i} />
-          ))}
+        {skills.map(({ _id, name, icon }) => (
+          <SkillsCircle key={_id} name={name} icon={icon} />
+        ))}
       </div>
 
-
       <div className="relative md:mt-20 mt-10 w-full mb-10 overflow-visible">
         <div className="radial-gradient h-full rounded-full brightness-50 blur-sm absolute left-1/4 lg:top-8 md:top-6 top-4 w-1/2" />
         <Image

next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ['dummyimage.com'],
+    domains: ['dummyimage.com' , "cdn.sanity.io"],
   }
 }
 

sanity.config.ts

@@ -1,4 +1,5 @@
 import { deskTool } from 'sanity/desk';
+import {visionTool} from '@sanity/vision'
 import { defineConfig } from 'sanity'
 import schemas from './sanity/schemas'
 
@@ -12,7 +13,7 @@ const client = defineConfig({
   apiVersion, 
   title: "Dev Portfolio",
   basePath: "/admin",
-  plugins: [deskTool()],
+  plugins: [deskTool(), visionTool()],
   schema: { types: schemas }
 })
 

sanity/schemas/documents/project.ts

@@ -32,7 +32,12 @@ const project = {
         hotspot: true,
       },
     },
-
+    {
+      name: "isFeatured",
+      title: "Is Featured",
+      type: "boolean",
+      default: false,
+    },
     {
       name: "tags",
       title: "Tags",

sanity/schemas/documents/skill.ts

@@ -8,11 +8,6 @@ const skill = {
             title:'Name',
             type:'string'
         },
-        {
-            name:'bgColor',
-            title:'BgColor',
-            type:'string'
-        },
         {
             name:'icon',
             title:'Icon',

sanity/schemas/index.ts

@@ -1,15 +1,13 @@
 import about from "@/sanity/schemas/documents/about";
 import brands from "@/sanity/schemas/documents/brands";
 import contact from "@/sanity/schemas/documents/contact";
-import page from "@/sanity/schemas/documents/pageSchema";
 import project from "@/sanity/schemas/documents/project";
 import skill from "@/sanity/schemas/documents/skill";
 import testimonial from "@/sanity/schemas/documents/testimonial";
 import experience from "@/sanity/schemas/documents/experience";
 import duration from "@/sanity/schemas/objects/duration";
 
 const schemas = [
-  page,
   about,
   brands,
   contact,

sanity/utils/index.ts

@@ -1,15 +1,29 @@
 import { createClient, groq } from "next-sanity";
-import clientConfig from '../config'
+import clientConfig from "../config";
 
+export async function sanityFetch(query: string) {
+  return createClient(clientConfig).fetch(groq`${query}`);
+}
 
-// TODO: Remove the below function. Just an eg.
-export async function getPages(){
-  return createClient(clientConfig).fetch(
-    groq`*[_type == "page"]{
-      _id,
-      _createdAt,
-      title,
-      "slug": slug.current,
-    }`
-  )
+export async function getSkills() {
+  return sanityFetch(`*[_type == "skill"]{
+    _id,
+    _createdAt,
+    name,
+    "icon": icon.asset->url,
+  }`);
 }
+
+export async function getProjects(featuredOnly = false) {
+  return sanityFetch(`*[_type == "project"  ${featuredOnly ? "&& isFeatured == true " : ""}]{
+    _id,
+    _createdAt,
+    title,
+    description,
+    codeLink,
+    projectLink,
+    tags,
+    isFeatured,
+    "imgUrl": imgUrl.asset->url
+  }${featuredOnly ? "[0...3]" : ""}`);
+}