Files: 04f1928b97e35d5d5fe0cd9c216f1e431a121f33 / components / header.tsx
3222 bytesRaw
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; |
Built with git-ssb-web