Folio-Magazine

Folio-Magazine is a portfolio website presented in an innovative magazine format, built using the powerful Nuxt framework. This project serves as a minimal starter for developers looking to create their next web application with Nuxt 3 in a simple and efficient manner.

Key features of Folio-Magazine include:

1. Tailwind CSS: The project integrates Tailwind CSS, a highly popular utility-first CSS framework, allowing developers to customize and style their website with ease and flexibility.

2. Color Mode: Folio-Magazine offers a built-in color mode functionality, enabling users to switch between dark and light themes seamlessly, providing an enhanced user experience and catering to individual preferences.

3. Minimal Starter: Folio-Magazine is designed as a minimal starter project, providing a solid foundation for developers to build upon and customize according to their specific requirements, without unnecessary bloat or complexity.

Developed by Johann Cavallucci, Folio-Magazine aims to simplify the process of creating portfolio websites with a unique and visually appealing magazine-style layout.

Super Vue 3 Tabs Component

The Super Vue 3 Tabs Component is a reusable Vue.js component designed to simplify the process of creating tabbed interfaces within Vue 3 applications. This component aims to provide developers with a straightforward and efficient solution for implementing tabbed content navigation and organization.

As a reusable component, the Super Vue 3 Tabs Component can be easily integrated into any Vue 3 project, allowing developers to leverage its functionality across multiple components or pages. This promotes code reusability, consistency, and maintainability within the application.

PokeGames is a Vue.js + Vite web application that offers a collection of engaging mini-games inspired by the beloved Pokemon franchise. Fans of the series can immerse themselves in various exciting challenges and activities featuring their favorite Pokemon characters.

The application boasts the following key features:

1. Select Your Winner Pokemon: Players can choose between two Pokemon characters to engage in a simulated battle scenario, adding an element of strategy and decision-making to the experience.

2. Match Pokemon Name Game: In this mini-game, players are presented with a set of Pokemon sprites (images) and must correctly match each sprite with its corresponding name, testing their knowledge of Pokemon characters.

3. Identify Pokemon Game: Players are challenged to identify a specific Pokemon based on a descriptive prompt or clue provided, further testing their familiarity with the Pokemon universe.

PokeGames is designed to be an entertaining and nostalgic experience for Pokemon enthusiasts of all ages, allowing them to engage with their favorite characters in a unique and interactive way.

The project is licensed under the permissive MIT License, granting users the freedom to use, modify, and distribute the application in accordance with the terms of the license.

Vue Color Wheel

A Color Wheel Picker for Vue, built on top of Vite & Vue 3.

Concept

Why using color wheel picker? Color Wheel makes color combinations easy.

A color wheel picker is a helpful tool for selecting colors by visually showing relationships between different colors, aiding in choosing harmonious color schemes for designs. It allows adjusting parameters like hue, saturation, and brightness for more control over color selection, streamlining the process for creating visually appealing designs.

Usage

Install

> pnpm i vue-color-wheel

Add to Project

<template>
  ...
  <VueColorWheel
    wheel="aurora"
    harmony="analogous"
    :radius="160"
    :defaultColor="wheelColor"
    v-model:color="wheelColor"
    @change="handleChangeColors"
  />
  ...
</template>

<script lang="ts" setup>
import type { Harmony } from 'vue-color-wheel'
import { VueColorWheel } from 'vue-color-wheel'
import { useDebounce } from '@vueuse/core'

const wheelColor = useDebounce(ref('#40ffff'))
const colorList = ref<Harmony[]>()

const handleChangeColors = (harmonyColors: Harmony[]) => {
  colorList.value = harmonyColors
}
</script>

Color combinations

Complementary

Two colors that are on opposite sides of the color wheel. This combination provides a high contrast and high impact color combination – together, these colors will appear brighter and more prominent.

Monochromatic

Three shades, tones and tints of one base color. Provides a subtle and conservative color combination. This is a versatile color combination that is easy to apply to design projects for a harmonious look.

Analogous

Three colors that are side by side on the color wheel. This color combination is versatile, but can be overwhelming. To balance an analogous color scheme, choose one dominant color, and use the others as accents.

Triadic

Three colors that are evenly spaced on the color wheel. This provides a high contrast color scheme, but less so than the complementary color combination — making it more versatile. This combination creates bold, vibrant color palettes.

Tetradic (Square)

Four colors that are evenly spaced on the color wheel. Tetradic color schemes are bold and work best if you let one color be dominant, and use the others as accents. The more colors you have in your palette, the more difficult it is to balance.

