-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·149 lines (135 loc) · 14.2 KB
/
Copy pathindex.html
File metadata and controls
executable file
·149 lines (135 loc) · 14.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
---
layout: default
description: "Explore computer science coursework, coding sandboxes, and software labs by Sebastián Iturralde at BYU. Features Python, C#, OOP, and web development."
---
<div class="max-w-5xl mx-auto">
<!-- Hero -->
<section class="py-10 md:py-16 mb-8 fade-up">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
<div>
<div class="text-xs tracking-widest uppercase dark:text-gray-500 light:text-gray-400 mb-3 accent-text">// BYULabs @ github</div>
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight mb-3">
Sebastián Iturralde
</h1>
<p class="text-base md:text-lg dark:text-gray-400 light:text-gray-600 max-w-xl">
BYU Computer Science student sharing course labs, coding sandboxes, and side projects. Let's talk clean code or collaborate on assignments!
</p>
</div>
<div class="flex gap-3 flex-shrink-0">
<a href="https://www.itusebastian.com/" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-2 text-sm font-medium dark:bg-gray-800 light:bg-gray-200 dark:border-gray-700 light:border-gray-300 border px-4 py-2.5 rounded-lg hover:dark:bg-gray-700 hover:light:bg-gray-300 transition-colors">
<svg viewBox="0 0 24 24" class="w-4 h-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg> Studio
</a>
<a href="https://teams.microsoft.com/l/chat/0/0?users=siturralde@byupathway.edu" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-2 text-sm font-medium accent-bg text-white px-4 py-2.5 rounded-lg hover:opacity-90 transition-opacity">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg> Contact
</a>
</div>
</div>
</section>
<!-- Competencies -->
<section class="mb-10 fade-up visible">
<div class="flex flex-wrap gap-2">
<!-- Modern Web & MERN -->
<span class="comp-pill text-xs px-3 py-1.5 rounded-full border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-300 light:text-gray-700">Node.js</span>
<span class="comp-pill text-xs px-3 py-1.5 rounded-full border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-300 light:text-gray-700">Express / MVC</span>
<!-- Databases & API -->
<span class="comp-pill text-xs px-3 py-1.5 rounded-full border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-300 light:text-gray-700">PostgreSQL</span>
<span class="comp-pill text-xs px-3 py-1.5 rounded-full border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-300 light:text-gray-700">REST APIs / Auth</span>
<span class="comp-pill text-xs px-3 py-1.5 rounded-full border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-300 light:text-gray-700">Tailwind CSS</span>
<!-- Software Engineering Foundations -->
<span class="comp-pill text-xs px-3 py-1.5 rounded-full border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-300 light:text-gray-700">C# / SOLID</span>
<span class="comp-pill text-xs px-3 py-1.5 rounded-full border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-300 light:text-gray-700">Java / OOP</span>
<span class="comp-pill text-xs px-3 py-1.5 rounded-full border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-300 light:text-gray-700">Python</span>
</div>
</section>
<!-- Divider -->
<hr class="dark:border-gray-800 light:border-gray-200 mb-10">
<!-- Repos Section -->
<section class="fade-up">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
<h2 class="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
<svg viewBox="0 0 24 24" class="w-5 h-5 accent-text" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
BYU Coursework & Labs
</h2>
<div class="flex items-center gap-2">
<button class="sort-btn text-xs px-3 py-1.5 rounded-md border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-400 light:text-gray-600 transition-colors active" data-sort="updated">Recent</button>
<button class="sort-btn text-xs px-3 py-1.5 rounded-md border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-400 light:text-gray-600 transition-colors" data-sort="stars">Stars</button>
<button class="sort-btn text-xs px-3 py-1.5 rounded-md border dark:border-gray-700 light:border-gray-300 dark:bg-gray-800/50 light:bg-gray-100 dark:text-gray-400 light:text-gray-600 transition-colors" data-sort="name">A-Z</button>
</div>
</div>
<!-- Stats Bar -->
<div id="statsBar" class="grid grid-cols-3 gap-3 mb-6">
<div class="stat-box text-center p-3 dark:bg-gray-800/30 light:bg-gray-100 border dark:border-gray-800 light:border-gray-200 rounded-lg">
<div class="stat-val text-xl font-bold dark:text-gray-200 light:text-gray-800" id="totalRepos">—</div>
<div class="text-[10px] uppercase tracking-wider dark:text-gray-500 light:text-gray-500">Classes/Repos</div>
</div>
<div class="stat-box text-center p-3 dark:bg-gray-800/30 light:bg-gray-100 border dark:border-gray-800 light:border-gray-200 rounded-lg">
<div class="stat-val text-xl font-bold dark:text-gray-200 light:text-gray-800" id="totalStars">—</div>
<div class="text-[10px] uppercase tracking-wider dark:text-gray-500 light:text-gray-500">Stars</div>
</div>
<div class="stat-box text-center p-3 dark:bg-gray-800/30 light:bg-gray-100 border dark:border-gray-800 light:border-gray-200 rounded-lg">
<div class="stat-val text-xl font-bold dark:text-gray-200 light:text-gray-800" id="totalLangs">—</div>
<div class="text-[10px] uppercase tracking-wider dark:text-gray-500 light:text-gray-500">Tech Stack</div>
</div>
</div>
<!-- Repo Grid -->
<div id="repoGrid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Skeleton loaders -->
<div class="skeleton h-36 rounded-xl"></div>
<div class="skeleton h-36 rounded-xl"></div>
<div class="skeleton h-36 rounded-xl"></div>
<div class="skeleton h-36 rounded-xl"></div>
<div class="skeleton h-36 rounded-xl"></div>
<div class="skeleton h-36 rounded-xl"></div>
</div>
<!-- Error State -->
<div id="errorState" class="hidden">
<div class="error-state dark:bg-gray-800/30 light:bg-gray-100 border dark:border-gray-700 light:border-gray-200 rounded-xl p-6 text-center">
<svg viewBox="0 0 24 24" class="w-8 h-8 mx-auto mb-3 text-yellow-500" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<h3 class="font-bold mb-2">Unable to load repositories</h3>
<p class="text-sm dark:text-gray-400 light:text-gray-600 mb-4">The GitHub API might be rate-limited or unavailable. Try refreshing the page.</p>
<a href="https://github.com/byulabs" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-2 text-sm font-medium accent-bg text-white px-5 py-2.5 rounded-lg hover:opacity-90 transition-opacity">
<svg viewBox="0 0 24 24" class="w-4 h-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>View on GitHub
</a>
</div>
</div>
</section>
<!-- Ecosystem Links -->
<section class="mt-16 fade-up">
<hr class="dark:border-gray-800 light:border-gray-200 mb-10">
<h2 class="text-lg font-bold tracking-tight mb-5 flex items-center gap-2">
<svg viewBox="0 0 24 24" class="w-5 h-5 accent-text" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
The Sandbox Ecosystem
</h2>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
<!-- CougarHype: BYU Football Analytics (Football Icon) -->
<a href="https://cougarhype.onrender.com/" target="_blank" rel="noopener noreferrer"
class="dark:bg-gray-800/30 light:bg-gray-100 border dark:border-gray-800 light:border-gray-200 rounded-lg p-4 text-center hover:dark:bg-gray-800/60 hover:light:bg-gray-200 transition-colors group">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-auto mb-2 dark:text-gray-500 light:text-gray-400 group-hover:text-red-500 transition-colors" fill="currentColor" viewBox="0 0 640 640">
<path d="M325.1 86.6C236.1 104.6 174.6 150 135.1 210.5C111.8 246.1 97 285.8 88.4 326L315.9 553.4C404.9 535.4 466.4 490 506 429.5C529.3 393.9 544.1 354.2 552.7 314L325.1 86.6zM561.1 254.7C564.3 212.4 561.8 171.4 556.3 136C551.9 108.2 529.5 88 503.2 84.4C460.2 78.5 421 76.9 385.4 79L561.1 254.6zM255.7 561.1L79.9 385.4C76.7 427.7 79.2 468.7 84.7 504.1C89.1 531.9 111.5 552.1 137.8 555.7C180.8 561.6 220 563.2 255.6 561.1zM335.5 207C344.9 197.6 360.1 197.6 369.4 207L433.4 271C442.8 280.4 442.8 295.6 433.4 304.9C424 314.2 408.8 314.3 399.5 304.9L335.5 240.9C326.1 231.5 326.1 216.3 335.5 207zM271.5 271C280.9 261.6 296.1 261.6 305.4 271L369.4 335C378.8 344.4 378.8 359.6 369.4 368.9C360 378.2 344.8 378.3 335.5 368.9L271.5 304.9C262.1 295.5 262.1 280.3 271.5 271zM207.5 335C216.9 325.6 232.1 325.6 241.4 335L305.4 399C314.8 408.4 314.8 423.6 305.4 432.9C296 442.2 280.8 442.3 271.5 432.9L207.5 368.9C198.1 359.5 198.1 344.3 207.5 335z"/>
</svg>
<p class="text-xs font-medium">CougarHype</p>
</a>
<!-- CSE 340: ServiceNetwork -->
<a href="https://cse340-p8my.onrender.com/" target="_blank" rel="noopener noreferrer"
class="dark:bg-gray-800/30 light:bg-gray-100 border dark:border-gray-800 light:border-gray-200 rounded-lg p-4 text-center hover:dark:bg-gray-800/60 hover:light:bg-gray-200 transition-colors group">
<svg viewBox="0 0 24 24" class="w-5 h-5 mx-auto mb-2 dark:text-gray-500 light:text-gray-400 group-hover:text-red-500 transition-colors" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<p class="text-xs font-medium">CSE 340</p>
</a>
<!-- WDD 330: SleepOutside (Tent Icon) -->
<a href="https://wdd330-y0zq.onrender.com/" target="_blank" rel="noopener noreferrer"
class="dark:bg-gray-800/30 light:bg-gray-100 border dark:border-gray-800 light:border-gray-200 rounded-lg p-4 text-center hover:dark:bg-gray-800/60 hover:light:bg-gray-200 transition-colors group">
<svg viewBox="0 0 24 24" class="w-5 h-5 mx-auto mb-2 dark:text-gray-500 light:text-gray-400 group-hover:text-red-500 transition-colors" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"></path></svg>
<p class="text-xs font-medium">WDD 330</p>
</a>
<!-- WDD 231: Web & Programming Portfolio (Code Brackets Icon) -->
<a href="https://byulabs.github.io/wdd231/" target="_blank" rel="noopener noreferrer"
class="dark:bg-gray-800/30 light:bg-gray-100 border dark:border-gray-800 light:border-gray-200 rounded-lg p-4 text-center hover:dark:bg-gray-800/60 hover:light:bg-gray-200 transition-colors group">
<svg viewBox="0 0 24 24" class="w-5 h-5 mx-auto mb-2 dark:text-gray-500 light:text-gray-400 group-hover:text-red-500 transition-colors" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
<p class="text-xs font-medium">WDD 231</p>
</a>
</div>
</section>
</div>