67 lines
2.2 KiB
JavaScript
67 lines
2.2 KiB
JavaScript
"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",
|
|
};
|
|
|
|
return (
|
|
<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>
|
|
<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>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default MyPage;
|