Dev 1

.prettierignore

@@ -1,6 +1,6 @@
 # local env files
 .env*.local
-
+*.mdx 
 # dependencies
 /node_modules
 /.pnp

next.config.js

@@ -26,25 +26,6 @@ const nextConfig = {
 module.exports = nextConfig;
 
 const securityHeaders = [
-  {
-    key: 'Content-Security-Policy',
-    value: `
-      frame-ancestors 'none';
-      default-src 'self';
-      img-src 'self' blob: data: avatars.githubusercontent.com;
-      script-src 'self';
-      font-src 'self';
-      style-src 'self';
-      media-src 'none';
-      connect-src 'self';
-      base-uri 'self';
-			form-action 'self';
-      frame-src 'self' *.codesandbox.io *.x.com;
-      block-all-mixed-content;
-			upgrade-insecure-requests;
-      object-src 'none';
-  `,
-  },
   {
     key: 'Referrer-Policy',
     value: 'no-referrer, strict-origin-when-cross-origin',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mysite",
-  "version": "1.0.1",
+  "version": "0.8.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -48,6 +48,7 @@
     "webpack": "^5.90.1"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.0",
     "@nextui-org/react": "^2.2.9",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-separator": "^1.0.3",
@@ -57,6 +58,7 @@
     "dotenv": "^16.3.1",
     "framer-motion": "^10.17.4",
     "front-matter": "^4.0.2",
+    "gsap": "^3.12.5",
     "lucide-react": "^0.309.0",
     "next": "^14.0.4",
     "next-mdx-remote": "^4.4.1",

public/blogs/CSRF-mitigation-techniques.mdx

@@ -0,0 +1,13 @@
+---
+title: CSRF Mitigation
+seoTitle: No BS guide over how to actually do it to the most
+summary: No BS guide over how to actually do it to the most
+isReleased: true
+isSequel: false
+lastModDate: 2020-04-19T09:15:00-0401
+firstModDate: 2020-04-19T09:15:00-0401
+minutesToRead: 5
+tags:
+  - 'react'
+  - 'framer-motion'
+---

public/blogs/framer-motion.mdx

@@ -1,12 +1,12 @@
 ---
 title: Framer Motion
 seoTitle: Streamlining Animations with Framer Motion in React
-summary: Changed the way I handle animations in React
+summary: Supercharging animations in React
 isReleased: true
 isSequel: false
 lastModDate: 2020-04-19T09:15:00-0401
 firstModDate: 2020-04-19T09:15:00-0401
-minutesToRead: 18
+minutesToRead: 5
 tags:
   - 'react'
   - 'framer-motion'
@@ -75,7 +75,9 @@ showLineNumbers={true}
 <Code
   code=
 {`const Component: React.FC = () => {
+
   const [isVisible, setIsVisible] = useState(false);
+
   return (
     <div className="flex items-center justify-center py-2">
       <div
@@ -99,12 +101,15 @@ showLineNumbers={true}
 
 <Code
   code={`const Component: React.FC = () => {
+
   const [isVisible, setIsVisible] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     // Handle it when in view
     setIsVisible(!isVisible);
   }, [ref]);
+
   return (
     <div className="flex items-center justify-center py-2">
       <div
@@ -148,9 +153,11 @@ showLineNumbers={true}
   code={`
 import React, { useEffect, useRef, useState } from 'react';
 import './styles.css';
+
 const Component: React.FC = () => {
   const [isVisible, setIsVisible] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const current = ref.current;
     const observer = new IntersectionObserver(
@@ -171,6 +178,7 @@ const Component: React.FC = () => {
       }
     };
   }, [ref]);
+
   return (
     <div className="flex items-center justify-center py-2">
       <div
@@ -182,6 +190,7 @@ const Component: React.FC = () => {
     </div>
   );
 };
+
 export default Component;
 const FadingText: React.FC = () => {
   return (
@@ -206,6 +215,7 @@ const FadingText: React.FC = () => {
   code={`
 import React from 'react';
 import { motion } from 'framer-motion';
+
 const FramerMotionFadeInComponent: React.FC = () => {
   return (
     <div className="flex justify-center items-center py-2">
@@ -227,6 +237,7 @@ const FramerMotionFadeInComponent: React.FC = () => {
   code={`
 import React from 'react';
 import { motion } from 'framer-motion';
+
 const FramerMotionFadeInComponent: React.FC = () => {
   return (
      <div className="flex justify-center items-center py-2">
@@ -265,13 +276,15 @@ const FramerMotionFadeInComponent: React.FC = () => {
 <C>Here's the code for it </C>
 <Code
   code={`import { motion } from 'framer-motion';
+
 export default function YeetMe() {
   const initial = {
     opacity: 0,
     borderRadius: 0,
     scale: 0,
     rotate: 360,
   };
+
   const animate = {
     opacity: 1,
     width: 160,
@@ -281,17 +294,21 @@ export default function YeetMe() {
     boxShadow: '10px 10px 0 rgba(255, 46, 199, 0.2)',
     rotate: 0,
   };
+
   const transition = {
     duration: 1,
     type: 'keyframes',
     ease: 'easeInOut',
   };
+
   const whileHover = {
     cursor: 'grab',
   };
+
   const whileDrag = {
     cursor: 'grabbing',
   };
+
   return (
     <motion.button
       layout