Web app development / logo design portfolio

Full Stack Web development

Here are a few things I made. Click them to test out for yourself. In depth explanations are beneath each link, and throughout each app.

Crowd funding app / GoFundMe alternative.

This is a GoFundMe alternative. Anyone can donate fairly anonymously to any cause. As the administrator, you create any categories you want, and when people sign up / log in to your site, they can create any Fundraiser they want.
As the admin, you can limit the fundraiser to however long you want. Since this is for testing, I'm making each one last years because I don't want to update it forever. It also lets the site owner take 10% of the earnings, but that can be changed by the admin easily too. This is all implemented with a sandbox merchant account, so you'll have to use specific dummy credit card numbers to test it.
Since I made this to a certain specification, which you can read about in much more detail there, I added RSS / Atom feeds you could follow, as a cheap / quick way for getting push notifications, since programs for those do that already. Thus, there's no need to waste extra money on a native iOS / Android app, nor do they get to gatekeep you and your stuff. It's a shame more people don't use those feeds. Markdown syntax is also supported for both feed types, and the particular fundraiser. So, given you made a fundraiser yourself (ask me to let you make an account), then you can test that yourself. Otherwise, all you can do is test dummy credit cards, or the existing feeds for the dummy fundraisers.

Forum app

You'll need an account to use it, but not to view it (see below to create an account, but you'll have to ask me).
I made this forum. Create some posts if you want. You can then reply or edit your own posts, but not other people's. It supports markdown syntax for looking prettier. You can also follow users, they can follow you, and get the feeds from them based on the latest topics they make, sort of like Twitter. Searching with multiple values is supported too.
As with anything on this page, I could modify the forums to deny people access based on whatever you'd want. Such as if I merged it with my tiered access app below, so you could potentially only get access if the users paid, or whatever you wanted.

Tiered levels of access app

This requires you to create an account.
This app demonstrates that I can restrict access to certain levels, such as bronze, silver and gold, or however many levels you'd want. I didn't implement any payment system with it because I already do that with 2 other apps. All you have to do is click some buttons to enable it's usage, and see it for yourself.
If you make some replies in the forum above, the first level in this app will let you give a mini csv file based on those replies, the 2nd gives a bigger csv file with more details, and the 3rd level gets you a much more detailed zip file filled with the content of each reply you made. A more real world example would be giving someone some special content behind a paywall (meaning if they paid, they get access to certain content based on how much they paid).

Crypto currency app

This app uses the cryptocompare.com API to pull the latest crypto currency news stories from them. Multi value search is supported to filter stories based on different categories. Just follow the directions.
You can also test out the API that lets you run a search for crypto currency prices. Multi value search is supported too.

Poll app

Notice how you can't vote more than once. Read the directions there to see how it goes.
I kept this poll app open to the public so no login is required. As the administrator you would be able to login, create a new poll question with as many choices as you want, and it can run whatever poll you want, or the latest poll, on whatever page you wanted, based on a user's actions (such as if they paid).

Wordcount app

Enter some text, click the submit button, and watch it count all your words.
Has instant feedback with javascript based on how many characters I allow left.
Notice how the results for it show the most used words in descending order, and evenly distribute the answers across the width of the page. You won't see that even distribution if you have an outdated browser. So I suggest the latest version of Chrome or Firefox.
I also wrote the function to filter out all uses of semicolons, colons, periods, and commas. It was important to do that because if you typed the word "sky", and then "sky," with the extra comma in it, you would get 2 separate words. Or if you typed "a", and "a,a,a,", Your results will be 2 words: One as "a", and the 2nd as "aaa".

Email list sign up app

No account is required to sign up to this list.
This app showcases the use of a double opt in with a unique uuid to prevent blackhat hackers from deleting the value in the database. Explanation follows...
So you give your email, that gets put into an unconfirmed email list, I then generate a unique link for you, and send you an email to confirm it by going to the link. Once you go to the link and confirm it, you get taken out of the unconfirmed list, and put into a confirmed one.
I also made it so you can only be sent 1 email. The reason why is to help protect my IP from being blacklisted as spam. Some asshole also used the TOR network and tried to mess with it and create a bunch of fake emails, so I made it damn near impossible to break by coming up with my own honey pot to confirm whether the user is human or not. I borrowed ideas from a honey pot, and JSON Web tokens, so it's pretty damn safe and I've never had any crap happen since. This is important, because if you send the same email to the same person over and over again, your IP will be blacklisted and your chances of getting anything sent will be 0.
This function also has a fallback just incase the server is overloaded with work and can't send the email yet. So if you try to signup again with the same email, you will be directed to a page that has a javascript based captcha that I made, to prove you're a human. I didn't require ajax in this app like I did with others, but I used a clever workaround that uses fewer trips to the database, so I preferred that.

Account app

