Skip to content

Commit 1e727ec

Browse files
mathcodesmathcodes
committed
syntax and media queries
1 parent 4437ca4 commit 1e727ec

33 files changed

+1309
-1699
lines changed

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22

33
[LIVE](https://mathcodes.github.io/)
44

5+
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_0.png" width="45%"/>
6+
<br/>
7+
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_1.png" width="45%"/>
8+
<br/>
9+
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_2.png" width="45%"/>
10+
<br/>
11+
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_3.png" width="45%"/>
12+
<br/>
13+
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_4.png" width="45%"/>
14+
<br/>
15+
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_5.png" width="45%"/>
16+
<br/>
17+
518
![badge](https://img.shields.io/badge/•-material_ui/core.4.12.2-blue) ![badge](https://img.shields.io/badge/•-material_ui/icons.4.11.2-blue) ![badge](https://img.shields.io/badge/•-testing_library_jest_dom.5.11.4-blue) ![badge](https://img.shields.io/badge/•-testing_library/react.11.1.0-blue)![badge](https://img.shields.io/badge/•-axios.0.21.1-blue) ![badge](https://img.shields.io/badge/•-gh_pages.3.2.3-blue) ![badge](https://img.shields.io/badge/•-react.17.0.2-blue) ![badge](https://img.shields.io/badge/•-react_dom.17.0.2-blue) ![badge](https://img.shields.io/badge/•-react_fast_marquee.1.2.1-blue) ![badge](https://img.shields.io/badge/•-react_helmet.6.1.0-blue) ![badge](https://img.shields.io/badge/•-react_icons.4.2.0-blue) ![badge](https://img.shields.io/badge/•-react_reveal.1.2.2-blue) ![badge](https://img.shields.io/badge/•-react_router_dom.5.2.0-blue) ![badge](https://img.shields.io/badge/•-react_router_hash_link.2.4.3-blue) ![badge](https://img.shields.io/badge/•-react_scripts.4.0.3-blue) ![badge](https://img.shields.io/badge/•-react_slick.0.28.1-blue) ![badge](https://img.shields.io/badge/•-slick_carousel.1.8.1-blue) ![badge](https://img.shields.io/badge/•-validator.13.6.0-blue) ![badge](https://img.shields.io/badge/•-web_vitals.1.0.1-blue)
619

720
## Description

‎src/App.css‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
:root {
2-
--primaryFont: 'Poppins', sans-serif;
3-
/* --primaryFont: 'Montserrat', sans-serif; */
4-
/* --primaryFont: 'Raleway', sans-serif; */
5-
}
6-
2+
--primaryFont: 'Poppins', sans-serif;
3+
}

‎src/App.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useContext } from 'react';
22
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
3-
43
import { ThemeContext } from './contexts/ThemeContext';
54
import { Main, ProjectPage } from './pages'
65
import { BackToTop } from './components'
@@ -9,18 +8,15 @@ import ScrollToTop from './utils/ScrollToTop'
98
import './App.css'
109

