This morning marks the release of my new portfolio site. One piece of functionality still to come is filterable posts and projects. I'm planning on filtering by language and possibly client or query. Additional functionality and may come in the future, but after filtering it's time to get back to work on styling Biblioteca.

My updated portfolio site. Implementing new technologies, a brand new design, and a few of the memories.

The app for organizing your library.

This past week I've been developing my new portfolio site. Some of the big changes include a design over haul which involves switching to SASS/SCSS for styling and no longer relying on component libraries. Theme toggling and like buttons will remain. All blog posts and project posts will have dedicated pages and project pages will also display relevant blog posts. Different filters will be available to sort through blog posts.

The site has been switched to from Gatsby to Next and I've made full use of getStaticProps() to preload fetched data. I've been using Next.js on the Biblioteca project and have really enjoyed working with it. The ease of routing, font and image optimization and the flexibility of different rendering options are just a few of the examples of the wonderful features Next provides developers. ZaxCode will be hosted on Vercel due to the switch to Next.

Biblioteca is an app project inspired by book lovers of all types, looking of a better way to organize all of their books no matter what format they are. At it's core the app is a library organization app, it will be able to search the Google books api and return a list of books for you to add to your personal library. This is not an app for reading but for organizing and sorting your owned books in user friendly manner.  Some of the skills required to bring Biblioteca to life are authentication, CRUD, consuming multiple APIs and relational databases.

Very exciting news came yesterday, the release of Next.js 13! Due to this release I've decided to switch from Gatsby to the experimental Next.js 13. I'll also be stepping away from MUI components in favor of building my own custom components. This will be a great opportunity to get my hands dirty with the new Next.js as well as applying new skills I've learned in CSS and React. The current site will remain live until the new version is finished.

This project demonstrates ability to asynchronously fetch , filter and display data. In this example I displayed a list of orders by customer, showing the order id, date of the transaction and dollar amount. Following the list are the points totals separated into two categories, total points, which shows the all time point totals and points per month, which breaks down earned points by month.

The tab system is now clearer for the user to see which tab they are currently on. I tweaked the clickable contact email in the footer. The resume layout has been updated and the whole site got a style refresh. The final to-do list is here! I will upload a better photo for my about page, write a new about section and better project descriptions, and add a new image for my portfolio site project.  There will be future changes to the site of course when I figure out how to do everything I've done better, implement more functionality, or need a design update!

Today I finished the like button functionality! The like button is now a full functioning component that can be used on any post or card with an id. Glad to have finally figured out the issue! The state wasn't reliant on stored local values as well as being toggled by the button's click handler. That default value of state "liked" had a default value that would update the locally stored value if it was refreshed twice. To fix that I set the default value of "liked " to the stored value. It's very similar to how the dark mode is persisted, just with some tweaks.  I implemented the like button into blog posts as well. On to polishing and wrapping up!

A couple things have been wrapped up and a new feature is under development! I recently added a hover and click feature to my email in the footer to make it easier to contact me. When hovering over the email, the background will change color, and "Click to Copy!" will display above it. After clicking, an alert will display a message saying it was copied. I thought about getting rid of the alert because you have to close out of it, I don't like the extra step but the success affirmation I think is worth it. I'll revisit this in the future.

The like button functionality is underway! The icon will be a different color based on the MUI theme. When clicked it will change to a red indicating like and a double-click will unlike. That is as far as it's gotten for now. I'm thinking I'll need to save a value in local storage unique to each post saving the state the button is in. As Mario always says.. Here we go!

Dark mode is a success! I learned a lot more about state,  context, and ternary operations with this one. Using MUIs theming I set the mode of the theme to the value of mode which is the value of context. A ternary in the theme will check whether it's true and deliver dark or light. Context is first set to the user preference along with the switch position. It can then be toggled at will by using the switch.

Here we are again, welcome back! A couple changes in the design process. I'm now implementing Material UI to save time designing cards and posts, as well as using their switch and text input components. The project cards are rewritten with Material UI. Switch and text input components are implemented.

Next up, I'll be using themes to create a dark and light mode.  Depending on the users' default settings either the light or dark theme will be applied on load and the previously mentioned switch will toggle between the two. The state of the switch will be saved in local storage so that the user's choice will persist until changed.

Search box logic is done! All the blog posts are gathered from a query and the query data is saved in a variable. To display all posts, it just maps the variable and using the spread operator, populates each post. The first to do for the search was to create an input, then set a state and that state to the input's value. An if statement in the index return checks if the title of the post includes what was typed and filters the posts. I'd like to add a filter dropdown and a search by excerpt feature later.

Starting on my first piece of nontrivial functionality! Today I'm going to be working on a search feature to sort through posts I've written.

So first step, I'll set up a text input box in the blog section. Then I'll reference the query where I'm pulling in my posts and try storing that in an object. Once it's in an object I can use a filter or includes to sort through posts and return the ones that include what has been typed. First time setting up any sort of search so I'll need to look into it a bit more to make sure I'm approaching the problem from the best angle.

Once the search feature is up it's either going to be the dark mode or like button functionality.  I haven't decided the best way to implement dark mode yet, however, I'm leaning towards dynamically loading separate style sheets. For the like button, I'll need to learn how to persist data... and for dark mode, I'll need to use local storage to hold user settings.

The basic layout is done,  the tab system is working properly and project content is being pulled in. The header and footer are set up. I might add a contact tab or incorporate it into the about tab. I used react icons for social icons in the footer. The next steps will be pulling in these blog posts and coding the layout for them and individual posts. I'll be adding a search and possibly a filter feature for blog posts.