Compare commits
6
Commits
4b242a70a2
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 MRMARCABLE
|
e371eebd3b | ||
|
MRMARCABLE
|
29c0c80747 | ||
|
MRMARCABLE
|
beb2e1ee2a | ||
|
MRMARCABLE
|
e0d1eb50cc | ||
|
MRMARCABLE
|
d4be19de2a | ||
|
MRMARCABLE
|
295f55447a |
Vendored
+4
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"css.lint.unknownAtRules": "ignore"
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,36 +1,24 @@
|
|||||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
# Personal Developer Portfolio — Yohannes Marcel Lalopua
|
||||||
|
|
||||||
## Getting Started
|
Website portofolio minimalis berbasis **Next.js (App Router)** dan **Tailwind CSS** dengan fokus pada efisiensi kode dan struktur komponen yang bersih.
|
||||||
|
|
||||||
First, run the development server:
|
## Arsitektur & Rute Halaman
|
||||||
|
- **Global Layout (`app/layout.tsx` & `components/Navbar.tsx`):** Kerangka utama bertema gelap (*dark mode*) yang memuat navigasi atas dan *footer* kontak di seluruh halaman.
|
||||||
|
- **Home (`app/page.tsx`):** Menampilkan profil singkat dan daftar keahlian teknis (*Skills & Tech Stack*).
|
||||||
|
- **Projects (`app/projects/page.tsx`):** Menampilkan daftar proyek perangkat lunak, sistem cerdas/IoT, dan desain UI/UX.
|
||||||
|
|
||||||
```bash
|
## Teknologi yang Digunakan
|
||||||
npm run dev
|
- Next.js (App Router)
|
||||||
# or
|
- React & TypeScript
|
||||||
yarn dev
|
- Tailwind CSS
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
## Cara Menjalankan di Lokal
|
||||||
|
1. Instal seluruh dependensi paket:
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
```bash
|
||||||
|
npm install
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
```
|
||||||
|
2. Jalankan server pengembangan (*development server*):
|
||||||
## Learn More
|
```bash
|
||||||
|
npm run dev
|
||||||
To learn more about Next.js, take a look at the following resources:
|
```
|
||||||
|
3. Buka [http://localhost:3000](http://localhost:3000) di browser untuk melihat hasilnya.
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
|
||||||
|
|
||||||
## Deploy on Vercel
|
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
export default function Eksperimen() {
|
|
||||||
return (
|
|
||||||
<main style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
|
|
||||||
<h1>Eksperimen Pertama di Next.js 🚀</h1>
|
|
||||||
<p>Halo dari IDE-mu!</p>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+39
-10
@@ -14,26 +14,55 @@ const geistMono = Geist_Mono({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Marca | Personal Portfolio",
|
title: "Marca | Yohannes Marcel Lalopua — Portfolio",
|
||||||
description: "Informatics Student & Developer Portfolio",
|
description:
|
||||||
|
"Informatics Student at UKWMS — Web Development, UI/UX, AI Agents & Embedded Systems Portfolio",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({ children }: LayoutProps<"/">) {
|
export default function RootLayout({ children }: LayoutProps<"/">) {
|
||||||
return (
|
return (
|
||||||
<html
|
<html
|
||||||
lang="en"
|
lang="id"
|
||||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased scroll-smooth`}
|
||||||
>
|
>
|
||||||
<body className="min-h-full flex flex-col bg-zinc-950 text-zinc-100">
|
<body className="relative min-h-full flex flex-col bg-zinc-950 text-zinc-100 selection:bg-emerald-500/20 selection:text-emerald-300">
|
||||||
|
{/* Ambient top radial spotlight inspired by ArtCraft */}
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="pointer-events-none fixed inset-x-0 top-0 -z-10 h-96 bg-[radial-gradient(ellipse_60%_50%_at_50%_-10%,rgba(16,185,129,0.10),transparent)]"
|
||||||
|
/>
|
||||||
|
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<main className="flex-1 max-w-3xl w-full mx-auto px-6 py-10">
|
|
||||||
|
<main className="flex-1 max-w-4xl w-full mx-auto px-6 py-12">
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
<footer className="border-t border-zinc-800 py-6 text-center text-sm text-zinc-500">
|
|
||||||
© 2026 Yohannes Marcel Lalopua —{" "}
|
<footer className="border-t border-zinc-800/80 bg-zinc-950/90 py-8">
|
||||||
<a href="https://github.com/" target="_blank" className="text-zinc-300 hover:underline">
|
<div className="max-w-4xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-zinc-500">
|
||||||
GitHub
|
<div className="flex items-center gap-2 font-mono">
|
||||||
|
<span className="h-2 w-2 rounded-full bg-emerald-500/80" />
|
||||||
|
<span>© 2026 YOHANNES MARCEL LALOPUA // UKWMS INFORMATICS</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-5 font-mono">
|
||||||
|
<a
|
||||||
|
href="https://github.com/MRMARCABLE"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-zinc-400 hover:text-zinc-100 transition"
|
||||||
|
>
|
||||||
|
GITHUB/MRMARCABLE ↗
|
||||||
</a>
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://git-eng.ukwms.ac.id/5803025050"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-zinc-400 hover:text-zinc-100 transition"
|
||||||
|
>
|
||||||
|
GIT-ENG/5803025050 ↗
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+226
-53
@@ -1,71 +1,244 @@
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const focusDomains = [
|
||||||
|
{
|
||||||
|
id: "01",
|
||||||
|
code: "AI.AGENT",
|
||||||
|
title: "Autonomous AI & Workspace Orchestration",
|
||||||
|
desc: "Eksplorasi agen AI otonom untuk audit operasional dan integrasi alur kerja cerdas menggunakan Langflow, IBM watsonx, dan Astra DB.",
|
||||||
|
accent: "text-emerald-400 border-emerald-500/30 bg-emerald-500/10",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "02",
|
||||||
|
code: "SYS.EMBED",
|
||||||
|
title: "Embedded Systems & Computer Vision",
|
||||||
|
desc: "Pengembangan sistem robotika meja berbasis ESP32 dengan mekanisme pan-tilt 2-axis dan pelacakan wajah real-time menggunakan Python, OpenCV, & MediaPipe.",
|
||||||
|
accent: "text-amber-400 border-amber-500/30 bg-amber-500/10",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "03",
|
||||||
|
code: "WEB.3D_UX",
|
||||||
|
title: "Interactive 3D Web & UI/UX Engineering",
|
||||||
|
desc: "Perancangan antarmuka berbasis User-Centered Design (UCD) di Figma serta visualisasi matematis 3D interaktif di browser menggunakan React, Next.js, dan Three.js.",
|
||||||
|
accent: "text-sky-400 border-sky-500/30 bg-sky-500/10",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const techCategories = [
|
||||||
|
{
|
||||||
|
category: "Web & Frontend Architecture",
|
||||||
|
items: ["Next.js (App Router)", "React", "TypeScript", "Tailwind CSS", "Three.js"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "AI, Vision & Programming",
|
||||||
|
items: ["Python", "Langflow", "Astra DB", "OpenCV", "MediaPipe"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "Hardware, Design & Tooling",
|
||||||
|
items: ["ESP32 / IoT", "UI/UX Design (UCD)", "Figma", "Git & GitLab"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<div className="space-y-16 py-4">
|
||||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
{/* 01 // PROFILE & HERO */}
|
||||||
<Image
|
<section className="relative rounded-xl border border-zinc-800/90 bg-zinc-900/30 p-6 sm:p-8">
|
||||||
className="dark:invert h-5 w-[100px]"
|
<div className="flex items-center justify-between border-b border-zinc-800/80 pb-4 mb-6 font-mono text-xs text-zinc-500">
|
||||||
src="/next.svg"
|
<span>01 // DEVELOPER PROFILE</span>
|
||||||
alt="Next.js logo"
|
<span className="text-emerald-400">STATUS: ACTIVE STUDENT</span>
|
||||||
width={100}
|
</div>
|
||||||
height={20}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-6">
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
<div className="relative shrink-0 rounded-xl border border-zinc-700/80 bg-zinc-900 p-1.5 shadow-lg">
|
||||||
To get started, edit the{" "}
|
<Image
|
||||||
<code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
|
src="https://github.com/MRMARCABLE.png"
|
||||||
page.tsx
|
alt="Foto Profil Yohannes Marcel Lalopua"
|
||||||
</code>{" "}
|
width={96}
|
||||||
file.
|
height={96}
|
||||||
|
priority
|
||||||
|
className="rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
title="Available for Collaboration"
|
||||||
|
className="absolute -bottom-1 -right-1 h-3.5 w-3.5 rounded-full border-2 border-zinc-950 bg-emerald-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="inline-flex items-center gap-2 rounded-md border border-zinc-800 bg-zinc-950/80 px-2.5 py-1 font-mono text-xs text-zinc-300">
|
||||||
|
<span>Mahasiswa Teknik Informatika — UKWMS</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-2xl sm:text-4xl font-bold tracking-tight text-zinc-100">
|
||||||
|
Yohannes Marcel Lalopua
|
||||||
</h1>
|
</h1>
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
<p className="text-sm sm:text-base text-zinc-400 leading-relaxed max-w-2xl">
|
||||||
<a
|
Berfokus pada pengembangan aplikasi web modern, perancangan antarmuka{" "}
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
<span className="text-zinc-200 font-medium">UI/UX berbasis UCD</span>,
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
serta eksplorasi sistem cerdas yang menggabungkan{" "}
|
||||||
>
|
<span className="text-zinc-200 font-medium">
|
||||||
Templates
|
mikrokontroler (IoT/Robotika)
|
||||||
</a>{" "}
|
</span>{" "}
|
||||||
or the{" "}
|
dan <span className="text-zinc-200 font-medium">Generative AI</span>.
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Learning
|
|
||||||
</a>{" "}
|
|
||||||
center.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 pt-6 border-t border-zinc-800/80 flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<Link
|
||||||
|
href="/projects"
|
||||||
|
className="inline-flex items-center gap-2 rounded-md bg-zinc-100 px-4 py-2 text-sm font-semibold text-zinc-950 hover:bg-emerald-400 transition"
|
||||||
|
>
|
||||||
|
<span>Lihat Suite Proyek</span>
|
||||||
|
<span className="font-mono">→</span>
|
||||||
|
</Link>
|
||||||
<a
|
<a
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
href="https://github.com/MRMARCABLE"
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 rounded-md border border-zinc-800 bg-zinc-950 px-4 py-2 text-sm font-medium text-zinc-300 hover:border-zinc-700 hover:text-white transition"
|
||||||
>
|
>
|
||||||
<Image
|
<span>GitHub Profile</span>
|
||||||
className="dark:invert h-[14px] w-4"
|
<span className="font-mono text-xs text-zinc-500">↗</span>
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={16}
|
|
||||||
height={14}
|
|
||||||
/>
|
|
||||||
Deploy Now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Documentation
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
<div className="font-mono text-xs text-zinc-500">
|
||||||
|
NRP // 5803025050
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 02 // FOCUS & ENGINEERING DOMAINS */}
|
||||||
|
<section className="space-y-5">
|
||||||
|
<div className="flex items-center justify-between border-b border-zinc-800/80 pb-3">
|
||||||
|
<h2 className="font-mono text-xs tracking-wider text-zinc-400 uppercase">
|
||||||
|
02 // Engineering & Research Focus
|
||||||
|
</h2>
|
||||||
|
<span className="font-mono text-xs text-zinc-600">3 CORE PILLARS</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-3">
|
||||||
|
{focusDomains.map((domain) => (
|
||||||
|
<div
|
||||||
|
key={domain.id}
|
||||||
|
className="group rounded-xl border border-zinc-800/90 bg-zinc-900/30 p-5 hover:border-zinc-700 hover:bg-zinc-900/60 transition flex flex-col justify-between space-y-4"
|
||||||
|
>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="font-mono text-xs text-zinc-500">
|
||||||
|
{domain.id}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`rounded border px-2 py-0.5 font-mono text-[10px] ${domain.accent}`}
|
||||||
|
>
|
||||||
|
{domain.code}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-base font-semibold text-zinc-100 group-hover:text-white transition">
|
||||||
|
{domain.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-zinc-400 leading-relaxed">
|
||||||
|
{domain.desc}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 03 // TECH STACK MATRIX */}
|
||||||
|
<section className="space-y-5">
|
||||||
|
<div className="flex items-center justify-between border-b border-zinc-800/80 pb-3">
|
||||||
|
<h2 className="font-mono text-xs tracking-wider text-zinc-400 uppercase">
|
||||||
|
03 // Tech Stack & Tooling Matrix
|
||||||
|
</h2>
|
||||||
|
<span className="font-mono text-xs text-zinc-600">MODULAR STACK</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-3">
|
||||||
|
{techCategories.map((group) => (
|
||||||
|
<div
|
||||||
|
key={group.category}
|
||||||
|
className="rounded-xl border border-zinc-800/90 bg-zinc-900/20 p-5 space-y-3"
|
||||||
|
>
|
||||||
|
<h3 className="font-mono text-xs text-zinc-400">
|
||||||
|
{group.category}
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{group.items.map((skill) => (
|
||||||
|
<span
|
||||||
|
key={skill}
|
||||||
|
className="rounded-md border border-zinc-800 bg-zinc-900/90 px-2.5 py-1 text-xs text-zinc-200 hover:border-zinc-700 transition"
|
||||||
|
>
|
||||||
|
{skill}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 04 // REPOSITORIES & CONNECT */}
|
||||||
|
<section className="space-y-5">
|
||||||
|
<div className="flex items-center justify-between border-b border-zinc-800/80 pb-3">
|
||||||
|
<h2 className="font-mono text-xs tracking-wider text-zinc-400 uppercase">
|
||||||
|
04 // Repositories & Network
|
||||||
|
</h2>
|
||||||
|
<span className="font-mono text-xs text-zinc-600">EXTERNAL LINKS</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
|
<a
|
||||||
|
href="https://github.com/MRMARCABLE"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group rounded-xl border border-zinc-800/90 bg-zinc-900/30 p-5 hover:border-zinc-700 hover:bg-zinc-900/60 transition flex items-center justify-between"
|
||||||
|
>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="font-mono text-xs text-emerald-400">
|
||||||
|
GITHUB // PUBLIC REPOS
|
||||||
|
</div>
|
||||||
|
<div className="text-base font-semibold text-zinc-100">
|
||||||
|
github.com/MRMARCABLE
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-zinc-400">
|
||||||
|
Eksplorasi kode sumber terbuka, proyek pribadi, dan eksperimen web.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span className="font-mono text-lg text-zinc-500 group-hover:text-zinc-200 group-hover:translate-x-0.5 transition">
|
||||||
|
↗
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://git-eng.ukwms.ac.id/5803025050"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group rounded-xl border border-zinc-800/90 bg-zinc-900/30 p-5 hover:border-zinc-700 hover:bg-zinc-900/60 transition flex items-center justify-between"
|
||||||
|
>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="font-mono text-xs text-sky-400">
|
||||||
|
GIT-ENG // UKWMS ACADEMIC
|
||||||
|
</div>
|
||||||
|
<div className="text-base font-semibold text-zinc-100">
|
||||||
|
git-eng.ukwms.ac.id/5803025050
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-zinc-400">
|
||||||
|
Repositori akademik Fakultas Teknik Universitas Katolik Widya Mandala Surabaya.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span className="font-mono text-lg text-zinc-500 group-hover:text-zinc-200 group-hover:translate-x-0.5 transition">
|
||||||
|
↗
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
const projects = [
|
||||||
|
{
|
||||||
|
title: "ChiefOfStaff AI",
|
||||||
|
desc: "Prototipe agen AI otonom untuk audit kepatuhan operasional dan integrasi workspace menggunakan Langflow, IBM watsonx, dan Astra DB.",
|
||||||
|
tech: ["Langflow", "Astra DB", "Generative AI"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Desktop Face-Tracking Robot",
|
||||||
|
desc: "Asisten robot meja dengan mekanisme pan-tilt 2-axis dan layar OLED yang melacak wajah secara real-time melalui visi komputer.",
|
||||||
|
tech: ["ESP32", "Python", "OpenCV", "MediaPipe"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "3D Math Vector Visualizer",
|
||||||
|
desc: "Aplikasi web interaktif untuk memvisualisasikan operasi vektor dan pemetaan permukaan tiga dimensi secara real-time di browser.",
|
||||||
|
tech: ["Three.js", "React", "Tailwind CSS"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Smart Energy Monitoring UI/UX",
|
||||||
|
desc: "Perancangan prototipe antarmuka aplikasi pemantauan konsumsi energi pintar berbasis metode User-Centered Design (UCD).",
|
||||||
|
tech: ["UI/UX Design", "Figma", "UCD"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ProjectsPage() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-8 py-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Projects</h1>
|
||||||
|
<p className="text-zinc-400">
|
||||||
|
Beberapa proyek perangkat lunak, perangkat keras, dan riset antarmuka yang pernah saya kerjakan.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{projects.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.title}
|
||||||
|
className="p-5 rounded-lg border border-zinc-800 bg-zinc-900/40 hover:border-zinc-700 transition space-y-3"
|
||||||
|
>
|
||||||
|
<h2 className="text-lg font-semibold text-zinc-100">{item.title}</h2>
|
||||||
|
<p className="text-sm text-zinc-400 leading-relaxed">{item.desc}</p>
|
||||||
|
<div className="flex flex-wrap gap-2 pt-1">
|
||||||
|
{item.tech.map((t) => (
|
||||||
|
<span
|
||||||
|
key={t}
|
||||||
|
className="text-xs px-2.5 py-0.5 rounded bg-zinc-800 text-zinc-300"
|
||||||
|
>
|
||||||
|
{t}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+57
-6
@@ -1,15 +1,66 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ index: "01", label: "Overview", href: "/" },
|
||||||
|
{ index: "02", label: "Projects", href: "/projects" },
|
||||||
|
];
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="border-b border-zinc-800 py-4 px-6">
|
<header className="sticky top-0 z-50 border-b border-zinc-800/80 bg-zinc-950/80 backdrop-blur-md">
|
||||||
<div className="max-w-3xl mx-auto flex justify-between items-center">
|
<nav className="max-w-4xl mx-auto px-6 h-16 flex justify-between items-center">
|
||||||
<Link href="/" className="font-bold text-lg tracking-tight">Marca.</Link>
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex gap-6 text-sm text-zinc-400">
|
<Link
|
||||||
<Link href="/" className="hover:text-white transition">Home</Link>
|
href="/"
|
||||||
<Link href="/projects" className="hover:text-white transition">Projects</Link>
|
className="group flex items-center gap-2.5 font-semibold tracking-tight text-zinc-100"
|
||||||
|
>
|
||||||
|
<span className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700/80 bg-zinc-900 font-mono text-xs text-emerald-400 group-hover:border-emerald-500/60 transition">
|
||||||
|
M
|
||||||
|
</span>
|
||||||
|
<span className="text-base font-bold tracking-tight">Marca.</span>
|
||||||
|
</Link>
|
||||||
|
<span className="hidden sm:inline-flex items-center gap-1.5 rounded-full border border-zinc-800 bg-zinc-900/70 px-2.5 py-0.5 font-mono text-[11px] text-zinc-400">
|
||||||
|
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||||
|
INFORMATICS // UKWMS
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 sm:gap-3">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const isActive = pathname === item.href;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
className={`px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition flex items-center gap-1.5 ${
|
||||||
|
isActive
|
||||||
|
? "bg-zinc-800/90 text-zinc-100 border border-zinc-700/80 shadow-xs"
|
||||||
|
: "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/60 border border-transparent"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="font-mono text-[10px] text-zinc-500">
|
||||||
|
{item.index}
|
||||||
|
</span>
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://github.com/MRMARCABLE"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hidden md:inline-flex items-center gap-1.5 ml-1 px-3 py-1.5 rounded-md border border-zinc-800 bg-zinc-900/50 font-mono text-xs text-zinc-300 hover:border-zinc-700 hover:text-white transition"
|
||||||
|
>
|
||||||
|
GitHub ↗
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -7,6 +7,18 @@ const nextConfig: NextConfig = {
|
|||||||
},
|
},
|
||||||
cacheComponents: true,
|
cacheComponents: true,
|
||||||
partialPrefetching: true,
|
partialPrefetching: true,
|
||||||
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "github.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "avatars.githubusercontent.com",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
turbopack: {
|
turbopack: {
|
||||||
rules: {
|
rules: {
|
||||||
"*.css": {
|
"*.css": {
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 391 B |
@@ -1 +0,0 @@
|
|||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 128 B |
@@ -1 +0,0 @@
|
|||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 385 B |
Reference in New Issue
Block a user