{"id":405,"date":"2020-11-05T22:28:16","date_gmt":"2020-11-05T22:28:16","guid":{"rendered":"https:\/\/www.raynamcginnis.com\/?post_type=project&#038;p=405"},"modified":"2020-11-05T22:32:00","modified_gmt":"2020-11-05T22:32:00","slug":"blog-comment-card","status":"publish","type":"project","link":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/","title":{"rendered":"Blog Comment Card"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;3.27.2&#8243;][et_pb_row _builder_version=&#8221;3.27.2&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.27.2&#8243;][et_pb_text _builder_version=&#8221;4.6.5&#8243; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h1 style=\"text-align: center;\">Blog Comment Card<\/h1>\n<p style=\"text-align: center;\">This mobile responsive, blog comment card was designed using React.js props, HTML and CSS. The avatars were pulled in using the faker.js API, and the card element was designed using Semantic UI.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;3_4,1_4&#8243; _builder_version=&#8221;4.6.5&#8243; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][et_pb_column type=&#8221;3_4&#8243; _builder_version=&#8221;3.27.2&#8243;][et_pb_image src=&#8221;https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.6.5&#8243; hover_enabled=&#8221;0&#8243; alt=&#8221;Blog Comment Card&#8221; title_text=&#8221;Command_Line_Tools_for_Xcode_12&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;3.27.2&#8243; custom_padding=&#8221;|||25px|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#000000&#8243;][et_pb_text _builder_version=&#8221;4.6.5&#8243; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p><strong>Link:<\/strong>\u00a0<a href=\"https:\/\/github.com\/raynamcginnis\/react-prop-comments\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/raynamcginnis\/react-prop-comments<\/a><\/p>\n<p><strong>Technologies:<\/strong><\/p>\n<ul>\n<li>React.js<\/li>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p><strong>Integrations:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/semantic-ui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Semantic UI<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/marak\/Faker.js\/\" target=\"_blank\" rel=\"noopener noreferrer\">faker.js API<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blog Comment Card This mobile responsive, blog comment card was designed using React.js props, HTML and CSS. The avatars were pulled in using the faker.js API, and the card element was designed using Semantic UI. Link:\u00a0https:\/\/github.com\/raynamcginnis\/react-prop-comments Technologies: React.js HTML CSS Integrations: Semantic UI faker.js API &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":406,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":""},"project_category":[7,6,15],"project_tag":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Blog Comment Card - Rayna McGinnis<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blog Comment Card - Rayna McGinnis\" \/>\n<meta property=\"og:description\" content=\"Blog Comment Card This mobile responsive, blog comment card was designed using React.js props, HTML and CSS. The avatars were pulled in using the faker.js API, and the card element was designed using Semantic UI. Link:\u00a0https:\/\/github.com\/raynamcginnis\/react-prop-comments Technologies: React.js HTML CSS Integrations: Semantic UI faker.js API &nbsp;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/\" \/>\n<meta property=\"og:site_name\" content=\"Rayna McGinnis\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-05T22:32:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1865\" \/>\n\t<meta property=\"og:image:height\" content=\"963\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/\",\"url\":\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/\",\"name\":\"Blog Comment Card - Rayna McGinnis\",\"isPartOf\":{\"@id\":\"https:\/\/www.raynamcginnis.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png\",\"datePublished\":\"2020-11-05T22:28:16+00:00\",\"dateModified\":\"2020-11-05T22:32:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#primaryimage\",\"url\":\"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png\",\"contentUrl\":\"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png\",\"width\":1865,\"height\":963,\"caption\":\"Blog Comment Card\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.raynamcginnis.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projects\",\"item\":\"https:\/\/www.raynamcginnis.com\/project\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Blog Comment Card\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.raynamcginnis.com\/#website\",\"url\":\"https:\/\/www.raynamcginnis.com\/\",\"name\":\"Rayna McGinnis\",\"description\":\"Front End Web Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.raynamcginnis.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Blog Comment Card - Rayna McGinnis","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/","og_locale":"en_US","og_type":"article","og_title":"Blog Comment Card - Rayna McGinnis","og_description":"Blog Comment Card This mobile responsive, blog comment card was designed using React.js props, HTML and CSS. The avatars were pulled in using the faker.js API, and the card element was designed using Semantic UI. Link:\u00a0https:\/\/github.com\/raynamcginnis\/react-prop-comments Technologies: React.js HTML CSS Integrations: Semantic UI faker.js API &nbsp;","og_url":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/","og_site_name":"Rayna McGinnis","article_modified_time":"2020-11-05T22:32:00+00:00","og_image":[{"width":1865,"height":963,"url":"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/","url":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/","name":"Blog Comment Card - Rayna McGinnis","isPartOf":{"@id":"https:\/\/www.raynamcginnis.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#primaryimage"},"image":{"@id":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#primaryimage"},"thumbnailUrl":"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png","datePublished":"2020-11-05T22:28:16+00:00","dateModified":"2020-11-05T22:32:00+00:00","breadcrumb":{"@id":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#primaryimage","url":"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png","contentUrl":"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/Command_Line_Tools_for_Xcode_12.png","width":1865,"height":963,"caption":"Blog Comment Card"},{"@type":"BreadcrumbList","@id":"https:\/\/www.raynamcginnis.com\/project\/blog-comment-card\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.raynamcginnis.com\/"},{"@type":"ListItem","position":2,"name":"Projects","item":"https:\/\/www.raynamcginnis.com\/project\/"},{"@type":"ListItem","position":3,"name":"Blog Comment Card"}]},{"@type":"WebSite","@id":"https:\/\/www.raynamcginnis.com\/#website","url":"https:\/\/www.raynamcginnis.com\/","name":"Rayna McGinnis","description":"Front End Web Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.raynamcginnis.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project\/405"}],"collection":[{"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/comments?post=405"}],"version-history":[{"count":0,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project\/405\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/media\/406"}],"wp:attachment":[{"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/media?parent=405"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project_category?post=405"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project_tag?post=405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}