From ba7f9a4b0555277ccffb967174c3e7d78f17a93e Mon Sep 17 00:00:00 2001 From: Ulrich <60409730+Ulrich15@users.noreply.github.com> Date: Thu, 7 Apr 2022 09:03:18 +0100 Subject: [PATCH 1/4] Create ReadMe.txt --- README.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..d6f8182 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# Portfolio +Ici j'implémente un portefolio avec React From cfc4b79f22e580854913400d6d0934e215054fb2 Mon Sep 17 00:00:00 2001 From: Mbouna_Ulrich Date: Wed, 27 Apr 2022 07:02:43 +0100 Subject: [PATCH 2/4] =?UTF-8?q?Mise=20en=20place=20de=20la=20page=20d'accu?= =?UTF-8?q?eil=20(nono=20termin=C3=A9e)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 13 ++----- src/components/AnimatedLetters/Index.jsx | 15 ++++++++ src/components/AnimatedLetters/Index.scss | 22 ++++++++++++ src/components/Home/index.jsx | 43 ++++++++++++++++++----- src/components/Home/index.scss | 22 ++++++++++++ src/components/Logo/index.css | 0 src/components/Logo/index.js | 5 +++ tailwind.config.js | 2 +- 8 files changed, 102 insertions(+), 20 deletions(-) create mode 100644 src/components/AnimatedLetters/Index.jsx create mode 100644 src/components/AnimatedLetters/Index.scss create mode 100644 src/components/Home/index.scss create mode 100644 src/components/Logo/index.css create mode 100644 src/components/Logo/index.js diff --git a/src/App.css b/src/App.css index 0446e55..95ce60e 100644 --- a/src/App.css +++ b/src/App.css @@ -1,8 +1,9 @@ +@import 'animate.css'; + @tailwind base; @tailwind components; @tailwind utilities; - body { font-family: 300 11px/1.4 'Helvetica Neue', 'sans-serif'; -webkit-font-smoothing: antialiased; @@ -55,16 +56,6 @@ body { .text-zone { transform: translateY(-50%) } -.text-zone h1 { - animation: fadeIn 1s 1.7s backwards; -} -.text-zone h1 img { - width: 32px; - margin-left: 20px; - height: auto; - animation: rotateIn 1s linear both; - animation-delay: 1.4s; -} .text-zone{ animation: fadeIn 1s 1.8s backwards; } \ No newline at end of file diff --git a/src/components/AnimatedLetters/Index.jsx b/src/components/AnimatedLetters/Index.jsx new file mode 100644 index 0000000..9b2f477 --- /dev/null +++ b/src/components/AnimatedLetters/Index.jsx @@ -0,0 +1,15 @@ +import './Index.scss'; + +const AnimatedLetters = ({letterClass, strArray, idx}) => { + return ( + + { + strArray.map((char,i) => ( + {char} + )) + } + + ) +} + +export default AnimatedLetters; \ No newline at end of file diff --git a/src/components/AnimatedLetters/Index.scss b/src/components/AnimatedLetters/Index.scss new file mode 100644 index 0000000..e1ee84b --- /dev/null +++ b/src/components/AnimatedLetters/Index.scss @@ -0,0 +1,22 @@ +.text-animate { + display: inline-block; + opacity:0; + animation: bounceIn 1s 1s; + animation-fill-mode: forwards; + min-width: 10px; +} +.text-animate-hover { + min-width: 10px; + display: inline-block; + animation-fill-mode: both; + + &:hover { + animation: rubberBand 1s; + color: #ffd700; + } +} +@for $i from 1 through 35 { + .text-animate._#{$i} { + animation-delay: calc($i / 10)s; + } +} \ No newline at end of file diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index 3f6bcf1..3dd8fc7 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -1,24 +1,51 @@ import LogoTitle from '../../assets/images/logo-s.png'; -import { Link } from 'react-router-dom' +import Logo from ".././Logo"; +import { Link } from 'react-router-dom'; +import AnimatedLetters from '../AnimatedLetters'; +import {useEffect, useState } from 'react'; +import './Index.scss'; +import '../AnimatedLetters/Index.scss'; const Home = () => { - return ( -
-

