https://rainbowforge.pages.dev/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta name="description" content="Hello there! I am Rainbow Forge, a QTPOC Web Developer and Designer, a musician, a music educator, among many other things. This is my portfolio website.">
7    <meta name="keywords" content="Rainbow Forge, QPOC, QTPOC, wix alternatives, ui ux design, UIUX design, UI UX designer, ecommerce website design, queer, queer web developer, sliding scale pricing, sliding scale website, website development, queer website developer, website developer, web developer, WordPress developer, WordPress Development, web design, UI/UX design, web development, WordPress, portfolio, services, web design company, web development company, HTML, CSS, JavaScript">
8    <meta name="robots" content="index, follow">
9    <meta name="author" content="Rainbow Forge">
10    <meta name="google-site-verification" content="Y7RF9IMKpEjbw5d8VnKFbaZ_Qc1yAVVWOEvSGCmCrHQ" />
11    <meta property="og:image" content="https://rainbowforge.dev/assets/newlogo.webp"/>
12    <meta name="theme-color" media="(prefers-color-scheme: light)" content="hsl(173, 100%, 50%)" />
13<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
14
15<meta property="og:image:type" content="image/webp" />
16<meta property="og:image:secure_url" content="https://rainbowforge.dev/assets/newlogo.webp" />
17<meta property="og:image:secure_url:type" content="image/webp" />
18<meta property="og:title" content="Rainbow Forge, Queer Web Developer And Designer" />
19<meta property="og:type" content="website" />
20<meta property="og:url" content="https://rainbowforge.dev" />
21<meta property="og:image:width" content="1197" />
22<meta property="og:image:height" content="673" />
23<meta property="og:image:alt" content="The Letters RF, reflective, with a shadow behind them. The logo for Rainbow Forge, a QTPOC Web Developer." />
24<link rel="icon" type="image/x-icon" href="assets/RFIconLettersOnly.png"/>
25    <title>Rainbow Forge | QPOC Web Developer and Designer</title>
26    <link rel="canonical" href="https://rainbowforge.dev">
27<link rel="stylesheet" href="animations.css">
28    <link rel="stylesheet" href="main.css">
29    <link rel="stylesheet" href="fonts.css">
30    <link rel="stylesheet" href="layout.css">
31    <link rel="stylesheet" href="headerfooter.css">
32    <link rel="stylesheet" href="buttons.css">
33    <link rel="stylesheet" href="webkit.css">
34    <link rel="stylesheet" href="lightbox.css">
35    <link rel="stylesheet" href="mobmenu.css">
36    

36<script src="mobmenu.js" defer></script>

36
37    

37<script src="script.js" defer></script>

37
38    

38<script src="mousefollower.js" defer></script>

38
39    

39<script defer>
40      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
41      posthog.init('phc_fSfyxGVUqNCe6kNzKT1yh0NB9zxdYZGKTblPLzrB7nT', {api_host: 'https://eu.i.posthog.com', person_profiles: 'identified_only'})
42  </script>

42
43

44<script defer src="localstorage.js"> </script>

