Website

Tuna.one: Open-Source Personal Website with Next.js and Dynamic API Integrations

This repository contains the complete source code for tuna.one, a personal website developed by Tuna. It's built using modern web technologies including Next.js 14 for server-side rendering, Tailwind CSS for styling, and shadcn/ui for UI components. The site dynamically showcases personal projects, experiences, blog posts, and integrates with various APIs like Spotify, Discord, MyAnimeList, and Raindrop to display real-time information and curated content, serving as a comprehensive example of a modern developer portfolio.

Features:

• Real-time Discord Status Display: Shows live Discord presence using the Lanyard API.
• Real-time Spotify Listening (via Discord): Displays current Spotify activity synced through Discord.
• Experiences & Projects Showcase: Dedicated sections for professional experiences and personal projects.
• MyAnimeList Integration: Displays recently watched anime from MyAnimeList.
• Spotify Listening History: Shows recently listened songs directly via Spotify API.
• GitHub Repository Listing: Fetches and displays public GitHub repositories.
• Integrated Blog: Features articles on development and other topics, managed via Contentful.
• Raindrop Bookmark Integration: Displays curated web bookmarks from Raindrop.io.
• Dark/Light Theme Support: User-selectable interface theme for personalized viewing.
• Secure Contact Form: Includes a contact form with Nodemailer for email handling and reCAPTCHA v3 for spam protection.
• Contentful CMS Integration: Manages blog posts and potentially other content seamlessly using a headless CMS.
• Next.js 14 Powered: Leverages the React framework for server-side rendering and static site generation.
• Tailwind CSS Styling: Utilizes a utility-first CSS framework for modern, responsive design.
• shadcn/ui Components: Incorporates pre-built, customizable UI components for a polished interface.

Summary:

The tuna.one project is an open-source personal website demonstrating a full-stack Next.js application. It integrates various third-party APIs to display dynamic content like Discord status, Spotify activity, anime watchlists, and bookmarks. It serves as a practical example for developers looking to build a modern, interactive portfolio or blog with features like content management, theming, and secure contact forms, showcasing a wide range of web development techniques.