From 13f8d6649077432b10e01d6b1565eafac897b7ce Mon Sep 17 00:00:00 2001
From: The17thDoctor <40616434+The17thDoctor@users.noreply.github.com>
Date: Mon, 10 Mar 2025 16:58:46 +0100
Subject: [PATCH] Responsive update (WIP)

---
 public/index.html                 | 2 +-
 src/App.css                       | 4 ++++
 src/App.js                        | 2 +-
 src/Components/Footer.js          | 8 ++++----
 src/Pages/Homepage/Homepage.js    | 8 ++++----
 src/Pages/Homepage/ProjectCard.js | 6 ++++--
 6 files changed, 18 insertions(+), 12 deletions(-)
diff --git a/public/index.html b/public/index.html
index ca1a14d..59a7e71 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,7 +14,7 @@
     <title>Ewen Horville | Portfolio</title>
 
     <meta property="og:type" content="website">
-    <meta property="og:url" content="https://portfolio.the17thdoctor.fr">
+    <meta property="og:url" content="https://portfolio.luna-code.net">
     <meta property="og:title" content="Ewen Horville | Portfolio">
   </head>
   <body>
diff --git a/src/App.css b/src/App.css
index 4653936..1cfbac6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -34,3 +34,7 @@
     max-height: .5em;
     transition: max-height .15s;
 }
+
+body, html {
+    min-width: 100px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 20654c5..daeb8a8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,7 @@ const router = createBrowserRouter([
 
 function App() {
   return (
-    <div className="App has-background-white-bis is-flex is-flex-direction-column" style={{minHeight: "100vh"}}>
+    <div className="App has-background-white-bis is-flex is-flex-direction-column" style={{minHeight: "100vh", minWidth: "100vw"}}>
         <Navbar/>
         <RouterProvider router={router} />
         <Footer/>
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
index 5d5b567..8c61d88 100644
--- a/src/Components/Footer.js
+++ b/src/Components/Footer.js
@@ -4,15 +4,15 @@ class Footer extends Component {
 
     render() {
         return <footer className="footer has-background-grey-darker pl-6 pr-6">
-            <div className="is-inline-flex" style={{width: "100%"}}>
-                <div style={{flex: ".5"}}>
+            <div className="columns is-desktop" style={{width: "100%"}}>
+                <div className="column has-text-centered">
                     <p><strong className="has-text-grey-lighter">Me Contacter :</strong></p>
                     <ul>
                         <li><a rel="noreferrer" className="has-text-info" target="_blank" href="mailto://ewen.horville3@gmail.com">ewen.horville3@gmail.com</a></li>
                         <li className="has-text-grey-lighter">+33 6 59 18 31 92</li>
                     </ul>
                 </div>
-                <div className="content has-text-centered has-text-grey-lighter" style={{flex: "1"}}>
+                <div className="column content has-text-centered has-text-grey-lighter">
                     <p>Portfolio créé avec
                         <a rel="noreferrer" href="https://react.dev" target="_blank" className="has-text-info"> ReactJS </a>
                         et
@@ -20,7 +20,7 @@ class Footer extends Component {
                         <br/>
                         <a rel="noreferrer" href="https://github.com/The17thDoctor/portfolio" target="_blank" className="has-text-info">Code Source</a></p>
                 </div>
-                <div className="" style={{flex: ".5"}}>
+                <div className="column has-text-centered">
                     <p><strong className="has-text-grey-lighter">Liens :</strong></p>
                     <ul>
                         <li><a rel="noreferrer" href="https://github.com/The17thDoctor" target="_blank" className="has-text-info">Github</a></li>
diff --git a/src/Pages/Homepage/Homepage.js b/src/Pages/Homepage/Homepage.js
index 93e9d75..b94d9c0 100644
--- a/src/Pages/Homepage/Homepage.js
+++ b/src/Pages/Homepage/Homepage.js
@@ -8,14 +8,14 @@ export default function Homepage() {
     return <div>
         <div className="is-flex is-flex-direction-column" style={{height: "30em", overflow: "hidden"}}>
             <div className="blurred" style={{height: "inherit"}}>
-                <video className="crop" style={{height: "initial", margin: "auto"}} autoPlay={true} aria-disabled={true} loop="loop" muted={true}>
+                <video className="crop" style={{height: "initial", width: "100%", margin: "auto"}} autoPlay={true} aria-disabled={true} loop="loop" muted={true}>
                     <source src={video} type="video/mp4"/>
                 </video>
             </div>
             <div style={{position: "absolute", height: "30em", width: "100%"}}>
                 <h1 className="title is-1 has-text-white has-text-centered" style={{marginTop: "3.55em"}}>Ewen Horville</h1>
                 <p className="title is-2 has-text-centered has-text-white">
-                    Étudiant en informatique
+                    Étudiant Ingénieur en Informatique
                 </p>
             </div>
         </div>
@@ -47,7 +47,7 @@ export default function Homepage() {
         </div>
         <div className="tile is-ancestor is-white p-4 is-vertical">
             <div className="tile is-parent mr-auto ml-auto m-4">
-                <h1 className="title is-1">Réalisations</h1>
+                <h1 className="title is-1 has-text-centered">Réalisations</h1>
             </div>
             <div className="tile is-parent mr-auto ml-auto">
                 <div className="tile p-4 is-black"><ProjectCard index={0} project={projects[0]}/></div>
@@ -55,7 +55,7 @@ export default function Homepage() {
                 <div className="tile p-4 is-black"><ProjectCard index={2} project={projects[2]}/></div>
             </div>
             <div className="tile is-parent mr-auto ml-auto m-4">
-                <h1 className="title is-1">Travaux en cours</h1>
+                <h1 className="title is-1 has-text-centered">Projets en cours</h1>
             </div>
             <div className="tile is-parent mr-auto ml-auto">
                 <div className="tile p-4 is-black"><ProjectCard index={3} project={projects[3]}/></div>
diff --git a/src/Pages/Homepage/ProjectCard.js b/src/Pages/Homepage/ProjectCard.js
index df8fdab..8dd3c2d 100644
--- a/src/Pages/Homepage/ProjectCard.js
+++ b/src/Pages/Homepage/ProjectCard.js
@@ -10,10 +10,12 @@ class ProjectCard extends Component {
     }
 
     render() {
-        return <div className="card">
+        return <div className="card" style={{width: "100%", borderRadius: "10px", overflow: "clip"}}>
             <div className="card-image soft-shadow">
                 <figure className="image is-16by9">
-                    <img alt={this.props.project.title} src={this.props.project.thumbnail}/>
+                    <NavLink to={"projects/" + this.props.index} className="title has-text-link is-underlined is-4">
+                        <img alt={this.props.project.title} src={this.props.project.thumbnail}/>
+                    </NavLink>
                 </figure>
             </div>
             <div className="card-content">
