JP's Portfolio

Simple weather app that's built on Webflow and Wized.

Watch this tutorial on how to build this:
https://www.youtube.com/watch?v=87jaohXeW6s

Clone Wized project:
https://app.wized.com/clone/xYYgIdZvJo6vSuFN9gm3

Clone Airtable database:
https://airtable.com/shrS1zDaBgFjuM54u

Feel free to clone and enjoy!

Wized Weather Widget

Are you having a hard time making Three.js work on your website? 

This cloneable shows you how to use Three.js in Webflow so that you can start your journey in learning and building with Three.js in Webflow

A starter template to use Three.js in your Webflow project.

Feel free to clone and enjoy! :)

Three.js Template

10x your storytelling with interactive 3D icons with Spline! (https://spline.design/)

Feel free to clone and enjoy.

How I did it with Spline:
https://www.loom.com/share/dd0f09a35ee84eada86ac5190c24d86f

View the Spline files:
https://app.spline.design/file/467e701d-9a2f-4904-b99c-e2e350662104
https://app.spline.design/file/dd0c5193-bedf-4203-a51a-0116c1a0a81e

Inline Text 3D Icons - Spline, Three.js

Finally had the time and courage to learn how to code!

This is my output on the 13th lesson from Bruno Simon's course, #threejsJourney

⚠️ YesCode: Code-heavy project! ⚠️

Had a hard time working out TextGeometry with Webflow and here it is!

Includes lil-gui

You can use this as a starter template for three.js text geometry files.

Feel free to clone and enjoy!

Golden Rings - Three.js

Here are my builds for the Speed Build Challenge of the No-Code Conf 2021.

Really had fun being part of this. Thanks, Webflow!

Feel free to clone and inspect haha.
This setup isn't for client builds. 
The structure used here is made for me to build this as quickly as I can. 
I baked (combined stuff) elements as much as possible.


Watch the quarterfinals:
https://youtu.be/gs8Jt3Yrj-I

Watch the semis and finals:
https://youtu.be/BaPzf7kdf38

Event website:
https://webflow.com/nocodeconf/speed-build-challenge


Ask in the comments any questions that you have. :)

Love Locket - Lottie, Interaction

The idea for this is to highlight the item based on the movement of the mouse. 

No custom codes were used.

Feel free to clone and enjoy!

Accordion Highlight - Interactions

The weight, color, scale, and rotation of the divs react with your mouse positioning.

Another one in my journey of learning code, particularly JS!

⚠️ YesCode: Code-heavy project! ⚠️

My take on SuperHi's reactive variable font tutorial:
https://library.superhi.com/posts/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site

Which was inspired by Airbnb's page:
https://airbnb.design/cereal/scale/weight

Feel free to clone and enjoy!

Reactive Variable Flower - Javascript

Celebrating my new venture with Beyond Agency with this project. ✨

This is for crazier projects and beyond!

⚠️ YesCode: Code-heavy project! ⚠️

Super Hi's Flag tutorial:
https://www.youtube.com/watch?v=Su1n2Uuf38E&t=1s

You can use this to create your own flag.

Feel free to clone and enjoy!

Flag - Three.js

Animate your background with a bit of coding!

Thought of this as an idea and here it is!

You need a seamless tiled image for this to work elegantly.

Feel free to clone and enjoy!

Background Tile Animation - CSS

Trying out how to work out 3d files into Webflow.

Also, I did an animated 3d icon to indicate interactivity. 
Had fun doing this bit. haha.

⚠️ YesCode: Code-heavy project! ⚠️

Codepen from Arden
https://codepen.io/aderaaij/pen/BapYONL

You can use this as a starter template for glb/gltf files.

Feel free to clone and enjoy!

Portal Journey - Three.js

A website to bend light in three different waves.

⚠️ YesCode: Code-heavy project! ⚠️

While studying Three.js, I found this awesome pen from Yuki. 

Codepen from Yuki
https://codepen.io/Web_yuki1027/pen/yLgYpWM

Feel free to clone and enjoy!

Bending Light - Three.js

A simple website to demonstrate how to use Howler JS to start music when entering a website. Also, having the ability to mute and unmute the audio.

https://howlerjs.com/

Feel free to clone and enjoy!

Enter with Music - Howler.js

Create your own waves with this project!

⚠️ YesCode: Code heavy project! ⚠️

from Codepen of Arden:
https://codepen.io/aderaaij/pen/XWpMONO

The Raging Sea - Three.js

A simple exercise from SuperHi
"How to make a 3d book using Three.js that rotates when you scroll down a web page"
https://www.youtube.com/watch?v=cghSq_dlgYU

The 3D book will rotate when you scroll down and up.

I know you can easily do this without coding. The purpose of this project is for me to start on my coding journey as I'm coming from a design background. I hope this would also help others who would like to start to learn about Javascript, particularly WebGL and THREE.js.

So you can expect more stuff like this in the future. haha

This can be done without the CMS. I just used the CMS so it would be easier for you to map out the texture for the different faces of the model.

The book is by Seth Godin, Purple Cow.

Some use cases are for author's websites, book websites, freebie ebooks, and newsletter opt-in pages.

Clone away and enjoy!

Book Rotate on Scroll - Three.js

One of the biggest hurdles for me, when I started my career, is writing proposals. You'll get tips and tricks with this presentation.

These are things I learned from Jonathan Stark, Blair Ens, David C Baker.

The linked presentation is in Taglish.

Feel free to clone and enjoy! :)

How to Write Winning Proposals

My presentation for my talk with Filta.
Reused an existing project from my UX&Chill event for Filta's 60-minute event.

Feel free to clone and enjoy!

How to: Student Portfolio Website Presentation

This is a free template for a job application.
More like an online resume.

I re-purposed one of my clonables, Student Portfolio, for this one.

Aside from the on-page content and pdf resume, make sure to edit the Open Graph content if you'll use this! Haha.

If you're crazy, you can make a CMS resume template and create hundreds of page applications. hahaha.

Have fun and enjoy! 

Happy hunting!

JP Dionisio

About

Skills

About

About