Compare commits
3
Commits
e0d1eb50cc
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 MRMARCABLE
|
e371eebd3b | ||
|
MRMARCABLE
|
29c0c80747 | ||
|
MRMARCABLE
|
beb2e1ee2a |
@@ -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.
|
||||
|
||||
## Teknologi yang Digunakan
|
||||
- Next.js (App Router)
|
||||
- React & TypeScript
|
||||
- Tailwind CSS
|
||||
|
||||
## Cara Menjalankan di Lokal
|
||||
1. Instal seluruh dependensi paket:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
2. Jalankan server pengembangan (*development server*):
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
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.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [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.
|
||||
3. Buka [http://localhost:3000](http://localhost:3000) di browser untuk melihat hasilnya.
|
||||
|
||||
+39
-10
@@ -14,26 +14,55 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Marca | Personal Portfolio",
|
||||
description: "Informatics Student & Developer Portfolio",
|
||||
title: "Marca | Yohannes Marcel Lalopua — Portfolio",
|
||||
description:
|
||||
"Informatics Student at UKWMS — Web Development, UI/UX, AI Agents & Embedded Systems Portfolio",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: LayoutProps<"/">) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
lang="id"
|
||||
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 />
|
||||
<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}
|
||||
</main>
|
||||
<footer className="border-t border-zinc-800 py-6 text-center text-sm text-zinc-500">
|
||||
© 2026 Yohannes Marcel Lalopua —{" "}
|
||||
<a href="https://github.com/" target="_blank" className="text-zinc-300 hover:underline">
|
||||
GitHub
|
||||
|
||||
<footer className="border-t border-zinc-800/80 bg-zinc-950/90 py-8">
|
||||
<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">
|
||||
<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
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+217
-17
@@ -1,43 +1,243 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
const skills = [
|
||||
"Next.js", "React", "TypeScript", "Tailwind CSS",
|
||||
"Python", "ESP32 / IoT", "UI/UX Design", "Git"
|
||||
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() {
|
||||
return (
|
||||
<div className="space-y-12 py-6">
|
||||
<section className="space-y-4">
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Halo, saya Yohannes Marcel Lalopua 👋
|
||||
<div className="space-y-16 py-4">
|
||||
{/* 01 // PROFILE & HERO */}
|
||||
<section className="relative rounded-xl border border-zinc-800/90 bg-zinc-900/30 p-6 sm:p-8">
|
||||
<div className="flex items-center justify-between border-b border-zinc-800/80 pb-4 mb-6 font-mono text-xs text-zinc-500">
|
||||
<span>01 // DEVELOPER PROFILE</span>
|
||||
<span className="text-emerald-400">STATUS: ACTIVE STUDENT</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-6">
|
||||
<div className="relative shrink-0 rounded-xl border border-zinc-700/80 bg-zinc-900 p-1.5 shadow-lg">
|
||||
<Image
|
||||
src="https://github.com/MRMARCABLE.png"
|
||||
alt="Foto Profil Yohannes Marcel Lalopua"
|
||||
width={96}
|
||||
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>
|
||||
<p className="text-zinc-400 leading-relaxed">
|
||||
Mahasiswa Teknik Informatika yang berfokus pada pengembangan web modern,
|
||||
desain antarmuka (UI/UX), serta eksplorasi sistem cerdas berbasis mikrokontroler dan AI.
|
||||
|
||||
<p className="text-sm sm:text-base text-zinc-400 leading-relaxed max-w-2xl">
|
||||
Berfokus pada pengembangan aplikasi web modern, perancangan antarmuka{" "}
|
||||
<span className="text-zinc-200 font-medium">UI/UX berbasis UCD</span>,
|
||||
serta eksplorasi sistem cerdas yang menggabungkan{" "}
|
||||
<span className="text-zinc-200 font-medium">
|
||||
mikrokontroler (IoT/Robotika)
|
||||
</span>{" "}
|
||||
dan <span className="text-zinc-200 font-medium">Generative AI</span>.
|
||||
</p>
|
||||
<div className="pt-2">
|
||||
</div>
|
||||
</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-block bg-zinc-100 text-zinc-900 font-medium px-4 py-2 rounded-md text-sm hover:bg-zinc-300 transition"
|
||||
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"
|
||||
>
|
||||
Lihat Proyek Saya →
|
||||
<span>Lihat Suite Proyek</span>
|
||||
<span className="font-mono">→</span>
|
||||
</Link>
|
||||
<a
|
||||
href="https://github.com/MRMARCABLE"
|
||||
target="_blank"
|
||||
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"
|
||||
>
|
||||
<span>GitHub Profile</span>
|
||||
<span className="font-mono text-xs text-zinc-500">↗</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="font-mono text-xs text-zinc-500">
|
||||
NRP // 5803025050
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-xl font-semibold tracking-tight">Skills & Tech Stack</h2>
|
||||
{/* 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">
|
||||
{skills.map((skill) => (
|
||||
{group.items.map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-3 py-1 bg-zinc-900 border border-zinc-800 rounded-md text-sm text-zinc-300"
|
||||
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>
|
||||
);
|
||||
|
||||
+57
-6
@@ -1,15 +1,66 @@
|
||||
"use client";
|
||||
|
||||
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() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<nav className="border-b border-zinc-800 py-4 px-6">
|
||||
<div className="max-w-3xl mx-auto flex justify-between items-center">
|
||||
<Link href="/" className="font-bold text-lg tracking-tight">Marca.</Link>
|
||||
<div className="flex gap-6 text-sm text-zinc-400">
|
||||
<Link href="/" className="hover:text-white transition">Home</Link>
|
||||
<Link href="/projects" className="hover:text-white transition">Projects</Link>
|
||||
<header className="sticky top-0 z-50 border-b border-zinc-800/80 bg-zinc-950/80 backdrop-blur-md">
|
||||
<nav className="max-w-4xl mx-auto px-6 h-16 flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/"
|
||||
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 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>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -7,6 +7,18 @@ const nextConfig: NextConfig = {
|
||||
},
|
||||
cacheComponents: true,
|
||||
partialPrefetching: true,
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "github.com",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "avatars.githubusercontent.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
turbopack: {
|
||||
rules: {
|
||||
"*.css": {
|
||||
|
||||
Reference in New Issue
Block a user