{"id":29,"date":"2021-05-29T10:08:26","date_gmt":"2021-05-29T10:08:26","guid":{"rendered":"https:\/\/demo.codeworkweb.com\/cww-portfolio\/main\/?page_id=29"},"modified":"2024-08-17T15:53:40","modified_gmt":"2024-08-17T19:53:40","slug":"gallery","status":"publish","type":"page","link":"https:\/\/karolinaredden.com\/index.php\/gallery\/","title":{"rendered":"Projects"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"ToolSwap PERN stack app\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Tk4Sc80ZBsE?start=1&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"mt-3 wp-block-heading\">ToolSwap: Simplifying Neighborhood Tool Sharing<\/h2>\n\n\n\n<p> <a href=\"https:\/\/github.com\/manuelcasanova\/finals\" data-type=\"link\" data-id=\"https:\/\/github.com\/manuelcasanova\/finals\">ToolSwap <\/a>is a web app designed for effortless neighborhood tool sharing. Utilizing React calendar, users can easily schedule rentals, manage reservations, and add items to the database. The platform features a search bar for efficient navigation and an admin section for tool flow control.<br><br><strong>Stack:<\/strong> PostgreSQL, Express, React, Node<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"mt-3 wp-block-heading\">Scheduler: Seamless Technical Interview Management<\/h2>\n\n\n\n<p>Effortlessly schedule, edit, and delete technical interviews with our intuitive Scheduler. The calendar side-bar dynamically updates remaining spots based on bookings. Rigorously tested with multiple frameworks, <a href=\"https:\/\/62aba59e40aaed3d07b05eda--polite-platypus-dac92c.netlify.app\/\" data-type=\"link\" data-id=\"https:\/\/62aba59e40aaed3d07b05eda--polite-platypus-dac92c.netlify.app\/\">the app is deployed on Heroku and Netlify.<\/a><\/p>\n\n\n\n<p><strong>Stack:<\/strong> Express, SQL, Node, React, Cypress, Jest, StoryBook<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Scheduler (React app)\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/0F8iJJ1J-OQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"WikiMaps - interactive map\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/TuXmS_Ym7js?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"mt-3 wp-block-heading\">WikiMaps: Mapping Stories, One Pin at a Time<\/h2>\n\n\n\n<p><a href=\"https:\/\/github.com\/manuelcasanova\/wikimaps\" data-type=\"link\" data-id=\"https:\/\/github.com\/manuelcasanova\/wikimaps\">WikiMaps<\/a> leverages the open-source JavaScript library Leaflet, providing an interactive platform to create maps with markers based on longitude and latitude. Users can track their contributions through profiles, showcasing maps created and pins added.<\/p>\n\n\n\n<p><strong>Stack: <\/strong>Express, Node.js, PostgreSQL, HTML, CSS<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"mt-3 wp-block-heading\">Tweeter: Your Mini Twitter Experience<\/h2>\n\n\n\n<p><a href=\"https:\/\/github.com\/quackness\/tweeter\" data-type=\"link\" data-id=\"https:\/\/github.com\/quackness\/tweeter\">Tweeter,<\/a> a single-page Twitter clone, employs Ajax for real-time updates with user-submitted tweets. Page events are seamlessly handled through jQuery, while the design, prioritizing mobile responsiveness, is powered by HTML and CSS.<\/p>\n\n\n\n<p><strong>Stack:<\/strong> AJAX, jQuery, HTML+CSS, EJS, Express<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Tweeter clone app (Ajax + jQuery)\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/-VABYbK_jPI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Games and Entertainment<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>WebWisdom Cards<\/strong><\/h3>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<button id=\"draw-a-card\">Draw a Card <\/button>\n<div id=\"fortune\"><\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns d-flex justify-content-center align-items-center is-layout-flex wp-container-core-columns-layout-5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:400px\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"765\" src=\"https:\/\/karolinaredden.com\/wp-content\/uploads\/2024\/02\/Screenshot-2023-12-12-at-1.22.29\u202fPM-e1702401939594-1024x765-1.png\" alt=\"\" class=\"wp-image-380\" srcset=\"https:\/\/karolinaredden.com\/wp-content\/uploads\/2024\/02\/Screenshot-2023-12-12-at-1.22.29\u202fPM-e1702401939594-1024x765-1.png 1024w, https:\/\/karolinaredden.com\/wp-content\/uploads\/2024\/02\/Screenshot-2023-12-12-at-1.22.29\u202fPM-e1702401939594-1024x765-1-300x224.png 300w, https:\/\/karolinaredden.com\/wp-content\/uploads\/2024\/02\/Screenshot-2023-12-12-at-1.22.29\u202fPM-e1702401939594-1024x765-1-768x574.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:400px\">\n<h2 class=\"wp-block-heading\">Phaser Game In Canvas<\/h2>\n\n\n\n<p>An interactive game has been developed as a part of after school program web site. It uses Tailwind for CSS styles, thanks to Phaser framework it can be played on both desktop and mobile.<br><strong>Stack: <\/strong>Express, Node.js, PostgreSQL, HTML, CSS<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/quackness.github.io\/phaser-game\/\">Play<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns d-flex justify-content-center align-items-center is-layout-flex wp-container-core-columns-layout-6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:400px\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"602\" src=\"\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-12-at-9.00.47\u202fPM-1024x602.png\" alt=\"\" class=\"wp-image-288\" srcset=\"https:\/\/karolinaredden.com\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-12-at-9.00.47\u202fPM-1024x602.png 1024w, https:\/\/karolinaredden.com\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-12-at-9.00.47\u202fPM-300x177.png 300w, https:\/\/karolinaredden.com\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-12-at-9.00.47\u202fPM-768x452.png 768w, https:\/\/karolinaredden.com\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-12-at-9.00.47\u202fPM-1536x904.png 1536w, https:\/\/karolinaredden.com\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-12-at-9.00.47\u202fPM.png 1822w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:400px\">\n<h2 class=\"wp-block-heading\">3-In-A-Row<\/h2>\n\n\n\n<p>A logic game, built with vanilla Java script and pure DOM manipulation.<\/p>\n\n\n\n<p>It offers 3 grid options for added challenge.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-layout-2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/quackness.github.io\/3-in-a-row\/\">Play<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>ToolSwap: Simplifying Neighborhood Tool Sharing ToolSwap is a web app designed for effortless neighborhood tool sharing. Utilizing React calendar, users can easily schedule rentals, manage reservations, and add items to the database. The platform features a search bar for efficient navigation and an admin section for tool flow control. Stack: PostgreSQL, Express, React, Node Scheduler: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/karolinaredden.com\/index.php\/wp-json\/wp\/v2\/pages\/29"}],"collection":[{"href":"https:\/\/karolinaredden.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/karolinaredden.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/karolinaredden.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/karolinaredden.com\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":166,"href":"https:\/\/karolinaredden.com\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":387,"href":"https:\/\/karolinaredden.com\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions\/387"}],"wp:attachment":[{"href":"https:\/\/karolinaredden.com\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}