import { CollapsibleHeader } from "@/components/collapsible-header"; import { Ionicons } from "@expo/vector-icons"; import React from "react"; import { Dimensions, FlatList, Image, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity, View, } from "react-native"; import Animated, { useAnimatedScrollHandler, useSharedValue, } from "react-native-reanimated"; const AVATAR_URI = "https://avatars.githubusercontent.com/u/43992376?v=4"; const CARD_WIDTH = Dimensions.get("window").width - 60; const repoData = [ { author: "Eronred", title: "Nice-prompt", description: "Collection of AI-assisted development prompts designed to improve code quality, consistency and efficiency.", stars: 123, language: "TypeScript", color: "#007AFF", }, { author: "Eronred", title: "Hand-drawn arrows", description: "A gallery of hand-drawn arrows and other design resources as SVGs that can be easily copied as SVG code or React components for use in your projects.", stars: 423, language: "TypeScript", color: "#007AFF", }, { author: "Eronred", title: "Radix Icons", description: "An easy-to-use and customizable React Native icon library featuring Radix UI icons. Enhance your mobile applications with a wide range of beautifully designed and highly scalable icons.", stars: 100, language: "TypeScript", color: "#007AFF", }, { author: "Eronred", title: "Shadow generator", description: "Shadow generator tool is a versatile tool that allows developers to easily add shadows to their UI elements in React Native, Flutter, and Swift projects.", stars: 40, language: "JavaScript", color: "#FFD700", }, ] const navigationData = [ { label: "Repositories", count: 85, icon: "book-outline", color: "#585F6B", textColor: "#fff", }, { label: "Starred", count: 257, icon: "star-outline", color: "#E7B98E", textColor: "#fff", }, { label: "Organizations", count: 3, color: "#FF8D50", icon: "business-outline", textColor: "#fff", }, { label: "Projects", count: 2, color: "#A1A5B1", icon: "grid-outline", textColor: "#fff", }, ] const badgeData = [ { title: "Starstruck", image: "https://github.githubassets.com/assets/starstruck-default--light-a594e2a027e0.png", }, { title: "Pull Shark", image: "https://github.githubassets.com/assets/pull-shark-default-498c279a747d.png", }, { title: "Quickdraw", image: "https://github.githubassets.com/assets/quickdraw-default--light-8f798b35341a.png", }, { title: "Arctic Code Vault Contributor", image: "https://github.githubassets.com/assets/arctic-code-vault-contributor-default-df8d74122a06.png", }, { title: "Pair Extraordinaire", image: "https://github.githubassets.com/assets/pair-extraordinaire-default-579438a20e01.png", }, { title: "YOLO", image: "https://github.githubassets.com/assets/yolo-default-be0bbff04951.png", }, ] export default function GitHubProfile() { const scrollY = useSharedValue(0); const onScroll = useAnimatedScrollHandler({ onScroll: (e) => (scrollY.value = e.contentOffset.y), }); const gap = 8; const cardWidth = Dimensions.get('window').width - 120; const snapInterval = cardWidth + gap; const visibleWidth = Dimensions.get('window').width - 32; const endSpacerWidth = visibleWidth - cardWidth; const repoRenderItem = ({ item }: { item: any }) => ( {item.author} {item.title} {item.description} {item.stars} {item.language} ) /* ───────────────────────────── Render ─────────────────────────────── */ return ( {/* ───────────────────── Sticky Header ───────────────────── */} } /> {/* ─────────────────────────── Scroll Area ─────────────────────────── */} {/* ──────────────────────── Profile Section ─────────────────────── */} {/* Avatar + Name */} Erencan Arica Eronred {/* Status pill + profession */} 🔮 Building Design Engineer {/* Contact rows */} Berlin erencanarica.com @imeronn in/erencanarica {/* Followers */} 109 followers · 10 following {/* Simple badges */} {badgeData.map((item, i) => ( ))} {/* ───────────────────────── Navigation list ───────────────────────── */} {navigationData.map((item) => ( {item.label} {item.count} ))} {/* ────────────────────────── Pinned repo ────────────────────────── */} Pinned {/* ─────────────────────────── README ─────────────────────────── */} Eronred/README.md I’m a frontend & UI developer with over 4 years of experience in building web, mobile, and desktop applications. I've worked on projects involving augmented reality, electric vehicles, and more. Recently, I have become interested in AI and blockchain technologies. If you want to connect with me or have any product ideas, send me an email or DM me on X / Twitter . If you want to connect or have any product ideas, send me an{" "} email or DM me on{" "} Twitter. ); } /* ───────────────────────────── Styles ────────────────────────────── */ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#F8F8FC", position: "relative", paddingTop: 44, }, /* Header */ header: { position: "absolute", top: 0, left: 0, right: 0, height: 44, flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, backgroundColor: "#F8F8FC", borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: "#E5E5EA", zIndex: 100, overflow: "hidden", }, headerIcons: { flexDirection: "row", gap: 4, }, headerButton: { width: 32, height: 32, alignItems: "center", justifyContent: "center", }, /* Profile */ profileSection: { padding: 16, paddingTop: 72 }, profileHeader: { flexDirection: "row", marginBottom: 16 }, profileImage: { width: 80, height: 80, borderRadius: 40, marginRight: 16 }, fullName: { fontSize: 22, fontWeight: "700", color: "#000" }, username: { fontSize: 16, color: "#8E8E93", marginTop: 2 }, rowCenter: { flexDirection: "row", alignItems: "center" }, statusPill: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", backgroundColor: "rgba(255, 255, 255, 1)", borderRadius: 12, paddingVertical: 14, paddingHorizontal: 12, }, statusEmoji: { fontSize: 14 }, statusPillText: { fontSize: 16, marginHorizontal: 6, fontWeight: "400", color: "#000", }, profession: { fontSize: 16, color: "#000", }, contactRow: { flexDirection: "row", alignItems: "center", }, contactText: { fontSize: 14, color: "#000", marginLeft: 4, }, dot: { color: "#8E8E93", marginHorizontal: 4 }, followRow: { flexDirection: "row", alignItems: "center", marginTop: 8, }, badgeRow: { flexDirection: "row", marginTop: 8, gap: 8, }, badge: { width: 28, height: 28, borderRadius: 14, backgroundColor: "#fff", marginRight: -16, borderWidth: 1, borderColor: "#E4E4E6", }, badgeImage: { width: 28, height: 28, }, /* Navigation */ navSection: { marginVertical: 24, backgroundColor: "#fff", }, navItem: { flexDirection: "row", alignItems: "center", paddingVertical: 14, paddingHorizontal: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: "#E5E5EA", }, navIconBox: { width: 28, height: 28, borderRadius: 4, backgroundColor: "#E5E5EA", alignItems: "center", justifyContent: "center", }, navLabel: { fontSize: 16, color: "#000", marginLeft: 12, }, navCount: { fontSize: 16, color: "#8E8E93" }, /* Pinned */ pinnedSection: { marginBottom: 24, }, sectionHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 12, backgroundColor: "#F8F8FC", }, sectionTitleContainer: { flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 16, }, sectionTitle: { fontSize: 16, color: "#8E8E93", fontFamily: "sans-monospace", }, card: { backgroundColor: "#fff", borderRadius: 6, borderWidth: 1, borderColor: "#E5E5EA", padding: 16, justifyContent: "space-between", marginTop: 8, width: CARD_WIDTH, }, cardHeader: { flexDirection: "row", alignItems: "center", marginBottom: 8 }, cardIcon: { width: 36, height: 36, borderRadius: 8, backgroundColor: "#000", alignItems: "center", justifyContent: "center", marginRight: 12, }, cardIconText: { color: "#fff", fontWeight: "700" }, cardTitle: { fontSize: 16, color: "#000", fontWeight: "400", }, cardDescription: { fontSize: 16, color: "#000", fontWeight: "300", lineHeight: 20, }, cardFooter: { flexDirection: "row", alignItems: "center", gap: 12, marginTop: 20, }, cardStars: { fontSize: 14, color: "#8E8E93" }, cardLanguage: { fontSize: 14, color: "#8E8E93" }, /* README */ readmeSection: { paddingHorizontal: 16, paddingVertical: 16, marginBottom: 48, backgroundColor: "#fff", }, readmeBox: { backgroundColor: "#fff", }, readmeText: { fontSize: 16, lineHeight: 24, color: "#000", fontWeight: "300", marginBottom: 16, }, link: { color: "#007AFF", textDecorationLine: "underline" }, });

Github