timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 02:53:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

create video player

Browse Source
This commit is contained in:
Timothy Pidashev
2025-08-27 11:19:18 -07:00
parent 9ad08dc85d
commit 7ff6f6542b
4 changed files with 203 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/src/components/mdx/video.tsx Normal file
View File

@@ -0,0 +1,68 @@
// src/components/mdx/Video.tsx
import React, { useRef } from "react";
import { Play } from "lucide-react";
type VideoProps = {
url: string;
title: string;
attribution?: string;
className?: string;
};
export function Video({ url, title, attribution, className }: VideoProps) {
const videoRef = useRef<HTMLVideoElement>(null);
const overlayRef = useRef<HTMLButtonElement>(null);
const handlePlay = () => {
if (!videoRef.current || !overlayRef.current) return;
// Show browser native controls on play
videoRef.current.controls = true;
videoRef.current.play();
// Hide the overlay
overlayRef.current.style.display = "none";
};
return (
<figure className={`w-full ${className ?? ""}`}>
<div className="relative w-full bg-background rounded-lg overflow-hidden">
<video
ref={videoRef}
className="w-full h-auto bg-black cursor-pointer rounded-lg block"
preload="metadata"
playsInline
title={title}
>
<source src={url} type="video/mp4" />
Your browser does not support the video tag.
</video>
{/* Big overlay play button */}
<button
ref={overlayRef}
onClick={handlePlay}
className="absolute inset-0 flex items-center justify-center bg-background/90 text-foreground hover:text-yellow-bright transition"
aria-label={`Play ${title}`}
>
<Play size={64} strokeWidth={1.5} />
</button>
</div>
{/* Title + attribution */}
<figcaption className="mt-2 text-xs text-foreground flex justify-between items-center">
<span>{title}</span>
{attribution && (
<a
href={attribution}
target="_blank"
rel="noopener noreferrer"
className="underline hover:text-blue-bright"
>
{attribution}
</a>
)}
</figcaption>
</figure>
);
}

1
src/src/components/resources/presentation.astro
View File

@@ -1,4 +1,3 @@
// src/components/resources/presentation.astro
--- ---
import Background from "@/components/background"; import Background from "@/components/background";
--- ---

135
src/src/content/resources/curriculum/python/01-intro-to-python.mdx Normal file
View File

