diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..9948047 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,36 @@ +name: CI + +on: + push: + branches: [main] + pull_request: + +permissions: + contents: read + +jobs: + validate: + runs-on: ubuntu-latest + steps: + - name: Check out repository + uses: actions/checkout@v4 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 24 + + - name: Enable pnpm through Corepack + run: corepack enable + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Typecheck + run: pnpm typecheck + + - name: Build application + run: pnpm build + + - name: Build Docker image + run: docker build --tag porto:ci . diff --git a/Dockerfile b/Dockerfile index 0a71faa..6324f3a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,22 +1,26 @@ -FROM node:24-alpine AS development-dependencies-env -COPY . /app +FROM node:24-alpine AS base +ENV PNPM_HOME="/pnpm" +ENV PATH="$PNPM_HOME:$PATH" +RUN corepack enable && corepack install --global pnpm@11.12.0 WORKDIR /app -RUN npm ci -FROM node:24-alpine AS production-dependencies-env -COPY ./package.json package-lock.json /app/ -WORKDIR /app -RUN npm ci --omit=dev +FROM base AS development-dependencies-env +COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./ +RUN pnpm install --frozen-lockfile -FROM node:24-alpine AS build-env -COPY . /app/ -COPY --from=development-dependencies-env /app/node_modules /app/node_modules -WORKDIR /app -RUN npm run build +FROM base AS production-dependencies-env +COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./ +RUN pnpm install --prod --frozen-lockfile -FROM node:24-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"] \ No newline at end of file +FROM base AS build-env +COPY . ./ +COPY --from=development-dependencies-env /app/node_modules ./node_modules +RUN pnpm build + +FROM base AS production +ENV NODE_ENV="production" +COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./ +COPY --from=production-dependencies-env /app/node_modules ./node_modules +COPY --from=build-env /app/build ./build +EXPOSE 3000 +CMD ["pnpm", "start"] diff --git a/README.md b/README.md index 5c4780a..bb2a01c 100644 --- a/README.md +++ b/README.md @@ -1,87 +1,7 @@ -# Welcome to React Router! +NGAPAIN LU LIAT LIAT README GUA???? -A modern, production-ready template for building full-stack React applications using React Router. +SUKA LU AMA GUA??? -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default) +GAY BANGET MAS. -## 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. +![jomok](https://cdn.fossy.my.id/public/jomok.webp) diff --git a/app/app.css b/app/app.css index ab27a3c..8443ef0 100644 --- a/app/app.css +++ b/app/app.css @@ -2,15 +2,78 @@ @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"; + --font-display: "Anton", ui-sans-serif, sans-serif; + --font-body: "Source Serif 4", ui-serif, Georgia, serif; + --font-terminal: "Courier Prime", ui-monospace, monospace; + + --color-paper: #fef8f4; + --color-paper-low: #f8f3ef; + --color-panel: #f2ede9; + --color-panel-high: #e4dcd6; + --color-ink: #1d1b19; + --color-muted: #5b4137; + --color-outline: #bfb8ac; + --color-orange: #ff5c01; + --color-orange-dark: #a73a00; + --color-cyan: #abece3; + --color-cyan-dark: #266862; } -html, -body { - @apply bg-white dark:bg-gray-950; +:root { + color-scheme: light; + font-synthesis: none; + text-rendering: optimizeLegibility; +} - @media (prefers-color-scheme: dark) { - color-scheme: dark; +html { + scroll-behavior: smooth; + background: var(--color-paper); +} + +body { + min-width: 320px; + margin: 0; + background: var(--color-paper); + color: var(--color-ink); +} + +::selection { + background: var(--color-cyan); + color: var(--color-ink); +} + +.scanlines { + background-image: linear-gradient( + to bottom, + transparent, + transparent 50%, + rgb(0 0 0 / 0.02) 50%, + rgb(0 0 0 / 0.02) + ); + background-size: 100% 4px; +} + +.terminal-cursor { + animation: terminal-blink 1s step-end infinite; +} + +@keyframes terminal-blink { + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + .terminal-cursor { + animation: none; } } diff --git a/app/root.tsx b/app/root.tsx index 9fc6636..1911b46 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -19,7 +19,7 @@ export const links: Route.LinksFunction = () => [ }, { 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", + href: "https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap", }, ]; diff --git a/app/routes/home.tsx b/app/routes/home.tsx index e031c19..bf307b0 100644 --- a/app/routes/home.tsx +++ b/app/routes/home.tsx @@ -1,493 +1,701 @@ -import { - Mail, - Phone, - MapPin, - Github, - Linkedin, - ExternalLink, - Calendar, - GraduationCap, - Briefcase, - Globe, -} from "lucide-react" +import { useEffect, useState } from "react" +import { ArrowDown } from "lucide-react" -export default function Index() { +import type { Route } from "./+types/home" + +export function meta({}: Route.MetaArgs) { + return [ + { title: "BAGAS AULIA REZKI - Portfolio" }, + { + name: "description", + content: + "Portfolio of Bagas Aulia Rezki, a Fullstack Developer and Information Systems student.", + }, + ] +} + +const navItems = [ + { label: "skills", id: "skills" }, + { label: "experience", id: "experience" }, + { label: "projects", id: "projects" }, + { label: "campus", id: "campus-experience" }, + { label: "education", id: "education" }, + { label: "contact", id: "contact" }, +] + +const skills = [ + { label: "Backend", items: ["Go", "Java", "Python", "PHP"] }, + { + label: "Frontend", + items: ["JavaScript", "Next.js", "Tailwind CSS", "HTMX"], + }, + { label: "Database", items: ["PostgreSQL", "MySQL"] }, + { label: "Tools", items: ["Docker", "Git", "Selenium", "Scrapy"] }, +] + +const projects = [ + { + code: "PRJ-01", + name: "Tunnl Please", + description: "SSH tunneling platform.", + source: "https://git.fossy.my.id/bagas/tunnl_please", + live: "https://tunel.live/", + }, + { + code: "PRJ-02", + name: "Filekeeper", + description: "Secure file-hosting platform.", + source: "https://git.fossy.my.id/bagas/filekeeper", + }, + { + code: "PRJ-03", + name: "Cutit", + description: "URL shortener.", + source: "https://github.com/fossyy/cutit", + }, +] + +const education = [ + { + dates: "2025 — Present", + title: "Bachelor of Information Systems", + school: "University of Indonesia", + }, + { + dates: "2021 — 2024", + title: "Pengembangan Perangkat Lunak dan Gim — PPLG", + school: "SMKN 2 GUGUAK", + }, +] + +const campusExperience = [ + { + number: "05.1", + dates: "March 2026 — Present", + type: "CAMPUS ORGANIZATION", + role: "Member of Web Development SIG", + organization: "RISTEK Fakultas Ilmu Komputer Universitas Indonesia", + description: + "Member of the Web Development Special Interest Group at RISTEK Fakultas Ilmu Komputer Universitas Indonesia.", + }, + { + number: "05.2", + dates: "March 2026 — Present", + type: "EVENT COMMITTEE", + role: "DevOps Specialist", + organization: "Open House Fasilkom UI", + description: + "Responsible for the DevOps function within the Open House Fasilkom UI event committee.", + }, + { + number: "05.3", + dates: "March 2026 — Present", + type: "EVENT COMMITTEE", + role: "Web Developer", + organization: "COMPFEST", + description: + "Contributes as a Web Developer within the COMPFEST event committee.", + }, +] + +const externalLinkProps = { + target: "_blank", + rel: "noopener noreferrer", +} as const + +const terminalCommand = "whoami" +const fallbackIpAddress = "67.67.67.67" +const terminalOutput = [ + "fullstack developer", + "information systems student", + "building efficient systems", +] + +function Cursor({ color = "orange" }: { color?: "orange" | "cyan" }) { return ( -
-
-
-

- Bagas Aulia Rezki -

-

- Fullstack Developer & Information Systems Student at University of Indonesia -

-

- 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. -

-
- - - Get in Touch - - - View Projects - -
-
-
+