fix projects page and beautify blogs

.contentlayer/.cache/v0.3.4/compiled-contentlayer-config-BWCTWV7G.mjs → .contentlayer/.cache/v0.3.4/compiled-contentlayer-config-ETAV3356.mjs

@@ -43,6 +43,16 @@ var Project = defineDocumentType(() => ({
       type: "string",
       description: "The year of the project",
       required: true
+    },
+    color: {
+      type: "string",
+      description: "The color of the project",
+      required: true
+    },
+    bgcolor: {
+      type: "string",
+      description: "The background color of the project",
+      required: true
     }
   },
   computedFields: {
@@ -59,4 +69,4 @@ var contentlayer_config_default = makeSource({
 export {
   contentlayer_config_default as default
 };
-//# sourceMappingURL=compiled-contentlayer-config-BWCTWV7G.mjs.map
+//# sourceMappingURL=compiled-contentlayer-config-ETAV3356.mjs.map

.contentlayer/.cache/v0.3.4/compiled-contentlayer-config-BWCTWV7G.mjs.map → .contentlayer/.cache/v0.3.4/compiled-contentlayer-config-ETAV3356.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../contentlayer.config.js"],
-  "sourcesContent": ["import {\r\n    defineNestedType,\r\n    defineDocumentType,\r\n    makeSource,\r\n} from \"contentlayer/source-files\";\r\n\r\nconst Project = defineDocumentType(() => ({\r\n    name: \"Project\",\r\n    filePathPattern: `projects/*.mdx`,\r\n    contentType: \"mdx\",\r\n    fields: {\r\n        title: {\r\n            type: \"string\",\r\n            description: \"The title of the project\",\r\n            required: true,\r\n        },\r\n        location: {\r\n            type: \"string\",\r\n            description: \"The location of the project\",\r\n            required: true,\r\n        },\r\n        date: {\r\n            type: \"string\",\r\n            description: \"The date of the project\",\r\n            required: true,\r\n        },\r\n        image: {\r\n            type: \"string\",\r\n            description: \"The feature image of the project\",\r\n            required: true,\r\n        },\r\n        client: {\r\n            type: \"string\",\r\n            description: \"The client of the project\",\r\n            required: true,\r\n        },\r\n        role: {\r\n            type: \"string\",\r\n            description: \"The role of the project\",\r\n            required: true,\r\n        },\r\n        year: {\r\n            type: \"string\",\r\n            description: \"The year of the project\",\r\n            required: true,\r\n        },\r\n    },\r\n    computedFields: {\r\n        url: {\r\n            type: \"string\",\r\n            resolve: (doc) => `/${doc._raw.flattenedPath}`,\r\n        },\r\n    },\r\n}));\r\n\r\nexport default makeSource({\r\n    contentDirPath: \"content\",\r\n    documentTypes: [Project],\r\n});\r\n"],
-  "mappings": ";AAAA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,IAAM,UAAU,mBAAmB,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,QAAQ;AAAA,IACJ,OAAO;AAAA,MACH,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,EACJ;AAAA,EACA,gBAAgB;AAAA,IACZ,KAAK;AAAA,MACD,MAAM;AAAA,MACN,SAAS,CAAC,QAAQ,IAAI,IAAI,KAAK,aAAa;AAAA,IAChD;AAAA,EACJ;AACJ,EAAE;AAEF,IAAO,8BAAQ,WAAW;AAAA,EACtB,gBAAgB;AAAA,EAChB,eAAe,CAAC,OAAO;AAC3B,CAAC;",
+  "sourcesContent": ["import {\r\n    defineNestedType,\r\n    defineDocumentType,\r\n    makeSource,\r\n} from \"contentlayer/source-files\";\r\n\r\nconst Project = defineDocumentType(() => ({\r\n    name: \"Project\",\r\n    filePathPattern: `projects/*.mdx`,\r\n    contentType: \"mdx\",\r\n    fields: {\r\n        title: {\r\n            type: \"string\",\r\n            description: \"The title of the project\",\r\n            required: true,\r\n        },\r\n        location: {\r\n            type: \"string\",\r\n            description: \"The location of the project\",\r\n            required: true,\r\n        },\r\n        date: {\r\n            type: \"string\",\r\n            description: \"The date of the project\",\r\n            required: true,\r\n        },\r\n        image: {\r\n            type: \"string\",\r\n            description: \"The feature image of the project\",\r\n            required: true,\r\n        },\r\n        client: {\r\n            type: \"string\",\r\n            description: \"The client of the project\",\r\n            required: true,\r\n        },\r\n        role: {\r\n            type: \"string\",\r\n            description: \"The role of the project\",\r\n            required: true,\r\n        },\r\n        year: {\r\n            type: \"string\",\r\n            description: \"The year of the project\",\r\n            required: true,\r\n        },\r\n        color: {\r\n            type: \"string\",\r\n            description: \"The color of the project\",\r\n            required: true,\r\n        },\r\n        bgcolor: {\r\n            type: \"string\",\r\n            description: \"The background color of the project\",\r\n            required: true,\r\n        },\r\n    },\r\n    computedFields: {\r\n        url: {\r\n            type: \"string\",\r\n            resolve: (doc) => `/${doc._raw.flattenedPath}`,\r\n        },\r\n    },\r\n}));\r\n\r\nexport default makeSource({\r\n    contentDirPath: \"content\",\r\n    documentTypes: [Project],\r\n});\r\n"],
+  "mappings": ";AAAA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,IAAM,UAAU,mBAAmB,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,QAAQ;AAAA,IACJ,OAAO;AAAA,MACH,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACd;AAAA,EACJ;AAAA,EACA,gBAAgB;AAAA,IACZ,KAAK;AAAA,MACD,MAAM;AAAA,MACN,SAAS,CAAC,QAAQ,IAAI,IAAI,KAAK,aAAa;AAAA,IAChD;AAAA,EACJ;AACJ,EAAE;AAEF,IAAO,8BAAQ,WAAW;AAAA,EACtB,gBAAgB;AAAA,EAChB,eAAe,CAAC,OAAO;AAC3B,CAAC;",
   "names": []
 }

.contentlayer/generated/Project/_index.mjs

@@ -1,9 +1,9 @@
 // NOTE This file is auto-generated by Contentlayer
 
+import projects__modernEcoFriendlyResidenceMdx from './projects__modern-eco-friendly-residence.mdx.json' assert { type: 'json' }
 import projects__contemporaryBeachfrontVillaMdx from './projects__contemporary-beachfront-villa.mdx.json' assert { type: 'json' }
 import projects__highTechSmartHomeMdx from './projects__high-tech-smart-home.mdx.json' assert { type: 'json' }
-import projects__modernEcoFriendlyResidenceMdx from './projects__modern-eco-friendly-residence.mdx.json' assert { type: 'json' }
 import projects__sustainableOfficeBuildingMdx from './projects__sustainable-office-building.mdx.json' assert { type: 'json' }
 import projects__urbanLoftRenovationMdx from './projects__urban-loft-renovation.mdx.json' assert { type: 'json' }
 
-export const allProjects = [projects__contemporaryBeachfrontVillaMdx, projects__highTechSmartHomeMdx, projects__modernEcoFriendlyResidenceMdx, projects__sustainableOfficeBuildingMdx, projects__urbanLoftRenovationMdx]
+export const allProjects = [projects__modernEcoFriendlyResidenceMdx, projects__contemporaryBeachfrontVillaMdx, projects__highTechSmartHomeMdx, projects__sustainableOfficeBuildingMdx, projects__urbanLoftRenovationMdx]

.contentlayer/generated/types.d.ts

@@ -27,6 +27,10 @@ export type Project = {
   role: string
   /** The year of the project */
   year: string
+  /** The color of the project */
+  color: string
+  /** The background color of the project */
+  bgcolor: string
   /** MDX file body */
   body: MDX
   url: string

.contentlayer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dot-contentlayer",
   "description": "This package is auto-generated by Contentlayer",
-  "version": "0.0.0-BWCTWV7G",
+  "version": "0.0.0-ETAV3356",
   "exports": {
     "./generated": {
       "import": "./generated/index.mjs"

app/globals.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
     margin: 0;
     padding: 0;

app/layout.jsx

@@ -1,6 +1,8 @@
+"use client";
 import "./globals.css";
 import { Inter } from "next/font/google";
 import Navbar from "@/components/Navbar";
+import Contact from "@/components/Contact";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -15,6 +17,7 @@ export default function RootLayout({ children }) {
             <body className={inter.className}>
                 <Navbar />
                 {children}
+                <Contact />
             </body>
         </html>
     );

app/page.jsx

@@ -6,14 +6,12 @@ import About from "@/components/About";
 import InfoResume from "@/components/InfoResume";
 import Skills from "@/components/Skills";
 import Work from "@/components/Work";
-import Contact from "@/components/Contact";
 import { motion } from "framer-motion";
 
 export default function Home() {
     const variants = {
         hidden: {
             opacity: 0,
-            //x: -32,
         },
         enter: {
             opacity: 1,
@@ -26,7 +24,6 @@ export default function Home() {
         },
         exit: {
             opacity: 0,
-            //x: 32,
             transition: {
                 duration: 0.25,
                 ease: [0.2, 0.65, 0.3, 0.9],
@@ -48,7 +45,6 @@ export default function Home() {
             <InfoResume />
             <Skills />
             <Work />
-            <Contact />
         </motion.main>
     );
 }

app/projects/[slug]/ProjectContent.jsx

@@ -64,41 +64,34 @@ const ProjectContent = ({ project }) => {
                         src={project.image}
                         width={1065}
                         height={644}
-                        className="object-cover object-top"
                         alt={project.title}
                     />
                 </div>
-                <article className={styles.article_content}>
-                    <div className={styles.work}>
-                        <div className={styles.work_info}>
-                            <div className={styles.title_name}>
-                                <div className={styles.title}>
-                                    <p>Client</p>
-                                </div>
-                                <div className={styles.name}>
-                                    {project.client}
-                                </div>
+                <div className={styles.work}>
+                    <div className={styles.work_info}>
+                        <div className={styles.title_name}>
+                            <div className={styles.title}>
+                                <p>Client</p>
                             </div>
+                            <div className={styles.name}>{project.client}</div>
+                        </div>
 
-                            <div className={styles.title_name}>
-                                <div className={styles.title}>
-                                    <p>Year</p>
-                                </div>
-                                <div className={styles.name}>
-                                    {project.year}
-                                </div>
+                        <div className={styles.title_name}>
+                            <div className={styles.title}>
+                                <p>Year</p>
                             </div>
+                            <div className={styles.name}>{project.year}</div>
+                        </div>
 
-                            <div className={styles.title_name}>
-                                <div className={styles.title}>
-                                    <p>Role</p>
-                                </div>
-                                <div className={styles.name}>
-                                    {project.role}
-                                </div>
+                        <div className={styles.title_name}>
+                            <div className={styles.title}>
+                                <p>Role</p>
                             </div>
+                            <div className={styles.name}>{project.role}</div>
                         </div>
                     </div>
+                </div>
+                <article className="prose prose-sm md:prose-base lg:prose-lg mx-auto">
                     <MDXContent />
                 </article>
             </div>

app/projects/[slug]/styles.module.css

@@ -92,6 +92,7 @@
     align-items: center;
     justify-content: center;
     margin-top: 3vw;
+    margin-bottom: 3vw;
 }
 
 .work_info {

components/Contact/index.jsx

@@ -25,7 +25,7 @@ export default function Contact() {
                         <AnimatedTitle title="Let's work" />
                     </h1>
                     <h1>
-                        <AnimatedTitle title="Together" />
+                        <AnimatedTitle title="Together." />
                     </h1>
                 </div>
                 <div className={styles.nav}>

components/Gallery/index.jsx

@@ -8,7 +8,7 @@ import { useTransform, useScroll, motion } from "framer-motion";
 const images = [
     "1.webp",
     "2.webp",
-    "3.jpg",
+    "3.webp",
     "4.jpg",
     "5.jpg",
     "6.jpg",

components/Navbar/nav/index.jsx

@@ -22,7 +22,7 @@ const links = [
     },
     {
         title: "Contact",
-        href: "/#contact",
+        href: "#contact",
     },
 ];
 

components/Navbar/styles.module.css

@@ -33,10 +33,14 @@
     justify-content: center;
     cursor: pointer;
     margin-left: 8vw;
+    width: 70px;
+    height: 30px;
 }
 
 .brand img {
-    width: auto;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .menu {

components/Projects/PostCard/index.jsx

@@ -2,6 +2,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { motion } from "framer-motion";
+import styles from "./styles.module.css";
 
 const PostCard = ({ project, index }) => {
     index *= 0.05;

components/Projects/index.jsx

@@ -12,7 +12,7 @@ const Items = ({ currentItems }) => {
         <>
             {currentItems &&
                 currentItems.map((project, index) => {
-                    index *= 0.5;
+                    index *= 0.05;
                     return (
                         <motion.div
                             className={styles.projects_card}
@@ -24,6 +24,7 @@ const Items = ({ currentItems }) => {
                             }}
                             viewport={{ once: true }}
                             key={index}
+                            style={{ backgroundColor: `${project.bgcolor}` }}
                         >
                             <div className={styles.card}>
                                 <Link href={project.url}>
@@ -42,7 +43,12 @@ const Items = ({ currentItems }) => {
                                     </span>
                                     <div className={styles.project_title}>
                                         <h3>
-                                            <Link href={project.url}>
+                                            <Link
+                                                style={{
+                                                    color: `${project.color}`,
+                                                }}
+                                                href={project.url}
+                                            >
                                                 {project.title}
                                             </Link>
                                         </h3>

components/Projects/styles.module.css

@@ -2,16 +2,18 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    gap: 0.2em;
+    gap: 1vw;
     align-items: center;
     justify-content: center;
 }
 
 .projects_card {
     display: flex;
     flex: 0 1;
-    padding: 0.5rem;
-    border: 1px black solid;
+    padding: 0.8rem;
+    border-radius: 20px;
+    justify-content: center;
+    align-items: center;
 }
 
 .card {
@@ -28,8 +30,8 @@
     justify-content: center;
     position: relative;
     flex: auto;
-    height: 30vw;
-    width: 40vw;
+    height: 28vw;
+    width: 38vw;
 }
 
 .imageWrapper img {
@@ -65,12 +67,17 @@
 }
 
 @media only screen and (max-width: 735px) {
+    .container {
+        gap: 2vw;
+    }
+
     .projects_card {
         flex: 1;
+        padding: 0.5;
     }
 
     .imageWrapper {
         height: 50vw;
-        width: 80vw;
+        width: 77vw;
     }
 }

components/Work/ProjectCard/styles.module.css

@@ -6,7 +6,7 @@
 
 .card {
     display: flex;
-    border-radius: 25px;
+    border-radius: 24px;
     text-decoration: none;
     padding-bottom: 10px;
 }
@@ -59,13 +59,14 @@
     position: relative;
     height: 30vw;
     width: 80vw;
+    margin-bottom: clamp(1rem, 2vw + 0.9rem, 3em);
 }
 
 .imageWrapper img {
     object-fit: cover;
     height: 100%;
     width: 100%;
-    border-radius: 15px;
+    border-radius: 16px;
 }
 
 @media only screen and (max-width: 675px) {

content/projects/contemporary-beachfront-villa.mdx

@@ -7,6 +7,8 @@ location: "Miami, FL"
 year: "2019"
 role: "Interior Design"
 client: "David Anderson"
+color: "#00397C"
+bgcolor: "#EFF5FD"
 ---
 
 ## The Client

content/projects/high-tech-smart-home.mdx

@@ -7,6 +7,8 @@ location: "Seattle, WA"
 year: "2021"
 role: "Interior Design"
 client: "Jennifer Miller"
+color: "#00397C"
+bgcolor: "#EFF5FD"
 ---
 
 ## The Client

content/projects/modern-eco-friendly-residence.mdx

@@ -7,6 +7,8 @@ location: "Los Angeles, CA"
 year: "2023"
 role: "Interior Design"
 client: "Sarah and John Smith"
+color: "#00397C"
+bgcolor: "#EFF5FD"
 ---
 
 ## The Client

content/projects/sustainable-office-building.mdx

@@ -7,6 +7,8 @@ location: "San Francisco, CA"
 year: "2022"
 role: "Interior Design"
 client: "Michael and Maria Rodriguez"
+color: "#00397C"
+bgcolor: "#EFF5FD"
 ---
 
 ## The Client

content/projects/urban-loft-renovation.mdx

@@ -7,6 +7,8 @@ location: "New York City, NY"
 year: "2021"
 role: "Interior Design"
 client: "Emily Turner"
+color: "#00397C"
+bgcolor: "#EFF5FD"
 ---
 
 ## The Client