DEV Community

loading...
Cover image for My First Personal Site! ๐Ÿ“ฃ

My First Personal Site! ๐Ÿ“ฃ

fentybit profile image fentybit ใƒปUpdated on ใƒป3 min read

I can not believe that I have 2 months left with Flatiron School, and hopefully by then I can officially call myself a Full-Stack Software Engineer. ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

Aside from revamping my resume, I have been working on building my personal site. After weeks of debating if I should be building from scratch or not, I decided to deploy my first portfolio site from a ready-made HTML5 template. I can always refine my portfolio site later as I develop more skills, and eventually design my own UI components.

Starting Point
Not sure where to start, I looked for advice from freeCodeCamp. I found this tutorial of How to Put a Website Online, and it was extremely useful in providing guidance for someone (like me) who has no knowledge on buying a custom domain, hosting and outsourcing a template. I had fun perusing through Pixelarity where you can browse HTML responsive template designs. Basic skills required include HTML, CSS and JavaScript. The next step was trying to figure out my custom domain. Funny thing, this effort frustrates me the most, and I could not make up my mind. Long story short, I ended up re-branding myself to @fentybit, and settled on fentybit.me. I love numbers, and hence, bit or binary digit. Then, I mulled over .dev and .me for quite some time. I learned from other developers and their thoughts on .dev domain, and I settled on .me. I want my site to personally share who I am and what I am, in the most minimalistic way. I am glad the custom domain was still available. Thank you Namecheap.

Personalize your Site
Personalizing HTML/CSS attributes and content delivery took most of my time, but Pixelarity made it so effortless! If there is anything new, it would be trying to link my contact page so other devs can communicate back to me. Formspree provides this service. I only need to submit their API to my front-end code, and they take care of the rest. ๐Ÿ“

Alt Text

Namecheap && Netlify
While there are a lot of hosting providers such as Bluehost, GoDaddy, Hostinger, DreamHost and so on, you can always get free ones from either Netlify or GitHub pages. I had success initially deploying with GitHub pages, though my site resulted being "Not Secure" on Chrome. I made another attempt on setting up my domain with Namecheap and Netlify. Starting with Namecheap to configure the DNS settings > Manage. Under Nameservers category, I had to update from Namecheap Basic DNS to Custom DNS.

Alt Text

Reroute to my Netlify Domain Settings real quick to add my custom domain.

Alt Text

The next step would be to select Set Up Netlify DNS. I would need to acquire a list of Nameservers from Netlify and propagate on Namecheap.

Alt Text

Copy all of Netlify's DNS servers to Namecheap Nameservers, and click the green check button to save this setting.

Alt Text

While I was not able to figure out the SSL/TLS certificate with GitHub pages, I learned Netlify will provision Let's Encrypt certificate automatically once the DNS configuration on the custom domain pointing to Netlify's servers. Namecheap suggests revisiting your site in 24 - 48 hours once Netlify's DNS fully propagated.


It's official. Now I have a personal site! ๐Ÿ’ฅ
Check out https://fentybit.me/!

Alt Text



fentybit | GitHub | Twitter | LinkedIn

Discussion (65)

pic
Editor guide
Collapse
peterlunch profile image
Peter

I like the design. It is clean and minimal.

The YouTube video's on your projects page are a really smart way to show what you've built.

I'm currently working on my portfolio v2 and you've given me some great inspiration.

Good luck for the remainder of your bootcamp ๐Ÿ˜

Collapse
fentybit profile image
fentybit Author

Thanks so much Peter!
Good luck on your portfolio. I hope to see it soon on dev.to. ๐Ÿ˜€

Collapse
michaeltharrington profile image
Michael Tharrington (he/him) • Edited

Really cool personal site! The design is seriously sleek.

Just wanted to note that there's another DEV-like site out there called CodeNewbie that's geared toward new devs, but also built and run by DEV (dev.to).

This seems like a post that would fit really well on CodeNewbie too if you'd be down to join up and share it there! But regardless, thanks for sharing this awesome post right here on DEV. ๐Ÿ™‚

