Skip to content

Instantly share code, notes, and snippets.

View planetoftheweb's full-sized avatar
🚀
Hubbing

Ray Villalobos planetoftheweb

🚀
Hubbing
View GitHub Profile
@planetoftheweb
planetoftheweb / readmepromptgenerator.md
Last active July 22, 2024 22:01
A prompt for generating detailed REAME files.

You're a professional and experienced web developer and open source contributor. Create a first release README document for these files. The target audience is professional developers with five years of experience building online projects.

  • Include a description
  • A list of interesting techniques the code uses in the files provided. When possible link to MDN documentation as part of the text of the technique.
  • A list of non-obvious technologies or libraries used in the code that would be of interest to professional developers with medium level experience.
  • Make sure you add links to external libraries, including links to any specific fonts used.
  • A breakdown of the project structure as a directory list code block: Include directories like any images directories or subfolders implied by the code, but not individual files unless they're in the root directory. Add a short description of any interesting directories underneath the code block
  • If you mention a file or directory in the description, link to the
@planetoftheweb
planetoftheweb / settings.json
Created July 9, 2024 09:32
Default Settings.json file for course development
{
"editor.bracketPairColorization.enabled": true,
"editor.cursorBlinking": "solid",
"editor.fontFamily": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace",
"editor.fontLigatures": false,
"editor.fontSize": 22,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.lineNumbers": "on",
"editor.matchBrackets": "always",
@planetoftheweb
planetoftheweb / LICENSE.txt
Created July 6, 2024 17:13
Text of the standard MIT license, add the year and the copyright holder.
Copyright <YEAR> <COPYRIGHT HOLDER>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE

Midjourney AI Art Gallery

This project showcases a gallery of AI-generated images created with Midjourney. It includes unique characters, fantasy cityscapes, artistic indoor scenes, digital textures, and various artistic styles. This repository demonstrates the integration of modern web development techniques to create an interactive and visually appealing gallery.

Techniques Used

  • Intersection Observer API: Used to animate section visibility as users scroll through the page. Learn more about Intersection Observer API.
  • Scroll Behavior: Smooth scrolling enabled for a better user experience. See scroll-behavior.
  • CSS Transitions: Applied for smooth visual effects during scroll and image interactions. Explore CSS Transitions.
  • Lightbox Feature: Provides a full-screen view of imag
@planetoftheweb
planetoftheweb / README prompt generator
Created July 6, 2024 15:52
Prompt for Generating README files using Chat GPT
You're a professional and experienced web developer and open source contributor. Create a first release README document for these files. The target audience is professional developers with five years of experience building online projects.
- Include a description
- A list of interesting techniques the code uses in the files provided. When possible link to MDN documentation as part of the text of the technique.
- A list of non-obvious technologies or libraries used in the code that would be of interest to professional developers with medium level experience.
- Make sure you add links to external libraries, including links to any specific fonts used.
- A breakdown of the project structure as a directory list code block: Include directories like any images directories or subfolders implied by the code, but not individual files unless they're in the root directory. Add a short description of any interesting directories underneath the code block
- If you mention a file or directory in the description, link to the
@planetoftheweb
planetoftheweb / tfit-chaptertitles
Created October 18, 2023 16:45
Chapter Titles as given by HappyScribe
[00:01:02]: Technology Maturity
[00:02:32]: Career Path and Key People
[00:03:50]: Intersection of Cloud and AI
[00:05:16]: Cloud Computing and AI Workloads
[00:06:24]: Companies' Readiness for AI
@planetoftheweb
planetoftheweb / samplelinks.txt
Created October 18, 2023 16:13
A list of sample links from an episode of The Future In Tech
@planetoftheweb
planetoftheweb / nav_bootstrap5.html
Created August 28, 2023 02:19
This is one of my newest gists
<nav class="navbar navbar-expand-md bg-primary navbar-dark text-uppercase">
<div class="container">
<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#myTogglerNav"
aria-controls="myTogglerNav"
aria-label="Toggle Navigation"
>
@planetoftheweb
planetoftheweb / preventdefault.html
Created February 8, 2023 02:27
Example of the preventDefault method
<!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="light">
<head>
<meta charset="utf-8">
<title>Prevent Defaults</title>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
</head>
<body >
<main class="container">
<h1>JavaScript Events</h1>
@planetoftheweb
planetoftheweb / index.html
Created November 26, 2022 09:46
Movie Style Film Countdown
<svg id="projectionScreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
<defs>
<radialgradient id="filmGradient" cx="600" cy="450" r="340" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e6e6e6"/>
<stop offset="0.1" stop-color="#d1d1d1"/>
<stop offset="1" stop-color="#1a1a1a"/>
</radialgradient>
<mask id="filmMask">