timeToCode-ali · JoelCarr619 · Jun 13, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const Footer = () => {
+  return <div>Footer</div>
+
+}
+
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export const Header = () => {
+  return <div>Header</div>
+}
+
diff --git a/app/head.tsx b/app/head.tsx
@@ -0,0 +1,9 @@
+export default function Head() {
+  return (
+    <>
+      <title></title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,19 @@
+import { Footer } from "./components/footer"
+import { Header } from "./components/header"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <head />
+      <body>
+        <Header />
+        {children}
+        <Footer />
+        </body>
+    </html>
+  )
+}
diff --git a/app/my-projects/page.tsx b/app/my-projects/page.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+const MyProjects = () => {
+  return <div>MyProjects</div>
+
+}
+
+export default MyProjects
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const HomePage = () => {
+  return (
+    <div>HomePage</div>
+  )
+}
+
+export default HomePage
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-}
+  experimental: {
+    appDir: true,
+},
+};  
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/_app.tsx b/pages/_app.tsx
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: { config: './tailwind.config.js'},
     autoprefixer: {},
-  },
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,7 +6,72 @@ module.exports = {
     './app/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    colors: {
+      black: "#191a19",
+      blue: "#557AFF" ,
+      "blue-light": "#EFF3FF",
+      gray: "#D9D9D9",
+      "gray-light": "#FaFaFa",
+      green: "#68F590",
+      White: "#fff",
+    },
+    fontFamily: {
+      sans: ["Georgia", "sans-serif"],
+      serif: ["Merriweather", "serif"],
+      display: ["Oswald"], 
+    },
+    fontSize: {
+      sm: "0.8rem",
+      base: "1rem",
+      lg: "1.15rem", 
+      xl: "1.25rem",  
+      "2xl": "1.563rem",
+      "3xl": "1.953rem",
+      "4xl": "2.441rem",
+      "5xl": "3.052rem",
+      "6xl": "3.815rem",
+    },
+    minWidth: {
+      0: "0",
+      100: "100px",
+    },
+    extend: {
+      width: {
+        "1/3-g": "30%",
+      },
+      minHeight: {
+        50: "55px",
+      },
+      boxShadow: {
+        footer: "0px -7px 41px 3px rgba(175, 175, 175, 0.25)",
+      },
+      backgroundImage: {
+        header: 
+        "linear-gradient(98.85deg, #557AFF 7.8% rgba(239, 252, 255, 0) 0%, rgba(0, 0, 0, 0.0001) 100%), url('/images/header-bg.png')",
+      },
+      spacing: {
+        "8xl": "96rem",
+        "9xl": "128rem",
+      },
+      borderRadius: {
+        "4xl": "2rem",
+      },
+      flexBasis: {
+        "4/5": "66%",
+      },
+    },
+    screens: {
+      sm: "640px",
+      // => @media (min-width: 640px) { ... }
+      md: "768px",
+      // => @media (min-width: 768px)
+      lg: "1024px",
+      // => @media (min-width: 1024px)
+      xl: "1280px",
+      // => @media (min-width: 1280px)
+      "2xl": "1536px",
+      // => @media (min-width: 1536px)  
+    }, 
   },
   plugins: [],
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,22 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.js", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.js",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }