FEB 20, 2026 • 5 MIN READ

jahFGSYHa YQTRSEYTWQES

"AHTFWDSHGASFGHDFDSA"

---

import MainLayout from "../layouts/MainLayout.astro";

import { supabase } from '../lib/supabase';

// Fetch data GitHub

const username = "F1kro";

const userResponse = await fetch(`https://api.github.com/users/${username}`);

const userData = await userResponse.json();

// Ambil repo paling populer untuk statistik 'Most Starred'

const reposResponse = await fetch(`https://api.github.com/users/${username}/repos?sort=stars&per_page=1`);

const topRepos = await reposResponse.json();

const topRepo = topRepos[0] || { name: "no-repo", stargazers_count: 0 };

// Ambil 3 Project Terbaru

const { data: recentProjects } = await supabase

.from('projects')

.select('*')

.order('created_at', { ascending: false })

.limit(3);

// Ambil 3 Blog Terbaru

const { data: recentBlogs } = await supabase

.from('blogs')

.select('*')

.order('created_at', { ascending: false })

.limit(3);

---

<section

class="relative z-10 flex flex-col items-center justify-center min-h-[85vh] text-center px-4 overflow-hidden text-white"

<div

class="planet-arc absolute bottom-0 left-1/2 -translate-x-1/2 w-[900px] h-[280px] rounded-[50%] opacity-40 bg-radial-gradient"

</div>

<img

src="profile.jpg"

alt="Masfiq"

class="w-40 h-40 rounded-full mb-6 border border-white/10 object-cover shadow-[0_0_40px_rgba(59,130,246,0.15)]"

class="text-slate-400 text-sm tracking-widest mb-1 font-medium uppercase"

Hello, I am

</p>

<h1

class="text-6xl md:text-8xl font-black tracking-tighter mb-4 text-white font-bold text-bold leading-none"

Fiqro Najiah

</h1>

class="text-slate-500 max-w-md mx-auto leading-relaxed text-sm mb-8 text-white"

Informatics Engineering student at Mataram University.<br />

Web Development & Cybersecurity enthusiast.

</p>

href="#projects"

class="px-6 py-2.5 bg-white text-black text-sm font-bold rounded-md hover:scale-105 transition-transform"

>View Work</a

href="#contact"

class="px-6 py-2.5 bg-transparent text-white text-sm font-semibold rounded-md border border-white/15 hover:bg-white/5 transition-all"

>Contact</a

</div>

</section>

<section

id="about"

class="relative z-10 max-w-4xl mx-auto px-6 py-28 text-white"

About Me

</h2>

Description of my skills and experience

</p>

<p>

I am a <strong class="text-white font-semibold">Software Engineer</strong> and

<strong class="text-white font-semibold">CTF Player</strong> currently pursuing my degree in

Informatics Engineering at <em class="text-blue-400 not-italic">Mataram University</em>.

I bridge the gap between building robust applications and identifying their weaknesses,

combining academic rigor with hands-on technical exploration.

</p>

<p>

I love breaking things to understand how they work — whether it's a complex web app

architecture built with <span class="text-white">Laravel</span> or a low-level

binary exploitation challenge. My technical focus lies in

identifying <strong class="text-white">Web Vulnerabilities</strong>, mastering

<strong class="text-white">Cryptography</strong> puzzles to solve

real-world security problems.

</p>

<p>

Beyond security, I am an active developer who enjoys building modern web solutions using

<span class="text-white">Astro</span> and <span class="text-white">TypeScript</span>.

Whether I'm developing systems like <em class="italic">Siagosis</em> or optimizing database

queries, I strive for clean code and efficient performance.

</p>

</div>

href="/cv-masfiq.pdf"

class="inline-block px-8 py-3 bg-white/5 border border-white/20 text-white text-[10px] font-mono tracking-widest uppercase rounded-md hover:bg-white/10 hover:border-blue-500/50 transition-all active:scale-95"

See My CV <span class="text-blue-500 ml-2">→</span>

</a>

</div>

</section>

<h2 class="text-3xl font-bold text-center mb-2 tracking-tight">Educations</h2>

Academic Journey

</p>

</div>

</div>

<h3 class="text-xl font-bold text-white mt-2 group-hover:text-blue-400 transition-colors">Mataram University</h3>

<p class="text-blue-500 text-[10px] font-bold uppercase tracking-[0.2em] mt-1">Informatics Engineering</p>

