master
This commit is contained in:
+41
@@ -0,0 +1,41 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
First, run the 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.js`. 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.
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"@/data*": ["./src/data*"],
|
||||||
|
"@/lib*": ["./src/lib*"],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
/* config options here */
|
||||||
|
reactCompiler: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
Generated
+6869
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "portofolio",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.468.0",
|
||||||
|
"next": "16.3.5",
|
||||||
|
"react": "19.2.8",
|
||||||
|
"react-dom": "19.2.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"babel-plugin-react-compiler": "1.0.0",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.3.5",
|
||||||
|
"tailwindcss": "^4"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 391 B |
@@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 576 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 128 B |
@@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 385 B |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,31 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #0c0a09;
|
||||||
|
--foreground: #fafaf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
a {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Albertus Tandipada Portofolio",
|
||||||
|
description: ",NextJs Developer,ReactJs Developer,MERN Developer",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({ children }) {
|
||||||
|
return (
|
||||||
|
<html lang="en" className="h-full antialiased" >
|
||||||
|
<body className="min-h-full flex flex-col">{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
+380
@@ -0,0 +1,380 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import {cvData} from "@/data/cvData";
|
||||||
|
import {Icon,SectionHeader} from "@/lib/Common";
|
||||||
|
|
||||||
|
// nama class ditulis lengkap supaya terbaca oleh Tailwind
|
||||||
|
const hobbyAccents = [
|
||||||
|
{ glow: 'from-amber-500/20', hover: 'hover:border-amber-400/50', label: 'text-amber-400', line: 'from-amber-500' },
|
||||||
|
{ glow: 'from-rose-500/20', hover: 'hover:border-rose-400/50', label: 'text-rose-400', line: 'from-rose-500' },
|
||||||
|
{ glow: 'from-emerald-500/20', hover: 'hover:border-emerald-400/50', label: 'text-emerald-400', line: 'from-emerald-500' },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen overflow-hidden bg-[#0c0a09] text-stone-100">
|
||||||
|
<div className="pointer-events-none fixed inset-0 overflow-hidden">
|
||||||
|
<div className="absolute -left-40 -top-40 h-96 w-96 rounded-full bg-amber-600/10 blur-3xl" />
|
||||||
|
<div className="absolute -right-40 top-1/3 h-96 w-96 rounded-full bg-rose-600/10 blur-3xl" />
|
||||||
|
<div className="absolute bottom-0 left-1/3 h-80 w-80 rounded-full bg-orange-600/5 blur-3xl" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main className="relative mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
|
||||||
|
<section className="relative mb-16 overflow-hidden rounded-[2rem] border border-stone-700/60 bg-stone-900/80 shadow-2xl shadow-black/30 backdrop-blur-xl">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-amber-600/[0.08] via-transparent to-rose-600/[0.08]" />
|
||||||
|
<div className="relative grid gap-10 p-6 sm:p-10 lg:grid-cols-[1fr_320px] lg:p-12">
|
||||||
|
<div className="flex flex-col justify-center">
|
||||||
|
<div className="mb-6 flex items-center gap-3">
|
||||||
|
<span className="h-2 w-2 animate-pulse rounded-full bg-emerald-400" />
|
||||||
|
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-emerald-400">
|
||||||
|
Available for opportunities
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="mb-3 text-sm font-semibold uppercase tracking-[0.3em] text-amber-400">
|
||||||
|
Hello, I'm
|
||||||
|
</p>
|
||||||
|
<h1 className="text-4xl font-black tracking-tight text-white sm:text-5xl lg:text-6xl">
|
||||||
|
{cvData.personalInfo.name}
|
||||||
|
</h1>
|
||||||
|
<h2 className="mt-4 text-xl font-semibold text-stone-300 sm:text-2xl">
|
||||||
|
{cvData.personalInfo.title}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 max-w-2xl text-sm leading-7 text-stone-400 sm:text-base">
|
||||||
|
{cvData.personalInfo.bio}
|
||||||
|
</p>
|
||||||
|
{/* Location */}
|
||||||
|
<div className="mt-6 flex flex-wrap gap-4 text-sm text-stone-400">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Icon name="map" size={16} /> {cvData.personalInfo.location}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Icon name="phone" size={16} /> {cvData.personalInfo.phone}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="mt-8 flex flex-wrap gap-3">
|
||||||
|
<a href={`mailto:${cvData.personalInfo.email}`}
|
||||||
|
className="group inline-flex items-center gap-2 rounded-xl bg-amber-600 px-5 py-3 text-sm font-bold text-stone-950 shadow-lg shadow-amber-600/20 transition hover:-transtone-y-0.5 hover:bg-amber-500"
|
||||||
|
>
|
||||||
|
<Icon name="mail" size={17} /> Contact Me
|
||||||
|
<span className="transition-transform group-hover:transtone-x-1">
|
||||||
|
<Icon name="arrow" size={15} />
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Candidate image */}
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 scale-110 rounded-[2rem] bg-amber-500/20 blur-3xl" />
|
||||||
|
<div className="relative overflow-hidden rounded-[2rem] border border-stone-600/70 bg-stone-800 p-2 shadow-2xl">
|
||||||
|
<img src={cvData.personalInfo.image} alt={`${cvData.personalInfo.name} profile`}
|
||||||
|
className="h-72 w-full rounded-[1.5rem] object-cover object-top sm:h-80 lg:h-[360px] lg:w-[280px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute -bottom-5 -left-5 rounded-2xl border border-stone-700 bg-stone-900 px-4 py-3 shadow-xl">
|
||||||
|
<p className="text-xl font-black text-white">
|
||||||
|
1+
|
||||||
|
</p>
|
||||||
|
<p className="text-[10px] uppercase tracking-wider text-stone-500">
|
||||||
|
Years Experience
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* =========================
|
||||||
|
SKILLS
|
||||||
|
========================= */}
|
||||||
|
|
||||||
|
<section className="mb-16">
|
||||||
|
|
||||||
|
<SectionHeader
|
||||||
|
icon="code"
|
||||||
|
title="Technical Skills"
|
||||||
|
number="01"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="grid gap-5 md:grid-cols-3">
|
||||||
|
|
||||||
|
{cvData.skills.map((skillGroup) => (
|
||||||
|
|
||||||
|
<div
|
||||||
|
key={skillGroup.category}
|
||||||
|
className="group rounded-2xl border border-stone-800 bg-stone-900/70 p-6 transition-all duration-300 hover:-transtone-y-1 hover:border-amber-500/30 hover:bg-stone-900"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div className="mb-5 flex items-center justify-between">
|
||||||
|
|
||||||
|
<h3 className="text-sm font-bold uppercase tracking-wider text-white">
|
||||||
|
{skillGroup.category}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<span className="text-xs text-stone-600">
|
||||||
|
{skillGroup.items.length} skills
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
|
||||||
|
{skillGroup.items.map((skill) => (
|
||||||
|
<span
|
||||||
|
key={skill}
|
||||||
|
className="rounded-lg border border-stone-700 bg-stone-800 px-3 py-2 text-xs font-medium text-stone-300 transition hover:border-amber-500/40 hover:text-amber-300"
|
||||||
|
>
|
||||||
|
{skill}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* =========================
|
||||||
|
EXPERIENCE
|
||||||
|
========================= */}
|
||||||
|
|
||||||
|
<section className="mb-16">
|
||||||
|
|
||||||
|
<SectionHeader
|
||||||
|
icon="briefcase"
|
||||||
|
title="Work Experience"
|
||||||
|
number="02"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative space-y-5">
|
||||||
|
|
||||||
|
{/* Timeline */}
|
||||||
|
|
||||||
|
<div className="absolute bottom-5 left-[19px] top-5 hidden w-px bg-gradient-to-b from-amber-500/50 via-stone-700 to-transparent sm:block" />
|
||||||
|
|
||||||
|
{cvData.experience.map((experience, index) => (
|
||||||
|
|
||||||
|
<article
|
||||||
|
key={`${experience.company}-${experience.role}`}
|
||||||
|
className="relative rounded-2xl border border-stone-800 bg-stone-900/70 p-6 transition-all duration-300 hover:border-stone-700 sm:ml-12"
|
||||||
|
>
|
||||||
|
|
||||||
|
{/* Timeline dot */}
|
||||||
|
|
||||||
|
<div className="absolute -left-[42px] top-8 hidden h-4 w-4 rounded-full border-4 border-[#0c0a09] bg-amber-500 sm:block" />
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<p className="mb-1 text-xs font-bold uppercase tracking-wider text-amber-400">
|
||||||
|
{experience.company}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 className="text-xl font-bold text-white">
|
||||||
|
{experience.role}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="mt-2 text-xs text-stone-500">
|
||||||
|
{experience.location}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="w-fit rounded-full border border-stone-700 bg-stone-800 px-3 py-1.5 text-xs font-semibold text-stone-400">
|
||||||
|
{experience.period}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="mt-6 space-y-3">
|
||||||
|
|
||||||
|
{experience.description.map((item) => (
|
||||||
|
<li
|
||||||
|
key={item}
|
||||||
|
className="flex gap-3 text-sm leading-6 text-stone-400"
|
||||||
|
>
|
||||||
|
<span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400" />
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* =========================
|
||||||
|
EDUCATION
|
||||||
|
========================= */}
|
||||||
|
|
||||||
|
<section className="mb-16">
|
||||||
|
|
||||||
|
<SectionHeader
|
||||||
|
icon="graduation"
|
||||||
|
title="Education"
|
||||||
|
number="03"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="rounded-2xl border border-stone-800 bg-stone-900/70 p-6">
|
||||||
|
|
||||||
|
{cvData.education.map((education) => (
|
||||||
|
|
||||||
|
<div
|
||||||
|
key={`${education.institution}-${education.degree}`}
|
||||||
|
className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<p className="text-xs font-bold uppercase tracking-wider text-amber-400">
|
||||||
|
{education.institution}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 className="mt-2 text-lg font-bold text-white">
|
||||||
|
{education.degree}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="w-fit rounded-full border border-stone-700 bg-stone-800 px-4 py-2 text-xs font-semibold text-stone-400">
|
||||||
|
{education.period}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* =========================
|
||||||
|
HOBBIES
|
||||||
|
========================= */}
|
||||||
|
|
||||||
|
<section className="mb-16">
|
||||||
|
|
||||||
|
<SectionHeader
|
||||||
|
icon="heart"
|
||||||
|
title="Hobbies"
|
||||||
|
number="04"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="grid gap-5 md:grid-cols-3">
|
||||||
|
|
||||||
|
{cvData.hobbies.map((hobby, index) => {
|
||||||
|
const accent = hobbyAccents[index % hobbyAccents.length];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article
|
||||||
|
key={hobby.name}
|
||||||
|
className={`group relative overflow-hidden rounded-3xl border border-stone-800 bg-gradient-to-br ${accent.glow} via-stone-900 to-stone-900 p-7 transition-all duration-300 hover:-transtone-y-2 ${accent.hover} ${index === 1 ? 'md:mt-8' : ''}`}
|
||||||
|
>
|
||||||
|
|
||||||
|
{/* Nomor besar samar di latar */}
|
||||||
|
<span className="pointer-events-none absolute -right-2 -top-4 select-none text-8xl font-black text-white/5">
|
||||||
|
0{index + 1}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* Emoji */}
|
||||||
|
<div className="relative flex h-14 w-14 items-center justify-center rounded-2xl bg-stone-950/60 text-3xl ring-1 ring-white/10 transition duration-300 group-hover:rotate-6 group-hover:scale-110">
|
||||||
|
<span aria-hidden="true">{hobby.emoji}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className={`relative mt-6 text-[10px] font-bold uppercase tracking-[0.25em] ${accent.label}`}>
|
||||||
|
Hobby
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 className="relative mt-1 text-lg font-bold text-white">
|
||||||
|
{hobby.name}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="relative mt-3 text-sm leading-6 text-stone-400">
|
||||||
|
{hobby.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Garis aksen yang memanjang saat di-hover */}
|
||||||
|
<div className={`relative mt-6 h-1 w-12 rounded-full bg-gradient-to-r ${accent.line} to-transparent transition-all duration-500 group-hover:w-full`} />
|
||||||
|
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* =========================
|
||||||
|
CONTACT CTA
|
||||||
|
========================= */}
|
||||||
|
|
||||||
|
<section className="mb-10 overflow-hidden rounded-2xl border border-amber-500/20 bg-gradient-to-br from-amber-600/10 via-stone-900 to-rose-600/10 p-8 text-center sm:p-12">
|
||||||
|
|
||||||
|
<p className="text-xs font-bold uppercase tracking-[0.3em] text-amber-400">
|
||||||
|
Let's work together
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="mt-3 text-2xl font-black text-white sm:text-3xl">
|
||||||
|
Have a project in mind?
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="mx-auto mt-4 max-w-xl text-sm leading-6 text-stone-400">
|
||||||
|
I'm always open to discussing new projects, creative ideas,
|
||||||
|
and opportunities to build something useful.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={`mailto:${cvData.personalInfo.email}`}
|
||||||
|
className="mt-7 inline-flex items-center gap-2 rounded-xl bg-amber-600 px-6 py-3 text-sm font-bold text-stone-950 transition hover:bg-amber-500"
|
||||||
|
>
|
||||||
|
<Icon name="mail" size={17} />
|
||||||
|
Get In Touch
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* =========================
|
||||||
|
FOOTER
|
||||||
|
========================= */}
|
||||||
|
|
||||||
|
<footer className="flex flex-col items-center justify-between gap-4 border-t border-stone-800 py-6 text-center sm:flex-row sm:text-left">
|
||||||
|
|
||||||
|
<p className="text-xs text-stone-600">
|
||||||
|
© {new Date().getFullYear()} {cvData.personalInfo.name}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={`mailto:${cvData.personalInfo.email}`}
|
||||||
|
className="text-stone-500 transition hover:text-white"
|
||||||
|
aria-label="Email"
|
||||||
|
>
|
||||||
|
<Icon name="mail" size={18} />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
export const cvData = {
|
||||||
|
|
||||||
|
personalInfo: {
|
||||||
|
name: 'Albertus Tandipada',
|
||||||
|
title: 'Full Stack Web Developer',
|
||||||
|
location: 'Kalijudan',
|
||||||
|
email: 'aditandipada@gmail.com',
|
||||||
|
phone: '081242424172',
|
||||||
|
image:'/images/profile.png',
|
||||||
|
bio: 'Passionate Full Stack Developer with 1+ years of experience building secure, scalable, and dynamic web applications. Skilled in creating responsive user interfaces, robust APIs, and high-performance web solutions. Experienced in PHP, Laravel, CodeIgniter, JavaScript, AJAX, jQuery, Next.js, and React.js, with a strong focus on writing clean, maintainable, and efficient code.',
|
||||||
|
},
|
||||||
|
|
||||||
|
skills: [
|
||||||
|
{
|
||||||
|
category: 'Frontend',
|
||||||
|
color: 'amber',
|
||||||
|
items: [
|
||||||
|
'HTML5 / CSS3',
|
||||||
|
'Bootstrap',
|
||||||
|
'Javascript',
|
||||||
|
'JQuery',
|
||||||
|
'Ajax',
|
||||||
|
'ReactJs',
|
||||||
|
'NextJs',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'Backend',
|
||||||
|
color: 'rose',
|
||||||
|
items: [
|
||||||
|
'PHP',
|
||||||
|
'Laravel',
|
||||||
|
'Codeignitor',
|
||||||
|
'Node.js',
|
||||||
|
'Express',
|
||||||
|
'REST APIs',
|
||||||
|
'MySQL',
|
||||||
|
'MongoDB',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'Tools & DevOps',
|
||||||
|
color: 'emerald',
|
||||||
|
items: [
|
||||||
|
'Linux',
|
||||||
|
'Git',
|
||||||
|
'Docker',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
experience: [
|
||||||
|
{
|
||||||
|
role: 'next.js',
|
||||||
|
company: 'UKWMS',
|
||||||
|
period: '2026',
|
||||||
|
location: 'Kalijudan',
|
||||||
|
description: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
title: 'Treadmark Wheels And Tyres',
|
||||||
|
description: '',
|
||||||
|
image:'/images/projects/treadmarktyre.png',
|
||||||
|
tags: ['Codeignitor','SQL','Javascript', 'Ajax','JQuery','Bootstrap'],
|
||||||
|
link: 'https://www.treadmarkwheelsandtyres.co.uk/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Auto Garage Network',
|
||||||
|
description:'',
|
||||||
|
image:'/images/projects/autogaragenetwork.png',
|
||||||
|
tags: ['Laravel','SQL','Javascript', 'Ajax','JQuery','Bootstrap'],
|
||||||
|
link: 'https://www.autogaragenetwork.com',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
education: [
|
||||||
|
{
|
||||||
|
degree: 'Informatics Engineering',
|
||||||
|
institution: 'Albertus Tandipada',
|
||||||
|
period: '2025',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
hobbies: [
|
||||||
|
{
|
||||||
|
name: 'Building Side Projects',
|
||||||
|
emoji: '💻',
|
||||||
|
description: 'Turning small ideas into working web apps in my free time.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Learning New Frameworks',
|
||||||
|
emoji: '📚',
|
||||||
|
description: 'Exploring new tools like Next.js and React to keep my skills sharp.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Linux & Docker Tinkering',
|
||||||
|
emoji: '🐧',
|
||||||
|
description: 'Setting up environments, containers and command line tools.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
export function Icon({ name, size = 20 }) {
|
||||||
|
const common = {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
viewBox: '0 0 24 24',
|
||||||
|
fill: 'none',
|
||||||
|
stroke: 'currentColor',
|
||||||
|
strokeWidth: 2,
|
||||||
|
strokeLinecap: 'round',
|
||||||
|
strokeLinejoin: 'round',
|
||||||
|
};
|
||||||
|
|
||||||
|
const icons = {
|
||||||
|
mail: (
|
||||||
|
<>
|
||||||
|
<rect x="3" y="5" width="18" height="14" rx="2" />
|
||||||
|
<path d="m3 7 9 6 9-6" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
map: (
|
||||||
|
<>
|
||||||
|
<path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z" />
|
||||||
|
<circle cx="12" cy="10" r="3" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
phone: (
|
||||||
|
<>
|
||||||
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 3.08 5.18 2 2 0 0 1 5.06 3h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L9 10.73a16 16 0 0 0 4.27 4.27l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92Z" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
github: (
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="none"
|
||||||
|
d="M12 .5a12 12 0 0 0-3.79 23.39c.6.11.82-.26.82-.58v-2.05c-3.34.73-4.04-1.42-4.04-1.42-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.74.08-.74 1.2.09 1.84 1.23 1.84 1.23 1.07 1.83 2.8 1.3 3.48.99.11-.77.42-1.3.76-1.6-2.66-.3-5.46-1.33-5.46-5.93 0-1.31.47-2.38 1.23-3.22-.12-.3-.53-1.52.12-3.18 0 0 1-.32 3.3 1.23a11.4 11.4 0 0 1 6 0c2.3-1.55 3.3-1.23 3.3-1.23.65 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.61-2.8 5.62-5.47 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.69.83.57A12 12 0 0 0 12 .5Z"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
|
||||||
|
linkedin: (
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="none"
|
||||||
|
d="M20.45 20.45h-3.56v-5.58c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.68H9.34V8.99h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.29ZM5.32 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM3.54 20.45H7.1V8.99H3.54v11.46Z"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
|
||||||
|
code: (
|
||||||
|
<>
|
||||||
|
<path d="m8 9-4 3 4 3" />
|
||||||
|
<path d="m16 9 4 3-4 3" />
|
||||||
|
<path d="m14 5-4 14" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
briefcase: (
|
||||||
|
<>
|
||||||
|
<rect x="3" y="7" width="18" height="13" rx="2" />
|
||||||
|
<path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||||
|
<path d="M3 12h18" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
folder: (
|
||||||
|
<>
|
||||||
|
<path d="M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z" />
|
||||||
|
<path d="M3 9h18" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
graduation: (
|
||||||
|
<>
|
||||||
|
<path d="m3 9 9-5 9 5-9 5-9-5Z" />
|
||||||
|
<path d="M7 11.5V16c3 2 7 2 10 0v-4.5" />
|
||||||
|
<path d="M21 10v6" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
external: (
|
||||||
|
<>
|
||||||
|
<path d="M14 5h5v5" />
|
||||||
|
<path d="m19 5-8 8" />
|
||||||
|
<path d="M19 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
heart: (
|
||||||
|
<>
|
||||||
|
<path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8Z" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
arrow: (
|
||||||
|
<>
|
||||||
|
<path d="M5 12h14" />
|
||||||
|
<path d="m13 6 6 6-6 6" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg {...common} aria-hidden="true">
|
||||||
|
{icons[name]}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function SectionHeader({ icon, title, number }) {
|
||||||
|
return (
|
||||||
|
<div className="mb-6 flex items-center gap-4">
|
||||||
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl border border-amber-500/20 bg-amber-500/10 text-amber-400">
|
||||||
|
<Icon name={icon} size={20} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400">
|
||||||
|
{number}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="text-xl font-bold text-white sm:text-2xl">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ml-2 h-px flex-1 bg-gradient-to-r from-stone-700 to-transparent" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user