kemko/blogfeeds.net
1
0
Fork 0
mirror of https://github.com/kemko/blogfeeds.net.git synced 2026-01-01 16:05:41 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
a1e024cedf8eafa5457436284b4efe6a38382e78
blogfeeds.net/site/index.html
Steve a1e024cedf chore: added images
2025-09-29 13:10:14 -04:00

278 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Feeds</title>
<link rel="stylesheet" href="tailwindcss" />
<meta name="description" content="">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta property="og:title" content="Norns">
<meta property="og:description" content="">
<meta property="og:image" content="/og.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="">
<meta property="twitter:url" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="/og.png">
<style>
details[open] summary svg {
transform: rotate(90deg);
}
</style>
</head>
<body class="overflow-hidden h-screen">
<!-- Navigation Buttons -->
<button id="prevBtn" class="fixed sm:left-4 left-2 top-1/2 transform -translate-y-1/2 z-10 hover:text-black text-black/40 p-3 transition-all duration-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<button id="nextBtn" class="fixed sm:right-4 right-2 top-1/2 transform -translate-y-1/2 z-10 hover:text-black text-black/40 p-3 transition-all duration-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<div id="scrollContainer" class="flex snap-x snap-mandatory overflow-x-scroll">
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col gap-12 justify-center items-center px-8 snap-center">
<div class="max-w-4xl space-y-4">
<p>Do you kinda hate social media?</p>
<p>Tired of doom scrolling through addicting feeds?</p>
<p>Miss the days when the web was just about connecting with people and their thoughts or ideas?</p>
<p>We believe there's an answer to that problem, and it's called</p>
<h1 class="text-7xl font-bold mt-24">Blog Feeds</h1>
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col justify-center items-center px-12 sm:px-8 snap-center">
<div class="max-w-xl space-y-4">
<p>No this isn't another platform.</p>
<p>
You don't sign up here.
</p>
<p>You just write what's on your mind, respond to an idea, post a recipe, or share a photo. It's blogs, but perhaps not in the way you would think of blogs.</p>
<p>It just takes three things to participate:</p>
<div class="flex flex-col gap-2">
<a href="#blog" class="font-bold text-xl underline">Blog</a>
<a href="#rss" class="font-bold text-xl underline">RSS</a>
<a href="#feeds" class="font-bold text-xl underline">Feeds</a>
</div>
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col justify-center items-center sm:px-8 px-12 snap-center">
<div class="max-w-xl space-y-4">
<img src="blog.svg" alt="Blog" id="blog" class="w-full mx-auto" />
<p>Let me reassure you, this is actually simpler than what you're probably thinking. This doesn't have to be some well polished highly viewed monetization machine. It's just a simple website where you can casually talk about whatever you want to talk about! It can be long, short, a list of small things, or just a quote. It should be how you talk with other people in your own life, or how you communicate with the outside world. It should be you on a page. Here's a few places you can make a blog that are RSS enabled:</p>
<details class="w-full">
<summary class="cursor-pointer text-lg font-semibold flex items-center">
<svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
Hosted Services
</summary>
<div class="mt-2 pl-7">
<p class="text-gray-700 mb-3">These are great if you are not quite a technical person and need everything to be simple and easy to use.</p>
<div class="flex flex-wrap gap-2">
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Bear Blog ⭐️</a>
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Substack</a>
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Ghost</a>
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Wordpress</a>
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Squarespace</a>
</div>
</div>
</details>
<details class="w-full">
<summary class="cursor-pointer text-lg font-semibold flex items-center">
<svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
Self Hosted Frameworks
</summary>
<div class="mt-2 pl-7">
<p class="text-gray-700 mb-3">For the devs 🫡 Some of my favorite frameworks and tools for making a blog!</p>
<div class="flex flex-wrap gap-2">
<a href="#" class="bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Astro</a>
<a href="#" class="bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Hugo</a>
<a href="#" class="bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Zola</a>
<a href="#" class="bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">11ty</a>
<a href="#" class="bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Jekyll</a>
</div>
</div>
</details>
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col justify-center items-center sm:px-8 px-12 snap-center">
<div class="max-w-xl space-y-4">
<img src="rss.svg" alt="RSS" id="rss" class="w-full mx-auto" />
<p>Also known as "really simple syndication", RSS has been around for decades. In short, it's simply a list of data that can be updated and notify people when something new has been posted. This is great for blogs since you don't have to always check all the people you want to follow. When you make your blog, you want to make sure it's RSS enabled (resources are further down). You also will want to get an RSS reader, as this will allow you to create a list of people to follow and let you read posts as they are published. These can vary from hosted web platforms where you might need to pay at some point to just free apps you can download. Would highly recommend trying a few and seeing which works best!</p>
<div class="flex flex-wrap gap-2">
<a href="#" class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Feedly</a>
<a href="#" class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Inoreader</a>
<a href="#" class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">NetNewsWire</a>
<a href="#" class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Feeeeed</a>
<a href="https://apps.apple.com/app/id6475002485" class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">iOS RSS Reader</a>
</div>
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col justify-center items-center sm:px-8 px-12 snap-center">
<div class="max-w-xl space-y-4">
<img src="feeds.svg" alt="Feeds" id="feeds" class="w-full mx-auto" />
<p>This takes us to our final point: Feeds. You can probably get away with just the first two items and then sharing it with people you already know, but what about meeting or talking to people you don't know? That's where Feeds come in. The idea is to create another page on your blog that has all the RSS feeds you're subscribed to. By keeping this public and always up to date, someone can visit your page, find someone new and follow them. Perhaps that person also has a feeds page, and the cycle continues until there is a natural and organic network of people all sharing with each other. So if you have a blog, consider making a feeds page and sharing it! If your RSS reader supports OPML file exports and imports, perhaps you can share that file as well to make it easier to share your feeds.</p>
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col justify-center items-center sm:px-8 px-12 snap-center">
<div class="max-w-xl space-y-4">
<img src="idea.svg" class="w-full mx-auto" />
<p>The best part about blog feeds? It's just an idea. There's no central authority. There's no platform. No massive tech giant trying to take your data. It's just you and the people you care about.</p>
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col justify-center items-start sm:px-8 px-12 snap-center">
<div class="max-w-xl space-y-4 w-full mx-auto">
<img src="frequentlyaskedquestions.svg" class="w-full mx-auto" />
<div class="space-y-6 w-full">
<details class="w-full">
<summary class="cursor-pointer text-lg font-semibold flex items-center">
<svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
Where do I sign up?
</summary>
<div class="mt-2 text-gray-700 pl-7">
You don't! Just make a blog, get an RSS reader, and share a feeds page.
</div>
</details>
<details class="w-full">
<summary class="cursor-pointer text-lg font-semibold flex items-center">
<svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
How much does Blog Feeds cost?
</summary>
<div class="mt-2 text-gray-700 pl-7">
Nothing! Of course you can pay for premium plans for blogging platforms or readers, but there are plenty of free options out there.
</div>
</details>
<details class="w-full">
<summary class="cursor-pointer text-lg font-semibold flex items-center">
<svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
Does this replace social media?
</summary>
<div class="mt-2 text-gray-700 pl-7">
Not necessarily! Most people have already ditched social media, and the way Blog Feeds operates doesn't act like a drop in replacement. It's a different style of interacting with people on the web. It's slower, more personal, and has much different incentives. Everyone is different so choose what works best for you; we just ask you give Blog Feeds a shot!
</div>
</details>
<details class="w-full">
<summary class="cursor-pointer text-lg font-semibold flex items-center">
<svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
What about monetization?
</summary>
<div class="mt-2 text-gray-700 pl-7">
You certainly can try to find ways to monetize through platforms like Substack, it's truly up to you. The key is building a network of people who want to talk together!
</div>
</details>
<details class="w-full">
<summary class="cursor-pointer text-lg font-semibold flex items-center">
<svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
What about comments or dialogue?
</summary>
<div class="mt-2 text-gray-700 pl-7">
Most blogs have comments available if you wish to use them, or you could go even further on a technical level and incorporate platforms like BlueSky to have comments. Another approach is just letting people email you so you can discuss on a more personal level. Choose what fits you and your nearby community best!
</div>
</details>
</div>
</div>
</section>
</div>
<script>
const scrollContainer = document.getElementById('scrollContainer');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentSection = 0;
const totalSections = scrollContainer.children.length;
function updateButtons() {
// Hide/show buttons based on current position
prevBtn.style.display = currentSection === 0 ? 'none' : 'block';
nextBtn.style.display = currentSection === totalSections - 1 ? 'none' : 'block';
}
function scrollToSection(index) {
if (index >= 0 && index < totalSections) {
const sectionWidth = window.innerWidth;
scrollContainer.scrollTo({
left: index * sectionWidth,
behavior: 'smooth'
});
currentSection = index;
updateButtons();
}
}
prevBtn.addEventListener('click', () => {
scrollToSection(currentSection - 1);
});
nextBtn.addEventListener('click', () => {
scrollToSection(currentSection + 1);
});
// Update current section when user manually scrolls
scrollContainer.addEventListener('scroll', () => {
const sectionWidth = window.innerWidth;
const newSection = Math.round(scrollContainer.scrollLeft / sectionWidth);
if (newSection !== currentSection) {
currentSection = newSection;
updateButtons();
}
});
// Initialize buttons
updateButtons();
// Handle keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
scrollToSection(currentSection - 1);
} else if (e.key === 'ArrowRight') {
scrollToSection(currentSection + 1);
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink