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