[feat] index:header, about, project, contact
This commit is contained in:
Alvalen
parent
54a7c858e3
commit
338129fcc6
7 changed files with 178 additions and 28 deletions
|
|
@ -11,11 +11,16 @@ html {
|
|||
font-size: 17px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1268px) {
|
||||
html {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
html {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif !important;
|
||||
|
|
|
|||
165
app/page.js
165
app/page.js
|
|
@ -3,6 +3,15 @@ import React from "react";
|
|||
import ReactFullpage from "@fullpage/react-fullpage";
|
||||
import Image from "next/image";
|
||||
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 fullpageOptions = {
|
||||
|
|
@ -20,16 +29,25 @@ const MyPage = () => {
|
|||
<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 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>
|
||||
<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
|
||||
</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
|
||||
currently focused on Web Development.
|
||||
Other than that, I also interested in
|
||||
|
|
@ -37,25 +55,142 @@ const MyPage = () => {
|
|||
I love to learn new things and always
|
||||
open to new opportunities.
|
||||
</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 className="hidden md:block col-span-1 mx-auto">
|
||||
<div className="bg-slate-500 rounded-full h-72 w-72"></div>
|
||||
<div className="hidden md:flex col-span-1 mx-auto justify-center items-center ">
|
||||
<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 className="section">
|
||||
<h1>Interactive Section 2</h1>
|
||||
<p>Content of interactive section 2</p>
|
||||
<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
|
||||
<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 className="section">
|
||||
<h1>Interactive Section 2</h1>
|
||||
<p>Content of interactive section 2</p>
|
||||
<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
|
||||
<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 className="section">
|
||||
<h1>Interactive Section 2</h1>
|
||||
<p>Content of interactive section 2</p>
|
||||
<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
|
||||
<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>
|
||||
{/* ... Other interactive sections ... */}
|
||||
</ReactFullpage.Wrapper>
|
||||
)}
|
||||
{...fullpageOptions} // Pass fullpage options to the component
|
||||
|
|
|
|||
0
app/projects/page.js
Normal file
0
app/projects/page.js
Normal file
13
components/Button.js
Normal file
13
components/Button.js
Normal 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;
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
BIN
public/img/me.jpg
Normal file
BIN
public/img/me.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 MiB |
Loading…
Add table
Add a link
Reference in a new issue