License

MIT @xiaoluoboding

vuetify3-audio-player

This is an audio player for Vue 3 based on Vuetify 3.

Features

• Supports Vue 3 and Vuetify 3.
• Supports most of the audio play in this component.
• You can set the color you want for all component buttons.
• Supports downloading the audio file.
• Support Dark mode of Vuetify.
• Supports auto play, but if user didn't interact with the document first, the audio can't be played.
• Supports disabling audio download button.
• Supports disable the Vuetify Card style, and you can use this component in your own Vuetify Card of your page.
• You can set custom icons supported by vuetify v-icon component.

License

MIT

WiQuizz

WiQuizz is a game generator powered by Nuxt content and SPARQL queries from Wikidata, originally forked from the Nuxt template Zooper. With WiQuizz, users can create quizzes that offer endless variety, leveraging the vast knowledge available on Wikidata.

Creating a new game is simple, requiring just one Markdown file. Users can choose from existing responsive quiz templates, including drag-and-drop, swap, and multiple-choice questions. They can also draw inspiration from the existing templates and SPARQL queries or add their own game templates using Vue.js logic.

WiQuizz provides an interactive platform for users to explore and play with examples, offering a dynamic and engaging experience for learning and entertainment.

Tech Stack / nuxt modules

• Structure : Nuxt content
• UI : Nuxt UI, Quasar, Tailwind
• Animation / interaction : Vue draggable next, Vue3 Lottie, Morev vue transitions

Palette Pilot

Palette Pilot is an open source project built with Nuxt.js that helps you extract the most relevant colors from an image. With Palette Pilot, you can easily drop or upload an image and instantly discover the five most prominent colors within it.

Features

• Extract the 5 most relevant colors from an image
• Compare colors to check their contrast ratios
• Visualize color combinations with UI elements examples
• Export the generated palette to TailwindCSS

Why Palette Pilot?

• Simplicity: Palette Pilot offers a user-friendly interface that makes it easy to extract colors and compare them.
• Efficiency: Save time by quickly identifying the most relevant colors within an image.
• Design-friendly: Whether you're a designer, developer, or enthusiast, Palette Pilot helps you pick colors that work harmoniously together.

Run locally

• Clone the repository: git clone https://github.com/linuxmobile/palettePilot.git
• Navigate to the project directory: cd palettePilot
• Install dependencies: bun install
• Start the development server: bun run dev or bun run dev -o to directly visualize the project

License

Palette Pilot is released under the MIT License.

OTP Input for Vue

One-time passcode Input. Accessible & unstyled. Based on the React version by guilhermerodz.

License

MIT

Vue Project Planner

The Vue.js Project Tracker application is a comprehensive tool designed to assist users in effectively managing and tracking their projects.

Here are the key features:

Project Management: Users can seamlessly add, update, and delete projects within the application. Each project entry includes essential details such as title, description, and completion status.

Add Projects: Users can create new projects using a dedicated form.
Edit Projects: Existing projects can be updated with new information or marked as complete.

Delete Projects: Projects can be removed from the list as needed.
Dynamic Project Display and Filtering: The application supports dynamic filtering of projects based on their completion status, allowing users to focus on either ongoing or completed projects.

Filtering Functionality: Users can filter projects to display all, completed, or ongoing projects based on their preferences.

UI Enhancements and Usability: The application offers a visually appealing and user-friendly interface, incorporating Material Icons and a custom navigation bar for enhanced usability.

Material Icons: Used for intuitive actions such as delete, edit, and completion of projects.

Navigation Bar: Facilitates easy navigation between adding new projects and viewing existing ones, enhancing overall user experience.

Full-stack real-time chat

A realtime chat website using Vue.js and Supabase.

• Data: PostgeSQL managed by Supabase @supabase_io (awsome real-time API).
• Front-end: Vue.js + Vite
• UI library: Tailwind
• Hosting: Vercel
• Country flags from vue-country-flag-next

Vue3 Scheduler

Essential Timelines Made Easy: Vue Timeline Scheduler for Your Basic Needs.

Vue3 Scheduler, the ultimate tool for simplifying time management in your Vue.js projects. Say goodbye to unnecessary complexity and embrace efficiency with Vue Timeline Scheduler.

Here's what Vue3 Scheduler has to offer:

• Display Events on a Timeline: Easily visualize events on a timeline with adjustable scales, providing clarity and organization to your project timelines.

