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

7
app/globals.css
View file

@ -11,11 +11,16 @@ html {
font-size: 17px !important; font-size: 17px !important;
} }
@media (max-width: 768px) { @media (max-width: 1268px) {
html { html {
font-size: 14px !important; font-size: 14px !important;
} }
} }
@media (max-width: 768px) {
html {
font-size: 13px !important;
}
}
body { body {
font-family: 'Poppins', sans-serif !important; font-family: 'Poppins', sans-serif !important;

165
app/page.js
View file

@ -3,6 +3,15 @@ import React from "react";
import ReactFullpage from "@fullpage/react-fullpage"; import ReactFullpage from "@fullpage/react-fullpage";
import Image from "next/image"; import Image from "next/image";
import "./globals.css"; import "./globals.css";
// components
import Button from "@/components/Button";
// icons
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faInstagram } from "@fortawesome/free-brands-svg-icons";
import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
import { faDiscord } from "@fortawesome/free-brands-svg-icons";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
const MyPage = () => { const MyPage = () => {
const fullpageOptions = { const fullpageOptions = {
@ -20,16 +29,25 @@ const MyPage = () => {
<div className="section"> <div className="section">
<div className="mx-auto container grid grid-cols-1 md:grid-cols-3 gap-4 p-10"> <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"> <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="block md:hidden col-span-1 mx-auto my-10">
<div className="bg-slate-500 rounded-full h-72 w-72"></div> <div className="bg-slate-500 rounded-full h-60 w-60">
<Image
src="/img/me.jpg"
layout="intrinsic"
width={500}
height={500}
className="rounded-full w-full h-full object-cover "
alt="Alvalens"
/>
</div>
</div> </div>
<h1 className="text-5xl md:text-8xl font-bold"> <h3 className="uppercase text-xl mb-3 font-normal text tracking-[.5rem] text-gray-500">
Alvalen Shafel
</h3>
<h1 className="text-5xl md:text-8xl font-bold my-2 md:my-5">
Full Stack Developer Full Stack Developer
</h1> </h1>
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem]"> <p className="title text-md md:text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem]">
A junior fullstack developer who A junior fullstack developer who
currently focused on Web Development. currently focused on Web Development.
Other than that, I also interested in Other than that, I also interested in
@ -37,25 +55,142 @@ const MyPage = () => {
I love to learn new things and always I love to learn new things and always
open to new opportunities. open to new opportunities.
</p> </p>
<div className="buttons flex flex-row justify-center items-center space-x-4 mt-10">
<Button variation="primary">
Download CV
</Button>
<Button variation="secondary">
Contact Me
</Button>
</div>
</div> </div>
<div className="hidden md:block col-span-1 mx-auto"> <div className="hidden md:flex col-span-1 mx-auto justify-center items-center ">
<div className="bg-slate-500 rounded-full h-72 w-72"></div> <div className=" rounded-full h-auto w-auto aspect-square md:px-12">
<Image
src="/img/me.jpg"
layout="intrinsic"
width={500}
height={500}
className="rounded-full w-full h-full object-cover grayscale hover:grayscale-0"
alt="Alvalens"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="section"> <div className="section">
<h1>Interactive Section 2</h1> <div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
<p>Content of interactive section 2</p> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
</div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
<h1 className="text-5xl md:text-8xl font-bold">
About Me
</h1>
<div className="flex justify-center items-center flex-col my-5 ">
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
</div>
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
A brief introduction about me and my
interest.
</p>
<Button variation="primary">
Learn More
</Button>
</div>
</div>
</div> </div>
<div className="section"> <div className="section">
<h1>Interactive Section 2</h1> <div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
<p>Content of interactive section 2</p> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
</div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
<h1 className="text-5xl md:text-8xl font-bold">
My Projects
</h1>
<div className="flex justify-center items-center flex-col my-5 ">
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
</div>
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
This is some of my projects that I have
done and currently working on.
</p>
<Button variation="primary">
Learn More
</Button>
</div>
</div>
</div> </div>
<div className="section"> <div className="section">
<h1>Interactive Section 2</h1> <div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
<p>Content of interactive section 2</p> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
</div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
<h1 className="text-5xl md:text-8xl font-bold">
Get In Touch
</h1>
<div className="flex justify-center items-center flex-col my-5 ">
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
</div>
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
Feel free to contact me if you have any
questions or just want to say hi.
</p>
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
alvalen.shafel04@gmail.com
</p>
{/* icons */}
<div className="flex justify-center items-center space-x-4">
<a
href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
<FontAwesomeIcon
icon={faEnvelope}
className="text-4xl"
/>
</a>
<a
href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
<FontAwesomeIcon
icon={faGithub}
className="text-4xl"
/>
</a>
<a
href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
<FontAwesomeIcon
icon={faInstagram}
className="text-4xl"
/>
</a>
<a
href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
<FontAwesomeIcon
icon={faLinkedin}
className="text-4xl"
/>
</a>
<a
href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
<FontAwesomeIcon
icon={faDiscord}
className="text-4xl"
/>
</a>
</div>
</div>
</div>
</div> </div>
{/* ... Other interactive sections ... */}
</ReactFullpage.Wrapper> </ReactFullpage.Wrapper>
)} )}
{...fullpageOptions} // Pass fullpage options to the component {...fullpageOptions} // Pass fullpage options to the component

0
app/projects/page.js Normal file
View file

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 */} {/* toggler */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<button <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}> onClick={toggleNav}>
<div <div
className={`w-8 h-1 bg-black rounded-full className={`w-8 h-1 bg-black rounded-full`}></div>
}`}></div>
<div <div
className={`w-8 h-1 bg-black rounded-full`}></div> className={`w-8 h-1 bg-black rounded-full`}></div>
<div <div
@ -43,18 +42,17 @@ const Navbar = () => {
}; };
export default Navbar; export default Navbar;
const NavItems = ({ isNavOpen, navRef, setIsNavOpen }) => { const NavItems = ({ isNavOpen, setIsNavOpen }) => {
const closeNav = () => { const closeNav = () => {
navRef.current.classList.remove("bg-gray-700");
setIsNavOpen(false); setIsNavOpen(false);
}; };
return ( return (
<div <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" 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 */} {/* close buton */}
<div className="absolute top-0 right-0 m-4"> <div className="absolute top-0 right-0 m-4">
<button className=" button" onClick={closeNav}> <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> <div className="w-8 h-1 bg-white rounded-full -rotate-45 transform translate-x-[2px]"></div>
</button> </button>
</div> </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 */} {/* title */}
<h1 className="text-6xl font-bold text-white">Menu</h1> <h1 className="text-6xl font-bold text-white">Menu</h1>
<a href="#home" className="text-2xl font-bold text-white"> <a href="#home" className="text-2xl font-bold text-white">

7
components/Sidebar.js
View file

@ -6,7 +6,6 @@ import {
faFolderOpen, faFolderOpen,
faEnvelope, faEnvelope,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { fullpageApi } from "@fullpage/react-fullpage";
const Sidebar = () => { const Sidebar = () => {
const handleMoveToSection = (index) => { const handleMoveToSection = (index) => {
@ -21,7 +20,7 @@ const Sidebar = () => {
return ""; return "";
}; };
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"> <ul className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
<li> <li>
<button onClick={() => handleMoveToSection(1)}> <button onClick={() => handleMoveToSection(1)}>
@ -29,7 +28,7 @@ const Sidebar = () => {
</button> </button>
</li> </li>
<li> <li>
<button onClick={() => handleMoveToSection(2)}> <button onClick={() => handleMoveToSection(2)}>
<FontAwesomeIcon icon={faUser} className="text-xl" /> <FontAwesomeIcon icon={faUser} className="text-xl" />
</button> </button>
</li> </li>
@ -42,7 +41,7 @@ const Sidebar = () => {
</button> </button>
</li> </li>
<li> <li>
<button onClick={() => handleMoveToSection(4)}> <button onClick={() => handleMoveToSection(4)}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faEnvelope} icon={faEnvelope}
className="text-xl" className="text-xl"

BIN
public/img/me.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6 MiB