Projects

On any given day, you’ll find me deep in DevTools, MAMP, Visual Studio Code, Postman, and GitHub.

Betwixt Brackets

description of project

A custom WordPress theme that I designed and developed to showcase and market a few of my skills. Features include WordPress Theme Design and Development, accessibility, custom templates, and custom features such as self-hosted Google Fonts and a dynamic copyright year display.

link to project

technologies

WordPress, PHP, MySQL, HTML5, CSS3

Super Sticky Notes

description of project

Applied React components to create a Greenfield web app where users can add, edit, delete, and search for notes.

link to project

technologies

React, JSX, ES6, CodePen

Gallery of GitHub Repos

description of project

Applied the GitHub API to pull and render data to build a ✨ Gallery of Repos ✨ that can be searched.

link to project

technologies

Vanilla JavaScript, JSON, REST API, GitHub Pages

Guess the Word!

description of project

To win the game, guess the word before you run out of guesses.

I customized the project and added stars to sparkle ✨ when you win.

link to project

technologies

Vanilla JavaScript, jQuery, JSON, REST API, GitHub Pages

Accelerate Marketing Custom Theme

description of project

A custom WordPress theme designed and developed to immediately engage clients and showcase ready-to-share content. Features include WordPress Theme Design and Development, custom templates, custom post types, plugin integration, configuration, and customization.

link to project

technologies

WordPress, PHP, MySQL, HTML5, CSS3

TODO: API & Anime & PHP

“Ruby’s PHP Studio Ghibli API Demo” uses PHP to display specific values from the Studio Ghibli API, combining three of my favorite things.

I think of APIs as a treasure hunt for the endpoint and appended parameters that will return the data I seek. Any language that can send HTTP requests can be used to make the request, return the JSON, convert the JSON into an array, and display values from that array.

<?php
    // The endpoint 
    $movies_url = 'https://ghibliapi.herokuapp.com/films';
    // The returned JSON
    $movies_json = file_get_contents($movies_url);
    // Convert the JSON into a PHP array
    $movies_array = json_decode($movies_json, true);
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ruby's PHP Studio Ghibli API Demo</title>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Description</th>
                </tr>
            </thead>    
            <tbody>
                <?php
                // Step through the array and display the title and description values 
                    foreach($movies_array as $movie){
                ?>
                <tr>
                    <td><?php echo $movie['title']; ?></td>
                    <td><?php echo $movie['description']; ?></td>
                </tr>
                <?php   
                    }
                ?>
            </tbody>
        </table>
        <aside>
            <h4>Toshio Suzuki's step by step instructions for drawing Totoro!</h4>

            <iframe width="560" height="315" src="https://www.youtube.com/embed/vkBxX_HSzRg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </aside>
    </body>
</html>