From 54a7c858e3d915ee0b9b75de96c59a1982cde770 Mon Sep 17 00:00:00 2001 From: Alvalen Date: Wed, 30 Aug 2023 19:06:48 +0700 Subject: [PATCH] [first commit] head page and layout --- .vscode/settings.json | 16 ++++ app/about/page.js | 8 ++ app/globals.css | 52 ++++++++----- app/layout.js | 31 +++++--- app/page.js | 174 ++++++++++++++++-------------------------- components/Navbar.js | 88 +++++++++++++++++++++ components/Sidebar.js | 57 ++++++++++++++ package.json | 8 +- pnpm-lock.yaml | 96 +++++++++++++++++++++++ tailwind.config.js | 8 +- 10 files changed, 391 insertions(+), 147 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 app/about/page.js create mode 100644 components/Navbar.js create mode 100644 components/Sidebar.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..e562dfa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,16 @@ +{ + "[html]": { + "editor.tabSize": 2, + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.tabSize": 2 + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.tabSize": 2 + }, + "prettier.singleAttributePerLine": false, + + +} \ No newline at end of file diff --git a/app/about/page.js b/app/about/page.js new file mode 100644 index 0000000..e0f9180 --- /dev/null +++ b/app/about/page.js @@ -0,0 +1,8 @@ + +export default function Page() { + return <> +
+ +
+ +} diff --git a/app/globals.css b/app/globals.css index fd81e88..07522dd 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,27 +1,45 @@ +/* font */ + +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; +html { + font-size: 17px !important; } -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } +@media (max-width: 768px) { + html { + font-size: 14px !important; + } } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + font-family: 'Poppins', sans-serif !important; } + +h1, h2, h3, h4, h5, h6 { + font-family: 'Jost', sans-serif !important; +} + +.title { + font-family: 'Jost', sans-serif !important; +} + +.section { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.navbar { + z-index: 49 !important; +} + +.fp-watermark { + display: none !important; +} \ No newline at end of file diff --git a/app/layout.js b/app/layout.js index c93f806..bbaa6ad 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,17 +1,24 @@ -import './globals.css' -import { Inter } from 'next/font/google' - -const inter = Inter({ subsets: ['latin'] }) +import "./globals.css"; +import Navbar from "@/components/Navbar"; +import Sidebar from "@/components/Sidebar"; +import { config } from '@fortawesome/fontawesome-svg-core' +import '@fortawesome/fontawesome-svg-core/styles.css' +config.autoAddCss = false 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 }) { - return ( - - {children} - - ) + + return ( + + + + + {children} + + + ); } diff --git a/app/page.js b/app/page.js index 801ec13..e6f68d3 100644 --- a/app/page.js +++ b/app/page.js @@ -1,113 +1,67 @@ -import Image from 'next/image' +"use client"; +import React from "react"; +import ReactFullpage from "@fullpage/react-fullpage"; +import Image from "next/image"; +import "./globals.css"; -export default function Home() { - return ( -
-
-

- Get started by editing  - app/page.js -

- -
+const MyPage = () => { + const fullpageOptions = { + lockAnchors: true, + scrollingSpeed: 1000, + licenseKey: "gplv3-license", + }; -
- Next.js Logo -
+ return ( +
+ {/* Content with ReactFullpage for interactive behavior */} + ( + +
+
+
+

+ Alvalens | Portofolio +

{" "} +
+
+
+

+ Full Stack Developer +

+

+ A junior fullstack developer who + currently focused on Web Development. + Other than that, I also interested in + UX/UI Design, Mobile and AI Development. + I love to learn new things and always + open to new opportunities. +

+
+
+
+
+
+
+
+

Interactive Section 2

+

Content of interactive section 2

+
+
+

Interactive Section 2

+

Content of interactive section 2

+
+
+

Interactive Section 2

+

Content of interactive section 2

+
+ {/* ... Other interactive sections ... */} + + )} + {...fullpageOptions} // Pass fullpage options to the component + /> +
+ ); +}; -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ) -} +export default MyPage; diff --git a/components/Navbar.js b/components/Navbar.js new file mode 100644 index 0000000..e79e9a1 --- /dev/null +++ b/components/Navbar.js @@ -0,0 +1,88 @@ +"use client"; +import { useRef, useState } from "react"; + +const Navbar = () => { + const navRef = useRef(null); + const [isNavOpen, setIsNavOpen] = useState(false); + + const toggleNav = () => { + setIsNavOpen(!isNavOpen); + }; + + return ( + <> + + {/* items */} + + + ); +}; +export default Navbar; + +const NavItems = ({ isNavOpen, navRef, setIsNavOpen }) => { + const closeNav = () => { + navRef.current.classList.remove("bg-gray-700"); + setIsNavOpen(false); + }; + + return ( +
+
+ {/* close buton */} +
+ +
+ +
+
+ ); +}; diff --git a/components/Sidebar.js b/components/Sidebar.js new file mode 100644 index 0000000..eb4fa2a --- /dev/null +++ b/components/Sidebar.js @@ -0,0 +1,57 @@ +"use client"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faHome, + faUser, + faFolderOpen, + faEnvelope, +} from "@fortawesome/free-solid-svg-icons"; +import { fullpageApi } from "@fullpage/react-fullpage"; +const Sidebar = () => { + + const handleMoveToSection = (index) => { + fullpage_api.moveTo(index); + fullpage_api.getActiveSection(); + }; + + const containIsActive = (index) => { + if (fullpage_api.getActiveSection().index === index) { + return "bg-gray-500"; + } + return ""; + }; + return ( +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ ); +}; + +export default Sidebar; diff --git a/package.json b/package.json index a288eeb..2dc9d4a 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,18 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.4.2", + "@fortawesome/free-brands-svg-icons": "^6.4.2", + "@fortawesome/free-regular-svg-icons": "^6.4.2", + "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@fortawesome/react-fontawesome": "^0.2.0", + "@fullpage/react-fullpage": "^0.1.40", "autoprefixer": "10.4.15", "eslint": "8.48.0", "eslint-config-next": "13.4.19", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2b686b..f79315d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,24 @@ settings: excludeLinksFromLockfile: false dependencies: + '@fortawesome/fontawesome-svg-core': + specifier: ^6.4.2 + version: 6.4.2 + '@fortawesome/free-brands-svg-icons': + specifier: ^6.4.2 + version: 6.4.2 + '@fortawesome/free-regular-svg-icons': + specifier: ^6.4.2 + version: 6.4.2 + '@fortawesome/free-solid-svg-icons': + specifier: ^6.4.2 + version: 6.4.2 + '@fortawesome/react-fontawesome': + specifier: ^0.2.0 + version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0) + '@fullpage/react-fullpage': + specifier: ^0.1.40 + version: 0.1.40 autoprefixer: specifier: 10.4.15 version: 10.4.15(postcss@8.4.28) @@ -42,6 +60,14 @@ packages: engines: {node: '>=10'} dev: false + /@babel/polyfill@7.12.1: + resolution: {integrity: sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==} + deprecated: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information. + dependencies: + core-js: 2.6.12 + regenerator-runtime: 0.13.11 + dev: false + /@babel/runtime@7.22.11: resolution: {integrity: sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==} engines: {node: '>=6.9.0'} @@ -86,6 +112,62 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: false + /@fortawesome/fontawesome-common-types@6.4.2: + resolution: {integrity: sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==} + engines: {node: '>=6'} + requiresBuild: true + dev: false + + /@fortawesome/fontawesome-svg-core@6.4.2: + resolution: {integrity: sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==} + engines: {node: '>=6'} + requiresBuild: true + dependencies: + '@fortawesome/fontawesome-common-types': 6.4.2 + dev: false + + /@fortawesome/free-brands-svg-icons@6.4.2: + resolution: {integrity: sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==} + engines: {node: '>=6'} + requiresBuild: true + dependencies: + '@fortawesome/fontawesome-common-types': 6.4.2 + dev: false + + /@fortawesome/free-regular-svg-icons@6.4.2: + resolution: {integrity: sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==} + engines: {node: '>=6'} + requiresBuild: true + dependencies: + '@fortawesome/fontawesome-common-types': 6.4.2 + dev: false + + /@fortawesome/free-solid-svg-icons@6.4.2: + resolution: {integrity: sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==} + engines: {node: '>=6'} + requiresBuild: true + dependencies: + '@fortawesome/fontawesome-common-types': 6.4.2 + dev: false + + /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0): + resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==} + peerDependencies: + '@fortawesome/fontawesome-svg-core': ~1 || ~6 + react: '>=16.3' + dependencies: + '@fortawesome/fontawesome-svg-core': 6.4.2 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + + /@fullpage/react-fullpage@0.1.40: + resolution: {integrity: sha512-wmId7EXRx07iTDqXVRkYyv9WAkHN2Sropke89S7sv13/gMAV2KtaBoWVXMIDnsLIHPx05w9n3TOrHk572plGRQ==} + dependencies: + '@babel/polyfill': 7.12.1 + fullpage.js: 4.0.20 + dev: false + /@humanwhocodes/config-array@0.11.10: resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==} engines: {node: '>=10.10.0'} @@ -613,6 +695,12 @@ packages: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: false + /core-js@2.6.12: + resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==} + deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. + requiresBuild: true + dev: false + /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -1175,6 +1263,10 @@ packages: dev: false optional: true + /fullpage.js@4.0.20: + resolution: {integrity: sha512-y72V3oV/pFccPYaxnUosEltQP9tXH340x479oQSS9Yab0L0YpIPNE0PFA68l6XEq5Lhw7IRqyCgVwL+WdjtQdA==} + dev: false + /function-bind@1.1.1: resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} dev: false @@ -2070,6 +2162,10 @@ packages: which-builtin-type: 1.1.3 dev: false + /regenerator-runtime@0.13.11: + resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} + dev: false + /regenerator-runtime@0.14.0: resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==} dev: false diff --git a/tailwind.config.js b/tailwind.config.js index 8c4d1b2..2dfafe1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,18 +1,12 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + important: true, content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { - extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - }, - }, }, plugins: [], }