Skip to content

Commit 4acf8b0

Browse files
LorenzoTettamantiLorenzoTettamanti
committed
Added Blog Pages. Added responsive design
1 parent cba299b commit 4acf8b0

21 files changed

+542
-261
lines changed

‎public/fonts/StackedStrong.otf‎

10.7 KB
Binary file not shown.

‎public/fonts/TeknafRegular.otf‎

41.6 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,34 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="./favicon.svg" />
5+
<link rel="icon" href="https://www.cortexflow.org/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="google-site-verification"
1010
content="5r4cbGKX3aLjUKjPwR6nWr1rtUPOewvYh7lsf0x-iPc"
1111
/>
12-
12+
13+
14+
<!-------------------------------------------------------------------->
1315
<!-- SEO Meta Tags -->
1416
<meta
1517
name="description"
1618
content="CortexFlow - The Open-Source IoT simulation framework for big data analytics."
1719
/>
1820
<meta
1921
name="keywords"
20-
content="IoT, data simulation, big data, big data analytics, analysis framework, IoT analysis framework, CortexFlow, open source, machine learning, python, metrics, metrics for IoT, tensorflow, database for IoT, simulation modelling, agent based modelling, artificial intelligence for IoT"
22+
content="IoT, data simulation, big data, big data analytics,
23+
analysis framework, IoT analysis framework, CortexFlow,
24+
open source, machine learning, python, metrics, metrics for IoT,
25+
tensorflow, database for IoT, simulation modelling,
26+
agent based modelling, artificial intelligence for IoT"
2127
/>
2228
<meta name="author" content="CortexFlow" />
2329

24-
<!-- Open Graph Meta Tags -->
30+
<!-- Facebook Meta Tags -->
31+
<meta property="og:url" content="https://www.cortexflow.org" />
32+
<meta property="og:type" content="website" />
2533
<meta
2634
property="og:title"
2735
content="CortexFlow - The Open-Source IoT simulation framework"
@@ -34,7 +42,25 @@
3442
property="og:image"
3543
content="https://www.cortexflow.org/logo512.png"
3644
/>
37-
<meta property="og:url" content="https://www.cortexflow.org/" />
45+
46+
<!-- Twitter Meta Tags -->
47+
<meta name="twitter:card" content="summary_large_image" />
48+
<meta property="twitter:domain" content="cortexflow.org" />
49+
<meta property="twitter:url" content="https://www.cortexflow.org" />
50+
<meta
51+
name="twitter:title"
52+
content="CortexFlow - The Open-Source IoT simulation framework"
53+
/>
54+
<meta
55+
name="twitter:description"
56+
content="A cutting-edge IoT simulation framework and big data analysis tool"
57+
/>
58+
<meta
59+
name="twitter:image"
60+
content="https://www.cortexflow.org/logo512.png"
61+
/>
62+
63+
<!-------------------------------------------------------------------->
3864

3965
<link
4066
rel="apple-touch-icon"

‎src/components/Blog/components/blog_hero.jsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
1-
import React from "react";
1+
import React, { memo } from "react";
22
import "bootstrap/dist/css/bootstrap.min.css";
33
import "bootstrap-icons/font/bootstrap-icons.css";
44
import "../../css/blog.css";
55
import HomeButton from "./home_btn";
6-
import blogHeroImg from "../../assets/img/blog-hero-img.png";
6+
import blogHeroImg2 from "../../assets/img/blog-hero-img5.webp";
7+
import "../../css/blog-responsive.css";
78

