v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[feat] index:header, about, project, contact

Browse source
This commit is contained in:
Alvalen 2023-08-31 06:59:47 +07:00
parent 54a7c858e3
commit 338129fcc6
7 changed files with 178 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

13
components/Button.js Normal file
View file

@ -0,0 +1,13 @@
const Button = ({ children, variation, ...props }) => (
<button
{...props}
className={`title rounded-2xl px-8 py-2 shadow-md transition duration-300 ease-in-out ${
variation === "primary"
? "bg-gray-400 hover:bg-slate-500 text-gray-100 hover:text-white"
: "transparent border border-gray-400 hover:border-slate-500 text-gray-400 hover:text-gray-300"
}`}>
{children}
</button>
);
export default Button;

14
components/Navbar.js
View file

@ -20,11 +20,10 @@ const Navbar = () => {
{/* toggler */}
<div className="flex flex-row items-center">
<button
className="burger button flex flex-col justify-center items-center space-y-2"
className="burger button flex flex-col justify-center items-center space-y-1.5"
onClick={toggleNav}>
<div
className={`w-8 h-1 bg-black rounded-full
}`}></div>
className={`w-8 h-1 bg-black rounded-full`}></div>
<div
className={`w-8 h-1 bg-black rounded-full`}></div>
<div
@ -43,18 +42,17 @@ const Navbar = () => {
};
export default Navbar;
const NavItems = ({ isNavOpen, navRef, setIsNavOpen }) => {
const NavItems = ({ isNavOpen, 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 ${
className={`fixed z-50 w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease-out duration-300 ${
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">
<div className="relative backdrop-blur-sm opacity-95 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}>
@ -62,7 +60,7 @@ const NavItems = ({ isNavOpen, navRef, setIsNavOpen }) => {
<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">
<div className="flex flex-col items-center space-y-8 my-auto mx-0">
{/* title */}
<h1 className="text-6xl font-bold text-white">Menu</h1>
<a href="#home" className="text-2xl font-bold text-white">

7
components/Sidebar.js
View file

@ -6,7 +6,6 @@ import {
faFolderOpen,
faEnvelope,
} from "@fortawesome/free-solid-svg-icons";
import { fullpageApi } from "@fullpage/react-fullpage";
const Sidebar = () => {
const handleMoveToSection = (index) => {
@ -21,7 +20,7 @@ const Sidebar = () => {
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">
<div className="hidden md:flex fixed z-50 bg-gray-600 h-[50vh] w-14 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)}>
@ -29,7 +28,7 @@ const Sidebar = () => {
</button>
</li>
<li>
<button onClick={() => handleMoveToSection(2)}>
<button onClick={() => handleMoveToSection(2)}>
<FontAwesomeIcon icon={faUser} className="text-xl" />
</button>
</li>
@ -42,7 +41,7 @@ const Sidebar = () => {
</button>
</li>
<li>
<button onClick={() => handleMoveToSection(4)}>
<button onClick={() => handleMoveToSection(4)}>
<FontAwesomeIcon
icon={faEnvelope}
className="text-xl"