adjusted layout

ayush391 · ayush391 · commit 3e9fa255ead0 · 2023-05-30T21:44:10.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.1.3",
+    "@react-spring/parallax": "^9.7.2",
     "@react-spring/web": "^9.7.2",
     "@types/node": "20.2.5",
     "@types/react": "18.2.7",
@@ -18,6 +19,7 @@
     "autoprefixer": "10.4.14",
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.4",
+    "framer-motion": "^10.12.16",
     "next": "13.4.4",
     "postcss": "8.4.24",
     "react": "18.2.0",
diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
@@ -8,7 +8,7 @@ export default function Header() {
   useChain([nameRef, bioRef], [0, 0.8]);
 
   return (
-    <div className="flex md:flex-row flex-col md:gap-14 gap-5 w-full max-w-4xl">
+    <div className="flex md:flex-row flex-col md:gap-14 gap-5 w-full max-w-screen-xl md:justify-center max-sm:items-center">
       <div className="flex flex-col gap-2">
         <Trail animRef={nameRef}>
           <div className="font-medium text-4xl">Ayush</div>
diff --git a/src/app/components/projects.tsx b/src/app/components/projects.tsx
@@ -13,7 +13,7 @@ export default function Projects() {
 
   useChain([projectsRef, headingRef], [0.2, 1], 1500);
   return (
-    <div className="flex flex-col gap-8 w-full max-w-4xl">
+    <div className="flex flex-col gap-8 w-full max-w-[1150px]">
       <Trail animRef={headingRef}>
         <div className="font-medium text-2xl">Recent Projects</div>
       </Trail>
diff --git a/src/app/components/socials.tsx b/src/app/components/socials.tsx
@@ -15,7 +15,7 @@ export default function Socials() {
   const socialRef = useSpringRef();
   useChain([socialRef]);
   return (
-    <div className="flex gap-8 w-full max-w-4xl">
+    <div className="flex gap-8 w-full max-w-screen-xl justify-center">
       <Trail animRef={socialRef}>
         <Link href={LINKS.GITHUB} target="_blank">
           <BgSpringAnim>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,21 +1,21 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import Experience from "./components/experience";
 import Header from "./components/header";
 import Projects from "./components/projects";
diff --git a/src/app/projects/aldifest/page.tsx b/src/app/projects/aldifest/page.tsx
@@ -0,0 +1,3 @@
+export default function AldifestPage() {
+  return <div className="bg-blue">asdasd</div>;
+}
diff --git a/src/app/projects/layout.tsx b/src/app/projects/layout.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+export default function ProjectsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <motion.div
+      initial={{ width: 10 }}
+      animate={{ width: 100 }}
+      exit={{ width: 10 }}
+      transition={{
+        type: "spring",
+        stiffness: 260,
+        damping: 20,
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`"use client";`
`2`		`-`
`3`	`2`	`import Experience from "./components/experience";`
`4`	`3`	`import Header from "./components/header";`
`5`	`4`	`import Projects from "./components/projects";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function AldifestPage() {`
	`2`	`+ return <div className="bg-blue">asdasd</div>;`
	`3`	`+}`