diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..d067910
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "typescript.enablePromptUseWorkspaceTsdk": true
+}
\ No newline at end of file
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
new file mode 100644
index 0000000..6ec399a
--- /dev/null
+++ b/app/components/footer.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const Footer = () => {
+ return
Footer
+
+}
+
diff --git a/app/components/header.tsx b/app/components/header.tsx
new file mode 100644
index 0000000..1d83e45
--- /dev/null
+++ b/app/components/header.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export const Header = () => {
+ return Header
+}
+
diff --git a/app/head.tsx b/app/head.tsx
new file mode 100644
index 0000000..772e640
--- /dev/null
+++ b/app/head.tsx
@@ -0,0 +1,9 @@
+export default function Head() {
+ return (
+ <>
+
+
+
+ >
+ )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..d01be51
--- /dev/null
+++ 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 (
+
+
+
+ {children}
+
+
+
+ )
+}
diff --git a/app/my-projects/page.tsx b/app/my-projects/page.tsx
new file mode 100644
index 0000000..5bcb567
--- /dev/null
+++ b/app/my-projects/page.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+const MyProjects = () => {
+ return MyProjects
+
+}
+
+export default MyProjects
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..a082c29
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const HomePage = () => {
+ return (
+ HomePage
+ )
+}
+
+export default HomePage
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 8b61df4..8785d5e 100644
--- 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
index 6a6c690..39106e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "resume-app",
+ "name": "portfolio-app",
"lockfileVersion": 3,
"requires": true,
"packages": {
diff --git a/pages/_app.tsx b/pages/_app.tsx
deleted file mode 100644
index 3f5c9d5..0000000
--- a/pages/_app.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
-
-function MyApp({ Component, pageProps }: AppProps) {
- return
-}
-
-export default MyApp
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e..0000000
--- a/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
- name: string
-}
-
-export default function handler(
- req: NextApiRequest,
- res: NextApiResponse
-) {
- res.status(200).json({ name: 'John Doe' })
-}
diff --git a/pages/index.tsx b/pages/index.tsx
deleted file mode 100644
index 2dc922d..0000000
--- a/pages/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import Head from 'next/head'
-import Image from 'next/image'
-
-const Home = () => {
- return (
-
-
-
Create Next App
-
-
-
-
-
-
-
- Get started by editing{' '}
-
- pages/index.tsx
-
-
-
-
-
-
-
-
- )
-}
-
-export default Home
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..36b70b9 100644
--- 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
index 95b7c46..a25230d 100644
--- 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
index 6dbeda8..cd05090 100644
--- 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"
+ ]
}