Skip to content

Commit c9e6391

Browse files
mathcodesmathcodes
committed
bg adjustments
1 parent 59aca5d commit c9e6391

File tree

4 files changed

+90
-63
lines changed

4 files changed

+90
-63
lines changed

‎src/components/Background/Background.css‎

Lines changed: 54 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -36,29 +36,35 @@ body{
3636
width: 100%;
3737
}
3838

39-
.circles, .circles2{
39+
.circles, .circles2 {
4040
position: absolute;
4141
top: 0;
4242
left: 0;
43-
width: 100%;
43+
width: 90%;
4444
height: 100%;
45-
overflow: hidden;
45+
overflow: revert;
4646
}
4747

4848
.circles li{
49+
transition: all 0;
4950
position: absolute;
50-
display: block;
51+
display: flex;
52+
justify-content: center;
53+
vertical-align: middle;
5154
list-style: none;
52-
width: 20px;
55+
width: 40px;
5356
height: 20px;
54-
background: #a92;
55-
border: 2px solid #fff;
5657
animation: animate 25s linear infinite;
5758
bottom: -150px;
58-
59+
color: #4faeba;
60+
font-size: 300%;
5961
}
6062

63+
64+
65+
6166
.circles li:nth-child(1){
67+
transition: all 0;
6268
left: 25%;
6369
width: 80px;
6470
height: 80px;
@@ -67,6 +73,7 @@ body{
6773

6874

6975
.circles li:nth-child(2){
76+
transition: all 0;
7077
left: 10%;
7178
width: 20px;
7279
height: 20px;
@@ -75,13 +82,15 @@ body{
7582
}
7683

7784
.circles li:nth-child(3){
85+
transition: all 0;
7886
left: 70%;
7987
width: 20px;
8088
height: 20px;
81-
animation-delay: 4s;
89+
animation-delay: 0s;
8290
}
8391

8492
.circles li:nth-child(4){
93+
transition: all 0;
8594
left: 40%;
8695
width: 60px;
8796
height: 60px;
@@ -90,48 +99,60 @@ body{
9099
}
91100

92101
.circles li:nth-child(5){
102+
transition: all 0;
93103
left: 65%;
94104
width: 20px;
95105
height: 20px;
96106
animation-delay: 0s;
97107
}
98108

99109
.circles li:nth-child(6){
110+
transition: all 0;
100111
left: 75%;
101112
width: 110px;
102113
height: 110px;
103-
animation-delay: 3s;
114+
animation-delay: 0s;
104115
}
105116

106117
.circles li:nth-child(7){
118+
transition: all 0;
107119
left: 35%;
108120
width: 150px;
109121
height: 150px;
110-
animation-delay: 7s;
122+
animation-delay: 0s;
111123
}
112124

113125
.circles li:nth-child(8){
126+
transition: all 0;
114127
left: 50%;
115128
width: 25px;
116129
height: 25px;
117-
animation-delay: 15s;
130+
animation-delay: 0s;
118131
animation-duration: 45s;
119132
}
120133

121134
.circles li:nth-child(9){
135+
transition: all 0;
122136
left: 20%;
123137
width: 15px;
124138
height: 15px;
125-
animation-delay: 2s;
139+
animation-delay: 0s;
126140
animation-duration: 35s;
127141
}
128142

129143
.circles li:nth-child(10){
144+
transition: all 0;
130145
left: 85%;
131146
width: 150px;
132147
height: 150px;
133148
animation-delay: 0s;
134149
animation-duration: 11s;
150+
151+
}
152+
153+
.circles:hover{
154+
155+
color:#a92ca2;
135156
}
136157

137158
/* ---------------------------------------------------------------------------------------- */
@@ -140,17 +161,21 @@ body{
140161
/* ---------------------------------------------------------------------------------------- */
141162
/* ---------------------------------------------------------------------------------------- */
142163
.circles2 li{
143-
position: absolute;
144-
display: block;
145-
list-style: none;
146-
width: 80px;
147-
height: 80px;
148-
background: #a92ca2;
149-
animation: animate 25s linear infinite;
150-
bottom: 150px;
151-
164+
transition: all 0;
165+
position: absolute;
166+
display: flex;
167+
justify-content: center;
168+
vertical-align: middle;
169+
list-style: none;
170+
width: 40px;
171+
height: 20px;
172+
animation: animate 25s linear infinite;
173+
bottom: -150px;
174+
color: #a92ca2;
175+
font-size: 300%;
152176
}
153177

178+
154179
.circles2 li:nth-child(1){
155180
left: 35%;
156181
width: 80px;
@@ -163,15 +188,15 @@ body{
163188
left: 10%;
164189
width: 20px;
165190
height: 20px;
166-
animation-delay: 2s;
191+
animation-delay: 0s;
167192
animation-duration: 12s;
168193
}
169194

170195
.circles2 li:nth-child(3){
171196
left: 80%;
172197
width: 30px;
173198
height: 25px;
174-
animation-delay: 4s;
199+
animation-delay: 0s;
175200
border-radius: 50%;
176201
}
177202

@@ -194,29 +219,27 @@ body{
194219
left: 75%;
195220
width: 110px;
196221
height: 110px;
197-
animation-delay: 3s;
222+
animation-delay: 0s;
198223
}
199224

200225
.circles2 li:nth-child(7){
201-
left: 35%;
202-
width: 150px;
203-
height: 150px;
204-
animation-delay: 7s;
226+
left: 35%;
227+
animation-delay: 0s;
205228
}
206229

207230
.circles2 li:nth-child(8){
208231
left: 50%;
209232
width: 25px;
210233
height: 25px;
211-
animation-delay: 15s;
234+
animation-delay: 0s;
212235
animation-duration: 45s;
213236
}
214237

215238
.circles2 li:nth-child(9){
216239
left: 20%;
217240
width: 15px;
218241
height: 15px;
219-
animation-delay: 2s;
242+
animation-delay: 0s;
220243
animation-duration: 35s;
221244
}
222245

‎src/components/Background/Background.js‎

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,13 @@ import {
99
FaYoutube,
1010
FaCodepen,
1111
FaInstagram,
12-
} from 'react-icons/fa';
12+
FaBootstrap,
13+
FaCss3Alt,
14+
FaReact,
15+
} from 'react-icons/fa';
16+
import { DiJavascript1 } from "react-icons/di";
1317
import { makeStyles } from '@material-ui/core/styles';
14-
import { GH } from '../../assets/svg/GH.svg';
15-
18+
1619
function Background() {
1720
const { theme } = useContext(ThemeContext);
1821

@@ -23,9 +26,11 @@ function Background() {
2326
color: `${theme.tertiary}`,
2427
fontFamily: 'var(--primaryFont)',
2528
fontWeight: 500,
26-
transition: 'border 0.2s ease-in-out',
29+
fontSize: '1.5rem',
30+
31+
transition: 'border 0.01s ease-in-out',
2732
'&:focus': {
28-
border: `4px solid ${theme.primary600}`,
33+
color: `#a92ca2`,
2934
},
3035
},
3136
item: {
@@ -34,42 +39,43 @@ function Background() {
3439
color: `${theme.tertiary}`,
3540
fontFamily: 'var(--primaryFont)',
3641
fontWeight: 500,
37-
transition: 'border 0.2s ease-in-out',
42+
transition: 'border 1s ease-in-out',
3843
'&:focus': {
39-
border: `4px solid ${theme.primary600}`,
44+
color: `#a92ca2`,
4045
},
4146
}}))
4247

4348
const classes = useStyles();
4449
return (
4550
<>
4651
<div className="area" >
47-
<ul className="circles ul">
48-
<li className={classes.label}><FaLinkedinIn aria-label='LinkedIn' /></li>
52+
<ul className="circles ul item">
53+
<li><FaLinkedinIn aria-label='LinkedIn' /></li>
4954
<li><FaInstagram aria-label='Instagram' /></li>
5055
<li><FaGithub aria-label='GitHub' /></li>
5156
<li><FaTwitter aria-label='Twitter' /></li>
5257
<li><FaCodepen aria-label='CodePen' /></li>
53-
<li><FaYoutube aria-label='YouTube' className={classes.item}/></li>
54-
<li><img alt="jon portfolio" sr="../../assets/svg/GH.svg" /></li>
55-
<li></li>
56-
<li></li>
57-
<li></li>
58+
<li><FaYoutube aria-label='YouTube' /></li>
59+
<li><FaBootstrap aria-label='Bootstrap' /></li>
60+
<li><FaCss3Alt aria-label='CSS' /></li>
61+
<li><FaReact aria-label='React' /></li>
62+
<li><DiJavascript1 aria-label='React' /></li>
63+
5864
</ul>
5965

6066
</div >
6167
<div className="area" >
62-
<ul className="circles2">
63-
<li></li>
64-
<li></li>
65-
<li></li>
66-
<li></li>
67-
<li></li>
68-
<li></li>
69-
<li></li>
70-
<li></li>
71-
<li></li>
72-
<li></li>
68+
<ul className="circles2 ul item">
69+
<li><FaLinkedinIn aria-label='LinkedIn' /></li>
70+
<li><FaInstagram aria-label='Instagram' /></li>
71+
<li><FaGithub aria-label='GitHub' /></li>
72+
<li><FaTwitter aria-label='Twitter' /></li>
73+
<li><FaCodepen aria-label='CodePen' /></li>
74+
<li><FaYoutube aria-label='YouTube' /></li>
75+
<li><FaBootstrap aria-label='Bootstrap' /></li>
76+
<li><FaCss3Alt aria-label='CSS' /></li>
77+
<li><FaReact aria-label='React' /></li>
78+
<li><DiJavascript1 aria-label='React' /></li>
7379
</ul>
7480
</div >
7581
</>

‎src/components/Navbar/Navbar.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,8 @@ function Navbar() {
9696
drawerItem: {
9797
margin: '2rem auto',
9898
borderRadius: '78.8418px',
99-
background: theme.secondary,
100-
color: theme.primary,
99+
background: '#333',
100+
color: '#a92ca2',
101101
width: '85%',
102102
height: '60px',
103103
display: 'flex',
@@ -110,7 +110,8 @@ function Navbar() {
110110
transition: 'background-color 0.2s, color 0.2s',
111111
'&:hover': {
112112
background: theme.primary,
113-
color: theme.secondary,
113+
color: '#4faeba',
114+
border: '1px solid #4faeba',
114115
},
115116
[t.breakpoints.down('sm')]: {
116117
width: '100%',
@@ -186,7 +187,7 @@ function Navbar() {
186187
role='button'
187188
tabIndex='0'
188189
aria-label='Close'
189-
/>
190+
/>{shortname}
190191
</div>
191192
<br />
192193

‎src/pages/Main/Main.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22
import { Helmet } from 'react-helmet'
33
import { Navbar, Landing, About, Skills, Testimonials, Contacts, Services, Projects, HorizontalRule } from '../../components'
44
import { headerData } from '../../data/headerData'
5-
import ThemeSwitcher from '../../contexts/ThemeSwitcher'
65

76

87
function Main() {
@@ -12,12 +11,10 @@ function Main() {
1211
<Helmet>
1312
<title>{headerData.name} - Portfolio</title>
1413
</Helmet>
15-
<ThemeSwitcher />
1614
<Navbar />
1715
<Landing />
1816
<About />
1917
<HorizontalRule />
20-
<About />
2118
<Skills />
2219
<Projects />
2320
<Services />

0 commit comments

Comments
 (0)