-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog.html
More file actions
237 lines (209 loc) · 13 KB
/
Copy pathblog.html
File metadata and controls
237 lines (209 loc) · 13 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nomadic Learning - a blog</title>
<meta name="description" content="Nomadic Learning — a blog by Educator Studio on using generative AI to design and build learning experiences.">
<!-- Apply theme before paint to prevent flash -->
<script>
(function () {
const stored = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (stored === 'dark' || (!stored && prefersDark) || !stored) {
document.documentElement.classList.add('dark');
}
})();
</script>
<!-- Fonts: Inter for body, DM Mono for decorative labels -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' };</script>
<style>
:root { --accent: #c8631a; }
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: #f5f1eb;
color: #111111;
transition: background-color 0.3s, color 0.3s;
}
html.dark body {
background-color: #111111;
color: #e4ddd4;
}
/* Header */
.site-header {
background-color: #f5f1eb;
border-bottom: 1px solid #e0d9cf;
}
html.dark .site-header {
background-color: #0d0d0d;
border-bottom: 1px solid #1f1f1f;
}
/* Logo */
.logo-accent { color: var(--accent); }
/* Overline */
.overline {
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
}
.overline-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
vertical-align: middle;
margin-right: 10px;
margin-bottom: 1px;
}
/* Heading */
h1 {
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.05;
}
/* Description */
.desc {
color: #555;
line-height: 1.75;
}
html.dark .desc { color: #9a9080; }
/* Cards */
.resource-card {
background: #ffffff;
border: 1px dashed #cdc7be;
border-radius: 1rem;
min-height: 160px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.5rem;
transition: border-color 0.2s, border-style 0.2s;
cursor: default;
text-decoration: none;
}
a.resource-card { cursor: pointer; }
html.dark .resource-card {
background: #181818;
border-color: #272727;
}
.resource-card:hover {
border-style: solid;
border-color: var(--accent);
}
.card-label {
font-family: 'DM Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #bbb5ac;
}
html.dark .card-label { color: #3a3530; }
/* Toggle button */
#theme-toggle {
position: absolute;
top: 1.25rem;
right: 1.25rem;
padding: 0.55rem;
border-radius: 0.5rem;
border: 1px solid #cdc7be;
background: #fff;
color: #888;
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
html.dark #theme-toggle {
border-color: #272727;
background: #181818;
color: #555;
}
#theme-toggle:hover {
border-color: var(--accent);
color: var(--accent);
}
/* Divider line under title */
.title-rule {
display: block;
width: 40px;
height: 2px;
background: var(--accent);
margin: 1.5rem auto;
}
</style>
</head>
<body class="min-h-screen">
<header class="site-header relative">
<!-- Theme toggle -->
<button id="theme-toggle" aria-label="Toggle theme">
<!-- Sun icon — shown in dark mode -->
<svg class="hidden dark:block w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"/>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
</svg>
<!-- Moon icon — shown in light mode -->
<svg class="block dark:hidden w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
</button>
<div style="max-width: 48rem; margin: 0 auto; padding: 5rem 1.5rem 4.5rem; text-align: center;">
<!-- Overline -->
<p class="overline"><span class="overline-dot"></span>A Blog</p>
<!-- Title -->
<h1 style="font-size: clamp(2.75rem, 7vw, 4.5rem); margin-bottom: 0;">
<span class="logo-accent">Nomadic</span> Learning
</h1>
<span class="title-rule"></span>
<!-- Description -->
<p class="desc" style="max-width: 36rem; margin: 0 auto; font-size: 1rem;">
Thoughts and brainstorming sessions about generative AI, Career and Technical
Education (CTE), and how teaching and learning is constantly in a state of rapid change.
</p>
<nav style="margin-top: 1.5rem;">
<a href="index.html" style="font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); text-decoration: none;">← Home</a>
<a href="tutorials.html" style="font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); text-decoration: none;">Tutorials →</a>
<a href="examples.html" style="font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); text-decoration: none;">Examples →</a>
</nav>
</div>
</header>
<main style="max-width: 48rem; margin: 0 auto; padding: 3rem 1.5rem 4rem;">
<!-- Posts list — add a resource-card entry here for each new post -->
<div style="display: flex; flex-direction: column; gap: 1.25rem;">
<article class="resource-card" style="cursor: default; display: block; text-align: left; min-height: auto; padding: 2rem;">
<p class="card-label" style="margin: 0 0 0.75rem;">Post</p>
<h2 style="font-size: 1.35rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: -0.01em; color: inherit;">Why I Named This Blog Nomadic Learning</h2>
<p class="desc" style="font-size: 0.95rem; margin: 0 0 1rem;">
I named this blog Nomadic Learning because I believe generative AI technologies, specifically agentic AI, will afford us the opportunity to finally build a learning framework, or ecosystem, that will allow anytime, anywhere learning. This has been the dream of many philosophers, educators, and learning design aficionados for decades, perhaps even centuries. My first attempt at a very basic prototype of this idea is the LLM Wiki concept from <a href="https://x.com/karpathy/status/2039805659525644595" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: none; font-weight: 500;">Andrej Karpathy</a>. The idea here is simple. Put all your research, blog posts, articles, images, and videos into one central location and use an AI agent to synthesize, package, and visualize the information. You can then probe the system by asking questions about the information. One of my favorite things to do is to ask it for connections and relationships between the information provided. I tend to read lots of articles and blog posts, and watch/listen to lots of podcasts, and I often feel there is "connective tissue" between all the information I consume, but tend to miss much of it because as the saying goes — "it is like drinking from a firehose". As an educator, I know one of the best ways students learn is by helping them build connections between their learning. Most modern schools are siloed. Students "go to" language arts class, then pick up their books/computer and "go to" mathematics, then pick up their books/computer and go to science, etc. Any educator will tell you the number one question they get is "Why am I learning this?" or "What does this have to do with anything I will do once I graduate?" When you can show students there are natural connections between what (and how) we learn, they tend to begin to realize learning is a continuum and we are constantly looking to "fill in gaps" in our knowledge. Watch a toddler — it is an amazing experience in the power of human ingenuity and learning. If you want to learn how to build a system such as this yourself, there is some technical "know-how" needed to get started, but it is not too bad, and like most technologies this process will get much, much simpler if/when the concepts become more mainstream. There are many tools, such as Google's NotebookLM, that are somewhat similar to Karpathy's system, if you want to try this at a cleaner entry point.
</p>
<p class="desc" style="font-size: 0.95rem; margin: 0;">
Another piece of learning that generative AI can enable is "extreme customization". In education, we call this differentiation, but like many other terms in education, this term has been misused and now is generally seen as simply marketing. I want to believe students will need to build their own learning networks/swarms in the age of AI. This is the concept of nomadic learning. They will learn in school, in their home, in their community, in their social networks, in their online interactions, and in their own head. Agentic AI can be used as a tool to bring all these learning sources into one area. Imagine if a student could harness all this knowledge into a mobile solution so that when they go to apply for college or a job, they can use their "AI agent" to help them describe their knowledge. This is not too dissimilar to a portfolio of work. Many universities and companies are now requiring portfolios in their admissions and/or interview processes. I also really like this type of system because it empowers the learner to be an advocate for their own learning. Right now, many believe (myself included) our modern school systems have actually taken away much of the student agency in learning because everything is designed for the student ahead of time. Now obviously, any good educator is going to "meet students where they are", but the current system we have built in the industrial age (post-WWII) really is designed to be a one-size-fits-all model where student agency is not the main concern, rather the idea is to produce workers/citizens for an industrial age. We need to be thinking beyond. More to come soon!
</p>
</article>
</div>
</main>
<footer style="border-top: 1px solid #e0d9cf; padding: 2rem 1.5rem; text-align: center;">
<p style="margin: 0; font-size: 0.85rem; color: #888;">
A project by <a href="https://www.mikerenne.com/" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: none; font-weight: 500;">Mike Renne</a>
·
<a href="https://github.com/mrenne" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: none; font-weight: 500;">GitHub</a>
·
<a href="https://github.com/mrenne/AI-CTE-Wiki" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: none; font-weight: 500;">LLM-Wiki</a>
</p>
</footer>
<script>
const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
</script>
</body>
</html>