DEV Community: Aayush Chaturvedi

How I Made Explanatory Video for my Sass in 16 Hours (for FREE+from SCRATCH+being NOOB)

Aayush Chaturvedi — Fri, 08 Jan 2021 15:50:46 +0000

tl;dr = Use DaVinci Resolve 16 with templates & here's my final video
Originally Published At: aayush4vedi.com

Being a solopreneur means you've to wear all the hats by yourself - front System Architecture & Software Developer to the Marketing guy.

And that's why I love building Saas. Being a full-time Backend Engineer, there was no chance of me attempting to make a state-of-the-art animated video synced to the beats. Ever!

Now coming to the "How" part in the title, here's how I did(and hopefully it can help you too):

Explanatory Video Formats

For an explanatory video there are multiple options. Easiest is to sit in front of your camera and speak or record your screen with voiceover.No fancy editors are required for it.
Another widely used template is that of Hand Drawn animations. There are many free/paid tools available for this.
What I did: Even though time crunch is there for solopreneurs, but I wanted my video to come out as cool(according to the taste developed after hundreds of hours spending on YouTube). So I decided not to go with either of these two options & do everything from scratch, as simple as possible; but the result should look like as if it's been made by some professional video-editors team.😎

Which Video Editor to Pick?

A few google/Reddit searches will tell you that Adobe AfterEffects is the way to go if you need a video editor to make your video as a function of your imagination.
All those android/iOS apps out there are only good for video/vlog editing & basic effects.Not here.
I've used AfterEffects once in college(for basic voiceover syncing) & remember it was free to use for students. Currently, they offer just one week trial period with mandatory billing information on signup. I tried with my college email too, but alas freebies have been revoked.
I didn't want to pay for something which I'll rarely use, so started looking for free alternatives and came across DaVinci Resolve. It offers the same features as AfterEffects but for free. God bless these people!

Just visit their site & hit download for your OS version & you're good to go for the next part.

Edit & Animate Like Pro(when you're a noob)

Making videos like this is making PPT(power-point presentation), only cooler. The easiest way to save time is to use the templates in DaVinci.There are generous sites like (https://motionarray.com) & YouTubers who are giving so free templates for text-effect, transitions & effects.
You need to download them and paste them inside your DaVinci directory(varies as per your OS).
Now we need a script. I just jotted down the 'WHAT, WHY & HOW' of my Saas in bullet points. Just 10-12 frames are good enough for a short Explanatory video.
Next up was the playtime. Make your bullet points into screens & just go wild with your imagination while knitting them together. I played with everything: transitions, eye-popping texts, sliding text & whatnot.
If you've got a demo to attract people to your product, add it in the video with some context. I put mine inside the "Use Cases" section & put text-boxes over it to highlight the case. Even though, it took me a full night out to crap out a 1.5 min video; once you're into it- no is caffeinating required.

After you're done with the first cut, put it away for some time. Artworks need to marinate to become better 🎨.
I opened my laptop the next morning to be able to see that some of my (earlier) favorite effects were not good. This was the time to change hat from VideoMaker to Editor. Cut out the unnecessary & weird parts to give your video the final cut.

Once you're happy with it, the last step is to add some background music.

Adding Music in Sync

There are many free trendy audio tracks available online(without a watermark). Download the ones which go with your video's flow & mood. NOTE: Using someone's audio may lead to copyright-strike on YouTube(but since its easier to download than to learn piano & I'm not planning to earn from my video either, it's fine)
Load up your tracks into Davinci Resolve & inspect the waveforms to cut out those parts which you want to use.
Syncing video & audio can be a little tricky, but actually, there's no parameter to describe this job as good or bad. So as long as you're happy with it, it's good. Cheers.
When done, hit that render button & voilà! You're ready to showcase your video to the world.

You can see my video on my Sass's site & youtube.
Let me know if you're on the same track & I'd love to help.
Happy Hustling!

How to Build & Launch your Portfolio Site

Aayush Chaturvedi — Tue, 01 Dec 2020 21:37:20 +0000

Why should you have your portfolio? Because why not!

Portfolios are awesome! Is there any easier way for us developers to convert our personalities into a bunch of HTML, CSS & Javascript? You can write blogs, rant about anything, give your projects a professional showcase. And not to forget the optimization of your online presence - which is golden for any job-seeker, freelancer, or an indiehacker.

This piece is but a humble guide on how to set up your portfolio with a minimum amount of work. This is how I did it, and anyone who wants the same & has basic HTML & CSS skills, be my guest for the ride. 🚀

Step1: Building A Website

Option A: Code up your static site

The easiest way to get started is to use a static site - written in plain HTML, CSS & minimal JS/jquery. You can use tweak some of the freely available templates. Or if you really want to show off your skills - you can create something original & truly yours.

For layouts & design inspirations, you can also look around the personal websites of amazing people out there in the community. The idea is to keep the website simple & aesthetic - with minimal effort.
Show your personal site/blog keeps on popping up on Hackernews frequently and can be a great source of inspiration.

Link: frequent HN queries on portfolio showoffs

Option B: Use static site generators

If you don't want to go through the hassle of coding up entire HTML pages, the other choice is to use the static site generators like Hugo, Jekyll, or Gatsby. They have a simple learning curve & amazing documentation. And provide you a wide variety of themes to be customized accordingly.

Personal Note: I built my first site with hugo - up and running in just a few minutes. But dropped it later, as the confinement of themes just didn't felt right to me.

Once you're satisfied with your website design, it's time to go live!

Step2: Deploying the Site

If you've used any back-end frameworks while building the website (which I haven't) you can deploy the server with Heroku, AWS, Google Cloud for practically free.
But if it's just html & css; Netlify, Github Pages, or Firebase are the easiest way to go. I've used all three of them in past, and it's just a matter of minutes when your site will be alive using them.

Though you can choose your domain name here ( if available ofc ), but the only compromise is the custom suffix you're gonna get in URL. The next section is about avoiding that.

(Optional) Buying A Domain Name

Well, there's nothing beats having a .com behind your name, does it? 😎

Even if you're not lucky (with a common name), you can easily get your name's domain at dirt-cheap prices (as low as $10-12). If yourname.com is taken, the Beast Search Mode on namecheap.com (don't go on the name, it's really cool) can suggest you the next best available options in similar price range.

There's been a lot of debate on using your real name/nickname vs pseudo-name as your domain name. In my opinion, it's best to go with your original name, as it's one's first identity & people are more likely to search you by your name unless your pseudo-name is more famous online( ahem...PewDiePie).

So now your portfolio is up & shining, it's done, right? But wait, you type your name in google search & your portfolio isn't even on the last search of the last page. All you can see is your (and namesakes) profiles on other platforms & a bunch of things you've signed into a few years back.

What the hell happened? What was the point of a tree falling in the forest if no one's there to listen to its sound!

Step3: Making Your Site Visible to the World

Here are a few well-proven tips to increase your SEO:

Google search works on backlinks.Means, the more branded sources pointing to your site, the higher is it's rank.So, add your amazing site in all of your social media profiles.
Also content is the key here.So you should keep on writing more content to your site - like blogs/videos/photographs. And post them on the platforms with a wider audience, which point to your site- to let google's crawler know that your site exists.
Another tip: Give your website url as meta-content in every image or file.Eg:

<img src="img.jpg" alt="www.aayush4vedi.com">

( ͡° ͜ʖ ͡°)

Keep doing this and let's hope you will see your site on the top google search result in few weeks.