44
45<!-- END Pixel Code -->
46</head>
47<body>
48  <!-- <div class="top-header pridebanner" aria-labelledby="top-header"><div><h5>Happy Pride <span class="year"></span>! Especially to my fellow QTPOC <3</h5></div></div> -->
49<header class="mainheader" aria-labelledby="main-header">
50  <div class="headerlogo"><a href="/about#RFLogo"><img class="headerlogoimg" alt="Rainbow Forge Logo" src="assets/sitelogocrop4.webp"></a></div>
51  <svg class="hamburger" viewBox="0 0 30 20" id="menuButton">
52    <rect class="line" x="0" y="0" width="100%" height="4"></rect>
53    <rect class="line" x="0" y="8" width="100%" height="4"></rect>
54    <rect class="line" x="0" y="16" width="100%" height="4"></rect>
55  </svg>
56  <div class="menu-container" id="menuContainer">
57    <nav aria-label="mobile menu" class="mobmenuflex"><a href="/" class="navlink moblink">Home</a>
58    <a href="/about" class="navlink moblink">About</a>
59    <a href="/portfolio" class="navlink moblink">Portfolio</a>
60    <a href="/services" class="navlink moblink">Services</a>
61    <a href="/contact" class="navlink moblink">Contact</a></nav>
62  </div>
63        <nav class="navbar" aria-label="desktop menu">
64            <a href="/" class="navlink active">Home</a>
65            <a href="/about" class="navlink">About</a>
66            <a href="/portfolio" class="navlink">Portfolio</a>
67            <a href="/services" class="navlink">Services</a>
68            <a href="/contact" class="navlink">Contact</a>
69        </nav>
70        <div id="AMcontainer"><button type="button" id="AMbutton" class="animbutton homeAMbutton" onclick="posthog.capture('accessibilityMenuButton', {value: 'clicked'})">Accessibility Menu<svg
71            xmlns="http://www.w3.org/2000/svg"
72            width="3vw"
73            height="3vh"

74            viewBox="0 0 24 24"
75            fill="none"
76            stroke="currentColor"
77            stroke-width="2"
78            stroke-linecap="round"
79            stroke-linejoin="round"
80            id="arrow-icon"
81          >
82          <path d="M6 9l6 6 6-6" style="transition: transform 0.3s" />
83          </svg>
84        </button></div>
85        <div id="lightboxBG"></div>
86        <div class="lightbox" id="AMLbox">
87          <div class="closebuttoncont"><button aria-label="Close Accessibility Menu Button" type="button" id="closebutton" class="animbuttonsmol">X</button></div>
88          <div class="restoflboxbuttoncont">
89          <button type="button" id="ToggleBGbutton" class="animbutton" onclick="toggleVideo(event)">Play Background</button>
90          <button type="button" id="toggleButton" class="animbutton">Wispify Mouse</button>
91          <button type="button" class="animbutton" id="fontswitcher" aria-label="Switch to readable font button">Switch Font (Click twice)</button>
92          <div class="fontsize"><button type="button" class="animbutton" onclick="changeFontSize(3)">Increase Font Size</button><button type="button" class="animbutton" onclick="changeFontSize(-3)">Decrease Font Size</button></div>
93          <div class="fontsize"><button type="button" id="increasespeedbutton" class="animbutton" onclick="adjustPlaybackRate(.3)">Increase BG Speed</button><button type="button" class="animbutton" onclick="adjustPlaybackRate(-.1)" id="decreasespeedbutton">Reduce BG Speed</button></div>
94          <!-- <button type="button" class="animbutton" onclick="adjustContrastForAllElements(69)">Invert Colors</button>
95           <button type="button" class="animbutton" onclick="invertAllColors()">Invert Colors</button>-->
96          </div></div>
97</header>
98<!-- <div id="intro-logo"></div> -->
99<main class="wrapper"><section class="hero homehero">
100    <div class="innercontent">
101        <h5 id="greeting">Hello there! Welcome to the </h5>
102        <h1>Rainbow Forge</h1>
103        <p class="herop">I am a queer web developer here to help you build and maintain your dream website</p>
104        <!-- <p class="heropr"><a href="/services">Among other things</a>, I can build you a fully customized website to meet your specific needs and wants that will truly belong to you, rather than being locked in to an ecosystem. I will always strive to offer <a href="/pricing#sliding-scale">sliding scale rates</a>.</p> -->
105        <!-- <div class="buttons homebuttons">
106        <button type="button" value="/about">Read More About Me</button>
107        <button type="button" value="/portfolio">See My Previous Work</button>
108        <button type="button" value="/services">What I Can Do For You</button>
109        <button type="button" value="/contact"> Contact Me for a Quote</button></div> -->
110        <svg
111        id="scroll-svg"
112        xmlns="http://www.w3.org/2000/svg"
113        width="7vw"
114        height="7vw"