Collapse
karthiknayak98 profile image
KarthikNayak

Codenewbie has some good podcasts

Collapse
fentybit profile image
fentybit Author

I will check out the link you sent!
I love exploring other communities out there. Thank you so much Michael. ๐Ÿค“

Collapse
ruppysuppy profile image
Tapajyoti Bose • Edited

Really love the sleek design. But you should keep an eye out for the contact form, the input validation logic is missing (anyone can submit an empty form).

Checkout my portfolio at: tapajyoti-bose.vercel.app/ (shameless self-promotion ๐Ÿ˜›)

Ps: best of luck for the remaining months at the bootcamp

Collapse
fentybit profile image
fentybit Author

I fully agree with you. I have been meaning to go back, and insert .js to fix this validation logic. Is that what you did to yours?

Collapse
ruppysuppy profile image
Tapajyoti Bose

I'm using react, the validation is handled on form submit

Collapse
carl0scarras profile image
Aprendiendohtml

great work great that you share it, yesterday I was just visiting the youtube channel of traversy media and I learned how the contact form in netlify is made very simple, thinking about the domain and all this that is quite complicated for not knowing about the subject . So I designed my website buy domain namecheap upload it to netlify would be great thank you very much for sharing I like it

Collapse
fentybit profile image
fentybit Author

Good luck! I think filling up the content is actually most time consuming, and deploying is a matter of browsing through YT and dev.to blogs. ๐Ÿ˜€

Collapse
jscalderon65 profile image
jscalderon65

You can made your portfolio dynamic, something i did, was make a configuration dashboard on my portfolio, i can access it through a simple authentication, and in that side, get my repositories through the GitHub api and choose what i wanna show on the client.

Collapse
yoursunny profile image
Junxiao Shi

I see rotating buttons โ€ฆ

Netlify is indeed nice for static websites: drag and drop deployment, automated builds, etc.
Netlify CDN has IPv6, while GitHub doesn't.

Collapse
fentybit profile image
fentybit Author

Let me know if I should try anything else other than Netlify, love trying something new.

Collapse
alexanderjanke profile image
Alex Janke

Vercel (vercel.com/), by the creators of Next.js. Though honestly it's prettty similar to Netlify so you might not really learn that many new things

Collapse
navaneethbysani profile image
Navaneeth Bysani

Amazing website. Have you subscribed to pixelarity or did you take inspiration from them and designed on your own?

Collapse
fentybit profile image
fentybit Author

Thank you Navaneeth. I purchased Pixelarity template in the interest of time. I hope to create my site from scratch hopefully in the next few months.

Collapse
navaneethbysani profile image
Navaneeth Bysani

How are you going to view the information received through the contact form? are you going to keep looking in the database regularly? Or do you have some interface for that?. Just curious ๐Ÿ˜„

Thread Thread
fentybit profile image
fentybit Author

Check out Formspree.
The API link sends it out directly to your private email without exposing it on HTML view source.

Thread Thread
navaneethbysani profile image
Collapse
leewynne profile image
lee

nice!

I canโ€™t believe how easy it is to do a contact form on Netlify. I had a form that posted to an AWS lambda function ๐Ÿ™ˆ before I knew about it

Collapse
fentybit profile image
fentybit Author

I haven't tried AWS lambda function, good to know. โ˜บ๏ธ

Collapse
leewynne profile image
lee

Well the great thing with Netlify is that you don't need to ๐Ÿ˜Ž you can add form submissions without a backend.

Collapse
arashnrim profile image
Arash

Looks clean! I love the animations and simplistic design you've opted for. Even amidst its simplicity, you managed to find ways to make your website truly yours: something unique and eye-catching. Amazing job! ๐Ÿ™Œ

Collapse
fentybit profile image
fentybit Author

Thank you so much Arash. ๐Ÿ˜€

Collapse
mrdanishsaleem profile image
Danish Saleem

Love it โค. I was looking for theme for my portfolio website. I guess I had one in front of me. ๐Ÿ˜ I hope you don't mind if Copy aka reuse some style from your website. ๐Ÿ˜‰

