The17thDoctor/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive update (WIP)

Browse Source
This commit is contained in:
The17thDoctor 2025-03-10 16:58:46 +01:00
parent acb4308354
commit 13f8d66490
6 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -14,7 +14,7 @@
<title>Ewen Horville | Portfolio</title> <title>Ewen Horville | Portfolio</title>
<meta property="og:type" content="website"> <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"> <meta property="og:title" content="Ewen Horville | Portfolio">
</head> </head>
<body> <body>

4
src/App.css
View File

@ -34,3 +34,7 @@
max-height: .5em; max-height: .5em;
transition: max-height .15s; transition: max-height .15s;
} }
body, html {
min-width: 100px;
}

2
src/App.js
View File

@ -21,7 +21,7 @@ const router = createBrowserRouter([
function App() { function App() {
return ( 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/> <Navbar/>
<RouterProvider router={router} /> <RouterProvider router={router} />
<Footer/> <Footer/>

8
src/Components/Footer.js
View File

@ -4,15 +4,15 @@ class Footer extends Component {
render() { render() {
return <footer className="footer has-background-grey-darker pl-6 pr-6"> return <footer className="footer has-background-grey-darker pl-6 pr-6">
<div className="is-inline-flex" style={{width: "100%"}}> <div className="columns is-desktop" style={{width: "100%"}}>
<div style={{flex: ".5"}}> <div className="column has-text-centered">
<p><strong className="has-text-grey-lighter">Me Contacter :</strong></p> <p><strong className="has-text-grey-lighter">Me Contacter :</strong></p>
<ul> <ul>
<li><a rel="noreferrer" className="has-text-info" target="_blank" href="mailto://ewen.horville3@gmail.com">ewen.horville3@gmail.com</a></li> <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> <li className="has-text-grey-lighter">+33 6 59 18 31 92</li>
</ul> </ul>
</div> </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 <p>Portfolio créé avec
<a rel="noreferrer" href="https://react.dev" target="_blank" className="has-text-info"> ReactJS </a> <a rel="noreferrer" href="https://react.dev" target="_blank" className="has-text-info"> ReactJS </a>
et et
@ -20,7 +20,7 @@ class Footer extends Component {
<br/> <br/>
<a rel="noreferrer" href="https://github.com/The17thDoctor/portfolio" target="_blank" className="has-text-info">Code Source</a></p> <a rel="noreferrer" href="https://github.com/The17thDoctor/portfolio" target="_blank" className="has-text-info">Code Source</a></p>
</div> </div>
<div className="" style={{flex: ".5"}}> <div className="column has-text-centered">
<p><strong className="has-text-grey-lighter">Liens :</strong></p> <p><strong className="has-text-grey-lighter">Liens :</strong></p>
<ul> <ul>
<li><a rel="noreferrer" href="https://github.com/The17thDoctor" target="_blank" className="has-text-info">Github</a></li> <li><a rel="noreferrer" href="https://github.com/The17thDoctor" target="_blank" className="has-text-info">Github</a></li>

8
src/Pages/Homepage/Homepage.js
View File

@ -8,14 +8,14 @@ export default function Homepage() {
return <div> return <div>
<div className="is-flex is-flex-direction-column" style={{height: "30em", overflow: "hidden"}}> <div className="is-flex is-flex-direction-column" style={{height: "30em", overflow: "hidden"}}>
<div className="blurred" style={{height: "inherit"}}> <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"/> <source src={video} type="video/mp4"/>
</video> </video>
</div> </div>
<div style={{position: "absolute", height: "30em", width: "100%"}}> <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> <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"> <p className="title is-2 has-text-centered has-text-white">
Étudiant en informatique Étudiant Ingénieur en Informatique
</p> </p>
</div> </div>
</div> </div>
@ -47,7 +47,7 @@ export default function Homepage() {
</div> </div>
<div className="tile is-ancestor is-white p-4 is-vertical"> <div className="tile is-ancestor is-white p-4 is-vertical">
<div className="tile is-parent mr-auto ml-auto m-4"> <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>
<div className="tile is-parent mr-auto ml-auto"> <div className="tile is-parent mr-auto ml-auto">
<div className="tile p-4 is-black"><ProjectCard index={0} project={projects[0]}/></div> <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 className="tile p-4 is-black"><ProjectCard index={2} project={projects[2]}/></div>
</div> </div>
<div className="tile is-parent mr-auto ml-auto m-4"> <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>
<div className="tile is-parent mr-auto ml-auto"> <div className="tile is-parent mr-auto ml-auto">
<div className="tile p-4 is-black"><ProjectCard index={3} project={projects[3]}/></div> <div className="tile p-4 is-black"><ProjectCard index={3} project={projects[3]}/></div>

6
src/Pages/Homepage/ProjectCard.js
View File

@ -10,10 +10,12 @@ class ProjectCard extends Component {
} }
render() { render() {
return <div className="card"> return <div className="card" style={{width: "100%", borderRadius: "10px", overflow: "clip"}}>
<div className="card-image soft-shadow"> <div className="card-image soft-shadow">
<figure className="image is-16by9"> <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> </figure>
</div> </div>
<div className="card-content"> <div className="card-content">