From f8e1d97d165d8ee763157bb9bc34b5584ffca605 Mon Sep 17 00:00:00 2001 From: "madeha.youssof" Date: Tue, 27 Feb 2024 01:32:12 +0300 Subject: [PATCH 1/2] test --- package-lock.json | 193 +++++++++++++++++++++------------------------- src/app/page.jsx | 2 +- 2 files changed, 87 insertions(+), 108 deletions(-) diff --git a/package-lock.json b/package-lock.json index f257168a..2d7d351d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,23 +1,23 @@ { - "name": "nextportstarter", + "name": "lama-dev-portfolio-starter", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "nextportstarter", + "name": "lama-dev-portfolio-starter", "version": "0.1.0", "dependencies": { "next": "14.1.0", - "react": "^18", - "react-dom": "^18" + "react": "18", + "react-dom": "18" }, "devDependencies": { - "autoprefixer": "^10.0.1", - "eslint": "^8", + "autoprefixer": "10.0.1", + "eslint": "8", "eslint-config-next": "14.1.0", - "postcss": "^8", - "tailwindcss": "^3.3.0" + "postcss": "8", + "tailwindcss": "3.3.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -29,18 +29,6 @@ "node": ">=0.10.0" } }, - "node_modules/@alloc/quick-lru": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", - "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/@babel/runtime": { "version": "7.23.9", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", @@ -828,31 +816,17 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.17", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz", - "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==", + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.0.1.tgz", + "integrity": "sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==", "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], "dependencies": { - "browserslist": "^4.22.2", - "caniuse-lite": "^1.0.30001578", - "fraction.js": "^4.3.7", + "browserslist": "^4.14.5", + "caniuse-lite": "^1.0.30001137", + "colorette": "^1.2.1", "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" + "num2fraction": "^1.2.2", + "postcss-value-parser": "^4.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" @@ -860,6 +834,10 @@ "engines": { "node": "^10 || ^12 || >=14" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, "peerDependencies": { "postcss": "^8.1.0" } @@ -1103,6 +1081,12 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/colorette": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", + "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==", + "dev": true + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -1966,19 +1950,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/fraction.js": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", - "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", - "dev": true, - "engines": { - "node": "*" - }, - "funding": { - "type": "patreon", - "url": "https://github.com/sponsors/rawify" - } - }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3087,6 +3058,12 @@ "node": ">=0.10.0" } }, + "node_modules/num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==", + "dev": true + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -3404,9 +3381,9 @@ } }, "node_modules/postcss-import": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", - "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", + "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", "dev": true, "dependencies": { "postcss-value-parser": "^4.0.0", @@ -3414,7 +3391,7 @@ "resolve": "^1.1.7" }, "engines": { - "node": ">=14.0.0" + "node": ">=10.0.0" }, "peerDependencies": { "postcss": "^8.0.0" @@ -3440,26 +3417,20 @@ } }, "node_modules/postcss-load-config": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", - "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], "dependencies": { - "lilconfig": "^3.0.0", - "yaml": "^2.3.4" + "lilconfig": "^2.0.5", + "yaml": "^1.10.2" }, "engines": { - "node": ">= 14" + "node": ">= 10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" }, "peerDependencies": { "postcss": ">=8.0.9", @@ -3474,22 +3445,13 @@ } } }, - "node_modules/postcss-load-config/node_modules/lilconfig": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz", - "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==", - "dev": true, - "engines": { - "node": ">=14" - } - }, "node_modules/postcss-nested": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", - "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", + "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==", "dev": true, "dependencies": { - "postcss-selector-parser": "^6.0.11" + "postcss-selector-parser": "^6.0.10" }, "engines": { "node": ">=12.0" @@ -3570,6 +3532,18 @@ } ] }, + "node_modules/quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -4183,40 +4157,45 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", - "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.0.tgz", + "integrity": "sha512-hOXlFx+YcklJ8kXiCAfk/FMyr4Pm9ck477G0m/us2344Vuj355IpoEDB5UmGAsSpTBmr+4ZhjzW04JuFXkb/fw==", "dev": true, "dependencies": { - "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", + "color-name": "^1.1.4", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.3.0", + "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.19.1", - "lilconfig": "^2.1.0", + "jiti": "^1.17.2", + "lilconfig": "^2.0.6", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.23", - "postcss-import": "^15.1.0", - "postcss-js": "^4.0.1", - "postcss-load-config": "^4.0.1", - "postcss-nested": "^6.0.1", + "postcss": "^8.0.9", + "postcss-import": "^14.1.0", + "postcss-js": "^4.0.0", + "postcss-load-config": "^3.1.4", + "postcss-nested": "6.0.0", "postcss-selector-parser": "^6.0.11", - "resolve": "^1.22.2", - "sucrase": "^3.32.0" + "postcss-value-parser": "^4.2.0", + "quick-lru": "^5.1.1", + "resolve": "^1.22.1", + "sucrase": "^3.29.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" }, "engines": { - "node": ">=14.0.0" + "node": ">=12.13.0" + }, + "peerDependencies": { + "postcss": "^8.0.9" } }, "node_modules/tapable": { @@ -4663,12 +4642,12 @@ "dev": true }, "node_modules/yaml": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", - "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", "dev": true, "engines": { - "node": ">= 14" + "node": ">= 6" } }, "node_modules/yocto-queue": { diff --git a/src/app/page.jsx b/src/app/page.jsx index 4dfb0aa9..c002ed62 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,5 +1,5 @@ const Homepage = () => { - return
Hello World
; + return
Hello World Madeha
; }; export default Homepage; From 5a67b661eac096586336d19146ef4475843a2784 Mon Sep 17 00:00:00 2001 From: "madeha.youssof" Date: Wed, 6 Mar 2024 20:03:12 +0300 Subject: [PATCH 2/2] navbar and hero section --- package-lock.json | 39 ++++++++++ package.json | 11 +-- src/app/about/page.jsx | 7 ++ src/app/contact/page.jsx | 7 ++ src/app/layout.js | 10 ++- src/app/page.jsx | 32 +++++++- src/app/portofolio/page.jsx | 7 ++ src/components/Navbar/NavLink.jsx | 21 +++++ src/components/Navbar/Navbar.jsx | 112 +++++++++++++++++++++++++++ src/components/Navbar/SocialLink.jsx | 12 +++ src/constant.js | 14 ++++ 11 files changed, 265 insertions(+), 7 deletions(-) create mode 100644 src/app/about/page.jsx create mode 100644 src/app/contact/page.jsx create mode 100644 src/app/portofolio/page.jsx create mode 100644 src/components/Navbar/NavLink.jsx create mode 100644 src/components/Navbar/Navbar.jsx create mode 100644 src/components/Navbar/SocialLink.jsx create mode 100644 src/constant.js diff --git a/package-lock.json b/package-lock.json index 2d7d351d..ba09de64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "lama-dev-portfolio-starter", "version": "0.1.0", "dependencies": { + "framer-motion": "^11.0.8", "next": "14.1.0", "react": "18", "react-dom": "18" @@ -41,6 +42,21 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -1950,6 +1966,29 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/framer-motion": { + "version": "11.0.8", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.8.tgz", + "integrity": "sha512-1KSGNuqe1qZkS/SWQlDnqK2VCVzRVEoval379j0FiUBJAZoqgwyvqFkfvJbgW2IPFo4wX16K+M0k5jO23lCIjA==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", diff --git a/package.json b/package.json index 199fbe06..6f588874 100644 --- a/package.json +++ b/package.json @@ -9,15 +9,16 @@ "lint": "next lint" }, "dependencies": { + "framer-motion": "^11.0.8", + "next": "14.1.0", "react": "18", - "react-dom": "18", - "next": "14.1.0" + "react-dom": "18" }, "devDependencies": { "autoprefixer": "10.0.1", - "postcss": "8", - "tailwindcss": "3.3.0", "eslint": "8", - "eslint-config-next": "14.1.0" + "eslint-config-next": "14.1.0", + "postcss": "8", + "tailwindcss": "3.3.0" } } diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx new file mode 100644 index 00000000..e8958472 --- /dev/null +++ b/src/app/about/page.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const About = () => { + return
About
; +}; + +export default About; diff --git a/src/app/contact/page.jsx b/src/app/contact/page.jsx new file mode 100644 index 00000000..bbd47bce --- /dev/null +++ b/src/app/contact/page.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Contact = () => { + return
Contact
; +}; + +export default Contact; diff --git a/src/app/layout.js b/src/app/layout.js index 36c27904..4b23555e 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,5 +1,6 @@ import { Inter } from "next/font/google"; import "./globals.css"; +import Navbar from "@/components/Navbar/Navbar"; const inter = Inter({ subsets: ["latin"] }); @@ -11,7 +12,14 @@ export const metadata = { export default function RootLayout({ children }) { return ( - {children} + +
+
+ +
+
{children}
+
+ ); } diff --git a/src/app/page.jsx b/src/app/page.jsx index c002ed62..f0cca24f 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,5 +1,35 @@ +import Image from "next/image"; + const Homepage = () => { - return
Hello World Madeha
; + return ( +
+ {/* Image Container */} +
+ hero-img +
+ + {/* Text Container */} +
+

Front-End Developer

+ +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam + voluptas cumque ipsa. Corporis delectus maiores repellendus corrupti + odit aliquam eveniet vero similique, dolor veniam cum, magni beatae + optio et eum! +

+ +
+ + +
+
+
+ ); }; export default Homepage; diff --git a/src/app/portofolio/page.jsx b/src/app/portofolio/page.jsx new file mode 100644 index 00000000..e101e6af --- /dev/null +++ b/src/app/portofolio/page.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Portofolio = () => { + return
Portofolio
; +}; + +export default Portofolio; diff --git a/src/components/Navbar/NavLink.jsx b/src/components/Navbar/NavLink.jsx new file mode 100644 index 00000000..32b25b68 --- /dev/null +++ b/src/components/Navbar/NavLink.jsx @@ -0,0 +1,21 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; + +const NavLink = ({ link }) => { + const pathName = usePathname(); + + return ( + + {link.title} + + ); +}; + +export default NavLink; diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx new file mode 100644 index 00000000..2327efc1 --- /dev/null +++ b/src/components/Navbar/Navbar.jsx @@ -0,0 +1,112 @@ +"use client"; + +import Link from "next/link"; +import { useState } from "react"; +import NavLink from "./NavLink"; +import SocialLink from "./SocialLink"; +import { LINKS, SOCIAL_LINKS } from "@/constant"; +import { motion } from "framer-motion"; + +const Navbar = () => { + const [open, setOpen] = useState(false); + const [loading, setLoading] = useState(false); + + const topVariants = { + closed: { + rotate: 0, + }, + opened: { + rotate: 45, + backgroundColor: "rgb(255,255,255)", + }, + }; + + const centerVariants = { + closed: { + opacity: 1, + }, + opened: { + opacity: 0, + }, + }; + + const lastVariants = { + closed: { + rotate: 0, + }, + opened: { + rotate: -45, + backgroundColor: "rgb(255, 255, 255)", + }, + }; + + return ( +
+ {/* Desktop Links */} +
+ {LINKS.map((link) => { + return ; + })} +
+ {/* Logo */} +
+ + Mad + + .dev + + +
+ + {/* Social */} +
+ {SOCIAL_LINKS.map((link) => { + return ; + })} +
+ + {/* Responsive Menue */} +
+ {/* Menu Btn */} + + + {/* Menu List */} + {open && ( +
+ {LINKS.map((link) => { + return ( + + {link.title} + + ); + })} +
+ )} +
+
+ ); +}; + +export default Navbar; diff --git a/src/components/Navbar/SocialLink.jsx b/src/components/Navbar/SocialLink.jsx new file mode 100644 index 00000000..28261d9e --- /dev/null +++ b/src/components/Navbar/SocialLink.jsx @@ -0,0 +1,12 @@ +import Link from "next/link"; +import Image from "next/image"; + +const SocialLink = ({ link }) => { + return ( + + {link.alt} + + ); +}; + +export default SocialLink; diff --git a/src/constant.js b/src/constant.js new file mode 100644 index 00000000..ff645687 --- /dev/null +++ b/src/constant.js @@ -0,0 +1,14 @@ +export const LINKS = [ + { url: "/", title: "Home" }, + { url: "/about", title: "About" }, + { url: "/portofolio", title: "Portofolio" }, + { url: "/contact", title: "Contact" }, +]; + +export const SOCIAL_LINKS = [ + { url: "#", img: "/facebook.png", alt: "feacbook-img" }, + { url: "#", img: "/github.png", alt: "github-img" }, + { url: "#", img: "/facebook.png", alt: "discord-img" }, + { url: "#", img: "/linkedin.png", alt: "linkedin-img" }, + { url: "#", img: "/linkedin.png", alt: "linkedin-img" }, +];