@@ -0,0 +1,135 @@
---
title: "Command Line Basics - Lesson 1"
description: "Getting started with the Linux command line"
date: 2025-09-01
duration: "45 minutes"
tags: ["command line", "linux", "beginners", "lesson1"]
---
import Slide from "@/components/resources/slide.astro";
import Presentation from "@/components/resources/presentation.astro";
import { Video } from "@/components/mdx/video";
<Presentation />
<Slide large>
# 💻 Welcome to the Command Line!
<div step="1" animation="fade-in">The command line is a way to **talk to your computer** using words instead of clicking.</div>
<div step="2" animation="slide-in-left">- It’s like giving your computer instructions directly.</div>
<div step="3" animation="slide-in-left">- Powerful, fast, and used by programmers every day!</div>
</Slide>
<Slide>
## What is the Command Line?
<Video client:load
title="What is the terminal and why should I use it? // Developer Fundamentals"
url="https://timmypidashev.us-sea-1.linodeobjects.com/curriculum%2Fterminal%2F01.mp4"
attribution="https://www.youtube.com/watch?v=lZ7Kix9bjPI"
/>
</Slide>
<Slide>
<div step="1" animation="fade-in">Think of your computer as a **library**.</div>
<div step="2" animation="slide-in-up">- Normally you click through the shelves (folders).</div>
<div step="3" animation="slide-in-up">- With the command line, you can just **ask the librarian** (the computer) to take you exactly where you want to go.</div>
</Slide>
<Slide>
## Opening the Terminal
<div step="1" animation="fade-in">On your laptop, open the **Terminal** program.</div>
<div step="2" animation="slide-in-left">You should see something like:</div>
<div step="4" animation="fade-in">This is called the prompt – it’s where you type commands!</div>
</Slide>
<Slide>
Try It Out! 📝
<div step="1" animation="fade-in">Type this command:</div>
<div step="2" animation="scale-in">
Bash
echo Hello World
</div>
<div step="3" animation="slide-in-up">The computer will answer back: <br/> Hello World</div>
</Slide>
<Slide>
Class Question 🤔
<div step="1" animation="fade-in">What do you think the command echo does?</div>
</Slide>
<Slide>
Answer 🎉
<div step="1" animation="fade-in">It simply repeats back (or "echoes") what you tell it!</div>
</Slide>
<Slide>
Clear the Screen
<div step="1" animation="fade-in">If your screen gets messy, type:</div>
<div step="2" animation="scale-in">
Bash
clear
</div>
<div step="3" animation="slide-in-left">This gives you a clean slate.</div>
</Slide>
<Slide>
Where Am I? 🗺️
<div step="1" animation="fade-in">Use the pwd command:</div>
<div step="2" animation="scale-in">
Bash
pwd
</div>
<div step="3" animation="slide-in-up">It tells you your current location in the computer.</div>
<div step="4" animation="slide-in-left">Example: <br/> /home/student</div>
</Slide>
<Slide>
Class Question 🤔
<div step="1" animation="fade-in">If your computer is a giant library, what does pwd tell you?</div>
</Slide>
<Slide>
Answer 📍
<div step="1" animation="fade-in">It tells you which room (folder) you are standing in right now!</div>
</Slide>
<Slide>
Recap 🎯
<div step="1" animation="fade-in">Today we learned:</div>
<div step="2" animation="slide-in-left">- How to open the terminal</div>
<div step="3" animation="slide-in-left">- echo (say something)</div>
<div step="4" animation="slide-in-left">- clear (clean your screen)</div>
<div step="5" animation="slide-in-left">- pwd (where am I?)</div>
</Slide>
<Slide>
Exit Challenge 🚀
<div step="1" animation="fade-in">Before you leave, type this into your terminal:</div>
<div step="2" animation="scale-in">
Bash
echo Goodbye!
</div>
<div step="3" animation="bounce-in">🎉 You’ve just completed your first command line lesson!</div>
</Slide>

369
src/src/content/resources/curriculum/python/intro-to-python.mdx
View File

