Beingrt/codestream-devport
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>My GitHub Repos | CodeStream DevPort</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Netflix+Sans:wght@300;400;700;900&display=swap');12 body {13 font-family: 'Netflix Sans', sans-serif;14 background-color: #141414;15 color: #F5F5F1;16 }17 .repo-card {18 transition: all 0.3s ease;19 }20 .repo-card:hover {21 transform: translateY(-5px);22 box-shadow: 0 10px 25px rgba(229, 9, 20, 0.3);23 }24 </style>25</head>26<body class="bg-dark text-light">27 <!-- Navigation -->28 <nav class="fixed w-full z-50 bg-gradient-to-b from-dark to-transparent px-6 py-4 flex justify-between items-center">29 <div class="flex items-center space-x-8">30 <a href="index.html" class="text-primary font-bold text-3xl">CODEFLIX</a>31 <div class="hidden md:flex space-x-6">32 <a href="index.html" class="hover:text-primary transition">Home</a>33 <a href="index.html#work" class="hover:text-primary transition">Projects</a>34 <a href="repos.html" class="text-primary">GitHub</a>35 <a href="index.html#skills" class="hover:text-primary transition">Skills</a>36 <a href="index.html#about" class="hover:text-primary transition">About</a>37 </div>38 </div>39 <div class="flex items-center space-x-4">40 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-800 transition">41 <i data-feather="moon"></i>42 </button>43 </div>44 </nav>45 46 <!-- GitHub Repos Section -->47 <section class="pt-32 pb-16 px-6 min-h-screen">48 <div class="max-w-7xl mx-auto">49 <h1 class="text-4xl font-bold mb-8">My GitHub Repositories</h1>50 51 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">52 <!-- Repo Card 1 -->53 <div class="repo-card bg-gray-900 rounded-lg p-6 border border-gray-800">54 <div class="flex items-center justify-between mb-4">55 <h3 class="text-xl font-bold">E-Commerce API</h3>56 <span class="text-xs bg-gray-800 px-2 py-1 rounded-full">Public</span>57 </div>58 <p class="text-gray-400 mb-4">RESTful API for e-commerce platform with Node.js and MongoDB</p>59 <div class="flex items-center justify-between text-sm">60 <span class="text-gray-400 flex items-center">61 <i data-feather="star" class="w-4 h-4 mr-1"></i> 14262 </span>63 <span class="text-gray-400 flex items-center">64 <i data-feather="git-branch" class="w-4 h-4 mr-1"></i> 2465 </span>66 <span class="text-gray-400">JavaScript</span>67 </div>68 <a href="#" class="mt-4 inline-block text-primary hover:text-secondary transition">View on GitHub →</a>69 </div>70 71 <!-- Repo Card 2 -->72 <div class="repo-card bg-gray-900 rounded-lg p-6 border border-gray-800">73 <div class="flex items-center justify-between mb-4">74 <h3 class="text-xl font-bold">DevTools CLI</h3>75 <span class="text-xs bg-gray-800 px-2 py-1 rounded-full">Public</span>76 </div>77 <p class="text-gray-400 mb-4">Command line tools for developers with TypeScript</p>78 <div class="flex items-center justify-between text-sm">79 <span class="text-gray-400 flex items-center">80 <i data-feather="star" class="w-4 h-4 mr-1"></i> 8981 </span>82 <span class="text-gray-400 flex items-center">83 <i data-feather="git-branch" class="w-4 h-4 mr-1"></i> 1284 </span>85 <span class="text-gray-400">TypeScript</span>86 </div>87 <a href="#" class="mt-4 inline-block text-primary hover:text-secondary transition">View on GitHub →</a>88 </div>89 90 <!-- Repo Card 3 -->91 <div class="repo-card bg-gray-900 rounded-lg p-6 border border-gray-800">92 <div class="flex items-center justify-between mb-4">93 <h3 class="text-xl font-bold">UI Component Library</h3>94 <span class="text-xs bg-gray-800 px-2 py-1 rounded-full">Public</span>95 </div>96 <p class="text-gray-400 mb-4">React component library with Storybook documentation</p>97 <div class="flex items-center justify-between text-sm">98 <span class="text-gray-400 flex items-center">99 <i data-feather="star" class="w-4 h-4 mr-1"></i> 56100 </span>101 <span class="text-gray-400 flex items-center">102 <i data-feather="git-branch" class="w-4 h-4 mr-1"></i> 8103 </span>104 <span class="text-gray-400">React</span>105 </div>106 <a href="#" class="mt-4 inline-block text-primary hover:text-secondary transition">View on GitHub →</a>107 </div>108 </div>109 </div>110 </section>111 112 <script>113 feather.replace();114 </script>115</body>116</html>