diff --git a/app/(root)/layout.js b/app/(root)/layout.js index 9855954..fb0664d 100644 --- a/app/(root)/layout.js +++ b/app/(root)/layout.js @@ -1,9 +1,5 @@ "use client" import Sidebar from "@/components/Sidebar"; -export const metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; export default function RootLayout({ children }) { return ( diff --git a/app/(root)/page.js b/app/(root)/page.js index 9d003ce..2c4180a 100644 --- a/app/(root)/page.js +++ b/app/(root)/page.js @@ -22,7 +22,6 @@ import { faEnvelope } from "@fortawesome/free-solid-svg-icons"; const MyPage = () => { const fullpageOptions = { - // only define last anchor as contact anchors: ["home", "about", "projects", "contact"], scrollingSpeed: 1000, licenseKey: "gplv3-license", @@ -33,7 +32,6 @@ const MyPage = () => { return (
- {/* Content with ReactFullpage for interactive behavior */} ( @@ -47,7 +45,7 @@ const MyPage = () => { type: "spring", }}>
-
+
{
{ href="https://github.com/Alvalens" target="_blank" rel="noopener noreferrer" - 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" + className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" initial={{ opacity: 0, y: 40 }} whileInView={{ opacity: 1, y: 0 }} transition={{ @@ -370,7 +368,7 @@ const MyPage = () => { href="https://www.instagram.com/alvalens_/" target="_blank" rel="noopener noreferrer" - 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" + className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" initial={{ opacity: 0, y: 40 }} whileInView={{ opacity: 1, y: 0 }} transition={{ @@ -386,7 +384,7 @@ const MyPage = () => { href="https://www.linkedin.com/in/alvalen-shafel-8a081a254/" target="_blank" rel="noopener noreferrer" - 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" + className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" initial={{ opacity: 0, y: 40 }} whileInView={{ opacity: 1, y: 0 }} transition={{ @@ -402,7 +400,7 @@ const MyPage = () => { href="https://discordapp.com/users/bloody#6118" target="_blank" rel="noopener noreferrer" - 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" + className="flex justify-center items-center bg-gray-700 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" initial={{ opacity: 0, y: 40 }} whileInView={{ opacity: 1, y: 0 }} transition={{ diff --git a/app/globals.css b/app/globals.css index 071a3e9..b834aca 100644 --- a/app/globals.css +++ b/app/globals.css @@ -26,7 +26,7 @@ html { body { font-family: 'Poppins', sans-serif !important; color: black; - background-color: #f6f6f6; + background-color: rgb(230, 230, 230); } h1, h2, h3, h4, h5, h6 { @@ -61,8 +61,19 @@ span { font-family: "Jost", sans-serif; } -.active { - color: rgb(255, 235, 87); +li { + @apply list-none relative; +} +li.active:after { + content: ""; + position: absolute; + bottom: -5px; + left: 0; + width: 100%; + height: 2px; + background-color: #ffffff; + + } td, th { diff --git a/app/layout.js b/app/layout.js index 1d83d8e..ca62c41 100644 --- a/app/layout.js +++ b/app/layout.js @@ -4,22 +4,46 @@ import Navbar from "@/components/Navbar"; import { config } from "@fortawesome/fontawesome-svg-core"; import "@fortawesome/fontawesome-svg-core/styles.css"; config.autoAddCss = false; - +import Icon from "@/public/img/icon.png"; import "./nprogress.css"; + export const metadata = { title: "Alvalens | Portofolio", - description: "Generated by create next app", + description: + "My name is Alvalens, I'm a web developer and I'm passionate about it. I'm currently studying at Universitas Negeri Malang.", + image: Icon, + author: "Alvalens", + keywords: + "alvalens, alvalen, alvalen shafel, shafel, alvalen shafelbilyunazra, alvalen shafel bilyunazra, bloodfallen, alvalen porto, porto alvalens, alvalens portofolio, web alvalen, alvalens web, alvalens website, website alvalens, alvalens web developer, web portofolio alvalens, alvalen profile, profil alvalen", + }; const TopProgressBar = dynamic(() => import("@/components/TopProgressBar"), { ssr: false, }); -export default function RootLayout({ children }) { +const Meta = () => ( + <> + + + + + + + + + +); +export default function RootLayout({ children }) { return ( + + + + + {children} diff --git a/app/not-found.js b/app/not-found.js new file mode 100644 index 0000000..3a805c2 --- /dev/null +++ b/app/not-found.js @@ -0,0 +1,33 @@ +"use client" +import React from "react"; +import Link from "next/link"; + +const NotFound = () => ( +
+
+
+
+
+
+

+ Page not found +

+

+ 404 +

+
+
+ +
+
+
+
+
+
+); + +export default NotFound; diff --git a/app/projects/[slug]/page.js b/app/projects/[slug]/page.js index 8ffaae6..b62389c 100644 --- a/app/projects/[slug]/page.js +++ b/app/projects/[slug]/page.js @@ -5,6 +5,8 @@ import jsonData from "../../../json/data.json"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGithub } from "@fortawesome/free-brands-svg-icons"; import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; +import NotFound from "@/app/not-found"; +import Image from "next/image"; function Page({ params }) { const [data, setData] = useState(null); @@ -21,22 +23,9 @@ function Page({ params }) { if (data === "404") { return ( -
-
-
-
-
-

- Page not found -

-

- 404 -

-
-
-
-
-
+ <> + + ); } else if (!data) { // skleton loading @@ -152,11 +141,13 @@ function Page({ params }) {
{data.images.map((image, index) => ( - {`Project ))}
diff --git a/app/projects/archive/page.js b/app/projects/archive/page.js index c2d5f87..0c1ee15 100644 --- a/app/projects/archive/page.js +++ b/app/projects/archive/page.js @@ -6,39 +6,88 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"; import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; const projects = [ - { - year: "2023", - title: "React Realtime Chat", - tech: "Javascript, React Js, Firebase, Daisy UI", - github: "https://github.com/Alvalens/react-realtime-chat", - preview: "https://react-chat-rouge.vercel.app", - }, - { - year: "2023", - title: "React Tools", - tech: "Javascript, React Js, TailwindCSS", - github: "https://github.com/Alvalens/react-tools", - preview: "react-tools-flax.vercel.app", - }, - { - year: "2023", - title: "Aleph Discord Bot", - tech: "Python, Serp API, Discord.py", - github: "https://github.com/Alvalens/aleph-discord-bot", - }, - { - year: "2023", - title: "Unmuh Jember Landing Page", - tech: "HTML, CSS, Javascript", - github: "https://github.com/Alvalens/unmuh-jember-landing-page", - preview: "https://alvalens.github.io/unmuh-jember-landing-page/", - }, + { + year: "2023", + title: "React Realtime Chat", + tech: "Javascript, React Js, Firebase, Daisy UI", + github: "https://github.com/Alvalens/react-realtime-chat", + preview: "https://react-chat-rouge.vercel.app", + }, + { + year: "2023", + title: "React Tools", + tech: "Javascript, React Js, TailwindCSS", + github: "https://github.com/Alvalens/react-tools", + preview: "react-tools-flax.vercel.app", + }, + { + year: "2023", + title: "Aleph Discord Bot", + tech: "Python, Serp API, Discord.py", + github: "https://github.com/Alvalens/aleph-discord-bot", + }, + { + year: "2023", + title: "LPTK CUP UM 2023", + tech: "PHP, Laravel, Bootstrap, MySQL, jQuery, DataTables", + github: "", + preview: "", + }, + { + year: "2023", + title: "NU INO Website", + tech: "PHP, Laravel, Livewire Bootstrap, MySQL, jQuery, DataTables", + github: "", + preview: "", + }, + { + year: "2023", + title: "Unmuh Jember Landing Page", + tech: "HTML, CSS, Javascript", + github: "https://github.com/Alvalens/unmuh-jember-landing-page", + preview: "https://alvalens.github.io/unmuh-jember-landing-page/", + }, + { + year: "2023", + title: "Alvalens Website", + tech: "Javascript, Next Js, TailwindCSS", + github: "", + preview: "https://alvalens.my.id", + }, + { + year: "2023", + title: "Python audio tranlator", + tech: "Python, Assembly AI", + github: "https://github.com/Alvalens/python-audio-translation", + preview: "", + }, + { + year: "2023", + title: "A4 Education website", + tech: "PHP, Laravel, Bootstrap, MySQL, jQuery, DataTables", + github: "https://github.com/Alvalens/A4", + preview: "", + }, + { + year: "2023", + title: "Cry Cast crypto forecast", + tech: "PHP, Laravel, Bootstrap, MySQL", + github: "https://github.com/Alvalens/cry-cast", + preview: "", + }, + { + year: "2023", + title: "Mini Harbor", + tech: "Python, Pygame", + github: "https://github.com/Alvalens/mini-harbor", + preview: "", + }, ]; export default function Page () { return ( <>
-
+
{project.title} {project.tech} -
+
{project.github && ( ( {...props} className={`title mr-3 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" + ? "bg-gray-700 hover:bg-transparent border-transparent hover:border-gray-700 border-2 text-gray-100 hover:text-gray-700 box-border" + : "transparent border-2 border-gray-700 text-gray-700 hover:bg-gray-700 hover:text-gray-100 box-border" }`}> {children} diff --git a/components/Sidebar.js b/components/Sidebar.js index 0a90575..1bae0df 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -21,10 +21,10 @@ const Sidebar = () => { return ""; }; return ( -
+