521 lines
35 KiB
TypeScript
521 lines
35 KiB
TypeScript
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>
|
|
)
|
|
}
|