48 possible ways to edit the content with nice gui instead of a js file suggestions

components/Button/index.js

@@ -1,19 +1,19 @@
 import React from "react";
 
-const Button = ({ children, type, onClick }) => {
+const Button = ({ children, type, onClick, classes }) => {
   if (type === "primary") {
     return (
       <button
         onClick={onClick}
-        className="mob:text-sm laptop:text-base p-2 mob:p-1 laptop:p-2 m-2 mob:m-1 laptop:m-2 rounded-lg text-white bg-sky-400 hover:bg-sky-600 first:ml-0">
+        className="mob:text-sm laptop:text-base p-2 mob:p-1 laptop:p-2 m-2 mob:m-1 laptop:m-2 rounded-lg text-white bg-black transition-all duration-300 ease-out first:ml-0 hover:scale-105 active:scale-100">
         {children}
       </button>
     );
   }
   return (
     <button
       onClick={onClick}
-      className="mob:text-sm laptop:text-base p-2 mob:p-1 laptop:p-2 m-2 mob:m-1 laptop:m-2 rounded-lg flex items-center transition-all ease-out duration-300 hover:bg-slate-100 hover:scale-105 active:scale-100  first:ml-0">
+      className={`mob:text-sm laptop:text-base p-2 mob:p-1 laptop:p-2 m-2 mob:m-1 laptop:m-2 rounded-lg flex items-center transition-all ease-out duration-300 hover:bg-slate-100 hover:scale-105 active:scale-100  first:ml-0 ${classes}`}>
       {children}
     </button>
   );

components/Header/index.js

@@ -2,23 +2,22 @@ import { useRouter } from "next/router";
 import React from "react";
 import Button from "../Button";
 // Local Data
-import data from "../../yourData";
+import data from "../../data/portfolio.json";
 
 const Header = ({ handleWorkScroll, handleAboutScroll, isBlog }) => {
   const router = useRouter();
   return (
     <div className="mt-10 flex flex-row items-center justify-between sticky bg-white top-0 z-10">
       <h1
         onClick={() => router.push("/")}
-        className="font-medium cursor-pointer mob:p-2 laptop:p-0"
-      >
+        className="font-medium cursor-pointer mob:p-2 laptop:p-0">
         {data.name}.
       </h1>
       {!isBlog ? (
         <div className="flex">
           <Button onClick={handleWorkScroll}>Work</Button>
           <Button onClick={handleAboutScroll}>About</Button>
-          {!data.hideBlog && (
+          {data.showBlog && (
             <Button onClick={() => router.push("/blog")}>Blog</Button>
           )}
           <Button onClick={() => window.open("mailto:hello@chetanverma.com")}>
@@ -28,7 +27,7 @@ const Header = ({ handleWorkScroll, handleAboutScroll, isBlog }) => {
       ) : (
         <div className="flex">
           <Button onClick={() => router.push("/")}>Home</Button>
-          {!data.hideBlog && (
+          {data.showBlog && (
             <Button onClick={() => router.push("/blog")}>Blog</Button>
           )}
           <Button onClick={() => window.open("mailto:hello@chetanverma.com")}>

components/Socials/index.js

@@ -1,8 +1,7 @@
 import React from "react";
 import Button from "../Button";
 
-import data from "../../yourData";
-import yourData from "../../yourData";
+import yourData from "../../data/portfolio.json";
 
 const Socials = ({ className }) => {
   return (

data/portfolio.json

@@ -0,0 +1 @@
+{"name":"Chetan","headerTaglineOne":"Hello 👋","headerTaglineTwo":"I'm Chetan Verma - curious","headerTaglineThree":"designer and devloper","headerTaglineFour":" based in New Delhi, India.","showBlog":true,"socials":[{"title":"Github","link":"https://github.com/chetanverma16"},{"title":"LinkedIn","link":"https://www.linkedin.com/in/chetanverma7/"},{"title":"Twitter","link":"https://twitter.com/realchetanverma"},{"title":"Blog","link":"https://blog.chetanverma.com/"},{"title":"Email","link":"mailto:hello@chetanverma.com"}],"projects":[{"id":"1","title":"Project One Test","description":"Web Design","imageSrc":"https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8Njl8fHBhc3RlbHxlbnwwfHwwfA%3D%3D&auto=format&fit=crop&w=400&q=60","url":"http://chetanverma.com/"},{"id":"2","title":"Project Two","description":"Web Development","imageSrc":"https://images.unsplash.com/photo-1605153864431-a2795a1b2f95?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwyNTY3ODl8fGVufDB8fHw%3D&auto=format&fit=crop&w=400&q=60","url":"http://chetanverma.com/"},{"id":"3","title":"Project Three","description":"Design","imageSrc":"https://images.unsplash.com/photo-1504083898675-c896ecdae86e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjJ8fHBhc3RlbHxlbnwwfHwwfA%3D%3D&auto=format&fit=crop&w=400&q=60","url":"http://chetanverma.com/"},{"id":"4","title":"Project Four","description":"Marketing","imageSrc":"https://images.unsplash.com/photo-1492171983775-a51717616c0d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NjB8fHBhc3RlbHxlbnwwfHwwfA%3D%3D&auto=format&fit=crop&w=400&q=60","url":"http://chetanverma.com/"},{"id":"5","title":"Project Five","description":"Development","imageSrc":"https://images.unsplash.com/photo-1534239143101-1b1c627395c5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NzZ8fHBhc3RlbHxlbnwwfHwwfA%3D%3D&auto=format&fit=crop&w=400&q=60","url":"http://chetanverma.com/"},{"id":"6","title":"Project Six","description":"Design & Development","imageSrc":"https://images.unsplash.com/photo-1517479149777-5f3b1511d5ad?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTAyfHxwYXN0ZWx8ZW58MHx8MHw%3D&auto=format&fit=crop&w=400&q=60","url":"http://chetanverma.com/"}],"services":[{"id":"1","title":"Art Direction","description":"We help with the creation and development of online advertising ideas, with particular focus on their visual appearance."},{"id":"2","title":"Branding","description":"We design key brand elements such as the logo, color scheme, typography, and other design components that makes your brand stand out from competitors."},{"id":"3","title":"Web Design","description":"We build and optimize your online presence.  Website is the digital entry point into your business and a powerful revenue channel."},{"id":"4","title":"3D Design","description":"We combine creative design and technical skills to build striking 3D visualisations that bring your project to life."},{"id":"05f6299a-ebed-4bc2-b5ab-584ebd8787cc","title":"New Service","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. "}],"aboutpara":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}