• Customizable Styling: Tailor the appearance of events and the timeline to suit your project's design requirements, ensuring consistency and aesthetic appeal.

• Responsive Design: Enjoy seamless functionality across various screen sizes, guaranteeing a smooth user experience on different devices.

• Easy Integration with Vue.js: Effortlessly integrate Vue3 Scheduler into your Vue.js applications, leveraging the power and flexibility of Vue.js for efficient development workflows.

• With Vue3 Scheduler, developers can efficiently manage events and timelines in Vue.js projects, ensuring projects stay on track without unnecessary hassle or complexity.

Chat Room App with Vue and Firebase

The Chat Room App with Vue and Firebase is a real-time chat application crafted with Vue.js and Firebase. It showcases modern web development technologies to create an engaging user experience. Users can sign up, log in, and engage in chat rooms, leveraging Firebase Firestore and Firebase Authentication for real-time messaging capabilities.

Features

• Real-Time Chat: Utilizing Firebase Firestore, the application offers real-time chat functionality, allowing messages to be sent and received instantly.
• User Authentication: Firebase Authentication is used to manage user sign-up, login, and logout processes, ensuring secure access to the chat room.
• Responsive Design: The app features a clean, user-friendly interface that adapts to various screen sizes, ensuring a seamless experience across devices.
• Auto-scrolling Messages: As new messages arrive, the chat window automatically scrolls to the bottom, keeping the latest messages in view.
• Timestamps Formatting: Messages are timestamped and displayed using date-fns to provide a friendly, relative format (e.g., "5 minutes ago").

Geoglify

Geoglify, an innovative open-source project dedicated to exploring the vast world of ships, maritime data, planning, and related statistics. Within this repository, you'll find a diverse array of geospatial tools and resources designed to facilitate exploration and deep understanding of the maritime domain within GIS space.

Geoglify offers a comprehensive platform for researchers, developers, and enthusiasts to delve into various aspects of the maritime universe. Whether you're interested in analyzing shipping routes, studying maritime traffic patterns, or investigating environmental impacts, Geoglify provides the tools and data necessary to support your endeavors.

features

Maritime Data Visualization: Future plans to develop interactive visualizations showcasing data on ships, maritime routes, oceanic conditions, and more.

Enhanced Maritime Planning: Ongoing efforts to build tools that will assist in efficient route planning, fleet management, and resource optimization in the naval industry.

Comprehensive Industry Statistics: Future development to provide up-to-date statistics on maritime traffic, types of vessels, weather patterns, and other relevant factors.

Extended Maritime Data APIs: Plans for seamless integration with APIs that will offer real-time data on sea conditions, ship locations, and other crucial information.

License

This project is licensed under the MIT License

Page-Speed.dev

The page-speed.dev is to simplify the process of sharing web performance results, specifically Core Web Vitals and PageSpeed Insights. Currently, disseminating such results is cumbersome and often involves sharing screenshots rather than providing a direct link to the original source.

By offering a user-friendly platform, page-speed.dev aims to streamline this process, enabling users to easily view and share web performance metrics with others. Ultimately, the goal is to enhance accessibility and understanding of web performance data by providing a convenient and straightforward solution for sharing insights.

Features

• Built on Nuxt
• Nitro server API routes
• CrUX API and PageSpeed Insights API
• UnoCSS
• nuxt-og-image, powered by Satori
• Deployed on Azure Static Web Apps
• Using unjs/unstorage for caching on Azure Blob Storage
• Using route rules to persist images, HTML and API requests

License

Published under MIT License.

Vue3-Select-Component

The Vue3-Select-Component offers a comprehensive solution for creating select controls in Vue 3 applications.

Here are some key features of this component

1. Easy Data Manipulation: It provides seamless data manipulation using v-model, making it effortless to manage selected values.
2. Styling Options: The component comes with great styling out-of-the-box, and you can further customize it using CSS variables and Vue :deep, ensuring flexibility in design.
3. Single & Multi-Select: Supports both single and multi-select functionalities, catering to different use cases and user preferences.
4. Deep Customization with Slots: Offers deep customization capabilities through slots, allowing you to inject custom content and structure into the select component.
5. Teleport/Portal Menu: Utilizes teleportation or portal technique to render the menu, enhancing flexibility and compatibility with various layouts and components.

Overall, Vue3-Select-Component provides a balance between ease of use and customization, making it a powerful choice for implementing select controls in Vue 3 projects.