<p class="text-slate-500 text-xs leading-relaxed mt-4 italic font-light">Currently pursuing a degree in Informatics, focusing on web architecture and cybersecurity fundamentals.</p>

</div>

</div>

</div>

</div>

<h3 class="text-xl font-bold text-white mt-2 group-hover:text-blue-400 transition-colors">SMK Negeri 1 Lopok</h3>

<p class="text-blue-500 text-[10px] font-bold uppercase tracking-[0.2em] mt-1">Rekayasa Perangkat Lunak</p>

<p class="text-slate-500 text-xs leading-relaxed mt-4 italic font-light">Graduated with a focus on Software Engineering, gaining foundational knowledge in web development and programming.</p>

</div>

</section>

Awards & Achievements

</h2>

Recognitions and certifications earned throughout my journey.

</p>

<h3 class="font-bold text-white text-xl">Vulnerability Disclosure - BMKG</h3>

Penghargaan atas koordinasi temuan kerentanan (Vulnerability) secara etis kepada sistem Badan Meteorologi, Klimatologi, dan Geofisika.

</p>

</div>

<h3 class="font-bold text-white text-xl">FCF - Threat Landscape 3.0</h3>

Sertifikasi internasional dari Fortinet Training Institute dalam memahami lanskap ancaman keamanan siber modern.

</p>

</div>

<h3 class="font-bold text-white text-xl">Security Researcher - UNRAM</h3>

Apresiasi dari UPT. PUSTIK Universitas Mataram atas pelaporan celah keamanan sistem secara bertanggung jawab.

</p>

</div>

<h3 class="font-bold text-white text-xl">Computer Network Lab Assistant</h3>

Dipercaya sebagai Asisten Praktikum Jaringan Komputer di Universitas Mataram (Semester Ganjil 2025-2026).

</p>

</div>

<h3 class="font-bold text-white text-xl">Certified Data Analyst 2024</h3>

Pelatihan intensif analisis data yang diselenggarakan oleh Himpunan Mahasiswa Informatika (HMIF) Universitas Mataram.

</p>

</div>

</section>

<h2 class="text-3xl font-bold mb-2 tracking-tight">GitHub Activity</h2>

Open Source Contribution & Stats

</p>

<div>

<p class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2">Github Activity</p>

<h3 class="text-2xl font-bold">{userData.public_repos + 200}+ Contributions</h3>

</div>

github.com/{username}

</a>

</div>

<img

src={`https://ghchart.rshah.org/22c55e/${username}`}

alt="Github Contributions Chart"

class="github-chart w-full h-auto"

</div>

</div>

</div>

</div>

<p class="text-[10px] font-mono text-slate-500 uppercase tracking-widest ">Total Stars</p>

</div>

</div>

</div>

<p class="text-[10px] font-mono text-slate-500 uppercase tracking-widest">Most Starred</p>

</div>

<h4 class="text-xl font-bold text-white truncate">{topRepo.name}</h4>

<p class="text-[10px] font-mono text-slate-600 mt-1 uppercase tracking-widest">{topRepo.stargazers_count} Stars</p>

</div>

</div>

<p class="text-[10px] font-mono text-slate-500 uppercase tracking-widest">Most Active</p>

</div>

<h4 class="text-xl font-bold text-white truncate">{username}</h4>

<p class="text-[10px] font-mono text-slate-600 mt-1 uppercase tracking-widest italic">Updated Jan 16, 2026</p>

</div>

</section>

<h2 class="text-3xl font-bold text-center mb-2 tracking-tight text-white font-josefin">My Skills</h2>

<p class="text-center text-[10px] tracking-[0.4em] text-slate-600 font-mono mb-10 uppercase">Technical Arsenal</p>

<h3 class="text-sm font-mono text-blue-500 uppercase tracking-widest border-l-2 border-blue-500 pl-4">Intermediate</h3>

{[

{ name: "Burp Suite", icon: "burpsuite", color: "FF6633" },

{ name: "Kali Linux", icon: "kalilinux", color: "557CF2" },

{ name: "Metasploit", icon: "metasploit", color: "326DE6" },

{ name: "PHP / Laravel", icon: "laravel", color: "FF2D20" },

{ name: "MySQL", icon: "mysql", color: "4479A1" },

{ name: "Javascript", icon: "javascript", color: "F7DF1E" },

{ name: "Python", icon: "python", color: "3776AB" },

{ name: "Linux", icon: "linux", color: "FCC624" }

].map((skill) => (

<span class="text-[10px] md:text-[11px] font-bold text-slate-400 group-hover:text-white transition-colors truncate">{skill.name}</span>

</div>

))}

