git ssb

1
import {FunctionComponent, Fragment} from 'react';
2
3
interface Props {
4
  showMenu?: boolean;
5
}
6
7
const Header: FunctionComponent<Props> = ({ showMenu = true }) => {
8
  return (
9
    <Fragment>
10
      <header>
11
        <div className="logo">
12
          <div className="ring">
13
            <div className="internal-ring">
14
              <hr />
15
              <span>RAA</span>
16
              <hr />
17
            </div>
18
          </div>
19
        </div>
20
        <div className="texts">
21
          <h1>Rômulo Alves</h1>
22
          <h2>Software Engineer</h2>
23
        </div>
24
      </header>
25
      {showMenu && (
26
        <nav>
27
          <ul>
28
            <li><a href="#">About me</a></li>
29
            <li><a href="#">Resumé</a></li>
30
          </ul>
31
        </nav>
32
      )}
33
      <style jsx>{`
34
        header,
35
        .logo,
36
        .ring,
37
        .internal-ring,
38
        .texts {
39
          display: flex;
40
          align-items: center;
41
          justify-content: center;
42
        }
43
44
        .texts {
45
          align-items: baseline;
46
          flex-direction: column;
47
          margin-left: 45px;
48
        }
49
50
        header {
51
          color: #fff;
52
          height: 300px;
53
        }
54
55
        header,
56
        .ring {
57
          background: rgb(110, 110, 110);
58
        }
59
60
        .logo,
61
        .internal-ring {
62
          background: #fff;
63
        }
64
65
        .logo,
66
        .ring,
67
        .internal-ring {
68
          border-radius: 50%;
69
        }
70
71
        .logo {
72
          height: 150px;
73
          margin-left: -14%;
74
          width: 150px;
75
        }
76
77
        .ring {
78
          height: 140px;
79
          width: 140px;
80
        }
81
        .internal-ring {
82
          flex-direction: column;
83
          height: 130px;
84
          width: 130px;
85
        }
86
87
        span {
88
          color: rgb(110, 110, 110);
89
          font-size: 40px;
90
        }
91
92
        hr {
93
          background: rgb(110, 110, 110);
94
          border: none;
95
          border-radius: 6px;
96
          height: 6px;
97
          margin: 10px;
98
          padding: 0;
99
          width: 26px;
100
        }
101
102
        h1,
103
        h2 {
104
          margin: 0;
105
        }
106
107
        h1 {
108
          font-size: 52px;
109
        }
110
111
        h2 {
112
          font-size: 20px;
113
          margin-left: 3px;
114
          text-transform: uppercase;
115
        }
116
117
        ul {
118
          background: rgb(110, 110, 110);
119
          display: flex;
120
          justify-content: center;
121
          list-style: none;
122
          margin: 0;
123
          padding: 0;
124
        }
125
126
        nav a {
127
          color: #fff;
128
          display: inline-block;
129
          letter-spacing: 1px;
130
          min-width: 100px;
131
          padding: 10px;
132
          text-align: center;
133
          transition: background .2s, color .2s;
134
        }
135
136
        nav a:hover {
137
          background: #fff;
138
          color: rgb(110, 110, 110);
139
        }
140
141
        @media (max-width: 740px) {
142
          header {
143
            flex-direction: column;
144
          }
145
          .logo {
146
            margin-left: 0;
147
          }
148
          .texts {
149
            margin-left: 0;
150
            margin-top: 20px;
151
          }
152
153
          h1 {
154
            font-size: 38px;
155
          }
156
          h2 {
157
            font-size: 18px;
158
          }
159
        }
160
      `}</style>
161
    </Fragment>
162
  );
163
};
164
165
export default Header;