1110
function App() {
12-
1311
const { theme } = useContext(ThemeContext);
1412

15-
1613
return (
1714
<div className="app">
1815
<Router>
19-
<ScrollToTop/>
16+
<ScrollToTop />
2017
<Switch>
2118
<Route path="/" exact component={Main} />
2219
<Route path="/projects" exact component={ProjectPage} />
23-
2420
<Redirect to="/" />
2521
</Switch>
2622
</Router>
@@ -29,4 +25,4 @@ function App() {
2925
);
3026
}
3127

32-
export default App;
28+
export default App;

‎src/components/Navbar/Navbar.css‎

Lines changed: 66 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,90 @@
11
.navbar {
2-
height: 6.5rem;
3-
position: absolute;
4-
background-color: transparent;
5-
z-index: 99;
6-
display: flex;
7-
align-items: center;
8-
justify-content: center;
9-
width: 100%;
2+
height: 6.5rem;
3+
position: absolute;
4+
background-color: transparent;
5+
z-index: 99;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
width: 100%;
1010
}
1111

1212
.navbar--container {
13-
display: flex;
14-
align-items: center;
15-
justify-content: space-between;
16-
width: 100%;
17-
padding: 0 3rem;
18-
margin-top: 1rem;
13+
display: flex;
14+
align-items: center;
15+
justify-content: space-between;
16+
width: 100%;
17+
padding: 0 3rem;
18+
margin-top: 1rem;
1919
}
2020

21-
.navbar--container > h1 {
22-
font-family: 'BestermindRegular';
23-
color: var(--primary-2);
24-
font-size: 2.5rem;
25-
user-select: none;
21+
.navbar--container>h1 {
22+
font-family: 'BestermindRegular';
23+
color: var(--primary-2);
24+
font-size: 2.5rem;
25+
user-select: none;
2626
}
2727

2828
.navLink--container {
29-
margin-top: 5rem;
29+
margin-top: 5rem;
3030
}
3131

32-
.drawer > .MuiBackdrop-root {
33-
background: rgba(33, 33, 33, 0.15) !important;
34-
backdrop-filter: blur(20px) !important;
32+
.drawer>.MuiBackdrop-root {
33+
background: rgba(33, 33, 33, 0.15) !important;
34+
backdrop-filter: blur(20px) !important;
3535
}
3636

37-
37+
/* ------------------------------------ MEDIA QUERIES ------------------------------------ */
3838
@media (max-width:1100px) {
39-
.navbar--container{
40-
padding: 0 2rem;
41-
}
42-
.navbar--container > h1{
43-
font-size: 2.2rem;
44-
}
45-
.nav-menu{
46-
font-size: 2.2rem;
47-
margin-top: -1.5rem;
48-
}
39+
.navbar--container {
40+
padding: 0 2rem;
41+
}
42+
43+
.navbar--container>h1 {
44+
font-size: 2.2rem;
45+
}
46+
47+
.nav-menu {
48+
font-size: 2.2rem;
49+
margin-top: -1.5rem;
50+
}
4951
}
5052

5153
@media (max-width:800px) {
52-
.navLink--container {
53-
margin-top: 3rem;
54-
}
54+
.navLink--container {
55+
margin-top: 3rem;
56+
}
5557
}
5658

57-
5859
@media (max-width:600px) {
59-
.nav-menu{
60-
color: var(--primary-2);
61-
}
62-
.navbar--container > h1{
63-
font-size: 2rem;
64-
}
65-
.nav-menu:hover{
66-
color: var(--primary-2);
67-
}
68-
.MuiDrawer-paper{
69-
border-radius: 0 !important;
70-
}
60+
.nav-menu {
61+
color: var(--primary-2);
62+
}
63+
64+
.navbar--container>h1 {
65+
font-size: 2rem;
66+
}
67+
68+
.nav-menu:hover {
69+
color: var(--primary-2);
70+
}
71+
72+
.MuiDrawer-paper {
73+
border-radius: 0 !important;
74+
}
7175
}
7276

77+
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {
78+
.navbar {
79+
height: 5rem;
80+
}
81+
82+
.navbar--container {
83+
padding: 0 1rem;
84+
margin-top: 0rem;
85+
}
7386

74-
@media only screen and (min-device-width: 320px) and (max-device-width:
75-
480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {
76-
.navbar {
77-
height: 5rem;
78-
}
79-
.navbar--container {
80-
padding: 0 1rem;
81-
margin-top: 0rem;
82-
}
83-
.navbar--container > h1 {
84-
font-size: 1.5rem;
85-
}
87+
.navbar--container>h1 {
88+
font-size: 1.5rem;
89+
}
8690
}

‎src/components/Projects/Projects.css‎

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
padding: 2rem;
99
}
1010

11-
1211
.projects--header {
1312
display: flex;
1413
align-items: center;
@@ -17,7 +16,6 @@
1716
margin: 1rem;
1817
}
1918

20-
2119
.projects--header h1 {
2220
margin-bottom: 40px;
2321
font-size: 3.5rem;
@@ -66,13 +64,15 @@
6664
cursor: pointer;
6765
}
6866

69-
70-
71-
@media (min-width: 992px) and (max-width: 1380px) {
72-
67+
.project--lang, .project--desc{
68+
z-index:1;
7369
}
7470

71+
.project--desc:hover, .project--lang:hover{
72+
z-index:100;
73+
}
7574

75+
/* ------------------------------------ MEDIA QUERIES ------------------------------------ */
7676
@media screen and (max-width: 992px) {
7777
.projects--bodyContainer {
7878
display: flex;
@@ -105,29 +105,3 @@
105105
transform: translateX(-50%);
106106
}
107107
}
108-
109-
@media screen and (max-width: 400px) {
110-
111-
}
112-
113-
@media only screen and (min-device-width: 320px) and (max-device-width:
114-
480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {
115-
116-
}
117-
118-
119-
@media only screen and (device-width: 768px) {
120-
121-
}
122-
123-
.project--lang{
124-
z-index:1;
125-
}
126-
127-
.project--desc{
128-
z-index:1;
129-
}
130-
131-
.project--desc:hover, .project--lang:hover{
132-
z-index:100;
133-
}

0 commit comments

Comments
 (0)