This example goes with many of the other apps on this page.
When you sign up, it's complete with javascript and an ajax request for instant feedback on the same page. There's an immediate ajax request as soon as you leave the name field on the signup page. What's an ajax request? Try signing up with the name abcd. As long as you have javascript on you'll see an immediate alert that that username is taken once you target the next input field. Also notice how the submit button is disabled, and the color is changed until both passwords are filled in, are correct, and at least 8 characters long. Try clicking it with short, or incorrect passwords. If you do, nothing will happen.
Notice how there is also a length requirement for the username field. That one requires 3-12 characters before the warning goes away.
I also intentionally made it so you can still click the submit button even if the name is already taken, but both passwords are the same. If you do this, you're going to see the fallback I wrote on the backend that reloads a new page that says that name is already taken, so use another. Try it yourself. For some of the apps that follow, when you login it doesn't allow that at all. So you can't use those apps at all unless you answer the correct answer for the captcha. There is a good reason for this design. I will describe why in those apps below.

Subscription app based on time

This requires you to create an account.
If you hired me and you wanted a potential user to have access to certain areas of your website based on payment, I can do that. Test this app for an example. I can also do it with any tiers you want, such as bronze, silver, and gold levels like I show below. But after you make an account, you can't have access to a video unless you go through the right process. This app will give a dummy credit card to test this, so you can fill out fake info everywhere else too. Once you go through it and it validates the fake number, you'll have access for 3 minutes. It's accurate up to the second too, so if you got access from 12:34:56 PM - hours, minutes, seconds - then you'll have access until 12:37:56 PM.
This app will also use the api and drop in user interface from braintree's payment gateway. That means that when you go through the process properly, you will get content loaded from braintree's site onto mine, for testing the payment with a dummy credit card. I only have the regular fake credit card enabled right now because every other payment option requires me to make an account for each one (paypal, venmo, apple pay, google pay, etc), which I don't want to do, but I'm still capable enabling them.

Shopping cart CMS

This one does NOT require an account to test.
This app has an automatic email sent once you make a fake purchase.
A CMS is a Content Management System. If you hired me, this system would give you the ability to add, update, and delete your own products, all on one neat little dashboard that lets you edit the prices and quantity on the fly. Click here for an example.
On the admin's side, I can give you the ability to export all orders to a csv file so you could send it to a warehouse for distribution.
In this app I use braintree's hosted fields for making fake payments, which is more complicated to make than the example in the subscription app above. That means you will make a fake purchase, but the payment inputs are designed like I designed them, not braintree's design like the app above. It looks prettier and more professional in this example, but is not required.

Blog app

This blog app is a CMS or Content Management System. ANYONE can comment on a particular post if you allow them, and they don't have to sign up, or even sign in at all. I didn't include the captcha app here, but I could if I wanted to.
Notice the automatic pagination and the tag filters. Just click a tag for a particular post, and it will show you all post's related to that tag. Then when you go into a particular post, it will show you similar ones as well based on the filters I set.
Every comment that people can create is listed in earliest order first, but also have automatic numbering of the comment it was, like 1st, 2nd, 3rd, etc. And as the admin you can add or delete comments as you want. I also set it so in the admin panel you can delete or filter out bad comments. Again, click here for an example. It's at the bottom on that page.
It also has automatic RSS 2 and Atom 1 feeds generated every time the owner posts a blog. Click the RSS button up top, and subscribe to either one to test it yourself. It also automatically updates your sitemap with the newest post.

Video production services

I can make anything from commercials to short films, to long films if needed, as I have a cinema camera and all the specialized equipment for it. But the 3 videos below are samples of what I've done with bad equipment, though it goes to show how far one can get with the desire to do so. Each of them took about 200-250 hours of actual work to make, and that was with knowing what to do without screwing around. Add 30-70 hours each for rendering. On all videos, I only timed myself when I knew how to do something. After the first one, the rest were done without having to learn anything for the most part.

These first 2 were made with an old Canon t3i. That's a cheap used $250 DSLR camera with a $50 kit 18-55mm lens on ebay. The key wasn't great in every shot, but it was well enough for the most part, and I learned almost everything on that camera. The third video was made on a Canon 90D in 4K. After that, I sold both cameras, and bought a cinema camera because it's a lot easier to pull a key with 12 bit color vs 8 bit, and both Canon cameras had that for the 3 videos below.

They were all made with 3D software called Blender, DaVinci Resolve, and all the equipment I have for them.

