[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.995 0 0); --foreground: oklch(0.20 0.02 260); --card: oklch(0.98 0 0); --card-foreground: oklch(0.20 0.02 260); --popover: oklch(0.995 0 0); --popover-foreground: oklch(0.20 0.02 260); --primary: oklch(0.55 0.20 250); --primary-foreground: oklch(0.995 0 0); --secondary: oklch(0.96 0.01 260); --secondary-foreground: oklch(0.25 0.02 260); --muted: oklch(0.96 0.01 260); --muted-foreground: oklch(0.50 0.02 260); --accent: oklch(0.60 0.18 330); --accent-foreground: oklch(0.995 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.90 0.01 260); --input: oklch(0.96 0.01 260); --ring: oklch(0.55 0.20 250); --chart-1: oklch(0.55 0.20 250); --chart-2: oklch(0.60 0.18 330); --chart-3: oklch(0.65 0.15 175); --chart-4: oklch(0.70 0.15 80); --chart-5: oklch(0.55 0.15 30); --radius: 0.75rem; --sidebar: oklch(0.98 0 0); --sidebar-foreground: oklch(0.20 0.02 260); --sidebar-primary: oklch(0.55 0.20 250); --sidebar-primary-foreground: oklch(0.995 0 0); --sidebar-accent: oklch(0.96 0.01 260); --sidebar-accent-foreground: oklch(0.25 0.02 260); --sidebar-border: oklch(0.90 0.01 260); --sidebar-ring: oklch(0.55 0.20 250); } .dark { --background: oklch(0.15 0.02 260); --foreground: oklch(0.95 0.01 260); --card: oklch(0.18 0.02 260); --card-foreground: oklch(0.95 0.01 260); --popover: oklch(0.18 0.02 260); --popover-foreground: oklch(0.95 0.01 260); --primary: oklch(0.65 0.20 250); --primary-foreground: oklch(0.15 0.02 260); --secondary: oklch(0.25 0.02 260); --secondary-foreground: oklch(0.95 0.01 260); --muted: oklch(0.25 0.02 260); --muted-foreground: oklch(0.65 0.02 260); --accent: oklch(0.70 0.18 330); --accent-foreground: oklch(0.15 0.02 260); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.30 0.02 260); --input: oklch(0.25 0.02 260); --ring: oklch(0.65 0.20 250); --chart-1: oklch(0.65 0.20 250); --chart-2: oklch(0.70 0.18 330); --chart-3: oklch(0.70 0.15 175); --chart-4: oklch(0.75 0.15 80); --chart-5: oklch(0.60 0.15 30); --sidebar: oklch(0.18 0.02 260); --sidebar-foreground: oklch(0.95 0.01 260); --sidebar-primary: oklch(0.65 0.20 250); --sidebar-primary-foreground: oklch(0.15 0.02 260); --sidebar-accent: oklch(0.25 0.02 260); --sidebar-accent-foreground: oklch(0.95 0.01 260); --sidebar-border: oklch(0.30 0.02 260); --sidebar-ring: oklch(0.65 0.20 250); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; background: linear-gradient(135deg, oklch(0.995 0 0) 0%, oklch(0.98 0.01 250) 50%, oklch(0.985 0.01 330) 100%); background-attachment: fixed; } /* Decorative gradient elements */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 400px; height: 400px; background: radial-gradient(circle, oklch(0.55 0.20 250) 0%, transparent 70%); opacity: 0.05; pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; bottom: 0; right: 0; width: 500px; height: 500px; background: radial-gradient(circle, oklch(0.60 0.18 330) 0%, transparent 70%); opacity: 0.05; pointer-events: none; z-index: 0; } } main { position: relative; z-index: 1; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Rene Adi Kusumo Alie | Portfolio', description: 'Business Research and Development Staff dengan pengalaman 15+ tahun di bidang IT, Programming, dan Business Analysis', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/portfolio/experience.tsx" isMerged="true" "use client"; import { ArrowUpRight } from "lucide-react"; const experiences = [ { period: "Nov 2012 — Present", title: "Business Research & Development Staff", company: "PT. Artha Permai Kencana", description: "Working as IT Support and Business Research & Development Staff at an Authorized Distributor of Mobil Lubricants. Responsible for technological advancement, system maintenance, and business strategy development.", skills: ["IT Support", "Business Analysis", "Research", "Mikrotik"], link: null, }, { period: "Apr 2010 — Oct 2011", title: "Programmer & Business Analyst", company: "Apotek Okta Surabaya", description: "Developed custom software solutions and conducted business analysis for pharmacy operations. Created comprehensive management systems to optimize daily operations and inventory management.", skills: ["VB.NET", "SQL Server", "Business Analysis", "System Design"], link: null, }, { period: "Jun 2006 — Apr 2009", title: "Administration Staff", company: "PT. Sumber Redjeki", description: "Worked part-time in administration and bookkeeping while pursuing Bachelor's degree at STIKOM Surabaya. Managed financial records and administrative documentation.", skills: ["Administration", "Bookkeeping", "Microsoft Office"], link: null, }, ]; export function Experience() { return (

Experience

{experiences.map((exp, index) => ( ))}

); } function ExperienceCard({ period, title, company, description, skills, link, }: { period: string; title: string; company: string; description: string; skills: string[]; link: string | null; }) { return (

{period}

{title} {link && }

{company}

{description}

{skills.map((skill, index) => ( {skill} ))}

); } [V0_FILE]typescriptreact:file="components/portfolio/skills.tsx" isMerged="true" "use client"; import React from "react" import { Monitor, Code, Database, Palette, Network, Wrench } from "lucide-react"; const skillCategories = [ { title: "Operating Systems", icon: Monitor, skills: ["Windows NT", "Windows 7/8/10/11", "Linux"], }, { title: "Programming", icon: Code, skills: ["Visual Basic .NET", "ASP.NET", "Java"], }, { title: "Database", icon: Database, skills: ["SQL Server", "MySQL"], }, { title: "Design & Editing", icon: Palette, skills: ["Adobe Photoshop", "Canva", "Movavi Video Edit Plus", "Microsoft Office 2003-2019"], }, { title: "Network", icon: Network, skills: ["Mikrotik Configuration", "Network Administration"], }, { title: "Hardware", icon: Wrench, skills: ["PC Troubleshooting", "Mobile Phone Hardware Detection"], }, ]; export function Skills() { return (

Skills

{skillCategories.map((category, index) => ( ))}

); } function SkillCard({ title, icon: Icon, skills, }: { title: string; icon: React.ComponentType<{ className?: string }>; skills: string[]; }) { return (

{title}

{skill}

); } [V0_FILE]typescriptreact:file="components/portfolio/footer.tsx" isMerged="true" "use client"; import { Mail, Phone, MessageCircle } from "lucide-react"; export function Footer() { return ( ); } [V0_FILE]jpg:file="public/images/profile.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-02-20%20at%2012.47.03%20PM-3BW5JiNIi180lyTHJjO8UTpMKAwjTr.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Hero } from "@/components/portfolio/hero"; import { Experience } from "@/components/portfolio/experience"; import { Skills } from "@/components/portfolio/skills"; import { Projects } from "@/components/portfolio/projects"; import { Education } from "@/components/portfolio/education"; import { Footer } from "@/components/portfolio/footer"; export default function Home() { return (

); } [V0_FILE]typescriptreact:file="components/portfolio/hero.tsx" isMerged="true" "use client"; import { Mail, Phone, MapPin, User, MessageCircle } from "lucide-react"; import Image from "next/image"; import { useState } from "react"; export function Hero() { const [imageError, setImageError] = useState(false); const hasPhoto = true; // Photo has been added return (

{/* Profile Section */}

{/* Photo */}

{hasPhoto && !imageError ? (

setImageError(true)} priority /> ) : (

)}

