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.
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, which is what the Canon's had for video.
Here are some samples. They were all made with 3D software called Blender, DaVinci Resolve, and all the equipment I have for them.
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:
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.
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, or Scalable Vector Graphics, are types of graphics that are infinitely scalable, and never pixelated. You can do many cools things with SVG buttons.
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.
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.
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.
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.
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.