Hi,
I'm + after:content-['

'] after:font-labelleaurore after:text-[#ffd700] after:text-[18px] after:absolute after:mt-[18px] after:ml-5 after:opacity:60"> + H + i, +
+ I + 'm developper - lobodan +
- web developer +

Frontend Developer / Javascript Expert / Youtuber

- CONTACT ME + CONTACT ME +
+
) }; diff --git a/src/components/Home/index.scss b/src/components/Home/index.scss new file mode 100644 index 0000000..5562b74 --- /dev/null +++ b/src/components/Home/index.scss @@ -0,0 +1,22 @@ +.home-page { + h1 { + &::after { + animation: fadeIn 1s 1.7s linear backwards; + } + + img { + width: 32px; + opacity:0; + margin-left: 20px; + height: auto; + animation: rotateIn 1s linear both; + animation-delay: 1.4s; + } + } + h2 { + animation: fadeIn 1s 1.8s backwards; + } + .flat-button { + animation: fadeIn 1s 1.8s backwards; + } +} \ No newline at end of file diff --git a/src/components/Logo/index.css b/src/components/Logo/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js new file mode 100644 index 0000000..4bc9ff1 --- /dev/null +++ b/src/components/Logo/index.js @@ -0,0 +1,5 @@ +import "./index.css"; + +const Logo = () => ('Hello'); + +export default Logo; \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 9e2e2e9..878c89d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { theme: { extend: { colors: { - primary: '#ffd700' + 'yellow_': '#ffd700' }, fontFamily: { helveticaneue: ['Helvetica Neue'], From dae528de49a26c67aee53d73e087ad11cad40147 Mon Sep 17 00:00:00 2001 From: Mbouna_Ulrich Date: Fri, 29 Apr 2022 08:47:51 +0100 Subject: [PATCH 3/4] =?UTF-8?q?Mise=20en=20place=20de=20la=20page=20About?= =?UTF-8?q?=20(non=20termin=C3=A9e)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 24 ++++ src/App.jsx | 3 + src/components/About/index.jsx | 77 +++++++++++ src/components/About/index.scss | 148 ++++++++++++++++++++++ src/components/AnimatedLetters/Index.scss | 2 +- src/components/Home/Logo/index.jsx | 65 ++++++++++ src/components/Home/Logo/index.scss | 37 ++++++ src/components/Home/index.jsx | 8 +- src/components/Logo/index.css | 0 src/components/Logo/index.js | 5 - src/components/Sidebar/index.jsx | 2 +- 11 files changed, 362 insertions(+), 9 deletions(-) create mode 100644 src/components/About/index.jsx create mode 100644 src/components/About/index.scss create mode 100644 src/components/Home/Logo/index.jsx create mode 100644 src/components/Home/Logo/index.scss delete mode 100644 src/components/Logo/index.css delete mode 100644 src/components/Logo/index.js diff --git a/src/App.css b/src/App.css index 95ce60e..ffba421 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,6 @@ @import 'animate.css'; + @tailwind base; @tailwind components; @tailwind utilities; @@ -49,6 +50,14 @@ body { font-labelleaurore } .container { + width: 100%; + will-change: contents; + height: 90%; + min-height: 566px; + opacity: 0; + top: 5%; + margin: 0 auto; + z-index: 1; transform-style: preserve-3d; animation: fadeIn 1s forwards; animation-delay: 1s; @@ -58,4 +67,19 @@ body { } .text-zone{ animation: fadeIn 1s 1.8s backwards; +} + +.loader-active { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + margin: auto; + width: 50px; + height: 50px; + animation: fadeOut 1s 1s; + animation-fill-mode: forwards; + color: #ffd700 !important; } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 27506ed..4e05f35 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,6 +3,8 @@ import React from "react"; import { Routes, Route } from 'react-router'; import Layout from './components/Layout'; import Home from './components/Home'; +import About from './components/About' + function App() { return ( @@ -10,6 +12,7 @@ function App() { }> } /> + } /> diff --git a/src/components/About/index.jsx b/src/components/About/index.jsx new file mode 100644 index 0000000..5c35877 --- /dev/null +++ b/src/components/About/index.jsx @@ -0,0 +1,77 @@ +import './index.scss' +import AnimatedLetters from '../AnimatedLetters' +import { useState, useEffect } from 'react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import Loader from 'react-loaders' +import { + faAngular, + faCss3, + faGitAlt, + faHtml5, + faJsSquare, + faReact, +} from '@fortawesome/free-brands-svg-icons' +const About = () => { + const [letterClass, setLetterClass] = useState('text-animate') + + useEffect(() => { + return setTimeout(() => { + setLetterClass('text-animate-hover') + }, 3000) + }) + + return ( + <> +
+
+

+ +

+

+ I'm very ambitious front-end developer looking for a role in + established IT company with the opportunity to work with the latest + technologies on challenging and diverse projects. +

+

+ I'm quietly confident, naturally curious, and perpetually working on + improving my chops one design problem at a time. +

+

+ If I need to define myself in one sentence that would be a family + person, father of a beautiful daughter, a sports fanatic, photography + enthusiast, and tech-obsessed!!! +

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + + ) +} + +export default About diff --git a/src/components/About/index.scss b/src/components/About/index.scss new file mode 100644 index 0000000..9a234a8 --- /dev/null +++ b/src/components/About/index.scss @@ -0,0 +1,148 @@ +@import 'loaders.css/src/animations/pacman.scss'; +.about-page { + .text-zone { + position: absolute; + left: 10%; + top:50%; + width:35%; + vertical-align: middle; + display: table-cell; + transform: translateY(-50%); + max-height: 90%; + + h1 { + font-size: 53px; + font-family: 'Coolvetica'; + color: #ffd700; + font-weight: 400; + margin-top:0; + position: relative; + margin-bottom: 40px; + left: 10px; + + &::before { + content: '

'; + font-family: 'La Belle Aurore'; + font-size: 18px; + position: absolute; + margin-top: -10px; + left: -10px; + opacity: 0.6; + line-height: 18px; + } + + &::after { + content: '

'; + font-family: 'La Belle Aurore'; + font-size: 18px; + position: absolute; + bottom: -20px; + margin-left: 20px; + left: -30px; + opacity: 0.6; + line-height: 18px; + + } + } + + p { + font-size: 13px; + color: #fff; + font-family: sans-serif; + font-weight: 300; + min-width: fit-content; + animation: pulse 1s; + + &:nth-of-type(1) { + animation-delay: 1.1s; + } + &:nth-of-type(2) { + animation-delay: 1.2s; + } + &:nth-of-type(3) { + animation-delay: 1.3s; + } + } + } +} + +.text-animate-hover { + &:hover { + color: #fff; + } +} + +.stage-cube-cont { + width: 50%; + height: 100%; + top: 0; + padding-top: 18%; + margin-left: 0; + position: absolute; + right: 0; + overflow: hidden; + +} + +.cubespinner { + animation: spincube; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-duration: 12s; + transform-style: preserve-3d; + transform-origin: 100px 100px 0; + margin-left: calc(50% - 100px); + + div { + position: absolute; + width: 200px; + height: 200px; + border: 1px solid #ccc; + background: rgba(255,255,255,0.4); + font-size: 100px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 0 20px 0px lightyellow; + } + .face1 { + transform: translateZ(100px); + } + .face2 { + transform: rotateY(90deg) translateZ(100px); + } + .face3 { + transform: rotateY(90deg) rotateX(90deg) translateZ(100px); + } + .face4 { + transform: rotateY(180deg) rotateZ(90deg) translateZ(100px); + } + .face5 { + transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px); + } + .face6 { + transform: rotateX(-90deg) translateZ(100px); + } +} + +@keyframes spincube { + from, + to { + transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) + } + 16% { + transform: rotateY(-90deg); + } + 33% { + transform: rotateY(-90deg) rotateZ(90deg) + } + 50% { + transform: rotateY(-180deg) rotateZ(90deg) + } + 66% { + transform: rotateY(-270deg) rotateZ(90deg) + } + 83% { + transform: rotateX(90deg) + } +} diff --git a/src/components/AnimatedLetters/Index.scss b/src/components/AnimatedLetters/Index.scss index e1ee84b..646ad8c 100644 --- a/src/components/AnimatedLetters/Index.scss +++ b/src/components/AnimatedLetters/Index.scss @@ -17,6 +17,6 @@ } @for $i from 1 through 35 { .text-animate._#{$i} { - animation-delay: calc($i / 10)s; + animation-delay: #{$i / 10}s; } } \ No newline at end of file diff --git a/src/components/Home/Logo/index.jsx b/src/components/Home/Logo/index.jsx new file mode 100644 index 0000000..31b610b --- /dev/null +++ b/src/components/Home/Logo/index.jsx @@ -0,0 +1,65 @@ +import './index.scss' +import LogoS from '../../../assets/images/logo-s.png' +import { useRef } from 'react' +import { useEffect } from 'react' +import { gsap } from 'gsap-trial' +import { DrawSVGPlugin } from 'gsap-trial/DrawSVGPlugin' + +const Logo = () => { + const bgRef = useRef() + const outlineLogoRef = useRef() + const solidLogoRef = useRef() + + useEffect(() => { + gsap.registerPlugin(DrawSVGPlugin) + + gsap + .timeline() + .to(bgRef.current, { + duration: 1, + opacity: 1, + }) + .from(outlineLogoRef.current, { + drawSVG: 0, + duration: 20, + }) + + gsap.fromTo( + solidLogoRef.current, + { + opacity: 0, + }, + { + opacity: 1, + delay: 4, + duration: 4, + } + ) + }) + + return ( +
+ S + + + + + +
+ ) +} + +export default Logo diff --git a/src/components/Home/Logo/index.scss b/src/components/Home/Logo/index.scss new file mode 100644 index 0000000..81f0787 --- /dev/null +++ b/src/components/Home/Logo/index.scss @@ -0,0 +1,37 @@ +.logo-container { + z-index: 0; + width: 400px; + height: 609px; + position: absolute; + top: 0; + right: 15%; + bottom: 0; + left: auto; + margin: auto; + opacity: 0; + + svg { + width: 100%; + height: auto; + bottom: 0; + transform: rotateZ(30deg) !important; + } + + .solid-logo { + position: absolute; + top: auto; + right: auto; + bottom: auto; + left: 0; + margin: auto; + opacity: 0; + width: 100%; + transform: rotateZ(30deg); + z-index: 1; + } + + .svg-container { + stroke: #ffd700; + stroke-width: 10px; + } +} diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index 3dd8fc7..664c908 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -1,8 +1,9 @@ import LogoTitle from '../../assets/images/logo-s.png'; -import Logo from ".././Logo"; +import Logo from "./Logo"; import { Link } from 'react-router-dom'; import AnimatedLetters from '../AnimatedLetters'; import {useEffect, useState } from 'react'; +import Loader from 'react-loaders'; import './Index.scss'; import '../AnimatedLetters/Index.scss'; @@ -19,7 +20,8 @@ useEffect(() => { }, []) return ( -
@@ -47,6 +49,8 @@ return (
+ + ) }; diff --git a/src/components/Logo/index.css b/src/components/Logo/index.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js deleted file mode 100644 index 4bc9ff1..0000000 --- a/src/components/Logo/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import "./index.css"; - -const Logo = () => ('Hello'); - -export default Logo; \ No newline at end of file diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index 1c3d035..a880a49 100644 --- a/src/components/Sidebar/index.jsx +++ b/src/components/Sidebar/index.jsx @@ -15,7 +15,7 @@ const Sidebar = () => ( className="block my-2 mx-auto h-auto w-[50px]" /> -