Hi, I'm Ivy!

Thank you for stopping by my portfolio! It's been really fun to put this together as an ongoing project, and I hope you enjoy your stay.

As for me, I'm a fullstack developer for the web, currently VP of Infrastructure at Pinnacle, and exploring embedded hardware for fun. I love visually stunning experiences, technologically interesting things, and making stuff that's a little quirky and makes people smile.

History of My Portfolio Pages

Every year or two I come back to re-do my portfolio page. I always make them from scratch, minimizing use of CSS frameworks so I can have more control over what the final product looks like. It's a super fun way to use all of the new skills I've learned, play with newer design trends, and show off my latest work.

I have made all of my personal pages from scratch. From not understanding what a viewport was, to creating a simple GitHub README-style page, to a page experimenting with bolder design choices, colors, and animations, and lately to this site, I think I've come a long way.

This is my fourth and most ambitious iteration of my cover page and portfolio. I hope you enjoy your time here and come back to visit for updates on my work.

Site Content

My last rework of my portfolio took only one week to design and code, and it recieved positive feedback for the visuals. However, it was limited with not much room to highlight more than a few projects, and writing blog posts or articles was a challenge. It was great for the time, as I had less stuff to show off, but it became constrained as I did more.

I want to have a fully comprehensive and engaging portfolio, rather than a static page to highlight a few top GitHub links and nothing more.

This led to the initial grid-based design of the main page, featuring tags to distinguish between different accomplishments like volunteer work and projects. Users can click into each "Experience" and see more details. They can also use the Lens feature in the bottom of the Sidebar to filter different items.

When projects get old and stale, they no longer represent my best work. As such, these projects get hidden below a toggle, but are still accessible for posterity.

Each grid can also be used for other purposes, such as linking to applets or widgets built into Ivy Direct. When you buy Ivy Direct or Vyne merch, you get a unique 11 digit serial key - so you can feel extra good inside about having an authentic item. You can also find a printable resume of mine.

For me, this is sufficient flexibility to show off my design, programming work, and miscellaneous life updates.

Design & Time-Reactive Neumorphism

I was originally going to follow up on the candy-coated bold designs of my third generation portfolio, with expanded features. However, I wasn't happy with how it looked with the high density of information, especially with the new sidebar.

Instead, I pulled a design trend from the internet: neumorphism. I haven't seen neumorphism used in the real world too often, despite how popular it was online.

Even though neumorphism is already very defined by other people, I realized there was a way to put a unique spin on it: making it react with time. Neumorphism fundamentally uses shadows and dark/light colors to provide its signature look, and I figured being able to dynamically generate these attributes (similar to neumorphism.io) would be a sick effect to pull off. Sunsets, sunrises, and night time could all be simulated.

To do this, I wrote a small JavaScript widget that calculates the current time as percentage progress throughout the day. Then, it uses a small bit of trigonometry to generate a vector <x,y> for the shadow projection. Finally, a set of six HSL color stops pre-programmed for times of day are used in conjunction with an HSL average function to generate a base background color. Similar to how the neumorphism.io generator works, it takes these values and generates a CSS stylesheet with darker and lighter colors to be injected into the page. The neumorphic styles are saved into CSS variables, and SCSS mixins are used to apply them throughout Ivy Direct. A slider on the main page lets users choose and lock in a time of day if they want (double clicking restores dynamic calculations).

I personally think this is awesome, and it's something I haven't seen at all in web design before.

Motion and Interaction

Another part of my third generation site that I wanted to build on was the use of animation and motion. I'm no motion graphics expert, but I know it's something that makes websites way more fun to browse.

Clicking through Ivy Direct needs to feel smooth, seamless, and satisfying enough that you want to do it over and over again (and in the process look through all my cool projects, and then maybe hire me).

The initial loading splash is designed to provide a graceful fallback for non-JS users, and some buffering time for site resources. The animation takes 1.5 seconds and cycles from the moon to the sun (or during nighttime and dark mode, the sun to the moon), and fades out once loading completes. If your network is a little slower, it oscillates. This is intended to provide a visual primer to the viewer that the page is reactive to time of day.

Each page has a transition that scales and slides elements in and out, staggering some to add visual variety. Realistically, the transitions here (implemented with the Svelte transition directive) are actually incorrectly done since they don't affect the box shadow but rather the entire card at once. This doesn't quite align with how neumorphic (raised plastic look) is supposed to work, but it was easier and doesn't look too bad. 🤷🏻‍♀️

The last large unique interaction feature is the swipe-to-open sidebar on mobile that mimics native mobile sidebars. On smaller desktop screens, this would be a trackpad gesture or horizontal scroll. I think trackpad and touch gestures are way more intuitive and less stressful than hitting a small tap target. This implementation builds on my proof-of-concept, svelte-web-mobile-ui.

Conclusion

Putting this site together has been really fun, and I appreciate the time you took to read about some of the process I went through to make it. If you like the design or what I do, sharing Ivy Direct with others would be cool!

If you're interested in the source code of Ivy Direct, it is available as a sponsor tier on my GitHub sponsors page.

Next, I'd recommend you check out the cool stuff I did when I was president of my school's Hack Club, or my next generation education software for students, Caravel.