I finally did it! I made my first portfolio page!

Sorry for tooting my own horn but I feel proud of myself right now. A few months ago I never even imagined I could create one from HTML, CSS, and Javascript.

But thanks to Hashnode and Freecodecamp.org I managed to make it.

So here were my hurdles during development.

Design

The first hurdle was designing the page.

So I used Figma to design a draft.

Figma is a great tool to be used for creating mockups and designs. You can easily draft up beautiful designs in a matter of minutes.

I imagined my landing page looking like this.

figma design.PNG

After creating the design I then tried to make that design a reality.

Tools

The next hurdle I encountered was dev tools.

For coding, I decided to use Visual Studio Code. I wanted to see why everyone keep on raving about it.

I now fully understand the convenience of using it. The auto-complete feature is a godsend especially for a person who is starting out.

For hosting, I decided to utilize Github pages for 3 reasons

It's FREE!
It will familiarize in using Github
It will add to my Github projects.

Coding

This is where I hit my first major roadblock.

Design Youtube channels made creating sites from Figma look easy. But the reality is I have no idea how to make that design into reality.

bad website.png

This is the farthest I got with the CSS code I got from Figma. I just can't translate it to code. I don't have the skills yet.

So I scrapped that and created a new design, based on another site I found.

Which looked something like this minus the background.

Screenshot (984).png

Responsive Web Design

This took me a while to resolve, and also the main reason why I scrapped my original draft.

With all those elements in the way, I don't have any idea how that design would look like using mobile.

To resolve this I had to use media queries. And even that took a lot of trial and error.

The hardest part for me with the site is the splash screen.

I made that background as an SVG file and it wouldn't behave the way I wanted. Even now that I'm finished. I'm still not fully satisfied with it yet.

But this is how it looks on an iPhone 6.

mobile splash.jfif

APIs and Javascript

Of course, I needed a Contact Us section for my profile page right? I mean how can potential employers contact me.

This is why I love Hashnode! I just happened to watch a video from their youtube channel about Building an effective developer portfolio taught by Annie 🦄⚡.

In that video, she mentioned she uses Formspree.io to generate her contact form.

So that's what I used. The HTML code is already provided just paste that where you need it then add your style via CSS and viola instant contact Form.

Contact form.PNG

The last hurdle that I have to overcome was the Blog section. I haven't my knowledge of APIs is 0 and my Javascript certificate did not cover modifications of HTML code.

Really thankful to Catalin Pit for a great tutorial on How To Display Your Blog Articles On Your Portfolio Page

I Just put the script call in between some section tags.

<!-- Blog section -->
 <section class="blog section" id="blog">
        <h2 class="section-title"> Recent Blog Posts</h2>
<!-- This script will call the javascript hash.js 
and fill up the necessary HTML code needed -->
        <script src="hash.js"></script>
    </section>

I don't understand how it works... But hey... It works!

For the CSS VSCode saved me with its autocomplete feature. It autocompleted the .className function of the element.

/*image will  now become an <img></img> tag*/
let image = document.createElement('img');
/*sets the src attribute to the one retrieved from hashnode*/
image.src = article.coverImage;
/*sets .class attribute to "blog-img"*/            
image.className = "blog-img";

Conclusion

And that's it!

I finally have my own portfolio site! You can check it out here

My next step now is to finish Freecodecamp's Front End Development Libraries.

Then move on to Backend Development and APIs Certification.

Then on to more projects.

Thank you corner

Thank you to Hashnode for your wonderful boot camps. even though I was not part of BootCamp III the replays still managed to help me.

Thank you to Catalin Pit and Annie 🦄⚡ for your talks and tutorials!

And lastly to you dear reader for reading this article! Thank you!

If you want to reach out or maybe just say hi, you can contact me via Twitter

Creating my very first portfolio page.

A quick update on my journey in Web Development