Skip to content

Commit

Permalink
feat: add responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@louisgrasset
louisgrasset committed Feb 22, 2022
1 parent 5acc68c commit 29086c6
Show file tree
Hide file tree
Showing 16 changed files with 355 additions and 90 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<link rel="icon" href="/images/favicon.webp" type="image/webp">
<title>Pierre Pernigotto</title>
</head>
Expand Down
Binary file modified public/images/profile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/components/Arrow/Arrow.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use '../../styles/breakpoints';
@use '../../styles/colors';

.arrow {
Expand All @@ -11,6 +12,9 @@
z-index: 2;
cursor: pointer;

@media screen and (max-width: breakpoints.$md) {
top: calc(100% + 1.7rem);
}

&--left {
left: 5px;
Expand Down
108 changes: 105 additions & 3 deletions src/components/Navigation/Navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,127 @@
@use '../../styles/breakpoints';

.navigation {
$nav: &;

@include mixins.section;

display: flex;
justify-content: space-between;
padding: 4rem 0;
font-size: 2rem;
&-logo {
&__logo {
font-weight: 600;
span {
color: colors.$secondary;
}
}
&-list {
&__toggle {
display: none;
padding: .7rem 1rem;
text-transform: uppercase;
letter-spacing: .15rem;
background-color: colors.$teal;
color: colors.$white;
font-weight: 600;
appearance: none;
border: 0;
cursor: pointer;
border-radius: .3rem;
@media screen and (max-width: breakpoints.$xl) {
display: block;
}
}

&__wrapper {

@media screen and (max-width: breakpoints.$xl) {
display: none;
background-color: colors.$primary;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99;
overscroll-behavior: contain;

#{$nav} {
box-sizing: border-box;
&__list {
margin-top: 5rem;
flex-direction: column;
&::before {
content: 'Menu';
color: colors.$teal;
position: absolute;
right: -1rem;
font-size: 20rem;
opacity: 0.05;
font-weight: 800;
text-transform: uppercase;
writing-mode: vertical-rl;
text-orientation: mixed;
}
&-item {
padding: 2rem 0;
margin: 0 5rem;
font-size: 5rem;
font-weight: 700;
color: colors.$white;
&:hover::after {
display: none;
}
}
}
}
}
@media screen and (max-width: breakpoints.$sm) {
#{$nav} {
&__list {
&-item {
font-size: 3rem;
}
}
}
}
}
&--active {
#{$nav} {
&__toggle {
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
appearance: none;
width: 100%;
font-size: 2rem;
font-weight: 700;
border: 0;
padding: .7rem;
background-color: rgba(colors.$teal, 60%);
text-transform: uppercase;
color: colors.$primary;
}
&__wrapper {
@media screen and (max-width: breakpoints.$xl) {
display: block;
}
}
}
}

&__list {
font-weight: 500;
display: flex;
column-gap: 4rem;
margin: 0;
padding: 0;
list-style: none;
&__item {
max-height: calc(100% - 5rem);
overflow-y: auto;
overscroll-behavior: contain;

&-item {
display: inline-block;
position: relative;
cursor: pointer;
Expand Down
130 changes: 72 additions & 58 deletions src/components/Navigation/Navigation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,80 @@
import "./Navigation.scss";
import { Link as Link } from "react-scroll";
import { useState } from 'react';

export function Navigation () {
const [toggle, setToggle] = useState(false);

return (
<nav className="navigation">
<a className="navigation-logo" href="./">PierrePernigotto<span>.fr</span></a>
<ul className="navigation-list">
<li className="navigation-list__item">
<Link
to="experiences"
smooth={true}
duration={500}
offset={- 50}>
Experiences Professionnelles
</Link>
</li>
<li className="navigation-list__item">
<Link
to="formation"
smooth={true}
duration={500}
offset={- 50}>
Formation &amp; Alternance
</Link>
</li>
<li className="navigation-list__item">
<Link
to="competences"
smooth={true}
duration={500}
offset={- 50}>
Compétences
</Link>
</li>
<li className="navigation-list__item">
<Link
to="projets"
smooth={true}
duration={500}
offset={- 50}>
Projets
</Link>
</li>
<li className="navigation-list__item">
<Link
to="entrepreunariat"
smooth={true}
duration={500}
offset={- 50}>
Entrepreunariat
</Link>
</li>
<li className="navigation-list__item">
<Link
to="contact"
smooth={true}
duration={500}
offset={- 50}>
Contact
</Link>
</li>
</ul>
<nav className={"navigation" + (toggle ? " navigation--active" : "")}>
<a className="navigation__logo" href="./">PierrePernigotto<span>.fr</span></a>
<button className="navigation__toggle" onClick={()=> setToggle(!toggle)}>
{toggle ? "Fermer" : "Menu" }
</button>
<div className="navigation__wrapper">
<ul className="navigation__list">
<li className="navigation__list-item">
<Link
onClick={()=> setToggle(false)}
to="experiences"
smooth={true}
duration={500}
offset={- 50}>
Experiences Professionnelles
</Link>
</li>
<li className="navigation__list-item">
<Link
onClick={()=> setToggle(false)}
to="formation"
smooth={true}
duration={500}
offset={- 50}>
Formation &amp; Alternance
</Link>
</li>
<li className="navigation__list-item">
<Link
onClick={()=> setToggle(false)}
to="competences"
smooth={true}
duration={500}
offset={- 50}>
Compétences
</Link>
</li>
<li className="navigation__list-item">
<Link
onClick={()=> setToggle(false)}
to="projets"
smooth={true}
duration={500}
offset={- 50}>
Projets
</Link>
</li>
<li className="navigation__list-item">
<Link
onClick={()=> setToggle(false)}
to="entrepreunariat"
smooth={true}
duration={500}
offset={- 50}>
Entrepreunariat
</Link>
</li>
<li className="navigation__list-item">
<Link
onClick={()=> setToggle(false)}
to="contact"
smooth={true}
duration={500}
offset={- 50}>
Contact
</Link>
</li>
</ul>
</div>
</nav>
)
}
1 change: 1 addition & 0 deletions src/components/Profile/Profile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
position: relative;
svg {
width: 100%;
height: 100%;
}
}
4 changes: 2 additions & 2 deletions src/components/Profile/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ export function Profile () {
<path fillRule="evenodd" clipRule="evenodd" d="M396 0H5V298.888C1.72643 314.215 0 330.148 0 346.5C0 467.174 94.0202 565 210 565C325.98 565 420 467.174 420 346.5C420 309.849 411.327 275.305 396 244.97V0Z" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0_6_647)">
<rect x="-67" y="11" width="554" height="554" fill="url(#pattern0)"/>
<rect x="-67" y="11" width="554" height="561" fill="url(#pattern0)"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlinkHref="#profile-image" transform="scale(0.000477555)"/>
<use xlinkHref="#profile-image" transform="translate(0.12 0.154)scale(0.00075)"/>
</pattern>
<image id="profile-image" xlinkHref="/images/profile.png"/>
</defs>
Expand Down
5 changes: 5 additions & 0 deletions src/components/Slider/Slider.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use '../../styles/breakpoints';
@use '../../styles/colors';

.slider {
Expand Down Expand Up @@ -27,6 +28,10 @@
&__slide {
padding: 4rem;
box-sizing: border-box;
@media screen and (max-width: breakpoints.$md) {
padding: 1rem;
}

}
}

Expand Down
17 changes: 11 additions & 6 deletions src/sections/Contact/Contact.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
@use '../../styles/mixins';
@use '../../styles/breakpoints';
@use '../../styles/colors';
@use '../../styles/mixins';

.section-contact {
background-color: colors.$primary;
border-top: 1rem solid colors.$teal;
position: relative;
overflow-y: hidden;
margin-top: 10rem;

&__wrapper {
@include mixins.section;
Expand All @@ -16,6 +16,10 @@
flex-direction: row;
justify-content: space-between;

@media screen and (max-width: breakpoints.$md) {
flex-direction: column;
}

.header {
color: colors.$white;
z-index: 2;
Expand All @@ -29,17 +33,18 @@
width: 60rem;
left: -30rem;
position: absolute;
top: -17rem;
svg {
height: 100%;
}
top: -12rem;
}

&__form {
$form: &;
position: relative;
z-index: 2;
align-self: center;

@media screen and (max-width: breakpoints.$xl) {
justify-self: center;
}
&-item {
width: 100%;
position: relative;
Expand Down
3 changes: 1 addition & 2 deletions src/sections/Experiences/Experiences.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@

.section-experiences {
@include mixins.section;
padding-top: 10rem;
padding-bottom: 10rem;

&__wrapper {
display: flex;
flex-wrap: wrap;
column-gap: 12rem;
}

Expand Down
Loading

0 comments on commit 29086c6

Please sign in to comment.