DEV Community

loading...

Building a portfolio site - DO Hackathon

Teri Eyenike
Software engineer πŸ’»β€€ In πŸ’™ with React β€€ NodeJs β€€ JavaScript β€€ Python
・3 min read

What I built

The task I chose to go for is the Personal site/portfolio in the DigitalOcean Platform hackathon. It is a responsive website adapted to all screen sizes from mobile to desktop.

Category Submission:

Teri Eyenike
Personal Site/Portfolio

App Link

View the project here

Screenshots

projects page

Error page

Screenshot of the projects page

Description

The Teri Eyenike site is a website that gives users the versatility of the individual, Teri as a software engineer and his ability to turn designs into code and make them responsive, performant apps. The implementation of the site went from creating the design on paper which went through several iterations before finally building it with code.

What stack did you use in building the portfolio?

Before deciding on the stack to be used, I made sure I wanted something that could enable me to build reusable components that could be used across multiple components of the website which I used to my advantage. So React was the frontend library I used in creating the whole site and it made a lot of sense because I was already comfortable using React already.

The initial look of my portfolio before I decided to redo the entire site architecture was this.

Initial site, v1

Link to Source Code

https://github.com/Terieyenike/do-teri

Permissive License

MIT

Background

(What made you decide to build this particular app? What inspired you?)

I looked out for some inspiration online and wanted to make a site that the UI would be appealing and user friendly. So I decided to check out Bchiang and thought it was cool and had all the things I looked out for. It immediately struck me to get to work creating it for myself. The entire site idea was to write the code from scratch without being lazy and using a template out there ignoring the fact that I can do it myself and make it look cooler based on my personality.

How I built it

(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)

The DO App Platform is a good Platform as a Service (PaaS) that gives you the option to build, manage, deploy, and scale your apps with just a few clicks of the button and you're good to go. The app, Teri is hosted on the App Platform which was built using React and I found it very easy to deploy a fully functional app in no time and it provides me with a URL to view the site once I was done with all the initial setup of creating the app on the platform and finally push the button to deploy on the live server. The skill which I found valuable here using DO App Platform is the ability for the App Platform to do all the heavy lifting for you as it continuously deploys the apps from every little change you make thereby leaving you to write less code and focus more on making the website work.

Conclusion

I have spent a ton of time tweaking/writing this post and even more time on the project in the DigitalOcean hackathon. It has been all fun, and I enjoyed every bit of it as it challenged me to create and build something. So go check out my work and support.

Discussion (8)

Collapse
neilblaze profile image
Pratyay Banerjee

Looks good buddy! Well a piece of suggestion from my end shall be that, you can stack the social icons vertically and make them sticky. You can take the inspiration from Brittiany's portfolio site -> brittanychiang.com

Collapse
terieyenike profile image
Teri Eyenike Author

Sure. I can do that.

Thanks Pratyay

Collapse
markcondello profile image
Mark

Awesome website design, your project catalog is great too.
An improvement for the mobile menu would be to have the menu panel full height and when clicking on a menu item the panel toggles.

Collapse
terieyenike profile image
Teri Eyenike Author

Hey Mark,
I am taking your recommendation into consideration when I work on the next version of the website.

Thanks for the compliment too. I appreciate.

Collapse
szhabolcs profile image
Nagy Szabolcs

Looks really good! I love the color scheme!

Collapse
terieyenike profile image
Teri Eyenike Author

I use coolors.co for searching colour scheme when I am coding or designing.

Thanks Nagy

Collapse
arashnrim profile image
Arash

Clean! I like the new design. πŸ‘

Collapse
terieyenike profile image
Teri Eyenike Author

Thank you, Arash