My personal portfolio, project library, and blog.
Explore the docs »
Visit Site
·
Report Bug
·
Request Feature
Table of Contents
This repo is home to the ReactJS frontend of my personal website 2.0. I Launched it towards the end of October 2022. It relies on the backend, a Node-Express REST API I've nicknamed Project Pith, to process content from 3rd party APIs like Notion, and Twitter to provide content for the site. If you're reading this in October or November, the blog section will still be mostly void of content, I hope to add some delightful, informative content that will provide context for my project and protfolio work, if I do it right it'll even be a little entertaining. Thanks for visiting!
Basic diagram of the current site:
The site contains several interesting or unique features.
The Notion integration involves features written in both React and Node. The React API I built handles requesting and parsing a JSON object containing all the data for a blog post. The data comes from my Notion account, so the system is basically packaging a blog post I've written on my desktop Notion app, passing it to the server and database so that the client can request the data and transform it back into JSX. Each blog posts is received by the client as an array of objects. my API parses this array, checking the type of each object in the array. It then passes the object into a corresponding component. For example paragraph object is passed to a Paragraph component. This allows me to implement features incrementally. Currently, I can post blogs with simple formatting requirements without the need to replciate every feature in Notion. It also allows me to organize and encapsulate the functionality required for each block. As of November, I've added Headings, Paragraphs, Code Blocks, Links, and Images. Next, I would like to add Lists, and improve the formatting.
This section is more for the fun projects. It's also a bit of a ReactJS workshop. Some of the items you'll see here were originally built in React, others I built in vanilla JS, and have converted. I'd like to keep adding to it. It's a lot of fun building out these component/mini-app projects, and displaying them.
-
Conway's Game of Life: My GoL implementation I added a powerful set of controls that allows you to run a traditional game, or clear the board and place premade patterns discovered by researchers over the years.
-
Productiv: A fun little react themed todo app. Complete with a AJAX powered quote generator. This project was an excellent learning lesson in form control and state management in React.
-
Whittle: my first ever, original app. It's a Wordle assist program that shows you a list possible words based on your existing guesses. Getting the UX for this just right was been tougher than I expected. This required me to write some efficient sorting algos to filter the list opf about 8500 5 letter words in the english language.
-
Lights Out!: My first practice building a game board in react. It's a fairly simple app that makes for an fairly amusing game. Not that great, but I learned how to hold state and render a game board throughout the course of a game.
-
I've a backlog of projects I need to rebuild in react, and I'd love to add some novel stuff here as well.
Many of these features were left out of the initial build simply because the site doesn't yet have enough content to warrant great search, tagging, or pagination.
- Homescreen design
- Add project menu
- search
- tags/categories
- Blog Features
- Improve Pagination
- Improve Search
- Tweet components to avoid embedding
- Better Tags
- More block types
- Comments?
See the open issues for a full list of proposed features (and known issues).
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Caleb Wood - @calebthewood or calebwood.cs@gmail.com.com
Project Link: https://github.com/calebthewood/personalSiteV2
Live Site Link: https://www.calebwood.dev/