[first commit] head page and layout

This commit is contained in:
Alvalen 2023-08-30 19:06:48 +07:00
parent e6273abfbd
commit 54a7c858e3
10 changed files with 391 additions and 147 deletions

16
.vscode/settings.json vendored Normal file
View file

@ -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,
}

8
app/about/page.js Normal file
View file

@ -0,0 +1,8 @@
export default function Page() {
return <>
<main>
</main>
</>
}

View file

@ -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;
}

View file

@ -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 (
<html lang="en">
<body className={inter.className}>{children}</body>
<body>
<Navbar />
<Sidebar />
{children}
</body>
</html>
)
);
}

View file

@ -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";
const MyPage = () => {
const fullpageOptions = {
lockAnchors: true,
scrollingSpeed: 1000,
licenseKey: "gplv3-license",
};
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">app/page.js</code>
<div>
{/* Content with ReactFullpage for interactive behavior */}
<ReactFullpage
render={({ state, fullpageApi }) => (
<ReactFullpage.Wrapper>
<div className="section">
<div className="mx-auto container grid grid-cols-1 md:grid-cols-3 gap-4 p-10">
<div className="col-span-2 flex flex-col justify-center items-center md:items-start text-center md:text-start">
<h3 className="text-2xl mb-3 font-medium text tracking-[.5rem] text-gray-500">
Alvalens | Portofolio
</h3>{" "}
<div className="block md:hidden col-span-1 mx-auto my-10">
<div className="bg-slate-500 rounded-full h-72 w-72"></div>
</div>
<h1 className="text-5xl md:text-8xl font-bold">
Full Stack Developer
</h1>
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem]">
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.
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
<div className="hidden md:block col-span-1 mx-auto">
<div className="bg-slate-500 rounded-full h-72 w-72"></div>
</div>
</div>
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
</div>
<div className="section">
<h1>Interactive Section 2</h1>
<p>Content of interactive section 2</p>
</div>
<div className="section">
<h1>Interactive Section 2</h1>
<p>Content of interactive section 2</p>
</div>
<div className="section">
<h1>Interactive Section 2</h1>
<p>Content of interactive section 2</p>
</div>
{/* ... Other interactive sections ... */}
</ReactFullpage.Wrapper>
)}
{...fullpageOptions} // Pass fullpage options to the component
/>
</div>
);
};
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore the Next.js 13 playground.
</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
)
}
export default MyPage;

88
components/Navbar.js Normal file
View file

@ -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 (
<>
<nav
ref={navRef}
className={`navbar px-5 md:px-24 w-screen fixed inset-0 backdrop-blur-sm opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
<div className="">
<h1 className="text-2xl">Alvalens</h1>
</div>
{/* toggler */}
<div className="flex flex-row items-center">
<button
className="burger button flex flex-col justify-center items-center space-y-2"
onClick={toggleNav}>
<div
className={`w-8 h-1 bg-black rounded-full
}`}></div>
<div
className={`w-8 h-1 bg-black rounded-full`}></div>
<div
className={`w-8 h-1 bg-black rounded-full`}></div>
</button>
</div>
</nav>
{/* items */}
<NavItems
isNavOpen={isNavOpen}
navRef={navRef}
setIsNavOpen={setIsNavOpen}
/>
</>
);
};
export default Navbar;
const NavItems = ({ isNavOpen, navRef, setIsNavOpen }) => {
const closeNav = () => {
navRef.current.classList.remove("bg-gray-700");
setIsNavOpen(false);
};
return (
<div
className={`fixed z-50 w-full h-screen flex m-auto items-center justify-center backdrop-blur-sm ${
isNavOpen ? "" : "opacity-0 pointer-events-none"
}`}>
<div className="relative backdrop-blur-sm opacity-95 m-auto flex flex-col items-center space-x-8 min-h-[80vh] bg-gray-700 min-w-[90vw] rounded-3xl">
{/* close buton */}
<div className="absolute top-0 right-0 m-4">
<button className=" button" onClick={closeNav}>
<div className="w-8 h-1 bg-white rounded-full rotate-45 transform translate-x-[2px] translate-y-1 "></div>
<div className="w-8 h-1 bg-white rounded-full -rotate-45 transform translate-x-[2px]"></div>
</button>
</div>
<div className="flex flex-col items-center space-y-8 m-auto">
{/* title */}
<h1 className="text-6xl font-bold text-white">Menu</h1>
<a href="#home" className="text-2xl font-bold text-white">
<h2>Home</h2>
</a>
<a href="#about" className="text-2xl font-bold text-white">
<h2>About</h2>
</a>
<a
href="#project"
className="text-2xl font-bold text-white">
<h2>Projects</h2>
</a>
<a
href="#contact"
className="text-2xl font-bold text-white">
<h2>Contact</h2>
</a>
</div>
</div>
</div>
);
};

57
components/Sidebar.js Normal file
View file

@ -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 (
<div className="fixed z-50 bg-gray-600 h-[50vh] w-14 flex flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
<ul className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
<li>
<button onClick={() => handleMoveToSection(1)}>
<FontAwesomeIcon icon={faHome} className="text-xl" />
</button>
</li>
<li>
<button onClick={() => handleMoveToSection(2)}>
<FontAwesomeIcon icon={faUser} className="text-xl" />
</button>
</li>
<li>
<button onClick={() => handleMoveToSection(3)}>
<FontAwesomeIcon
icon={faFolderOpen}
className="text-xl"
/>
</button>
</li>
<li>
<button onClick={() => handleMoveToSection(4)}>
<FontAwesomeIcon
icon={faEnvelope}
className="text-xl"
/>
</button>
</li>
</ul>
</div>
);
};
export default Sidebar;

View file

@ -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",

96
pnpm-lock.yaml generated
View file

@ -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

View file

@ -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: [],
}