Design is all about creative problem solving.
I'm a Creator, listener and avid learner.
I do all sorts of creative stuffs that you and your audience would love.
WHAT I DO
Full stack development, Software Engineering, UX/UI Design, Brand and Identity System Design, illustrations, Icon design,2-D Animation, and infotainment video, Social Media Management and Marketing, Photography, Videography.
PROFICIENCIES
React JS, Redux, Redux Saga, XState, Typescript, Javascript ES6, Node JS, REST API, Web Sockets, Graph QL, Docker, Kubernetes, NGINX, kafka, Redis, Git, Webpack, Babel, Styled Components, Sass, HTML 5, CSS3, Javascript, Netlify, Heroku, Firebase, MVC.
DESIGN
Adobe Creative Cloud, Illustrator, photoshop, after effects, premiere pro, adobe XD, lightroom.
MARKETING
Facebook business Manager, Mailchimp, Google Analytics, Shorstack, Many Chat-bot, Bitly, Later for instagram.
Work highlights
FRONT END DEVELOPMENT
Short Term Loan calculator: Built with React and Redux
The challenge
The calculator has three main smart components that dispatches actions that
would update the state.
SMART COMPONENTS:
- Repayment Schedule
- Loan Amount
- Loan Duration
- Loan Amount
- Loan Duration
To calculate the repayment amount our app needs the final APR value that
gets updates when repayment schedule is set to weekly, fortnightly or monthly.
Repayment amount component is getting data as props from the smart components namely loan duration, loan amount and repayment schedule component.
Every time users update those component, their respected state returns a new
instance of the new state and the component that needs the new data receives
it as props.
View project on github
I used selectors from reselect to calculate the repayment amount.
The selector then picks the latest value from the three smart
components and performs calculations using given business logic.
The selector then picks the latest value from the three smart
components and performs calculations using given business logic.
Since the state of three smart components are stored in a global store using redux
repayment amount selector is able to read the state anywhere.
Also by using reselect, I am able to use the formulas anywhere without the
need to create additional components.
need to create additional components.
In addition, with reselect the data are memoized by caching expensive
function calls. Cached results are returned if the same inputs occurs again without
function calls. Cached results are returned if the same inputs occurs again without
having to recalculate.
If not, all smart components gets updated then reselect would return the cached data
and use it to calculate the final output
without having to re-render the individual components.
without having to re-render the individual components.
Any component, anywhere in the app are able to access the state it using connect,
a High order component given by react-redux.
With redux, I was able to keep the app structure flat with no deeply nested
components. Otherwise, I would have to nest deep in order to pass props from
parents to the children that needs it. Since we need the 3 smart components
to calculate the repayment amount, we would have to nest so deep that it would
be a mess to keep track and debug(prop tunneling).
components. Otherwise, I would have to nest deep in order to pass props from
parents to the children that needs it. Since we need the 3 smart components
to calculate the repayment amount, we would have to nest so deep that it would
be a mess to keep track and debug(prop tunneling).
With the app broken into self contained atomic components, I am able
to use the component anywhere without having to recode.
to use the component anywhere without having to recode.
UX / UI Designs
Logo Design
Optmisthink
Optimisthink is Web Design and Development start up agency that adopts a user centered approach in its design and development processes. By focusing on the users point of view user satisfaction is enhance by improving usability, accessibility and pleasure provided during visiting it's website
Challenge
To create a brand identity system for Optimisthink that will surely stand out yet keeping it's design clean and simple.
SOLUTION
I created a logo that looks techie at a glance. The logo is basically a hexagon in blue color which is the standard design for tech related logos. What made this logo stand is how I utilized shapes to create interesting symbols.
Character Design
Various characters
Various character that can be use for a number of projects such:
- 2D ANIMATION
- VIDEO EXPLAINER
- INFOGRAPHIC
Social Media Contest
Halloween Photo Contest
Task
Came up with Facebook contest for Halloween.
Designed Halloween promotion for various channels.
Created headline and copy.
Opportunity
Gain new facebooks fans
Expand social media reach and engagement.
Drive website traffic
Like what your seeing?
Lets have a chat
Advertising
Event based promotions
2d animation
various commercial animation projects
Typeface Design
Baybayin
Baybayin - Is a native Filipino writing system which was used during the 13th century—18th century. Traditional Baybayin consist of 17 letters which could be break down into 3 vowels and 14 consonants. Baybayin follows abugida writting system which means it is syllabic. Each character represents a syllable instead of just a basic sound as in the modern alphabet.
Problem
Most Filipinos are not aware that a native writing script exist
Opportunity
Give awareness on the native Filipino alphabets. This projects explains the very basics of baybayin and how to use it properly. The typeface is inspired by bold sans serif typeface which is suitable for advertising and to give it a modern look and to capture the interest of the younger generation.
Lettering
Various artworks
Anything you need help with?
I'm all ears
Photography
Armed with a magical box, walking aimlessly, reconnoitering, stalking, like a voyeur a flaneur, who discovers treats, treats that life itself presents.
Join me as I wander aimlessly shooting life's spontaneity
Join me as I wander aimlessly shooting life's spontaneity
Check my other photography works, you'd love it!
Photo Editing
The magic of photoshop
Find my works with the magic of the digital darkroom.
Find my works with the magic of the digital darkroom.
Performed client specific photo editing tasks such as image masking, background removal, sky replacements, day to dusk conversions, lawn replacements, object removals, flash and flash shadow removal, color correction, manual blending, Image masking, background removal.
Before & After
Want to see more photo editing magic?
Poster Design
Every artist was first an amateur
Lets have a chat
A word from you is much appreciated
Thank you!
Get social
Follow me on instagram
To get updates on new content