diff --git a/public/index.html b/public/index.html index f4e03a173..435e023b9 100644 --- a/public/index.html +++ b/public/index.html @@ -5,12 +5,14 @@ + - React App + Karpa Dev diff --git a/src/App.jsx b/src/App.jsx index 9d5b44c1a..a36149f05 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,11 @@ +import About from "./components/about/About"; +import Intro from "./components/intro/Intro"; + const App = () => { - return
Hello world!
; + return
+ + +
; }; export default App; \ No newline at end of file diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx new file mode 100644 index 000000000..9427e8395 --- /dev/null +++ b/src/components/about/About.jsx @@ -0,0 +1,29 @@ +import "./about.css" +const About = () => { + return ( +
+
+
+
+ +
+
+
+

About Me

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veritatis quia, eligendi nam rerum veniam facere nemo officia consequuntur officiis vero, voluptates, dolor molestias cum. +

+

+ Lorem ipsum dolor sit, amet consectetur + adipisicing elit. Deserunt laborum expedita facilis exercitationem illum impedit accusantium quidem saepe accusamus adipisci explicabo, alias cupiditate asperiores placeat perferendis consectetur voluptates unde officiis. +

+
+ +
+
+ +
+ ) +} + +export default About diff --git a/src/components/about/about.css b/src/components/about/about.css new file mode 100644 index 000000000..eb66a318a --- /dev/null +++ b/src/components/about/about.css @@ -0,0 +1,39 @@ +.a { + height: 100vh; + display: flex; + align-items: center; +} + +.a-left { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + position: relative; + height: 100%; +} + +.a-right { + flex: 1 +} + +.a-card.bg { + position: absolute; + top: 50px; + left: 50px; + background-color: #333; +} + +.a-card { + width: 60%; + height: 70vh; + border-radius: 30px; + position: relative; + overflow: hidden; +} + +.a-img { + width: 100%; + height: 100%; + object-fit: cover; +} diff --git a/src/components/intro/Intro.jsx b/src/components/intro/Intro.jsx new file mode 100644 index 000000000..ca8ee49e3 --- /dev/null +++ b/src/components/intro/Intro.jsx @@ -0,0 +1,29 @@ +import "./intro.css" +import Me from "../../img/me.png" + +const Intro = () => { + return ( +
+
+
+

Hello, My name is

+

Pedro Karpinski Neto

+
+
+
Front-End Developer
+
UI/UX Designer
+
+
+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro cupiditate dolor a facilis similique accusamus animi tenetur delectus in. Excepturi voluptate doloremque, quam vero numquam nemo cumque tenetur dolore illo. +

+
+
+
+
+ {/* */} +
+
+ ) +} +export default Intro diff --git a/src/components/intro/intro.css b/src/components/intro/intro.css new file mode 100644 index 000000000..dc6339298 --- /dev/null +++ b/src/components/intro/intro.css @@ -0,0 +1,78 @@ +.i { + display: flex; + height: 100vh; +} + +.i-left { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.i-right { + flex: 1; + position: relative; +} + +.i-left-wrapper { + padding: 50px; + height: 50%; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +.i-intro { + font-size: 30px; + font-weight: 300; +} + +.i-name { + font-size: 50px; +} + +.i-title { + height: 50px; + overflow: hidden; +} + +.i-title-wrapper { + height: 100%; + animation: move 10s ease-in-out infinite alternate; +} + +@keyframes move { + 50%{ + transform: translateY(-50px); + } +} + +.i-title-item { + height: 50px; + font-size: 30px; + font-weight: bold; + color: #00C162; + display: flex; + align-items: center; +} + +/*.i-img { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + top: 10%; + right: 25%; +}*/ + +.i-bg { + clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); + background-color: #00C162; + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; +} + diff --git a/src/img/me.png b/src/img/me.png new file mode 100644 index 000000000..ecde387c3 Binary files /dev/null and b/src/img/me.png differ