115        viewBox="0 0 24 24"
116        fill="none"
117        stroke="var(--secondary-color)"
118        stroke-width="2"
119        stroke-linecap="round"
120        stroke-linejoin="round"
121        onclick="scrollToAnchor('target-anchor'), posthog.capture('Home Page Scroll', { property: 'clicked' })"
122      ><path d="M2 9l10 8 10-8"/>
123      </svg>
124    </div>
125
126</section>
127<div id="target-anchor"></div>
128    <section class="container gridcont">
129        <div class="section gridsec">
130            <h3>Who I Am</h3>
131            <p>I'm a QTPOC web developer and designer, among other things, and my goal is to help make the internet more accessible, affordable, and open source, rather than being monopolized by megacorporations. I will always offer <a href="/services#question9">sliding scale rates</a>, and strive to recommend technological solutions that provide the best possible combination of meeting your financial and functional needs, and giving you the fullest possible control over your online presences. </p><p> Outside of website work, I also offer guitar and bass lessons virtually, and hope to start offering ukelele lessons soon as well. I'm also working hard to learn more about software development as a whole so that I can start contributing to open source projects that I believe in. On my <a href="/about">about page</a> and <a href="/linktree">linktree</a> you can learn more about me.
132              <!-- <a href="/about">Read More About Me</a>. I haven't decided if I like the buttons below so leaving this commented.-->
133            </p>
134            <a href="/about" class="button homebuttons" id="homebutton1">Read More About Me</a>
135          </div>
136        <div class="section gridsec">
137            <h3>What I Do</h3>
138            <p> I can build you a fully customized website to meet your specific needs and wants that will truly belong to you, rather than being locked into the ecosystem of one specific corporation. I can teach you how to maintain and update it yourself, too, so you have full control over your online presence.
139            </p><p> I offer <a href="/services#WebDev">website development</a>, <a href="/services#WebDesign">UI/UX design</a>, <a href="/services#Consultations">consultations</a>, <a href="/services#Maintenance">website maintenance</a>, and <a href="/services#Tutorials">DIY tutorials</a>. 
140              <!-- <a href="/services">Read More About What I Offer</a>. I haven't decided if I like the buttons below so leaving this commented. -->
141            </p>
142            <a href="/services" class="button homebuttons" id="homebutton2">What I Offer</a>
143          </div>
144        <div class="section gridsec">
145            <h3>My Previous Projects</h3>
146            <p>For some of my previous (and occasionally ongoing) projects, along with some details about my thoughts regarding each one, <a href="/portfolio">check out my portfolio</a>!</p>
147            <a href="/portfolio" class="button homebuttons" id="homebutton3">Explore my Portfolio</a>
148        </div>
149        <div class="section gridsec">
150            <h3>Work With Me</h3>
151            <p>If you'd like to work with me, or if you have questions that aren't one of my <a href="services#Questions">frequently asked questions</a>😸, please <a href="contact">contact me to schedule a free consultation</a>.</p>
152            <a href="/contact" class="button homebuttons" id="homebutton4">Contact Me</a>
153        </div>
154    </section></main>
155    <div>
156    </div>
157    <!-- <div id="backgroundimage"></div> -->
158    <div class="background-video">
159        <video class="bgvid" id="bgvid" playsinline autoplay muted loop>
160          <source src="/assets/NewBGFile.mp4" type="video/mp4">
161        </video>
162      </div>
163      <footer class="Mainfooter portfooter"><div class="footerlinktreewrap"><a class="button animbutton" href="/linktree">Linktree</a></div>
164        <div id="footercredit">Handcrafted by Rainbow Forge. © 2024 - <span class="year"></span></div></footer>
165<!-- Cloudflare Pages Analytics -->

165<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "

1653f62a61b5906423bb51d8194a1eb1808

165"}'></script>

165<!-- Cloudflare Pages Analytics --></body>
166</html>