{"id":22828,"date":"2022-10-28T07:54:33","date_gmt":"2022-10-28T07:54:33","guid":{"rendered":"https:\/\/www.kpisf.com\/?post_type=portfolio&#038;p=22828"},"modified":"2022-11-16T06:30:38","modified_gmt":"2022-11-16T06:30:38","slug":"projects","status":"publish","type":"portfolio","link":"https:\/\/www.kpisf.com\/index.php\/portfolio\/projects\/","title":{"rendered":"Projects"},"content":{"rendered":"<section data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid   pofo-stretch-content vc_row-no-padding vc_row-o-equal-height vc_row-o-content-middle vc_row-flex\"><div class=\"wpb_column vc_column_container vc_col-sm-8  col-xs-mobile-fullwidth\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\">[vc_single_image image=&#8221;22887&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1667211137882{margin-bottom: 30px !important;}&#8221;]<\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-has-fill vc_col-sm-12 vc_col-md-4 col-xs-mobile-fullwidth\"><div class=\"vc_column-inner vc_custom_1666989286992\"><div class=\"wpb_wrapper\"><div class=\"vc_row wpb_row vc_inner vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12  col-xs-mobile-fullwidth\"><div class=\"vc_column-inner vc_custom_1666959973857\"><div class=\"wpb_wrapper\"><h3 class=\"text-extra-dark-gray margin-20px-bottom font-weight-600 display-inline-block alt-font text-none heading-style2  heading-1\" >Projects<\/h3><div class=\"separator-line-horrizontal-full bg-extra-light-gray center-col pofo-separator  vc_custom_1666960608060\" style=\"background-color:#ff214f;\"><\/div><div class=\"text-medium line-height-28  vc_custom_1667023964020 last-paragraph-no-margin\"><p>Select projects I have built to keep my skill-set fresh and relevant&#8230;<\/p>\n<\/div><ul class=\"no-padding list-style-4 list-style4-1 \"><li>HTML5, CSS3 Animations, JavaScript<\/li><li>React, ReactNative, Redux<\/li><li>Bootstrap, Reactstrap<\/li><li>JSON<\/li><li>npm, webpack<\/li><li>Sass<\/li><li>Git, GitHub<\/li><li>TypeScript<\/li><\/ul><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section><div class=\"vc_row-full-width vc_clearfix\"><\/div><section class=\"vc_row wpb_row vc_row-fluid  vc_custom_1667027408371 overflow-hidden\"><div class=\"wpb_column vc_column_container overflow-hidden vc_col-sm-4  col-xs-mobile-fullwidth\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><h5 class=\"text-extra-dark-gray margin-20px-bottom font-weight-600 display-inline-block alt-font text-none heading-style2  heading-2\" >Project: NuCamp Site<\/h5><ul class=\"list-style-9 margin-twelve-left text-extra-dark-gray list-style7-1  text-none\" style=\"color: #000000;\"><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">DESCRIPTION<\/span>I wanted to get my hands dirty with React, so I enrolled in a bootcamp. This is the project created for the React portion.<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">TECHNOLOGIES USED<\/span>React, Redux, React Router, NPM, Reactstrap, JSON, CSS, JSX, CreateAsyncThunk, Formik, Webpack<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">NOTES<\/span>Try logging in with made-up creds, and see your avatar appear. Client-side error handling. Click on Directory, then select a campsite and leave a review - keep it clean, please!<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">LIVE LINK<\/span><a href=\"https:\/\/react.kpisf.com\/\" target=\"_blank\">https:\/\/react.kpisf.com\/<\/a><\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">GITHUB<\/span><a href=\"https:\/\/github.com\/SN0WKRASH\/nucamp-react-site\" target=\"_blank\">github.com\/SN0WKRASH\/nucamp-react-site<\/a><\/li><\/ul><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-8  col-xs-mobile-fullwidth\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\">[vc_single_image image=&#8221;22861&#8243; img_size=&#8221;full&#8221; alignment=&#8221;right&#8221; onclick=&#8221;custom_link&#8221; img_link_target=&#8221;_blank&#8221; css_animation=&#8221;fadeInUp&#8221; link=&#8221;http:\/\/react.kpisf.com\/&#8221;]<\/div><\/div><\/div><\/section><section class=\"vc_row wpb_row vc_row-fluid  vc_custom_1667042687936\"><div class=\"wpb_column vc_column_container vc_col-sm-4  col-xs-mobile-fullwidth\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><h5 class=\"text-extra-dark-gray margin-20px-bottom font-weight-600 display-inline-block alt-font text-capitalize heading-style2  heading-3\" >Project: Natours<\/h5><ul class=\"list-style-9 margin-twelve-left text-extra-dark-gray list-style7-2  text-none\" style=\"color: #000000;\"><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">DESCRIPTION<\/span>A fun landing page with lots of CSS Animations.<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">TECHNOLOGIES USED<\/span>HTML5, Sass, Pure CSS image effects and animations, Advanced Responsive Layout<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">NOTES<\/span>Be sure to click the hamburger menu for more animation demos. Designed by Jonas Schmedtmann for his Udemy course, \"Advanced CSS and Sass.\"<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">LIVE LINK<\/span><a href=\"https:\/\/www.kpisf.com\/natours\/index.html\" target=\"_blank\">kpisf.com\/natours\/index.html<\/a><\/li><\/ul><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-8  col-xs-mobile-fullwidth\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\">[vc_single_image image=&#8221;22873&#8243; img_size=&#8221;full&#8221; alignment=&#8221;right&#8221; onclick=&#8221;custom_link&#8221; img_link_target=&#8221;_blank&#8221; css_animation=&#8221;fadeInUp&#8221; link=&#8221;https:\/\/www.kpisf.com\/natours\/index.html&#8221;]<\/div><\/div><\/div><\/section><section class=\"vc_row wpb_row vc_row-fluid  vc_custom_1667042687936\"><div class=\"wpb_column vc_column_container vc_col-sm-4  col-xs-mobile-fullwidth\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><h5 class=\"text-extra-dark-gray margin-20px-bottom font-weight-600 display-inline-block alt-font text-capitalize heading-style2  heading-4\" >Project: Personal Task Manager<\/h5><ul class=\"list-style-9 margin-twelve-left text-extra-dark-gray list-style7-3  text-none\" style=\"color: #000000;\"><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">DESCRIPTION<\/span>A simple personal task manager.<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">TECHNOLOGIES USED<\/span>React, TypeScript, npm, Material UI, node API, MySQL, TypeORM, React Query, deployed on AWS<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">NOTES<\/span>Add a task (keep it clean, please), change the status of a task to IN PROGRESS and watch the status change. Mark a task complete and watch it disappear.<\/li><li style=\"border-color: #ff214f;\"><span class=\"display-block text-extra-small text-medium-gray\" style=\"color: #000000;\">LIVE LINK<\/span><a href=\"http:\/\/52.53.182.79:3000\/\" target=\"_blank\">http:\/\/52.53.182.79:3000\/<\/a><\/li><\/ul><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-8  col-xs-mobile-fullwidth\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\">[vc_single_image image=&#8221;22895&#8243; img_size=&#8221;full&#8221; alignment=&#8221;right&#8221; onclick=&#8221;custom_link&#8221; img_link_target=&#8221;_blank&#8221; css_animation=&#8221;fadeInUp&#8221; link=&#8221;http:\/\/52.53.182.79:3000\/&#8221;]<\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"[vc_single_image image=\"22887\" img_size=\"full\" css=\".vc_custom_1667211137882{margin-bottom: 30px !important;}\"]ProjectsSelect projects I have built to keep my skill-set fresh and relevant... HTML5, CSS3 Animations, JavaScriptReact, ReactNative, ReduxBootstrap, ReactstrapJSONnpm, webpackSassGit, GitHubTypeScriptProject: NuCamp SiteDESCRIPTIONI wanted to get my hands dirty with React, so I enrolled in a bootcamp. This is the project created for the React portion.TECHNOLOGIES USEDReact, Redux, React Router, NPM, Reactstrap, JSON, CSS, JSX, CreateAsyncThunk, Formik, WebpackNOTESTry logging in with made-up creds, and see your avatar appear. Client-side error handling. Click on Directory, then select a campsite and leave a review - keep it clean, please!LIVE LINKhttps:\/\/react.kpisf.com\/GITHUBgithub.com\/SN0WKRASH\/nucamp-react-site[vc_single_image image=\"22861\" img_size=\"full\" alignment=\"right\" onclick=\"custom_link\" img_link_target=\"_blank\" css_animation=\"fadeInUp\" link=\"http:\/\/react.kpisf.com\/\"]Project: NatoursDESCRIPTIONA fun landing page with lots of CSS Animations.TECHNOLOGIES USEDHTML5, Sass, Pure CSS image effects and animations, Advanced Responsive LayoutNOTESBe sure to click the hamburger menu for more animation demos. Designed by Jonas Schmedtmann for his Udemy course, \"Advanced CSS and Sass.\"LIVE LINKkpisf.com\/natours\/index.html[vc_single_image image=\"22873\" img_size=\"full\" alignment=\"right\" onclick=\"custom_link\" img_link_target=\"_blank\" css_animation=\"fadeInUp\" link=\"https:\/\/www.kpisf.com\/natours\/index.html\"]Project: Personal Task ManagerDESCRIPTIONA simple personal task manager.TECHNOLOGIES USEDReact, TypeScript, npm, Material UI, node API, MySQL, TypeORM, React Query, deployed on AWSNOTESAdd a task (keep it clean, please), change the status of a task to IN PROGRESS and watch the status change. Mark a task complete and watch it disappear.LIVE LINKhttp:\/\/52.53.182.79:3000\/[vc_single_image...","protected":false},"featured_media":22884,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","class_list":["post-22828","portfolio","type-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio-category-html-css-javascript"],"_links":{"self":[{"href":"https:\/\/www.kpisf.com\/index.php\/wp-json\/wp\/v2\/portfolio\/22828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kpisf.com\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/www.kpisf.com\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kpisf.com\/index.php\/wp-json\/wp\/v2\/comments?post=22828"}],"version-history":[{"count":57,"href":"https:\/\/www.kpisf.com\/index.php\/wp-json\/wp\/v2\/portfolio\/22828\/revisions"}],"predecessor-version":[{"id":22901,"href":"https:\/\/www.kpisf.com\/index.php\/wp-json\/wp\/v2\/portfolio\/22828\/revisions\/22901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kpisf.com\/index.php\/wp-json\/wp\/v2\/media\/22884"}],"wp:attachment":[{"href":"https:\/\/www.kpisf.com\/index.php\/wp-json\/wp\/v2\/media?parent=22828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}