Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

commit #46

Open
wants to merge 1 commit into
base: react-mini
Choose a base branch
from
Open

commit #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-react-app" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
font-family: 'Roboto', sans-serif;
}
</style>
<title>React App</title>
<title>Karpa Dev</title>
</head>

<body>
Expand Down
8 changes: 7 additions & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import About from "./components/about/About";
import Intro from "./components/intro/Intro";

const App = () => {
return <div>Hello world!</div>;
return <div>
<Intro/>
<About/>
</div>;
};

export default App;
29 changes: 29 additions & 0 deletions src/components/about/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import "./about.css"
const About = () => {
return (
<div className="a">
<div className="a-left">
<div className="a-card bg"></div>
<div className="a-card">
<img src="https://cdn.dribbble.com/users/1957569/screenshots/14102338/media/ef87238dc32272d4179b25c5ee9c0292.jpg?compress=1&resize=800x600" alt="" className="a-img" />
</div>
</div>
<div className="a-right">
<h1 className="a-title">About Me</h1>
<p className="a-sub">
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.
</p>
<p className="a-desc">
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.
</p>
<div className="a-award">
<img src="" alt="" className="a-award img" />
</div>
</div>

</div>
)
}

export default About
39 changes: 39 additions & 0 deletions src/components/about/about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
29 changes: 29 additions & 0 deletions src/components/intro/Intro.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import "./intro.css"
import Me from "../../img/me.png"

const Intro = () => {
return (
<div className="i">
<div className="i-left">
<div className="i-left-wrapper">
<h2 className="i-intro">Hello, My name is</h2>
<h1 className="i-name">Pedro Karpinski Neto</h1>
<div className="i-title">
<div className="i-title-wrapper">
<div className="i-title-item">Front-End Developer</div>
<div className="i-title-item">UI/UX Designer</div>
</div>
</div>
<p className="i-desc">
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.
</p>
</div>
</div>
<div className="i-right">
<div className="i-bg"></div>
{/* <img src={Me} alt="" className="i-img" /> */}
</div>
</div>
)
}
export default Intro
78 changes: 78 additions & 0 deletions src/components/intro/intro.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

Binary file added src/img/me.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.