changed the header image to be dynamically updated within sanity studio

Mabast1 · May 28, 2022 · 72167b8 · 72167b8
1 parent e345dd9
commit 72167b8
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 50 deletions.
diff --git a/backend_sanity/sanity.json b/backend_sanity/sanity.json
@@ -1,12 +1,12 @@
 {
   "root": true,
-  "project": {
-    "name": "Portfolio"
-  },
   "api": {
     "projectId": "rrns9j1f",
     "dataset": "production"
   },
+  "project": {
+    "name": "Portfolio"
+  },
   "plugins": [
     "@sanity/base",
     "@sanity/default-layout",

diff --git a/backend_sanity/schemas/profile.js b/backend_sanity/schemas/profile.js
@@ -0,0 +1,14 @@
+export default {
+  name: "profile",
+  title: "Profile",
+  type: "document",
+  fields: [
+    { name: "title", title: "Title", type: "string" },
+    {
+      name: "image",
+      title: "Image",
+      type: "image",
+      options: { hotspot: true },
+    },
+  ],
+};
diff --git a/backend_sanity/schemas/schema.js b/backend_sanity/schemas/schema.js
@@ -11,6 +11,7 @@ import experiences from "./experiences";
 import skills from "./skills";
 import workExperience from "./workExperience";
 import contact from "./contact";
+import profile from "./profile";
 
 // Then we give our schema to the builder and provide the result to Sanity
 export default createSchema({
@@ -19,6 +20,7 @@ export default createSchema({
   // Then proceed to concatenate our document type
   // to the ones provided by any plugins that are installed
   types: schemaTypes.concat([
+    profile,
     works,
     testimonials,
     brands,

diff --git a/src/container/Header/Header.jsx b/src/container/Header/Header.jsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 
+import { urlFor, client } from "../../client";
 import { AppWrap } from "../../wrapper";
 import { images } from "../../constants";
 import "./Header.scss";
@@ -16,56 +17,69 @@ const scaleVariants = {
   },
 };
 
-const Header = () => (
-  <div className="app__header app__flex">
-    <motion.div
-      whileInView={{ x: [-100, 0], opacity: [0, 1] }}
-      transition={{ duration: 0.5 }}
-      className="app__header-info"
-    >
-      <div className="app__header-badge">
-        <div className="badge-cmp app__flex">
-          <span>👋</span>
-          <div style={{ marginLeft: 20 }}>
-            <p className="p-text">Hello, I am</p>
-            <h1 className="head-text">Mabast</h1>
+const Header = () => {
+  const [profile, setProfile] = useState([]);
+
+  useEffect(() => {
+    const query = '*[_type == "profile"]';
+
+    client.fetch(query).then((data) => setProfile(data));
+  }, []);
+
+  return (
+    <div className="app__header app__flex">
+      <motion.div
+        whileInView={{ x: [-100, 0], opacity: [0, 1] }}
+        transition={{ duration: 0.5 }}
+        className="app__header-info"
+      >
+        <div className="app__header-badge">
+          <div className="badge-cmp app__flex">
+            <span>👋</span>
+            <div style={{ marginLeft: 20 }}>
+              <p className="p-text">Hello, I am</p>
+              <h1 className="head-text">Mabast</h1>
+            </div>
           </div>
-        </div>
 
-        <div className="tag-cmp app__flex">
-          <p className="p-text">Full Stack</p>
-          <p className="p-text">Software Engineer</p>
+          <div className="tag-cmp app__flex">
+            <p className="p-text">Full Stack</p>
+            <p className="p-text">Software Engineer</p>
+          </div>
         </div>
-      </div>
-    </motion.div>
+      </motion.div>
 
-    <motion.div
-      whileInView={{ opacity: [0, 1] }}
-      transition={{ duration: 0.5, delayChildren: 0.5 }}
-      className="app__header-img"
-    >
-      <img src={images.profile1} alt="profile_bg" />
-      <motion.img
-        whileInView={{ scale: [0, 1] }}
-        transition={{ duration: 1, ease: "easeInOut" }}
-        src={images.circle}
-        alt="profile_circle"
-        className="overlay_circle"
-      />
-    </motion.div>
+      <motion.div
+        whileInView={{ opacity: [0, 1] }}
+        transition={{ duration: 0.5, delayChildren: 0.5 }}
+        className="app__header-img"
+      >
+        {profile.map((profile) => (
+          <img src={urlFor(profile.image)} alt="profile_bg" />
+        ))}
 
-    <motion.div
-      variants={scaleVariants}
-      whileInView={scaleVariants.whileInView}
-      className="app__header-circles"
-    >
-      {[images.react, images.javascript, images.sass].map((circle, index) => (
-        <div className="circle-cmp app__flex" key={`circle-${index}`}>
-          <img src={circle} alt="profile_bg" />
-        </div>
-      ))}
-    </motion.div>
-  </div>
-);
+        <motion.img
+          whileInView={{ scale: [0, 1] }}
+          transition={{ duration: 1, ease: "easeInOut" }}
+          src={images.circle}
+          alt="profile_circle"
+          className="overlay_circle"
+        />
+      </motion.div>
+
+      <motion.div
+        variants={scaleVariants}
+        whileInView={scaleVariants.whileInView}
+        className="app__header-circles"
+      >
+        {[images.react, images.javascript, images.sass].map((circle, index) => (
+          <div className="circle-cmp app__flex" key={`circle-${index}`}>
+            <img src={circle} alt="profile_bg" />
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  );
+};
 
 export default AppWrap(Header, "home");