Collapse
fentybit profile image
fentybit Author

Ya of course, no worries!
I believe the template is available for everyone. ๐Ÿ˜ƒ

Collapse
mrdanishsaleem profile image
Danish Saleem

That's so nice of you ๐Ÿ˜Š

Collapse
afif profile image
Temani Afif

Simple and clean ๐Ÿ‘ (PS: there is a 404 error with your favicon)

Collapse
fentybit profile image
fentybit Author

Thank you so much for pointing this out!
I revised my favicon src link, and should fix it. โ˜บ๏ธ

Collapse
twitchstorm profile image
TwitchStorm

well done !

Collapse
astrit profile image
Astrit

Great job, for the first site this is amazing ๐Ÿค˜

Collapse
cjmcquain profile image
Charles McQuain

I think this is a fantastic looking portfolio website. Love the layout, and you did a really good job showing off your projects/skills, and I thought your resume was great!

Collapse
fentybit profile image
fentybit Author

Thanks Charles!

Collapse
lelinta profile image
Lelinta

Haha, my personal website lelinta.cm is made with shopify, donโ€™t worry about anything, just the domain name is fine

Collapse
5nhatnhat profile image
5nhatnhat

Nice. Very clean

Collapse
samuel_marien profile image
Samuel Marien

Beautiful design, inspiring me for my next portofolio !

Collapse
fentybit profile image
fentybit Author

Good luck Sam, I'd love to check it out. ๐Ÿ’ฅ

Collapse
anthonynicklin profile image
Anthony

Really like the design. Well done!

Collapse
bc profile image
Brian Canzanella

Thanks for sharing!

Collapse
sunnysingh profile image
Sunny Singh

Really clean and I'm impressed with the level of detail to the animations and transitions ๐Ÿ‘

Collapse
fentybit profile image
fentybit Author

Thank you Sunny.

Collapse
somanathgoudar profile image
Somanath Goudar

Wow! Its just amazing

Collapse
comscience profile image
kapeel kokane

Looks nice :) Did you build it from scratch or use a template from pixelarity?

Collapse
fentybit profile image
fentybit Author

Thank you Kapeel.
I used Pixelarity template for now in the interest of time, and will try to make my own site hopefully in few months. ๐Ÿค“

Collapse
22matutex22 profile image
Matias

Clean and Simple!! excellent!!!

Collapse
jfowlerdc profile image
John Fowler

If it hasn't been mentioned, you should try CloudFlare Pages. Once deployed your site will automatically have an SSL cert. Very simple to set up too.

Collapse
fentybit profile image
fentybit Author

CloudFlare Pages, noted.
I will definitely try this next time. Thank you so much! ๐Ÿ˜

Collapse
domhnallohanlon profile image
Domhnall O Hanlon

Nice work, the site looks great and I really enjoyed your quiz app!

Collapse
fentybit profile image
fentybit Author

Thank you so much Domhnall for checking my Know It All app! ๐Ÿ˜†

Collapse
hieumomo profile image
hieumomo

good job

Collapse
hugekontrast profile image
Ashish Khare๐Ÿ˜Ž

Very Nice! The minimal approach and swirling animations made it all look very very nice. Plus, the icons. Good job!

Collapse
fentybit profile image
fentybit Author

Thank you so much Ashish. ๐Ÿ˜€

Collapse
filatovv profile image
Yuri Filatov

Congratulations ! :)

Collapse
idarek profile image
Dariusz Wiฤ™ckiewicz

Nice, but there is a big delay with Initial Loading, maybe because of single page layout? Have a look on pagespeed insight that struggling to load your site properly.

Collapse
fentybit profile image
fentybit Author

Thank you so much for this. I went to pagespeed insight, and it was suggested my pics were too high res/big size. I reduced to 25-30% from original size, and it appears to save at least 1 second when loading the site. I learned something new today, thank you again.

Collapse
thomasbnt profile image
Thomas Bnt

๐Ÿ’ช๐Ÿผ๐ŸŽˆ๐ŸŽˆ๐ŸŽˆ