<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="/rss.xsl" type="text/xsl"?>
<rss version="2.0" 
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
>
  <channel>
    <title>Raylaxed | Raimund Kohlprath</title>
    <link>https://www.raylaxed.at</link>
    <description>Tech enthusiast from Vienna. Building websites, visual computing solutions, and CGI.</description>
    <language>en</language>
    <copyright>© 2025 Raimund Kohlprath</copyright>
    <atom:link href="https://www.raylaxed.at/rss" rel="self" type="application/rss+xml" />
    <lastBuildDate>Sat, 15 Mar 2025 08:30:08 GMT</lastBuildDate>
    <image>
      <url>https://www.raylaxed.at/images/profilepic.png</url>
      <title>Raylaxed | Raimund Kohlprath</title>
      <link>https://www.raylaxed.at</link>
    </image>
    <webMaster>raylaxed@mastodon.social (Raimund Kohlprath)</webMaster>
  <item>
        <title>Connecting Portfolio Graphs: A Network of Friends</title>
        <link>https://www.raylaxed.at/blog/social-media-network-graph</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/social-media-network-graph</guid>
        <description><![CDATA[Expanding the idea graph with friend nodes - a simple way to connect and explore friends portfolios through interactive visualization.]]></description>
        <content:encoded><![CDATA[
## The Spark

Today, I showed my university colleague Steff my portfolio's idea graph visualization. What started as a simple demo turned into an exciting brainstorming session. The idea? Adding friend nodes to our graphs that expand to reveal our friends' own idea networks.

## The Vision

The concept is beautifully simple:
- Add a new "Friends" section to the idea graph
- Each friend appears as a node
- Clicking a friend's node expands to show their own idea graph
- Each person maintains their own independent graph
- No complex backend needed - just link to each other's pages

## How It Would Work

### Friend Nodes
Instead of trying to sync or merge graphs, each friend node would be a gateway to that person's portfolio. When you click on a friend's node, it could:
- Expand to preview their graph
- Provide a link to their full portfolio
- Show a summary of their recent work

### Implementation Ideas

The beauty of this approach is its simplicity:
```typescript
interface FriendNode extends GraphNode {
  type: 'friend';
  name: string;
  portfolio: string;  // URL to their portfolio
  avatar?: string;    // Optional profile picture
  preview?: string;   // Short bio or description
}
```

No complex APIs or backend synchronization needed - just a simple way to reference and link to friends' work.

## Next Steps

1. Add the friend node type to the graph
2. Design an elegant expansion animation for friend nodes
3. Create a nice preview layout for friends' graphs
4. Add friend no...]]></content:encoded>
        <pubDate>Thu, 13 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Building an Interactive Idea Graph with React Flow and D3.js</title>
        <link>https://www.raylaxed.at/blog/Building-Interactive-Idea-Graph</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/Building-Interactive-Idea-Graph</guid>
        <description><![CDATA[A deep dive into creating an interactive, force-directed graph visualization using React Flow, D3.js, and TypeScript to showcase interconnected projects and blog posts.]]></description>
        <content:encoded><![CDATA[
## The Vision

I wanted to create an interactive visualization that would showcase how my various projects, blog posts, and interests are interconnected. The goal was to build something more engaging than a traditional portfolio list - a visual network where visitors could explore the relationships between different pieces of work.

## Technical Stack

The graph visualization is built with:
- **React Flow** - For the interactive graph interface and node management
- **D3.js** - For force-directed layout calculations
- **TypeScript** - For type safety and better development experience
- **Tailwind CSS** - For styling and dark mode support

## Key Features

### 1. Force-Directed Layout

The graph uses D3's force simulation to create an organic, balanced layout:

```typescript
const simulation = d3.forceSimulation()
  .force('link', d3.forceLink().id((d: any) => d.id).distance(600))
  .force('charge', d3.forceManyBody().strength(-30000))
  .force('x', d3.forceX(0).strength(0.1))
  .force('y', d3.forceY(0).strength(0.1))
  .force('collision', d3.forceCollide().radius(250));
```

This creates a natural spacing between nodes while maintaining their connections. The force parameters were carefully tuned to:
- Keep nodes at a comfortable viewing distance
- Prevent overlap
- Maintain a balanced distribution

### 2. Custom Node Types

Each node in the graph represents different types of content:
- Blog posts
- Projects
- Topic groups (like "Computer Science" or "CGI")

The nodes are i...]]></content:encoded>
        <pubDate>Mon, 10 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Building a Python-Based Network Security Toolkit</title>
        <link>https://www.raylaxed.at/blog/Network-Security-Toolkit</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/Network-Security-Toolkit</guid>
        <description><![CDATA[How I developed a comprehensive network monitoring and security toolkit using Python, featuring packet analysis, traffic visualization, and automated log management.]]></description>
        <content:encoded><![CDATA[
## The Journey to Better Network Visibility

As networks become increasingly complex, having the right tools to monitor and analyze network traffic becomes crucial. I recently developed a suite of Python-based network security tools that help provide deeper insights into network behavior and potential security issues.

## The Toolkit Components

The toolkit consists of several interconnected Python scripts, each handling specific aspects of network monitoring and analysis:

### 1. Network Scanner
A foundational tool that maps out devices on the network, providing:
- Device discovery and identification
- Port scanning capabilities
- Service enumeration
- Network topology mapping

### 2. Packet Analyzer
This component dives deep into network traffic:
- Real-time packet capture and analysis
- Protocol breakdown
- Traffic pattern identification
- Anomaly detection

### 3. Live Traffic Monitor
Provides real-time insights into network activity:
- Bandwidth usage tracking
- Connection monitoring
- Traffic spike detection
- Protocol distribution analysis

### 4. Traffic Visualization
Makes network data more accessible through:
- Interactive graphs and charts
- Traffic flow visualization
- Time-series analysis
- Pattern recognition aids

## Implementing Robust Log Management

One of the key challenges in network monitoring is managing the vast amount of data generated. I implemented a sophisticated log rotation system that:

1. **Prevents Disk Space Issues**
   - Automatically rotate...]]></content:encoded>
        <pubDate>Sun, 09 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Project Protocol: iNaturalisTree - Building a Biodiversity Visualization System</title>
        <link>https://www.raylaxed.at/blog/iNaturalisTree-Project</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/iNaturalisTree-Project</guid>
        <description><![CDATA[A deep dive into building a system for downloading and visualizing the complete taxonomy tree from iNaturalist, featuring API authentication, efficient data collection, and graphical visualization.]]></description>
        <content:encoded><![CDATA[
## Project Overview

We built a system to download and visualize the complete taxonomy tree from iNaturalist, consisting of multiple components that work together to create a hierarchical visualization of species relationships.

## Key Components

### 1. API Authentication (get_token.py)

We implemented JWT-based authentication for the iNaturalist API, which taught us valuable lessons about:
- Token generation with proper expiration times
- Using timezone-aware datetime objects
- Caching tokens to reduce API requests
- Proper error handling for API authentication

### 2. Data Collection (build_taxonomy.py)

We implemented two different tree traversal strategies:
1. Depth-First Search (DFS) - our initial implementation
2. Breadth-First Search (BFS) - our improved version

Key learnings:
- BFS provides better level-by-level exploration
- Progress tracking is easier with BFS
- Importance of saving progress regularly
- Handling large-scale data collection robustly

### 3. Visualization (visualize_taxonomy_graphical.py)

We created a graphical visualization system using graphviz with features including:
- Color coding for different taxonomic ranks
- Radial layout for better hierarchy visualization
- Automatic file versioning with timestamps
- Multiple output formats (PNG and PDF)

This component taught us about:
- Graph visualization techniques
- Handling large hierarchical data structures
- File management and versioning
- Error handling in visualization processes

## Technical ...]]></content:encoded>
        <pubDate>Sun, 09 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Adding Light/Dark Mode: A Journey of Trial and Error</title>
        <link>https://www.raylaxed.at/blog/Adding-Light-Dark-Mode</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/Adding-Light-Dark-Mode</guid>
        <description><![CDATA[My experience implementing a theme switcher in Next.js, and the challenges I faced along the way.]]></description>
        <content:encoded><![CDATA[
## The Initial Plan

What started as a simple "let's add a theme toggle" turned into an interesting journey through React's client/server components, hydration issues, and state management. Here's what I learned.

## The Challenges

### 1. Theme Provider Setup
The first challenge was setting up a proper theme provider. I needed to:
- Handle client-side rendering
- Prevent hydration mismatches
- Persist theme choice in localStorage
- Apply theme changes consistently

### 2. Component Updates
Several components needed attention:
- Mastodon feed cards weren't updating properly
- Footer text needed contrast adjustments
- The main background image needed to switch between light/dark versions

### 3. Hydration Issues
The classic "There was an error while hydrating" message appeared when I tried to use client-side state in server components. The solution was to:
- Add 'use client' directives where needed
- Handle mounted state properly
- Use suppressHydrationWarning where appropriate

## The Solution

Here's the final theme provider implementation that worked:

```typescript
'use client';

export function ThemeProvider({ children }) {
  const [mounted, setMounted] = useState(false);
  const [theme, setTheme] = useState('dark');

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
    setMounted(true);
  }, []);

  useEffect(() => {
    if (mounted) {
      const root = document.documentElement;
      loca...]]></content:encoded>
        <pubDate>Sat, 08 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Decentralising Social Media: Taking Back Control</title>
        <link>https://www.raylaxed.at/blog/Decentralising-Social-Media</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/Decentralising-Social-Media</guid>
        <description><![CDATA[Why the future of social media lies in personal websites and decentralized networks, and how we can break free from centralized platforms.]]></description>
        <content:encoded><![CDATA[
## The Problem with Centralization

Remember when the internet was supposed to be free and open? Today, a handful of tech giants control most of our online social interactions. They decide what we see, who gets heard, and how we connect. But there's a growing movement that suggests we don't have to play by their rules anymore.

## Personal Websites: Your Digital Home

Think of your personal website as your home on the internet. Unlike social media profiles, you own and control every aspect of it:
- Your content stays yours
- No algorithmic manipulation
- No sudden platform changes
- Complete creative freedom
- True ownership of your digital presence

## The Power of Federation

This is where things get interesting. What if we could connect these personal websites into a social network? That's exactly what the Fediverse (federated universe) enables. Mastodon is a perfect example of this approach:
- Anyone can host their own server
- Servers can communicate with each other
- Users choose their community
- No central authority
- Open-source and transparent

## Building Your Digital Presence

Here's how you can start taking control:
1. Create your personal website
2. Host your own content
3. Connect to the Fediverse through platforms like Mastodon
4. Engage with communities that share your values
5. Encourage others to join the decentralized web

## The Technical Side

The beauty of modern web technologies is that they make this accessible:
- Static site generators like Next.js ...]]></content:encoded>
        <pubDate>Sat, 08 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Decentralising Social Media: Taking Back Control</title>
        <link>https://www.raylaxed.at/blog/Linking-Websites</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/Linking-Websites</guid>
        <description><![CDATA[Why the future of social media lies in personal websites and decentralized networks, and how we can break free from centralized platforms.]]></description>
        <content:encoded><![CDATA[
## The Problem with Centralization

Remember when the internet was supposed to be free and open? Today, a handful of tech giants control most of our online social interactions. They decide what we see, who gets heard, and how we connect. But there's a growing movement that suggests we don't have to play by their rules anymore.

## Personal Websites: Your Digital Home

Think of your personal website as your home on the internet. Unlike social media profiles, you own and control every aspect of it:
- Your content stays yours
- No algorithmic manipulation
- No sudden platform changes
- Complete creative freedom
- True ownership of your digital presence

## The Power of Federation

This is where things get interesting. What if we could connect these personal websites into a social network? That's exactly what the Fediverse (federated universe) enables. Mastodon is a perfect example of this approach:
- Anyone can host their own server
- Servers can communicate with each other
- Users choose their community
- No central authority
- Open-source and transparent

## Building Your Digital Presence

Here's how you can start taking control:
1. Create your personal website
2. Host your own content
3. Connect to the Fediverse through platforms like Mastodon
4. Engage with communities that share your values
5. Encourage others to join the decentralized web

## The Technical Side

The beauty of modern web technologies is that they make this accessible:
- Static site generators like Next.js ...]]></content:encoded>
        <pubDate>Sat, 08 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Digitizing History: Building a WWI Cipher Decoder</title>
        <link>https://www.raylaxed.at/blog/WW1-Cipher-Machine</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/WW1-Cipher-Machine</guid>
        <description><![CDATA[How a historical discovery in the Austrian State Archives led to creating an interactive World War I cipher machine.]]></description>
        <content:encoded><![CDATA[
## The Discovery

It all started when a friend working at the Austrian State Archives (Staatsarchiv) shared an fascinating find with me - an original cipher lookup table used by the Austro-Hungarian Army during World War I. This wasn't just any cryptographic tool; it was a sophisticated matrix that combined both character substitution and complete word encoding.

## The Challenge

The original cipher matrix was a complex system that the K&K Armee (Kaiserliche und Königliche Armee) used for secure military communications. It presented an interesting technical challenge: how to transform this historical document into an interactive web application that would both preserve its historical significance and make it accessible to anyone interested in military history or cryptography.

## The Implementation

I built a web application that faithfully reproduces the original cipher matrix's functionality. The encoder/decoder allows users to:
- Input messages in plain text and receive the encoded version
- Decode messages using the original cipher format (A1 B2 C3...)
- View the complete original matrix for reference

The most interesting technical aspect was implementing the dual-nature of the cipher - it needed to handle both simple character substitution and complete word encoding, just like the original system.

## Historical Context

This project was particularly meaningful because it bridges the gap between historical artifacts and modern technology. The cipher matrix was used du...]]></content:encoded>
        <pubDate>Sat, 08 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>The Social Bot Experiment: An AI Meme Network Concept</title>
        <link>https://www.raylaxed.at/blog/Social-Bot-Experiment</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/Social-Bot-Experiment</guid>
        <description><![CDATA[Planning an artistic experiment: Can AI-driven bots with different "personalities" reveal how content shapes social media behavior?]]></description>
        <content:encoded><![CDATA[
## The Concept

What happens when you let AI create and manage social media content? I'm planning an experimental art project: a small network of Instagram creator accounts, each with its own distinct "personality" and content style, all managed by a single Facebook Business account and driven by AI.

## The Planned Bot Personalities

Each bot will have a specific content strategy:
- The Unifier: Wholesome memes about shared experiences
- The Critic: Satirical content about social trends
- The Absurdist: Surreal, nonsensical memes
- The Provocateur: Making fun of insecurities

## Technical Blueprint

The system will use:
- OpenAI's API for generating meme concepts and captions
- Stable Diffusion for image generation
- Instagram Graph API for automated posting
- Custom scheduling algorithm based on engagement metrics

## Research Questions

This experiment aims to explore:
- How do different content styles affect engagement?
- Can AI accurately capture and replicate meme culture?
- What happens when bots interact with real users?
- How transparent should we be about automated content?

## Ethical Framework

Before launching, several ethical considerations need to be addressed:
- Clear labeling of all accounts as automated
- Monitoring for unintended negative impacts
- Guidelines for content boundaries
- Data collection and privacy considerations

This is a work in progress, and I'll be sharing updates as the project develops. Stay tuned! ...]]></content:encoded>
        <pubDate>Fri, 07 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Building Buttje: Why Next.js Was the Right Choice</title>
        <link>https://www.raylaxed.at/blog/Building-Buttje-Website</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/Building-Buttje-Website</guid>
        <description><![CDATA[My experience building a professional cleaning service website with Next.js, and why it proved to be the perfect framework choice.]]></description>
        <content:encoded><![CDATA[
## The Project

When I took on the project to build Buttje's website - a high-end cleaning service company in Vienna - I needed a framework that would deliver excellent performance, SEO capabilities, and a smooth development experience. Next.js proved to be the perfect choice.

## Why Next.js Won Over Svelte

While Svelte was also a contender, several factors made Next.js stand out:

1. **Robust Community Support**
   - Vast ecosystem of components and libraries
   - Extensive documentation and tutorials
   - Quick problem-solving through community resources

2. **AI Development Support**
   - Excellent integration with AI coding tools
   - Better code suggestions and completions
   - More comprehensive documentation coverage

3. **Enterprise-Ready Features**
   - Built-in image optimization
   - Automatic route pre-fetching
   - Superior SEO capabilities
   - Server-side rendering out of the box

## Key Implementation Features

The website required several crucial features:

### Responsive Design
- Mobile-first approach
- Smooth transitions between breakpoints
- Optimized images for different screen sizes

### Performance Optimization
- Next.js Image component for automatic optimization
- Static page generation for faster loading
- Efficient component rendering

### Content Management
- Easy-to-update service listings
- Dynamic content rendering
- Structured content organization

## Development Experience

The development process was notably smooth thanks to Next.js:

1. **...]]></content:encoded>
        <pubDate>Thu, 06 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  <item>
        <title>Building a Pokédex for Real Animals with iNaturalist API</title>
        <link>https://www.raylaxed.at/blog/Tierdex-via-iNaturalist-API</link>
        <guid isPermaLink="true">https://www.raylaxed.at/blog/Tierdex-via-iNaturalist-API</guid>
        <description><![CDATA[How a casual conversation turned into building a visual database of animals using the iNaturalist API and React Flow.]]></description>
        <content:encoded><![CDATA[
It all started with a simple conversation with my girlfriend. We were talking about how cool it would be to have something like a Pokédex, but for real animals - a way to explore and learn about the incredible diversity of life around us.

## Finding the Right Data

The first challenge was finding a comprehensive database of animals. After some research, I discovered iNaturalist, a platform where people around the world share their wildlife observations. What caught my attention was their extensive API that provides access to a wealth of taxonomic data and species information.

## Building the Visual Interface

This project marked my first experience working with an external API and creating a visual representation of hierarchical data. I chose React Flow for visualization, as it allows for creating interactive node-based interfaces - perfect for displaying the complex relationships between species.

The current implementation shows the taxonomic tree, allowing users to explore the relationships between different species, much like navigating through a Pokédex. Each node represents a species or taxonomic rank, and the connections show their relationships.

## Technical Challenges

Some of the interesting challenges I faced included:
- Managing the hierarchical data structure from the API
- Creating an intuitive navigation system for the taxonomy tree
- Optimizing the performance with large datasets
- Implementing a responsive design that works well on different devices

## C...]]></content:encoded>
        <pubDate>Wed, 05 Feb 2025 00:00:00 GMT</pubDate>
        <author>raylaxed@mastodon.social (Raimund Kohlprath)</author>
        <category>Technology</category>
     </item>
  </channel>
</rss>