From e530b18a5c01f89a6337ac3033542370dc7cc026 Mon Sep 17 00:00:00 2001 From: Romain Date: Sun, 14 Jun 2020 13:47:02 +0200 Subject: [PATCH] rough v1 --- components/Avatar.js | 12 +++ components/HorizontalSection.js | 16 ++++ components/Infos.js | 54 ++++++++++++ components/Layout.js | 29 +++++++ components/Presentation.js | 24 ++++++ components/Section.js | 14 +++ components/modules/Avatar.module.css | 19 ++++ .../modules/HorizontalSection.module.css | 6 ++ components/modules/Infos.module.css | 50 +++++++++++ components/modules/Layout.module.css | 18 ++++ components/modules/Presentation.module.css | 18 ++++ pages/index.js | 81 +++++++++++++++++- public/images/bongo.png | Bin 0 -> 2077 bytes styles/global.css | 41 +++++++-- 14 files changed, 374 insertions(+), 8 deletions(-) create mode 100644 components/Avatar.js create mode 100644 components/HorizontalSection.js create mode 100644 components/Infos.js create mode 100644 components/Layout.js create mode 100644 components/Presentation.js create mode 100644 components/Section.js create mode 100644 components/modules/Avatar.module.css create mode 100644 components/modules/HorizontalSection.module.css create mode 100644 components/modules/Infos.module.css create mode 100644 components/modules/Layout.module.css create mode 100644 components/modules/Presentation.module.css create mode 100644 public/images/bongo.png diff --git a/components/Avatar.js b/components/Avatar.js new file mode 100644 index 0000000..f1f679d --- /dev/null +++ b/components/Avatar.js @@ -0,0 +1,12 @@ +import React from "react"; +import styles from "./modules/Avatar.module.css"; + +export default function Avatar(props) { + return ( + The one and only bongo cat! + ); +} diff --git a/components/HorizontalSection.js b/components/HorizontalSection.js new file mode 100644 index 0000000..3340c8f --- /dev/null +++ b/components/HorizontalSection.js @@ -0,0 +1,16 @@ +import PropTypes from "prop-types"; +import React from "react"; +import styles from "./modules/HorizontalSection.module.css"; + +export default function HorizontalSection(props) { + return ( +
+
+ {props.children} +
+ ); +} + +HorizontalSection.propTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/components/Infos.js b/components/Infos.js new file mode 100644 index 0000000..fedaa86 --- /dev/null +++ b/components/Infos.js @@ -0,0 +1,54 @@ +import React from "react"; +import PropTypes from "prop-types"; +import styles from "./modules/Infos.module.css"; +import LocationIcon from "../public/icons/location.svg"; +import GithubIcon from "../public/icons/github.svg"; +import LinkedinIcon from "../public/icons/linkedin.svg"; +import MailIcon from "../public/icons/mail.svg"; + +export default function Infos(props) { + const infos = props.infos; + return ( +
+ {"{"} + + + {infos.location.value} + + + + {infos.github.value} + + + + {infos.linkedin.value} + + + + {infos.email.value} + + {"}"} +
+ ); +} + +Infos.propTypes = { + infos: PropTypes.PropTypes.object.isRequired, +}; diff --git a/components/Layout.js b/components/Layout.js new file mode 100644 index 0000000..9dc274f --- /dev/null +++ b/components/Layout.js @@ -0,0 +1,29 @@ +import React from "react"; +import PropTypes from "prop-types"; +import styles from "./modules/Layout.module.css"; + +export default function Layout(props) { + const childrenArray = React.Children.toArray(props.children); + let gridItems = []; + let otherChild = []; + for (let i in childrenArray) { + if (i <= 1) { + gridItems.push(childrenArray[i]); + } else { + otherChild.push(childrenArray[i]); + } + } + return ( +
+
{gridItems[0]}
+
+ {gridItems[1]} +
+ {otherChild} +
+ ); +} + +Layout.propTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/components/Presentation.js b/components/Presentation.js new file mode 100644 index 0000000..78a5b07 --- /dev/null +++ b/components/Presentation.js @@ -0,0 +1,24 @@ +import React from "react"; +import PropTypes from "prop-types"; +import styles from "./modules/Presentation.module.css"; + +const propTypes = {}; + +const defaultProps = {}; + +export default function Presentation(props) { + return ( +
+

{props.firstName}

+

{props.lastName}

+

// {props.description}

+
+ ); +} + +Presentation.propTypes = { + firstName: PropTypes.string.isRequired, + lastName: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, +}; +Presentation.defaultProps = defaultProps; diff --git a/components/Section.js b/components/Section.js new file mode 100644 index 0000000..6177fde --- /dev/null +++ b/components/Section.js @@ -0,0 +1,14 @@ +import PropTypes from "prop-types"; +import React from "react"; + +export default function Section(props) { + return ( +
+ {props.children} +
+ ); +} + +Section.propTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/components/modules/Avatar.module.css b/components/modules/Avatar.module.css new file mode 100644 index 0000000..6a7365c --- /dev/null +++ b/components/modules/Avatar.module.css @@ -0,0 +1,19 @@ +.bordered { + border: 6px solid var(--dark); + border-radius: 16px; +} + +.absolute { + position: absolute; + + max-width: 256px; + max-height: 256px; + top: calc(50vh - 128px); + left: calc(50vw - 128px); +} + +@media screen and (max-width: 1440px) { + .absolute { + display: none; + } +} diff --git a/components/modules/HorizontalSection.module.css b/components/modules/HorizontalSection.module.css new file mode 100644 index 0000000..38afdfb --- /dev/null +++ b/components/modules/HorizontalSection.module.css @@ -0,0 +1,6 @@ +.bg { + position: absolute; + width: 100%; + height: 50vh; + background-color: var(--lightDark); +} diff --git a/components/modules/Infos.module.css b/components/modules/Infos.module.css new file mode 100644 index 0000000..2b4cd30 --- /dev/null +++ b/components/modules/Infos.module.css @@ -0,0 +1,50 @@ +.container { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +.row { + display: flex; + align-items: center; + margin: 1rem 0 1rem 0.75rem; + + transform: translateY(0); + transition: transform 0.3s ease; +} + +.row:hover { + transform: translateY(-15%); +} + +.icon { + width: 1.25rem; + height: 1.25rem; + margin-right: 1rem; +} + +.row b:hover { + transition: color 0.3s ease; +} + +.bracket, +.email .icon, +.email b:hover { + color: var(--primary); +} + +.github .icon, +.github b:hover { + color: var(--tertiary); +} + +.linkedin .icon, +.linkedin b:hover { + color: var(--quaternary); +} + +.location .icon, +.location b:hover { + color: var(--secondary); +} diff --git a/components/modules/Layout.module.css b/components/modules/Layout.module.css new file mode 100644 index 0000000..31f541d --- /dev/null +++ b/components/modules/Layout.module.css @@ -0,0 +1,18 @@ +.grid { + position: relative; + display: grid; + width: 100%; + height: inherit; + grid-template-columns: 1fr 1fr; +} + +.gridItem { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.darkbg { + background-color: var(--lightDark); +} diff --git a/components/modules/Presentation.module.css b/components/modules/Presentation.module.css new file mode 100644 index 0000000..c5a71d0 --- /dev/null +++ b/components/modules/Presentation.module.css @@ -0,0 +1,18 @@ +.container { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +.firstName { + color: var(--primary); +} + +.lastName { + color: var(--secondary); +} + +.description { + color: var(--tertiary); +} diff --git a/pages/index.js b/pages/index.js index 72fc70d..03afa48 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,12 +1,91 @@ import Head from "next/head"; +import Layout from "../components/Layout"; +import Section from "../components/Section"; +import Presentation from "../components/Presentation"; +import Infos from "../components/Infos"; +import Avatar from "../components/Avatar"; +import HorizontalSection from "../components/HorizontalSection"; -export default function Home() { +export default function Home({ person, caseStudies }) { return (
Create Next App + +
+ + + + + +
+ + +
Lol
+
); } + +export async function getStaticProps() { + const person = { + firstName: "Tanguy", + lastName: "Herbron", + description: "Full Stack Developer", + infos: { + location: { + value: "Copenhagen, Denmark", + link: "https://www.visitcopenhagen.com/", + }, + github: { + value: "/TanguyHerbron", + link: "https://github.com/TanguyHerbron", + }, + linkedin: { + value: "Tanguy Herbron", + link: "https://linkedin.com/in/tanguy-herbron-5a3772150", + }, + email: { + value: "tanguy.herbron@outlook.com", + link: "mailto:tanguy.herbron@outlook.com", + }, + }, + }; + + const caseStudies = [ + { + title: "Moodle", + short_description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", + date: "June 12, 2020", + cover: "/public/images/bongo.svg", + }, + { + title: "Doodle", + short_description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", + date: "June 12, 2020", + cover: "/public/images/bongo.svg", + }, + { + title: "Poodle", + short_description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", + date: "June 12, 2020", + cover: "/public/images/bongo.svg", + }, + ]; + + return { + props: { + person: person, + caseStudies: caseStudies, + }, + }; +} diff --git a/public/images/bongo.png b/public/images/bongo.png new file mode 100644 index 0000000000000000000000000000000000000000..0462fe1a052d19b05f8d12ccb002f1c28c3085cf GIT binary patch literal 2077 zcma)7`#;kQ7+!aCzb7qDR3w)u>0%BxGWXitOUPKEQ$#6kVq_$j$-ySHax23UQekq- z%>6RWlr7TCb&ZDOdz}B^yr0keKF{a*Jns+B`^!skbv`d6sV)fufn*SN@QYhG`Cm)y z*qY!lExRosx;mn4007vc0Igmu7K=n89*?)azP`A)NTpKwd_J8{XR%mTR#tdCp2=jk zwY3=<8v6VD0~K#bB+~iw=WA+eWMySB7>tXH%h97pZ``CzhS`gL^-=1Dqo)zbdCDScT+=4Dz*^?Y?!T>Mmo%!YM) zrt_?Z6Btqz`)Ki{0L#^1^R(3df|-Ctr&57Wuv)O0lo(fn$;#I@nHmyoJ>moc^# z=CateYqCGk$+d}Jl(nOl!Wr7Z+R#^{o{`O+;jhVuYZSlPCNN; z?Dp(Fh0!ZH9}NR`Zc-vT``aq@d@cU}Jd zL~|{jDoi$}?o6Gqv>EAH*%NeU0_IbO(^LsNaJzgj#tneiCUrb336>M5lMkxUrrY!` z{)WfXy4NQtCbHL2?q}mJdSs&1hh++M5glH8It^NX)w1g%L=Log+EY8qCS~2yHnP*Y zas2Bb?UB{-E6fk@Zjzap3XS){04w7eH|dzNacmu1&M4O*rr_~EG@pEM-%s-%!#a|3SDh@8N=6&(X9NsD z-1zuv-fNEMr2g}PvndGePo?eGk>U-^*6Ht!I>^T(x`--XK-2~3Sjyn!;@NE=)+_r?q^Fs&Hi zegeIViR!Jttwc6B!ab&B_HvghwetJbHg*77hpeHrIGa#c9pD$qIh4s@<7%AMh?)%h zF9SNA`ffdcX9X3t%{4Ri7Ca$+-@^uLzf z9Y1Oj43qGg4obe7rMYqYohSimotypJHZ;TwyOY7OD!yqZDxLL(fP1;6o(5&{?caN3 zpRPB$$`<#p8Zr1sMfDwo)SKIe!yzZIJe*|3yX*mXS_9s9-`L)Pa!1FI<9?>-AP=d_ zudgqeh0muD9HghAi6`9E(i^4n9Z2l`nJLKb0ctHox;O|XcWk$F;#zEAX=CM27bCj@ z9|Qrb;`5kJJUuJAA~&O)<|fy_%4_q3y42n32geC$;lX*MuJ=FgM+;pu&%?Zg$F40Y zo(fc)mmWklIVHH%ez>#Ue6(@l{@^a6@moJuj|!+HYU~FrdvKv_EUbOleq+<&*31C% zLq7Zgi@qkw;U12$)M@zo{J;SI@`P}2g`Qx~?drwN{8yJaL$+u|zGI6`&DGZJg)8l} z7HBcaTq9$(!>ppb!GiMojO1u!L!KqZ8<)DDlb$*?LIJmsAE>a-4EipkSPf#lp|Dp4-CEuogv4g{7{+(^`=mv*qe??i8_bBmiAB zm#EVG;#+&T`gZ1|if_&^**SG?{&9(sq1?~9iNDfAb~Rb3Uif~m_Bf89J&_tQ(|QD< z%hhy9n6(OwhFT~~Q+pp&+EjVaRZX&ZDZ@od9rOGLET_ia?Om?~+F+8A{$Yu0q1|@Y zvsl@MePG@%BTNRq!$Z~Kruw;80Vo?qhfaMaZbUJ33A?7@!1{eA;ICUT*i)aE;UqXT zLnlA#J&9nN^euO5bCdPy(RU_O_&8{~)R{LN`5ym3 zTWal7s;sT`$P1cZvMM>qR)NOPCM*R*JB@a&S6~lb*q!L-?-X^G>-NG#3)dI1F_2;5 lYfX+M01~JF&zl2*bOBJgfpcDNbO`Ui1%!<=oNDbC_b))L1)Tr@ literal 0 HcmV?d00001 diff --git a/styles/global.css b/styles/global.css index e0c7603..99470d6 100644 --- a/styles/global.css +++ b/styles/global.css @@ -23,6 +23,7 @@ box-sizing: border-box; } +html, body { background: var(--dark); color: var(--light); @@ -30,16 +31,42 @@ body { } .wrapper { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + position: relative; + height: 100vh; } h1 { margin: 0; - line-height: 1.15; + font-weight: 900; + line-height: 1.35; font-size: 4rem; + letter-spacing: 0.02em; +} + +h3 { + margin-top: 1rem; + font-weight: 600; + line-height: 1.35; + font-size: 1.5rem; + letter-spacing: 0.02em; +} + +a, +p { + font-style: normal; + font-size: 1em; + color: var(--light); +} + +a, +a:hover, +a:visited { + text-decoration: none; + color: none; +} + +img { + width: 100%; + height: 100%; + object-fit: cover; }