</div>

<h3 class="text-sm font-mono text-slate-500 uppercase tracking-widest border-l-2 border-slate-700 pl-4">Junior</h3>

{[

{ name: "Wireshark", icon: "wireshark", color: "1679A7" },

{ name: "Nmap", icon: "nmap", color: "ffffff" },

{ name: "Astro", icon: "astro", color: "FF5D01" },

{ name: "TypeScript", icon: "typescript", color: "3178C6" },

{ name: "Tailwind CSS", icon: "tailwindcss", color: "06B6D4" },

{ name: "Docker", icon: "docker", color: "2496ED" },

{ name: "Git", icon: "git", color: "F05032" },

{ name: "Postman", icon: "postman", color: "FF6C37" }

].map((skill) => (

<span class="text-[10px] md:text-[11px] font-bold text-slate-500 group-hover:text-white transition-colors truncate">{skill.name}</span>

</div>

))}

</div>

<h3 class="text-sm font-mono text-slate-700 uppercase tracking-widest border-l-2 border-slate-800 pl-4">Learning</h3>

{[

{ name: "Ghidra", icon: "ghidra", color: "ffffff" },

{ name: "Golang", icon: "go", color: "00ADD8" },

{ name: "Kubernetes", icon: "kubernetes", color: "326CE5" },

{ name: "Redis", icon: "redis", color: "DC382D" }

].map((skill) => (

<span class="text-[9px] md:text-[10px] font-mono text-slate-600 group-hover:text-white transition-colors truncate">{skill.name}</span>

</div>

))}

</div>

</section>

<h2 class="text-3xl font-bold tracking-tight text-white font-josefin uppercase">Recent projects</h2>

<span class="hidden md:inline">All projects</span>

</a>

</div>

{recentProjects?.map((project) => (

<img

src={project.image_url}

alt={project.title}

class="w-full h-full object-cover transition-all duration-500"

onerror="this.src='https://placehold.co/600x400/080808/3b82f6?text=Project'"

</div>

<span class="text-[10px] font-mono text-slate-500 uppercase tracking-[0.2em]">{project.date}</span>

{project.title}

</span>

</h3>

"{project.description}"

</p>

{project.tags?.slice(0, 3).map((tag) => (

))}

</div>

</div>

</a>

))}

</div>

</section>

<h2 class="text-3xl font-bold tracking-tight text-white font-josefin uppercase">Recent Blogs</h2>

<span class="hidden md:inline">All Blogs</span>

</a>

</div>

{recentBlogs?.map((blog) => (

<img

src={blog.image_url}

alt={blog.title}

class="w-full h-full object-cover transition-all duration-500"

onerror="this.src='https://placehold.co/600x400/080808/3b82f6?text=Blog'"

</div>

{blog.title}

</span>

</h3>

"{blog.description}"

</p>

{blog.category || 'ARTICLE'}

</span>

</div>

</div>

</a>

))}

</div>

</section>

<h2 class="text-3xl font-bold text-center mb-2 tracking-tight text-white">Contact</h2>

Get In Touch

</p>

<h3 class="text-xl md:text-2xl font-bold text-white tracking-tight uppercase">Mari Berkolaborasi.</h3>

Punya project menarik atau ingin diskusi soal CTF? Mari berkolaborasi dan bangun sesuatu yang gila.

</p>

</div>

fikronajiah123@gmail.com

</a>

<p class="text-slate-600 text-[10px] font-mono uppercase tracking-[0.3em]">Response time</p>

<p class="text-blue-500/80 text-[10px] font-mono uppercase tracking-[0.2em]">~24 hours</p>

</div>

</div>

<label class="text-[10px] font-mono text-slate-500 uppercase tracking-widest ml-1">Email</label>

</div>

<label class="text-[10px] font-mono text-slate-500 uppercase tracking-widest ml-1">Message</label>

</div>

Send Message

</button>

</form>

</div>

</section>

</MainLayout>

.card {

/* Radius kecil (xl) & Border lebih kontras (white/20) */

@apply rounded-xl border border-white/20 bg-transparent p-8 transition-all duration-500;

}

.card:hover {

@apply bg-[#050505] border-white/40;

box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9);

}

.hero-name {

background: linear-gradient(135deg, #ffffff 40%, #3b82f6);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

</style>

←

jahFGSYHa YQTRSEYTWQES

harga ram naik 100%