{/* Name and Title */}

Rene Adi Kusumo Alie

Business Research & Development

I am a hard-working, disciplined, diligent, honest, and responsible professional. With my skills and education, I believe that I am the right candidate for great opportunities.

{/* Left Column */}

{/* Navigation */} {/* Contact Info */}

Contact

+62-822-3270-8361

reneadikusumo@gmail.com

Surabaya, Jawa Timur, Indonesia

{/* Right Column - About */}

About Me

I'm a dedicated IT professional with over{" "} 15 years of experience in programming, business analysis, and system development. My journey spans from administrative roles to becoming a key player in research and development at an authorized Mobil Lubricants distributor.

Currently, I work at{" "} PT. Artha Permai Kencana{" "} as IT Support and Business Research & Development Staff, where I contribute to the company's technological advancement and business strategy since November 2012.

In the past, I've had the opportunity to develop software solutions at Apotek Okta as a Programmer and Business Analyst, creating custom pharmacy management systems and conducting business analysis to optimize operations.

); } function NavLink({ href, label }: { href: string; label: string }) { return ( {label} ); } [V0_FILE]typescriptreact:file="components/portfolio/projects.tsx" isMerged="true" "use client"; import { ExternalLink } from "lucide-react"; const projects = [ { title: "PT. APK Social Media Management", company: "PT. Artha Permai Kencana", description: "Managed and created engaging social media content for PT. APK, an authorized MOBIL Lubricants distributor. Designed and produced high-quality visual content using Canva for various campaigns including holiday promotions, product announcements, and corporate updates.", highlights: [ "Content Strategy & Creation", "Canva Design", "Social Media Management", "Campaign Design", "Visual Branding", ], stats: [ { label: "Posts Created", value: "260+" }, { label: "Followers", value: "842+" }, { label: "Following", value: "96" }, ], link: "https://instagram.com/pt_apk", linkLabel: "@pt_apk on Instagram", period: "2012 - Present", }, { title: "PT. APK Twitter Management", company: "PT. Artha Permai Kencana", description: "Managed PT. APK's Twitter presence (@PT_APK), handling corporate communications, announcements, and customer engagement. Maintained consistent brand voice and timely updates about company news, product information, and industry insights.", highlights: [ "Twitter Management", "Corporate Communications", "Real-time Updates", "Community Engagement", "Brand Voice", ], stats: [ { label: "Posts", value: "511+" }, { label: "Followers", value: "417+" }, { label: "Following", value: "56" }, ], link: "https://x.com/PT_APK", linkLabel: "@PT_APK on Twitter/X", period: "2013 - Present", }, ]; export function Projects() { return (

Projects

{projects.map((project, index) => (

{project.title}

{project.company}

{project.period}

{project.link && ( View Project )}

{project.description}

{/* Stats */}

{project.stats.map((stat, idx) => (

{stat.value}

{stat.label}

))}

{/* Highlights */}

{project.highlights.map((highlight, idx) => ( {highlight} ))}

))}

); } [V0_FILE]typescriptreact:file="components/portfolio/education.tsx" "use client"; import React from "react" import { GraduationCap, Award, BookOpen } from "lucide-react"; const education = [ { period: "April 2025 — Present", school: "English First", degree: "English Language Course", major: "English Proficiency Development", gpa: null, icon: BookOpen, }, { period: "2006 — 2010", school: "STIKOM Surabaya", degree: "Bachelor of Information System", major: "Business Analytics", gpa: "3.32 / 4.00", icon: GraduationCap, }, { period: "2003 — 2006", school: "SMA Kristen Petra 5", degree: "High School", major: "Sciences (IPA)", gpa: null, icon: BookOpen, }, { period: "2000 — 2003", school: "SLTPK Santa Clara", degree: "Middle School", major: "Regular", gpa: null, icon: BookOpen, }, ]; const achievements = [ { title: "Microsoft Office Competition Winner", organization: "Detikcom", year: "May 2009", description: "Won first place in Microsoft Office competition organized by Detikcom", }, { title: "Website Development", organization: "Mitra Gemilang Indo Lab", year: "2009 - 2021", description: "Developed and built company website for mitragemilangindolab.com", }, { title: "Website Development & Maintenance", organization: "PT. Artha Permai Kencana", year: "2012 - Present", description: "Developed and maintained company website for apk.co.id, ensuring optimal performance and functionality", }, { title: "English Proficiency Test", organization: "STIKOM Surabaya", year: "April 2010", description: "Achieved score of 477 in institutional English proficiency test", }, { title: "SQL Injection Seminar", organization: "STIKOM Surabaya", year: "March 2009", description: "Participated in SQL Injection security seminar", }, ]; export function Education() { return (

{/* Education */}

Education

{education.map((edu, index) => ( ))}

{/* Achievements */}

Achievements & Certifications

{achievements.map((achievement, index) => ( ))}

); } function EducationCard({ period, school, degree, major, gpa, icon: Icon, }: { period: string; school: string; degree: string; major: string; gpa: string | null; icon: React.ComponentType<{ className?: string }>; }) { return (

{period}

{school}

{degree} · {major}

{gpa && (

GPA: {gpa}

)}

); } function AchievementCard({ title, organization, year, description, }: { title: string; organization: string; year: string; description: string; }) { return (

{year}

{title}

{organization}

{description}

); }