I own a musket for home defense, since that's what the founding father's intended: I suggest you go to that link to learn the details, and watch it. It's pretty funny.
How to herd cats: again, I suggest you go there to learn the details, and watch it.
All those years training in biological warfare: again, go watch it, and read the pade for details.
Future videos --- though the first 2 were made with cheaper equipment (they're still good though), I have since got much better equipment. I speak about that in the biowarfare one.

Web design services

I built this website from scratch to W3C standards with progressive enhancement (no WYSIWYG editors), and it works in all major browsers. I made all of the:

Custom art and button sprites (so there's fewer server requests for faster loading times).
CSS and SVG animations. Hover the navigation buttons up top to see the static TV glitch animation. It's also on the share buttons / social medias near the bottom to see. Although if you're using a Chromium based browser (Google Chrome, Chromium, Brave, etc), you won't see it since there's currently a bug only in <object> tags as I edit this page (Sep. 27th 2023 - and it wasn't there in 2022), but Firefox shows it perfectly. Though it still works fine even in Chrome based browsers if it's not in the above tag, which can be seen on the social media and share buttons. So I modified the problem animation to have a "fallback" so it just "blinks" instead.
Popups for the art gallery below.
I set a custom webfont that is most likely not on your computer (Knight's Templar).
I also used Javascript with ajax requests for certain things too. See the web app examples to try them out. The quickest is my email list.
But I can still utilize templates to keep costs down and make development faster. In fact, most people like me do that.

Mobile friendly responsive design

That means I made it work and look good all the way down to a screen width from 280px to 1920px wide. So it will even work on cell phones and other mobile devices with small screens.

If you're on a desktop computer: Resize your window below 724px wide until you see the style change. The triangle up top is a button you click or tap for navigation.

Check out the layout difference in the art / logo designs below

Notice how when over 725px wide, all the images continue to stay perfectly centered when resizing the window. If you don't see that, your browser might need to be updated so it has the ability to render flex boxes, otherwise you'll just see them spaced equally from left to right, but not perfectly centered every time.

The responsiveness of the popup modals when you click on them also continue to be proportional to the screen width and height, and how when the images are larger, you can scroll down to see the rest of the popup (without the overflow: auto; property/value, you wouldn't be able to see it).

The breakpoints and buttons for each popup still look good too. The white-space property has been set to not wrap the text. After you click on a popup, notice the red 'Close (X)' button when resizing the window from 1920px wide down to 280px, and how it stays as one single unit instead of breaking into 2 separate pieces of 'Close', and an ugly overlapping block of '(X)' (a very common mistake with WYSIWYG editors).

SVG buttons for speed and karma points!

SVG, or Scalable Vector Graphics, are types of graphics that are infinitely scalable, and never pixelated. You can do many cools things with SVG buttons.

SVG object efficiency

I set the svg buttons on this site inside an <object> tag to make people cache the buttons and not have to download the file over and over again everytime they go to a new page. Doing so makes it more efficient than if I wrote it inline. This saves 23kb everytime, a very valuable thing if you have a bad internet connection.

Cool things you can do with SVG's

You can have wonky shaped buttons. On a desktop with an updated browser like Firefox or Chrome: resize your window to under 675px, then move your mouse in between the teeth of any cog, and notice how it won't brighten up unless it touches the cog or it's teeth. So you can have wonky shaped buttons in any way you desire.

Let's say you wanted SVG link navigation that looked like a flower with many overlapping flower petals. Then when you hover one of the petals, it would change color, come to the top of the ones overlapping it, and go to a certain page when you click it. And if you clicked anywhere between each petal, nothing would happen.

SEO and semantic markup

What is semantic markup?

Semantic markup is very important for blind people that use screen readers. They have programs that go through the code I write, and read the words out loud so they can go through the site. Having semantic markup like <article> <section>, and <nav> tags help search engines and screen readers recognize what a tag contains, so it's more efficient for the user to go through and understand.

What is SEO? Why is it important?

SEO is Search Engine Optimization. It's a long term strategy to help you rank higher in search results. The basics of it are to have relevant search terms inside the <title>, <meta> description, and <h#> tags, but search engines often like more. To give more, I utilize schema.org's microdata. Doing this can give you a chance at having a snippet of your code inside the searh results, which can bring much more traffic to your site.

SEO matters because, let's say you want a website that sells organic dog food. So you make a business, get your suppliers, ship it to a warehouse, and set up your website with a WYSIWYG editor (WhatYouSeeIsWhatYouGet). Those editors usually only create a bunch of <div> tags for everything, which are generalized tags for essentially anything. With no relevant title, meta, heading tags, nor schema and other SEO markup: Your chance of getting any traffic from free search results is going to be 0. Especially if you're a local business. You won't even show up on google maps or anything else like that. The only way you will get any traffic with a site like that is by burning money into paid advertisements. On the other hand, if you did the research to set those properly with hot keywords, you registered with the major search engines to submit your sitemap(s) and your local business: you can expect free traffic. There are some other factors involved, but what I just said are some of the biggest and most important.

Digital Artist / Logo Design / Memesmith / UI UX Design Services

Hover your mouse over the images below, click to see them MUCH larger, and scroll as needed. I put more than just the art on this website here. This website looks prettier on Chrome or anything based off it because I could style the scroll bar with webkit, but it's still pretty on Firefox, just slightly less.