Skip to content

Commit 24093ab

Browse files
realstomanrealstoman
committed
Header navigation and banner fonts
1 parent 1164efc commit 24093ab

File tree

3 files changed

+200
-33
lines changed

3 files changed

+200
-33
lines changed

‎src/components/shared/AppBanner.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const AppBanner = () => {
2323
duration: 0.9,
2424
delay: 0.1,
2525
}}
26-
className="text-2xl lg:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
26+
className="font-general-semibold text-2xl lg:text-3xl xl:text-4xl text-center sm:text-left text-ternary-dark dark:text-primary-light uppercase"
2727
>
2828
Hi, Iam Stoman
2929
</motion.h1>
@@ -35,7 +35,7 @@ const AppBanner = () => {
3535
duration: 0.9,
3636
delay: 0.2,
3737
}}
38-
className="mt-4 text-lg sm:text-xl lg:text-3xl xl:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
38+
className="font-general-medium mt-4 text-lg md:text-xl lg:text-2xl xl:text-3xl text-center sm:text-left leading-normal text-gray-500 dark:text-gray-200"
3939
>
4040
A Full-Stack Developer & Design Enthusiast
4141
</motion.p>
@@ -52,10 +52,10 @@ const AppBanner = () => {
5252
<a
5353
download="Stoman-Resume.pdf"
5454
href="/files/Stoman-Resume.pdf"
55-
className="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
55+
className="font-general-medium flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
5656
aria-label="Download Resume"
5757
>
58-
<FiArrowDownCircle className="ml-0 sm:ml-1 mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6"></FiArrowDownCircle>
58+
<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6"></FiArrowDownCircle>
5959
<span className="text-sm sm:text-lg">Download CV</span>
6060
</a>
6161
</motion.div>

‎src/components/shared/AppHeader.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ const AppHeader = () => {
145145
</div>
146146
{/* Header links small screen end */}
147147

148-
{/* Header links small screen start*/}
149-
<div className="hidden m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none">
148+
{/* Header links large screen start*/}
149+
<div className="font-general-medium hidden m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none">
150150
<Link
151151
to="/projects"
152152
className="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2"

‎src/css/App.css

+194-27
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,207 @@
1-
.App {
2-
text-align: center;
1+
/*==
2+
* React & TailwindCSS Portfolio Main CSS File
3+
* Powered by: @realstoman
4+
*/
5+
6+
body {
7+
font-family: 'GeneralSans-Variable';
38
}
49

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
10+
/* Fonts */
11+
@font-face {
12+
font-family: 'GeneralSans-Variable';
13+
src: url('../fonts/GeneralSans-Variable.woff2') format('woff2'),
14+
url('../fonts/GeneralSans-Variable.woff') format('woff'),
15+
url('../fonts/GeneralSans-Variable.ttf') format('truetype');
16+
font-weight: 200 700;
17+
font-display: swap;
18+
font-style: normal;
819
}
920

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
21+
.font-general-variable {
22+
font-family: 'GeneralSans-Variable';
1423
}
1524

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25+
@font-face {
26+
font-family: 'GeneralSans-VariableItalic';
27+
src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
28+
url('../fonts/GeneralSans-VariableItalic.woff') format('woff'),
29+
url('../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
30+
font-weight: 200 700;
31+
font-display: swap;
32+
font-style: italic;
2533
}
2634

27-
.App-link {
28-
color: #61dafb;
35+
.font-general-variable-italic {
36+
font-family: 'GeneralSans-VariableItalic';
2937
}
3038

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
39+
@font-face {
40+
font-family: 'GeneralSans-Extralight';
41+
src: url('../fonts/GeneralSans-Extralight.woff2') format('woff2'),
42+
url('../fonts/GeneralSans-Extralight.woff') format('woff'),
43+
url('../fonts/GeneralSans-Extralight.ttf') format('truetype');
44+
font-weight: 200;
45+
font-display: swap;
46+
font-style: normal;
47+
}
48+
49+
.font-general-extralight {
50+
font-family: 'GeneralSans-Extralight';
51+
}
52+
53+
@font-face {
54+
font-family: 'GeneralSans-ExtralightItalic';
55+
src: url('../fonts/GeneralSans-ExtralightItalic.woff2') format('woff2'),
56+
url('../fonts/GeneralSans-ExtralightItalic.woff') format('woff'),
57+
url('../fonts/GeneralSans-ExtralightItalic.ttf') format('truetype');
58+
font-weight: 200;
59+
font-display: swap;
60+
font-style: italic;
61+
}
62+
63+
.font-general-extralight-italic {
64+
font-family: 'GeneralSans-ExtralightItalic';
65+
}
66+
67+
@font-face {
68+
font-family: 'GeneralSans-Light';
69+
src: url('../fonts/GeneralSans-Light.woff2') format('woff2'),
70+
url('../fonts/GeneralSans-Light.woff') format('woff'),
71+
url('../fonts/GeneralSans-Light.ttf') format('truetype');
72+
font-weight: 300;
73+
font-display: swap;
74+
font-style: normal;
75+
}
76+
77+
.font-general-light {
78+
font-family: 'GeneralSans-Light';
79+
}
80+
81+
@font-face {
82+
font-family: 'GeneralSans-LightItalic';
83+
src: url('../fonts/GeneralSans-LightItalic.woff2') format('woff2'),
84+
url('../fonts/GeneralSans-LightItalic.woff') format('woff'),
85+
url('../fonts/GeneralSans-LightItalic.ttf') format('truetype');
86+
font-weight: 300;
87+
font-display: swap;
88+
font-style: italic;
89+
}
90+
91+
.font-general-light-italic {
92+
font-family: 'GeneralSans-LightItalic';
93+
}
94+
95+
@font-face {
96+
font-family: 'GeneralSans-Regular';
97+
src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'),
98+
url('../fonts/GeneralSans-Regular.woff') format('woff'),
99+
url('../fonts/GeneralSans-Regular.ttf') format('truetype');
100+
font-weight: 400;
101+
font-display: swap;
102+
font-style: normal;
103+
}
104+
105+
.font-general-regular {
106+
font-family: 'GeneralSans-Regular';
107+
}
108+
109+
@font-face {
110+
font-family: 'GeneralSans-Italic';
111+
src: url('../fonts/GeneralSans-Italic.woff2') format('woff2'),
112+
url('../fonts/GeneralSans-Italic.woff') format('woff'),
113+
url('../fonts/GeneralSans-Italic.ttf') format('truetype');
114+
font-weight: 400;
115+
font-display: swap;
116+
font-style: italic;
117+
}
118+
119+
.font-general-italic {
120+
font-family: 'GeneralSans-Italic';
121+
}
122+
123+
@font-face {
124+
font-family: 'GeneralSans-Medium';
125+
src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'),
126+
url('../fonts/GeneralSans-Medium.woff') format('woff'),
127+
url('../fonts/GeneralSans-Medium.ttf') format('truetype');
128+
font-weight: 500;
129+
font-display: swap;
130+
font-style: normal;
131+
}
132+
133+
.font-general-medium {
134+
font-family: 'GeneralSans-Medium';
135+
}
136+
137+
@font-face {
138+
font-family: 'GeneralSans-MediumItalic';
139+
src: url('../fonts/GeneralSans-MediumItalic.woff2') format('woff2'),
140+
url('../fonts/GeneralSans-MediumItalic.woff') format('woff'),
141+
url('../fonts/GeneralSans-MediumItalic.ttf') format('truetype');
142+
font-weight: 500;
143+
font-display: swap;
144+
font-style: italic;
145+
}
146+
147+
.font-general-medium-italic {
148+
font-family: 'GeneralSans-MediumItalic';
149+
}
150+
151+
@font-face {
152+
font-family: 'GeneralSans-Semibold';
153+
src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
154+
url('../fonts/GeneralSans-Semibold.woff') format('woff'),
155+
url('../fonts/GeneralSans-Semibold.ttf') format('truetype');
156+
font-weight: 600;
157+
font-display: swap;
158+
font-style: normal;
159+
}
160+
161+
.font-general-semibold {
162+
font-family: 'GeneralSans-Semibold';
163+
}
164+
165+
@font-face {
166+
font-family: 'GeneralSans-SemiboldItalic';
167+
src: url('../fonts/GeneralSans-SemiboldItalic.woff2') format('woff2'),
168+
url('../fonts/GeneralSans-SemiboldItalic.woff') format('woff'),
169+
url('../fonts/GeneralSans-SemiboldItalic.ttf') format('truetype');
170+
font-weight: 600;
171+
font-display: swap;
172+
font-style: italic;
173+
}
174+
175+
.font-general-semibold-italic {
176+
font-family: 'GeneralSans-SemiboldItalic';
177+
}
178+
179+
@font-face {
180+
font-family: 'GeneralSans-Bold';
181+
src: url('../fonts/GeneralSans-Bold.woff2') format('woff2'),
182+
url('../fonts/GeneralSans-Bold.woff') format('woff'),
183+
url('../fonts/GeneralSans-Bold.ttf') format('truetype');
184+
font-weight: 700;
185+
font-display: swap;
186+
font-style: normal;
187+
}
188+
189+
.font-general-bold {
190+
font-family: 'GeneralSans-Bold';
191+
}
192+
193+
@font-face {
194+
font-family: 'GeneralSans-BoldItalic';
195+
src: url('../fonts/GeneralSans-BoldItalic.woff2') format('woff2'),
196+
url('../fonts/GeneralSans-BoldItalic.woff') format('woff'),
197+
url('../fonts/GeneralSans-BoldItalic.ttf') format('truetype');
198+
font-weight: 700;
199+
font-display: swap;
200+
font-style: italic;
201+
}
202+
203+
.font-general-bold-italic {
204+
font-family: 'GeneralSans-BoldItalic';
38205
}
39206

40207
/* Scroll to top style */

0 commit comments

Comments
 (0)