Skip to content

Commit

Permalink
add icons & rename skill ->works
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyoowon
kyoowon committed Jan 30, 2022
1 parent 3185ea1 commit 6e7b158
Show file tree
Hide file tree
Showing 9 changed files with 56 additions and 32 deletions.
Binary file added public/assets/githubicon.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.
Binary file added public/assets/notionsicon.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.
Binary file added public/assets/pageicon.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: 2 additions & 2 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Intro from "./Intro/Intro";
import Topbar from "./Topbar/Topbar";
import "./App.scss"
import Skill from "./Skill/Skill";
import Portfolio from "./Portfolio/Portfolio";
import { useState } from "react";
import Career from "./Career/Career";
import Contact from "./Contact/Contact";
import Works from "./Works/Works";

function App() {
const [darkMode, setDarkMode] = useState(false);
Expand All @@ -15,7 +15,7 @@ function App() {
<div className="sections">
<Intro />
<Portfolio />
<Skill />
<Works />
<Career />
<Contact />
</div>
Expand Down
32 changes: 18 additions & 14 deletions src/Contact/Contact.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
background-image: url("../../public/assets/circle.svg");
background-size: cover;

@include moblie{
@include moblie {
flex-direction: column;
align-items: center;
}
Expand All @@ -19,12 +19,12 @@
user-select: none;
height: 100%;

@include moblie{
@include moblie {
overflow: hidden;
}
}

@include moblie{
@include moblie {
flex: 0.3;
}
}
Expand All @@ -36,7 +36,7 @@
align-items: center;
justify-content: center;

@include moblie{
@include moblie {
width: 100%;
}

Expand All @@ -52,7 +52,7 @@
align-items: center;
justify-content: space-around;

@include moblie{
@include moblie {
width: 100%;
}

Expand All @@ -64,10 +64,9 @@
border: 0;
box-shadow: 0px 0px 15px -8px black;

@include moblie{
@include moblie {
width: 250px;
margin: 10px;

}
}

Expand All @@ -79,29 +78,34 @@
border: 0;
box-shadow: 0px 0px 15px -8px black;

@include moblie{
@include moblie {
width: 250px;
height: 200px;
margin: 30px;
}

}
button{

button {
width: 150px;
height: 30px;
color: white;
background-color: crimson;
background: rgb(255, 150, 113);
background: radial-gradient(
circle,
rgba(255, 150, 113, 1) 0%,
rgba(245, 107, 153, 1) 58%,
rgba(214, 93, 177, 1) 100%
);
border-radius: 10px;
font-weight: 500;
cursor: pointer;

&:focus{
&:focus {
outline: none;
}
}

span{
span {
color: white;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/Topbar/Topbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function Topbar({ darkMode, setDarkMode }) {
<ul className="windowMenu">
<li><a href="#intro">intro</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#skill">skill</a></li>
<li><a href="#works">works</a></li>
<li><a href="#career">career</a></li>
<li><a href="#contact">contact</a></li>
</ul>
Expand Down
12 changes: 8 additions & 4 deletions src/Skill/Skill.jsx → src/Works/Works.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "./Skill.scss"
import "./Works.scss"
import LanguageIcon from '@mui/icons-material/Language';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
Expand All @@ -7,7 +7,7 @@ import starSkin from "../animations/star-skin.json";
import lottie from "lottie-web";
import { useRef, useState, useEffect } from "react";

export default function Skill() {
export default function Works() {
const [currentSlide, setCurrentSlide] = useState(0);
const [projectData, setProjectData] = useState(webPortfolio);
const anime = useRef (null);
Expand All @@ -26,7 +26,7 @@ export default function Skill() {
: setCurrentSlide(currentSlide < projectData.length - 1 ? currentSlide + 1 : 0)
}
return (
<div className="skill" id="skill">
<div className="works" id="works">
<div className="slider" style={{transform: `translateX(-${currentSlide * 100}vw)`}}>
{projectData.map(d => (
<div className="container">
Expand All @@ -36,7 +36,11 @@ export default function Skill() {
<span><LanguageIcon /></span>
<h2>{d.title}</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius soluta obcaecati dolores error maxime ipsum laboriosam natus sequi numquam reprehenderit saepe, nulla alias dicta iusto laborum eos vel quasi ipsa!</p>
<a href={d.link}><strong>I want to see the project.</strong></a>
<div className="icon">
<a href={d.github}><img src={`${process.env.PUBLIC_URL}/assets/githubicon.png`}/></a>
<a href={d.notion}><img src={`${process.env.PUBLIC_URL}/assets/notionsicon.png`}/></a>
<a href={d.link}><img src={`${process.env.PUBLIC_URL}/assets/pageicon.png`}/></a>
</div>
</div>
</div>
<div className="right">
Expand Down
23 changes: 16 additions & 7 deletions src/Skill/Skill.scss → src/Works/Works.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import "../global.scss";

.skill {
.works {
background: rgb(214, 93, 177);
background: linear-gradient(180deg, $subColor1 42%, $subColor2 65%, $subColor3 100%);
display: flex;
Expand Down Expand Up @@ -80,7 +80,7 @@

.leftContainer {
width: 90%;
height: 70%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: space-between;
Expand Down Expand Up @@ -116,11 +116,20 @@
p {
font-size: 13px;
}
a {
font-size: 12px;
font-weight: 600;
text-decoration: none;
cursor: pointer;

.icon{
display: flex;

img{
width: 30px;
height: 30px;
margin: 5px;
border-radius: 50%;

&:hover{
background-color: $subColor5;
}
}
}
}
}
Expand Down
15 changes: 11 additions & 4 deletions src/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,25 @@ export const webPortfolio = [
id: 1,
title: "portfolio App",
img: `${process.env.PUBLIC_URL}/assets/profiles.png`,
link: "https://github.com/kyoowon/profiles",
link: "https://kyoowon.github.io/profiles/",
github: "https://github.com/kyoowon/profiles",
notion: "https://rocky-goal-e68.notion.site/profiles-f097de3d10874dfc8f65029e1e1bd17b",
},
{
id: 2,
title: "blog App",
img: "https://via.placeholder.com/150",
link: "https://github.com/kyoowon/Zoom-clone",
github: "https://github.com/kyoowon/Zoom-clone",
notion: "https://rocky-goal-e68.notion.site/profiles-f097de3d10874dfc8f65029e1e1bd17b",

},
{
id: 3,
title: "Zoom clone App",
img: "https://via.placeholder.com/150",
link: "https://github.com/kyoowon/Zoom-clone",
github: "https://github.com/kyoowon/Zoom-clone",
notion: "https://rocky-goal-e68.notion.site/profiles-f097de3d10874dfc8f65029e1e1bd17b",

},
]

Expand All @@ -24,6 +30,7 @@ export const mobliePortfolio = [
id: 1,
title: "Android Native App",
img: "https://via.placeholder.com/150",
link: "https://github.com/CBNU-DoReMiFa/stop_and_flight",
github: "https://github.com/CBNU-DoReMiFa/stop_and_flight",
notion: "https://rocky-goal-e68.notion.site/profiles-f097de3d10874dfc8f65029e1e1bd17b",
}
]

0 comments on commit 6e7b158

Please sign in to comment.