89
const BlogHero = () => {
910
return (
1011
<div>
11-
{/* Verifica che il nome del componente sia corretto */}
1212
<section className="blog-hero-container">
13-
<HomeButton />
14-
13+
<HomeButton />
1514
<div className="row justify-content-center">
16-
<div className="col-md-8">
17-
{/* Contenuto centrato */}
15+
<div className="col-lg-6 col-md-8 col-sm-12">
1816
<div className="blog-centering">
19-
<img src={blogHeroImg} alt="blog-hero-img" className="hero-bg" />
17+
<div className="hero-image-container">
18+
<img
19+
src={blogHeroImg2}
20+
title="blog banner image"
21+
alt="blog-hero-img"
22+
className="hero-bg"
23+
/>
24+
<div className="hero-overlay"></div> {/* Overlay scuro */}
25+
</div>
2026
<div className="blog-title">
2127
<h1>Stories on Innovation, Technology & IoT</h1>
2228
</div>
@@ -34,4 +40,4 @@ const BlogHero = () => {
3440
);
3541
};
3642

37-
export default BlogHero;
43+
export default memo(BlogHero);

‎src/components/Blog/components/blog_page.jsx‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,49 @@
1-
import React from "react";
1+
import React, { useMemo } from "react";
22
import { Link } from "react-router-dom";
3-
import "../../css/blog.css"
4-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // Assicurati di installare font-awesome
5-
import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons"; // Importa le icone che utilizzi
3+
import "../../css/blog.css";
4+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
5+
import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons";
66

77
import { articles } from "../Articles/articles_list";
8+
import "../../css/blog-responsive.css";
89

910
const Blog = () => {
11+
const memorizedArticles = useMemo(() => articles, []);
12+
1013
return (
1114
<div className="blog">
1215
<main>
1316
<section className="section__container blog__container">
1417
<div className="blog__grid">
15-
{articles.map((article, index) => (
18+
{memorizedArticles.map((article, index) => (
1619
<div key={index} className="blog__card">
1720
<div className="blog__content">
18-
<Link to = {article.link}>
19-
<img
20-
src={article.articlePrevImg}
21-
alt="article-preview-img"
22-
className="article-preview-img"
23-
Link
24-
to={article.link}
25-
/>
21+
<Link to={article.link}>
22+
<img
23+
src={article.articlePrevImg}
24+
alt="article-preview-img"
25+
className="article-preview-img"
26+
title="article preview"
27+
/>
2628
</Link>
2729
<h3>{article.title}</h3>
2830
<p className="article-date">
29-
<p>
30-
<FontAwesomeIcon icon={faCalendarAlt} />
31-
</p>
31+
<FontAwesomeIcon icon={faCalendarAlt} />
3232
<p>{article.date}</p>
3333
</p>
3434
<div className="author-info">
3535
<img
3636
src="https://avatars.githubusercontent.com/u/170751096?v=4"
3737
alt={article.author}
3838
className="article-author-img"
39+
title="article author"
3940
/>
4041
<p>{article.author}</p>
4142
</div>
4243
<p>{article.description}</p>
43-
{/* Trasformare l'hashtag in un bottone mantenendo la stessa posizione */}
4444
<button className="article-hashtag-btn">
4545
{article.hashtag}
4646
</button>
47-
{/* <a href={article.link}>
48-
Read more <FontAwesomeIcon icon={faArrowRight} />
49-
</a> */}
5047
</div>
5148
</div>
5249
))}
@@ -56,4 +53,5 @@ const Blog = () => {
5653
</div>
5754
);
5855
};
56+
5957
export default Blog;

‎src/components/Blog/components/home_btn.jsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,17 @@ import { Link } from "react-router-dom";
33

44
import "../../css/blog.css";
55

6-
7-
const HomeButton=()=>{
8-
return(
9-
<>
10-
{/* Bottone in alto a sinistra */}
11-
<div className="button-home-container">
12-
<Link to = "/blog">
13-
<button className="btn-home-blog">
14-
Home
15-
</button>
16-
</Link>
17-
</div>
18-
</>
19-
);
6+
import "../../css/blog-responsive.css";
7+
const HomeButton = () => {
8+
return (
9+
<>
10+
{/* Bottone in alto a sinistra */}
11+
<div className="button-home-container">
12+
<Link to="/blog">
13+
<button className="btn-home-blog">Home</button>
14+
</Link>
15+
</div>
16+
</>
17+
);
2018
};
21-
export default HomeButton;
19+
export default HomeButton;

‎src/components/Blog/components/nav_blog.jsx‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎src/components/Blog/components/searchBar.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from "react";
2-
import "../../css/searchbar.css"
3-
2+
import "../../css/searchbar.css";
3+
import "../../css/blog-responsive.css";
44
const searchBar = () => {
55
return (
66
<div className="search-bar-blog">
77
<input type="text" placeholder="Search" className="search-bar" />
8-
<i className="bi bi-search search-icon"></i> {/* Icona della lente di ingrandimento */}
8+
<i className="bi bi-search search-icon"></i>{" "}
9+
{/* Icona della lente di ingrandimento */}
910
</div>
1011
);
1112
};

‎src/components/Footer/footer.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Footer = () => {
1414
<h2 className="sitename-footer">CortexFlow</h2>
1515
<div className="social-icons">
1616
<Link to="https://x.com/FlowCortex" aria-label="Twitter/X" title="Vist CortexFlow twitter page">
17-
<img src={xLogo} alt="X-logo"className="x-logo" />
17+
<img src={xLogo} alt="X-logo"className="x-logo" title="X/twitter logo" />
1818
</Link>
1919
<Link to="https://medium.com/@lorenzobradanini964" aria-label="Medium" title="Vist CortexFlow Medium page">
2020
<FaMedium />

‎src/components/Pages/Blog.jsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,30 @@
11
import React from "react";
2+
import { Helmet } from "react-helmet";
23
import Blogpg from "../Blog/components/blog_page";
34
import BlogHero from "../Blog/components/blog_hero";
4-
import SearchBar from "../Blog/components/searchBar"
5+
import SearchBar from "../Blog/components/searchBar";
56
import Footer from "../Footer/footer";
67

7-
88
const HomePage = () => {
99
return (
1010
<div>
11+
<Helmet>
12+
<title>CortexFlow Blog - Stories on Innovation, Technology & IoT</title>
13+
<meta
14+
name="description"
15+
content="Stories on Innovation, Technology & IoT"
16+
/>
17+
<meta
18+
name="keywords"
19+
content="CortexFlow,cortexflow,blog,IoT,Artifical Intelligence blog,Innovation blog,Stories on Innovation,Technology blog,
20+
big data blog,machine learning blog,technology blog for students,innovation blog for education,technology blog website,
21+
technology blog ideas,artificial intelligence blog writing,artificial intelligence blog post,artificial intelligence blog post"
22+
/>
23+
<meta name="author" content="CortexFlow" />
24+
<link rel="canonical" href="https://www.cortexflow.org/" />
25+
</Helmet>
1126
<BlogHero />
12-
<SearchBar/>
27+
<SearchBar />
1328
<Blogpg />
1429
<Footer />
1530
</div>

0 commit comments

Comments
 (0)