@@ -1,369 +0,0 @@
---
title: "Introduction to Python Programming"
description: "A comprehensive introduction to Python programming fundamentals for beginners"
date: 2025-01-20
duration: "2 hours"
tags: ["python", "programming", "beginner", "fundamentals"]
---
import Slide from "@/components/resources/slide.astro";
import Presentation from "@/components/resources/presentation.astro";
<Presentation />
<Slide large>
# Welcome to Python! 🐍
<div step="1" animation="fade-in">**A beginner-friendly programming language**</div>
<div step="2" animation="slide-in-left">- Easy to learn and read</div>
<div step="3" animation="slide-in-left">- Powerful and versatile</div>
<div step="4" animation="slide-in-left">- Great for beginners</div>
<div step="5" animation="bounce-in">- Used by major companies</div>
</Slide>
<Slide>
## What is Python?
<div step="1" animation="fade-in">Python is a **high-level programming language** that emphasizes:</div>
<div step="2" animation="slide-in-up">- **Readability** - Code that looks like English</div>
<div step="3" animation="slide-in-up">- **Simplicity** - Easy to learn and use</div>
<div step="4" animation="slide-in-up">- **Versatility** - Can be used for many things</div>
<div step="5" animation="scale-in">### Created by Guido van Rossum in 1991</div>
<div step="6" animation="type-in">Named after "Monty Python's Flying Circus" 🎭</div>
</Slide>
<Slide>
## Why Learn Python?
<div step="1" animation="slide-in-left">
### 🌐 Web Development
Build websites and web applications
</div>
<div step="2" animation="slide-in-right">
### 🤖 Data Science & AI
Analyze data and build machine learning models
</div>
<div step="3" animation="slide-in-left">
### 🎮 Game Development
Create games and interactive applications
</div>
<div step="4" animation="slide-in-right">
### 🔧 Automation
Automate repetitive tasks
</div>
</Slide>
<Slide>
## Your First Python Program
<div step="1" animation="fade-in">Let's write the classic "Hello, World!" program:</div>
<div step="2" animation="scale-in">
```python
print("Hello, World!")
```
</div>
<div step="3" animation="slide-in-up">### How to run it:</div>
<div step="4" animation="slide-in-up">1. Open a text editor</div>
<div step="5" animation="slide-in-up">2. Type the code above</div>
<div step="6" animation="slide-in-up">3. Save as `hello.py`</div>
<div step="7" animation="bounce-in">4. Run with: `python hello.py`</div>
</Slide>
<Slide>
## Variables and Data Types
<div step="1" animation="fade-in">### Creating Variables</div>
<div step="2" animation="type-in">
```python
name = "Alice" # String
age = 25 # Integer
height = 5.6 # Float
is_student = True # Boolean
```
</div>
<div step="3" animation="slide-in-left">### Python is **dynamically typed**</div>
<div step="4" animation="slide-in-left">You don't need to declare the type!</div>
<div step="5" animation="scale-in">
```python
x = 42 # x is an integer
x = "Hello" # Now x is a string
```
</div>
</Slide>
<Slide>
## Working with Strings
<div data-step="1" data-animation="fade-in">### String Operations</div>
<div data-step="2" data-animation="slide-in-up">
```python
# Creating strings
greeting = "Hello"
name = "World"
# Concatenation
message = greeting + ", " + name + "!"
print(message) # Output: Hello, World!
```
</div>
<div data-step="3" data-animation="slide-in-up">
```python
# String methods
text = "python programming"
print(text.upper()) # PYTHON PROGRAMMING
print(text.capitalize()) # Python programming
print(text.replace("python", "Python")) # Python programming
```
</div>
</Slide>
<Slide>
## Numbers and Math
<div data-step="1" data-animation="fade-in">### Basic Math Operations</div>
<div data-step="2" data-animation="type-in">
```python
# Arithmetic operators
a = 10
b = 3
```
</div>
<div data-step="3" data-animation="slide-in-left">
```python
print(a + b) # Addition: 13
print(a - b) # Subtraction: 7
print(a * b) # Multiplication: 30
print(a / b) # Division: 3.333...
```
</div>
<div data-step="4" data-animation="slide-in-right">
```python
print(a // b) # Floor division: 3
print(a % b) # Modulo (remainder): 1
print(a ** b) # Exponentiation: 1000
```
</div>
</Slide>
<Slide>
## Lists - Storing Multiple Values
<div data-step="1" data-animation="fade-in">### Creating and Using Lists</div>
<div data-step="2" data-animation="slide-in-up">
```python
# Creating a list
fruits = ["apple", "banana", "orange"]
numbers = [1, 2, 3, 4, 5]
```
</div>
<div data-step="3" data-animation="slide-in-up">
```python
# Accessing items (indexing starts at 0)
print(fruits[0]) # apple
print(fruits[-1]) # orange (last item)
```
</div>
<div data-step="4" data-animation="slide-in-up">
```python
# Adding items
fruits.append("grape")
fruits.insert(1, "strawberry")
# List methods
print(len(fruits)) # Length of list
print("apple" in fruits) # Check if item exists
```
</div>
</Slide>
<Slide>
## Control Flow - Making Decisions
<div data-step="1" data-animation="fade-in">### If Statements</div>
<div data-step="2" data-animation="type-in">
```python
age = 18
if age >= 18:
print("You can vote!")
elif age >= 16:
print("You can drive!")
else:
print("You're still young!")
```
</div>
<div data-step="3" data-animation="bounce-in">
```python
# Comparison operators
# == (equal), != (not equal)
# > (greater), < (less)
# >= (greater or equal), <= (less or equal)
```
</div>
</Slide>
<Slide>
## Loops - Repeating Actions
<div data-step="1" data-animation="fade-in">### For Loops</div>
<div data-step="2" data-animation="slide-in-left">
```python
# Loop through a list
fruits = ["apple", "banana", "orange"]
for fruit in fruits:
print(f"I like {fruit}")
```
</div>
<div data-step="3" data-animation="slide-in-right">
```python
# Loop through numbers
for i in range(5):
print(f"Count: {i}") # 0, 1, 2, 3, 4
```
</div>
<div data-step="4" data-animation="scale-in">### While Loops</div>
<div data-step="5" data-animation="slide-in-up">
```python
count = 0
while count < 3:
print(f"Count is {count}")
count += 1 # Same as count = count + 1
```
</div>
</Slide>
<Slide>
## Functions - Organizing Your Code
<div data-step="1" data-animation="fade-in">### Creating Functions</div>
<div data-step="2" data-animation="type-in">
```python
def greet(name):
"""This function greets someone"""
return f"Hello, {name}!"
```
</div>
<div data-step="3" data-animation="slide-in-up">
```python
def add_numbers(a, b):
"""Add two numbers and return the result"""
result = a + b
return result
```
</div>
<div data-step="4" data-animation="bounce-in">### Using functions</div>
<div data-step="5" data-animation="slide-in-up">
```python
message = greet("Alice")
print(message) # Hello, Alice!
sum_result = add_numbers(5, 3)
print(sum_result) # 8
```
</div>
</Slide>
<Slide>
## Practice Exercise
<div data-step="1" data-animation="fade-in">### Build a Simple Calculator</div>
<div data-step="2" data-animation="type-in">
```python
def calculator():
print("Simple Calculator")
print("Operations: +, -, *, /")
num1 = float(input("Enter first number: "))
operation = input("Enter operation (+, -, *, /): ")
num2 = float(input("Enter second number: "))
```
</div>
<div data-step="3" data-animation="slide-in-up">
```python
if operation == "+":
result = num1 + num2
elif operation == "-":
result = num1 - num2
elif operation == "*":
result = num1 * num2
elif operation == "/":
if num2 != 0:
result = num1 / num2
else:
return "Error: Division by zero!"
else:
return "Error: Invalid operation!"
return f"Result: {result}"
```
</div>
<div data-step="4" data-animation="bounce-in">
```python
# Run the calculator
print(calculator())
```
</div>
</Slide>
<Slide >
## 🎉 Congratulations!
<div data-step="1" data-animation="scale-in">You've learned the basics of Python programming!</div>
<div data-step="2" data-animation="fade-in">### What's Next?</div>
<div data-step="3" data-animation="slide-in-left">- Practice with small projects</div>
<div data-step="4" data-animation="slide-in-left">- Learn about modules and packages</div>
<div data-step="5" data-animation="slide-in-left">- Explore Python libraries</div>
<div data-step="6" data-animation="slide-in-left">- Build something cool!</div>
<div data-step="7" data-animation="bounce-in">**Ready to code? Let's build something amazing! 🚀**</div>
</Slide>
## Course Materials
This curriculum covers the fundamentals of Python programming in an interactive, hands-on format. Students will work through practical examples and complete coding exercises to reinforce their learning.
### Getting Started
The presentation above covers all the core concepts you need to start programming in Python. Each slide builds upon the previous one, taking you from basic concepts to writing your first functional program.
#### What You'll Need
- A computer with Python installed
- A text editor or IDE (like VS Code)
- Terminal/command prompt access
- About 2 hours of focused time
#### Course Objectives
By the end of this presentation, you'll be able to:
- Understand Python syntax and basic programming concepts
- Work with variables, strings, numbers, and lists
- Use conditional statements and loops
- Create and use functions
- Build a simple calculator program
The presentation automatically starts when you visit this page. Use arrow keys to navigate between slides and steps, or escape to exit presentation mode.