first commit
This commit is contained in:
4
.dockerignore
Normal file
4
.dockerignore
Normal file
@ -0,0 +1,4 @@
|
||||
.react-router
|
||||
build
|
||||
node_modules
|
||||
README.md
|
||||
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
.DS_Store
|
||||
/node_modules/
|
||||
|
||||
# React Router
|
||||
/.react-router/
|
||||
/build/
|
||||
22
Dockerfile
Normal file
22
Dockerfile
Normal file
@ -0,0 +1,22 @@
|
||||
FROM node:20-alpine AS development-dependencies-env
|
||||
COPY . /app
|
||||
WORKDIR /app
|
||||
RUN npm ci
|
||||
|
||||
FROM node:20-alpine AS production-dependencies-env
|
||||
COPY ./package.json package-lock.json /app/
|
||||
WORKDIR /app
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
FROM node:20-alpine AS build-env
|
||||
COPY . /app/
|
||||
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
|
||||
WORKDIR /app
|
||||
RUN npm run build
|
||||
|
||||
FROM node:20-alpine
|
||||
COPY ./package.json package-lock.json /app/
|
||||
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
|
||||
COPY --from=build-env /app/build /app/build
|
||||
WORKDIR /app
|
||||
CMD ["npm", "run", "start"]
|
||||
87
README.md
Normal file
87
README.md
Normal file
@ -0,0 +1,87 @@
|
||||
# Welcome to React Router!
|
||||
|
||||
A modern, production-ready template for building full-stack React applications using React Router.
|
||||
|
||||
[](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
|
||||
|
||||
## Features
|
||||
|
||||
- 🚀 Server-side rendering
|
||||
- ⚡️ Hot Module Replacement (HMR)
|
||||
- 📦 Asset bundling and optimization
|
||||
- 🔄 Data loading and mutations
|
||||
- 🔒 TypeScript by default
|
||||
- 🎉 TailwindCSS for styling
|
||||
- 📖 [React Router docs](https://reactrouter.com/)
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Installation
|
||||
|
||||
Install the dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Development
|
||||
|
||||
Start the development server with HMR:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Your application will be available at `http://localhost:5173`.
|
||||
|
||||
## Building for Production
|
||||
|
||||
Create a production build:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
### Docker Deployment
|
||||
|
||||
To build and run using Docker:
|
||||
|
||||
```bash
|
||||
docker build -t my-app .
|
||||
|
||||
# Run the container
|
||||
docker run -p 3000:3000 my-app
|
||||
```
|
||||
|
||||
The containerized application can be deployed to any platform that supports Docker, including:
|
||||
|
||||
- AWS ECS
|
||||
- Google Cloud Run
|
||||
- Azure Container Apps
|
||||
- Digital Ocean App Platform
|
||||
- Fly.io
|
||||
- Railway
|
||||
|
||||
### DIY Deployment
|
||||
|
||||
If you're familiar with deploying Node applications, the built-in app server is production-ready.
|
||||
|
||||
Make sure to deploy the output of `npm run build`
|
||||
|
||||
```
|
||||
├── package.json
|
||||
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
|
||||
├── build/
|
||||
│ ├── client/ # Static assets
|
||||
│ └── server/ # Server-side code
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
|
||||
|
||||
---
|
||||
|
||||
Built with ❤️ using React Router.
|
||||
16
app/app.css
Normal file
16
app/app.css
Normal file
@ -0,0 +1,16 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply bg-white dark:bg-gray-950;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
75
app/root.tsx
Normal file
75
app/root.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import {
|
||||
isRouteErrorResponse,
|
||||
Links,
|
||||
Meta,
|
||||
Outlet,
|
||||
Scripts,
|
||||
ScrollRestoration,
|
||||
} from "react-router";
|
||||
|
||||
import type { Route } from "./+types/root";
|
||||
import "./app.css";
|
||||
|
||||
export const links: Route.LinksFunction = () => [
|
||||
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
||||
{
|
||||
rel: "preconnect",
|
||||
href: "https://fonts.gstatic.com",
|
||||
crossOrigin: "anonymous",
|
||||
},
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
|
||||
},
|
||||
];
|
||||
|
||||
export function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body>
|
||||
{children}
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return <Outlet />;
|
||||
}
|
||||
|
||||
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
||||
let message = "Oops!";
|
||||
let details = "An unexpected error occurred.";
|
||||
let stack: string | undefined;
|
||||
|
||||
if (isRouteErrorResponse(error)) {
|
||||
message = error.status === 404 ? "404" : "Error";
|
||||
details =
|
||||
error.status === 404
|
||||
? "The requested page could not be found."
|
||||
: error.statusText || details;
|
||||
} else if (import.meta.env.DEV && error && error instanceof Error) {
|
||||
details = error.message;
|
||||
stack = error.stack;
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="pt-16 p-4 container mx-auto">
|
||||
<h1>{message}</h1>
|
||||
<p>{details}</p>
|
||||
{stack && (
|
||||
<pre className="w-full p-4 overflow-x-auto">
|
||||
<code>{stack}</code>
|
||||
</pre>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
5
app/routes.ts
Normal file
5
app/routes.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { type RouteConfig, index } from "@react-router/dev/routes";
|
||||
|
||||
export default [
|
||||
index("routes/home.tsx")
|
||||
] satisfies RouteConfig;
|
||||
520
app/routes/home.tsx
Normal file
520
app/routes/home.tsx
Normal file
@ -0,0 +1,520 @@
|
||||
import {
|
||||
Mail,
|
||||
Phone,
|
||||
MapPin,
|
||||
Github,
|
||||
Linkedin,
|
||||
ExternalLink,
|
||||
Calendar,
|
||||
GraduationCap,
|
||||
Briefcase,
|
||||
Globe,
|
||||
} from "lucide-react"
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
|
||||
<section id="about" className="py-20 px-4">
|
||||
<div className="container mx-auto max-w-4xl text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-6xl text-slate-900 dark:text-slate-100">
|
||||
Bagas Aulia Rezki
|
||||
</h1>
|
||||
<p className="mb-6 text-xl text-slate-600 dark:text-slate-400">
|
||||
Fullstack Developer & Information Systems Student at University of Indonesia
|
||||
</p>
|
||||
<p className="mb-8 text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
|
||||
I am an enthusiastic Fullstack Developer, currently a student of Information Systems at the University of Indonesia. With internship experience as a Back-end Developer Intern, I have a strong interest in leading enterprise technologies and am always eager to learn new things. I am committed to developing efficient, secure, and innovative technological solutions.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="#contact"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90 h-10 px-4 py-2"
|
||||
>
|
||||
<Mail className="mr-2 h-4 w-4" />
|
||||
Get in Touch
|
||||
</a>
|
||||
<a
|
||||
href="#projects"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-10 px-4 py-2"
|
||||
>
|
||||
View Projects
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="skills" className="py-16 px-4 bg-white/50 dark:bg-slate-800/50">
|
||||
<div className="container mx-auto max-w-4xl text-center">
|
||||
<h2 className="mb-8 text-3xl font-bold text-slate-900 dark:text-slate-100">Technical Skills</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="p-4 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Backend</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">Go, Java, Python, PHP</p>
|
||||
</div>
|
||||
<div className="p-4 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Frontend</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">JavaScript, NextJS, Tailwind, HTMX</p>
|
||||
</div>
|
||||
<div className="p-4 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Database</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">PostgreSQL, MySQL</p>
|
||||
</div>
|
||||
<div className="p-4 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Tools</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">Docker, Git, Selenium, Scrapy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="education" className="py-16 px-4">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<h2 className="mb-12 text-3xl font-bold text-center text-slate-900 dark:text-slate-100">Education</h2>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 mb-6">
|
||||
<div className="flex flex-col space-y-1.5 p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
|
||||
<GraduationCap className="h-6 w-6 text-slate-900 dark:text-slate-50" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold leading-none tracking-tight">
|
||||
Bachelor of Information Systems
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 text-base">University of Indonesia</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
|
||||
In Progress
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 pt-0">
|
||||
<div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 mb-4">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>2025 - Present</span>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-4">
|
||||
Currently studying core concepts in information systems, database management, software engineering, and
|
||||
business process analysis. Developing skills in system design, data analysis, and technology
|
||||
implementation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50">
|
||||
<div className="flex flex-col space-y-1.5 p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
|
||||
<GraduationCap className="h-6 w-6 text-slate-900 dark:text-slate-50" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold leading-none tracking-tight">
|
||||
Pengembangan Perangkat Lunak dan Gim (PPLG)
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 text-base">SMKN 2 GUGUAK</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
Completed
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 pt-0">
|
||||
<div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 mb-4">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>2021 - 2024</span>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Graduated from vocational high school specializing in Software and Game Development. Gained foundational
|
||||
knowledge in programming, software development lifecycle, and game development principles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="experience" className="py-16 px-4 bg-white/50 dark:bg-slate-800/50">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<h2 className="mb-12 text-3xl font-bold text-center text-slate-900 dark:text-slate-100">Experience</h2>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 mb-6">
|
||||
<div className="flex flex-col space-y-1.5 p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
|
||||
<Briefcase className="h-6 w-6 text-slate-900 dark:text-slate-50" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold leading-none tracking-tight">Back-end Developer Intern</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 text-base">PT eBdesk Teknologi</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
6 Months
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 pt-0">
|
||||
<div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 mb-4">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>October 2024 - April 2025</span>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-4">
|
||||
Developed a crawling system capable of extracting data from various websites without needing to create a
|
||||
new crawler for each website, allowing for dynamic and more efficient data retrieval.
|
||||
</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Responsibilities:</h3>
|
||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
|
||||
<li>
|
||||
Designed a flexible crawling system to adapt to various website structures without needing a new
|
||||
engine each time
|
||||
</li>
|
||||
<li>Developed the backend with Go to ensure efficient and scalable data processing and management</li>
|
||||
<li>
|
||||
Built a dashboard interface using Tailwind, Templ, and HTMX for easy configuration and monitoring
|
||||
</li>
|
||||
<li>
|
||||
Researched efficient crawling techniques and implemented best methods to improve data extraction
|
||||
accuracy
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Technologies Used:</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
Go
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
Tailwind CSS
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
Templ
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
HTMX
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects" className="py-16 px-4">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<h2 className="mb-12 text-3xl font-bold text-center text-slate-900 dark:text-slate-100">Projects</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-2 mb-12">
|
||||
<div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 group hover:shadow-lg transition-shadow">
|
||||
<div className="flex flex-col space-y-1.5 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-2xl font-semibold leading-none tracking-tight text-xl">Tunnl Please</h3>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Built and developed tunnl.live, an SSH tunneling platform designed to help developers expose their
|
||||
local services to the internet securely, without the hassle of external IPs. This project focuses on
|
||||
ease of use, offering simple setup, strong encryption, and fast performance.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 pt-0">
|
||||
<div className="mb-4">
|
||||
<h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Features:</h4>
|
||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1 text-sm">
|
||||
<li>Implemented SSH standards perfectly to create secure and reliable tunnels</li>
|
||||
<li>
|
||||
Optimized connection handling using Go Concurrency for efficient and reliable handling of
|
||||
thousands of connections
|
||||
</li>
|
||||
<li>
|
||||
Integrated features like end-to-end encryption, low-latency global network, and easy sharing
|
||||
capabilities
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
|
||||
Go
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
|
||||
SSH Protocol
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
|
||||
Networking
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
href="https://git.fossy.my.id/bagas/tunnl_please"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
Code
|
||||
</a>
|
||||
<a
|
||||
href="https://tunnl.live"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
|
||||
>
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
Live Demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 group hover:shadow-lg transition-shadow">
|
||||
<div className="flex flex-col space-y-1.5 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-2xl font-semibold leading-none tracking-tight text-xl">Filekeeper</h3>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
This application allows users to store and share files online with an intuitive interface and strong
|
||||
security features. It includes a two-factor authentication system and cloud storage integration.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 pt-0">
|
||||
<div className="mb-4">
|
||||
<h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Features:</h4>
|
||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1 text-sm">
|
||||
<li>Implemented partial file upload to enhance data transfer efficiency and reliability</li>
|
||||
<li>
|
||||
Implemented an internal caching system using hashmap to reduce database load and response latency
|
||||
</li>
|
||||
<li>Integrated Amazon S3 into the project for secure user file storage</li>
|
||||
<li>Implemented Time-based One-Time Password (TOTP) to enhance 2FA security</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
|
||||
Go
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
|
||||
Amazon S3
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
|
||||
TOTP
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
href="https://git.fossy.my.id/bagas/filekeeper"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
Code
|
||||
</a>
|
||||
<a
|
||||
href="https://filekeeper.my.id"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
|
||||
>
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
Live Demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 group hover:shadow-lg transition-shadow">
|
||||
<div className="flex flex-col space-y-1.5 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-2xl font-semibold leading-none tracking-tight text-xl">Cutit</h3>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
This application simplifies the process of shortening long URLs, enabling easy management and sharing of URLs. Additionally, it offers click tracking features that can be utilized for advertising
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 pt-0">
|
||||
<div className="mb-4">
|
||||
<h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Features:</h4>
|
||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1 text-sm">
|
||||
<li>Built a secure system by implementing authentication, authorization, session management, and OAuth without third-party modules.</li>
|
||||
<li>
|
||||
Utilized Docker for system containerization, ensuring compatibility across various operating systems and avoiding reliance on hosting providers.
|
||||
</li>
|
||||
<li>Designed an intuitive and responsive user interface (UI/UX) to guarantee ease of use and an optimal user experience within the application.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
|
||||
Go
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
href="https://github.com/fossyy/cutit"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
Code
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-8 text-2xl font-bold text-center text-slate-900 dark:text-slate-100">
|
||||
Work Accomplishments
|
||||
</h3>
|
||||
<div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 max-w-4xl mx-auto">
|
||||
<div className="flex flex-col space-y-1.5 p-6">
|
||||
<h3 className="text-2xl font-semibold leading-none tracking-tight text-2xl">
|
||||
Dynamic Web Crawling System
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 text-lg">
|
||||
Developed during my internship at PT Indonesia Indicator, this revolutionary crawling system is
|
||||
capable of extracting data from various websites without needing to create a new crawler for each
|
||||
website. This system allows for dynamic and more efficient data retrieval.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 pt-0">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Features:</h4>
|
||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1 mb-4">
|
||||
<li>Dynamic configuration for different website structures</li>
|
||||
<li>Scalable backend architecture using Go</li>
|
||||
<li>Real-time monitoring dashboard</li>
|
||||
<li>Efficient data processing and management</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Technologies:</h4>
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
Go
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
Tailwind CSS
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
HTMX
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
|
||||
Templ
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<span className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90 h-10 px-4 py-2 opacity-50 cursor-not-allowed">
|
||||
<Briefcase className="mr-2 h-4 w-4" />
|
||||
Work Accomplishment
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" className="py-16 px-4 bg-white/50 dark:bg-slate-800/50">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<h2 className="mb-12 text-3xl font-bold text-center text-slate-900 dark:text-slate-100">Get in Touch</h2>
|
||||
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50">
|
||||
<div className="flex flex-col space-y-1.5 p-6">
|
||||
<h3 className="text-2xl font-semibold leading-none tracking-tight">Contact Information</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
I'm always interested in new opportunities and collaborations. Feel free to reach out!
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 pt-0 space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
|
||||
<Mail className="h-5 w-5 text-slate-900 dark:text-slate-50" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-slate-900 dark:text-slate-100">Email</p>
|
||||
<a
|
||||
href="mailto:bagas@fossy.my.id"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100"
|
||||
>
|
||||
bagas@fossy.my.id
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
|
||||
<Phone className="h-5 w-5 text-slate-900 dark:text-slate-50" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-slate-900 dark:text-slate-100">Phone</p>
|
||||
<a
|
||||
href="tel:+6285355003282"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100"
|
||||
>
|
||||
(62) 853-5500-3282
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
|
||||
<Globe className="h-5 w-5 text-slate-900 dark:text-slate-50" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-slate-900 dark:text-slate-100">Website</p>
|
||||
<a
|
||||
href="https://fossy.my.id"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100"
|
||||
>
|
||||
fossy.my.id
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
|
||||
<MapPin className="h-5 w-5 text-slate-900 dark:text-slate-50" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-slate-900 dark:text-slate-100">Location</p>
|
||||
<p className="text-slate-600 dark:text-slate-400">Depok, Indonesia</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 pt-6">
|
||||
<a
|
||||
href="https://github.com/fossyy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/bagas-aulia-rezki/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
|
||||
>
|
||||
<Linkedin className="mr-2 h-4 w-4" />
|
||||
LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
4787
package-lock.json
generated
Normal file
4787
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "porto",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "react-router build",
|
||||
"dev": "react-router dev",
|
||||
"start": "react-router-serve ./build/server/index.js",
|
||||
"typecheck": "react-router typegen && tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-router/node": "^7.7.1",
|
||||
"@react-router/serve": "^7.7.1",
|
||||
"isbot": "^5.1.27",
|
||||
"lucide-react": "^0.536.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router": "^7.7.1",
|
||||
"tw-animate-css": "^1.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-router/dev": "^7.7.1",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19.1.2",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"tailwindcss": "^4.1.11",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.3",
|
||||
"vite-tsconfig-paths": "^5.1.4"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
7
react-router.config.ts
Normal file
7
react-router.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import type { Config } from "@react-router/dev/config";
|
||||
|
||||
export default {
|
||||
// Config options...
|
||||
// Server-side render by default, to enable SPA mode set this to `false`
|
||||
ssr: true,
|
||||
} satisfies Config;
|
||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"include": [
|
||||
"**/*",
|
||||
"**/.server/**/*",
|
||||
"**/.client/**/*",
|
||||
".react-router/types/**/*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"types": ["node", "vite/client"],
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
"rootDirs": [".", "./.react-router/types"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
},
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"noEmit": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
8
vite.config.ts
Normal file
8
vite.config.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { reactRouter } from "@react-router/dev/vite";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
|
||||
});
|
||||
Reference in New Issue
Block a user