Skip to content

Commit 226dbfb

Browse files
carsonSgitcarsonSgit
authored
Rework Portfolio (#129)
* feat: Reworking things * fix: Proper layout * chore: Moving files around * chore: Rework about container * chore: Remove useless folder Finally getting rid of /Home lol. * chore: Fix Nav/Hero width * Fix: Responsiveness * feat: Navbar & New font * style: Restyled project items * chore: Project Languages list of objects * style: Colours for project languages * style: Simplifying * style: Uniformization * style: text colour differentiation * style: tweaks to resizing * style: Improvements to current progression * style: Language pills * chore: Project descriptions * style: Polishing projects * chore: Remove tech list * feat: Experience/Education section * style: Timeline hover effect * feat: Hover differentiation * style: Tweaks and stuff * fix: separate colour transition for fade effect properly working * style: About text colour * style: footer * style: Custom scrollbar * style: Custom scrollbar * feat: CV on footer * chore: Polishing text
1 parent dc9e01a commit 226dbfb

28 files changed

+629
-1599
lines changed

‎src/App.scss

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
1-
$scrollbar-width: 10px;
2-
$scrollbar-track-color: #262f2a;
3-
$scrollbar-thumb-color: #8cbc9158;
4-
$scrollbar-thumb-hover-color: #5f7167;
5-
$background-color: #27302b;
6-
7-
body {
8-
background-color: $background-color;
9-
}
10-
11-
::-webkit-scrollbar {
12-
width: $scrollbar-width;
13-
height: $scrollbar-width;
1+
.container {
2+
display: grid;
3+
grid-template-columns: 2fr 3fr;
4+
margin-left: 5%;
5+
margin-right: 5%;
6+
gap: 120px;
147
}
158

16-
::-webkit-scrollbar-track {
17-
background-color: $scrollbar-track-color;
9+
.left-column {
10+
padding: 10px;
11+
position: sticky;
12+
top: 0;
13+
height: 100vh;
1814
}
1915

20-
::-webkit-scrollbar-thumb {
21-
background-color: $scrollbar-thumb-color;
16+
.right-column {
17+
padding: 10px;
2218
}
2319

24-
::-webkit-scrollbar-thumb:hover {
25-
background-color: $scrollbar-thumb-hover-color;
26-
}
20+
@media screen and (max-width: 1024px) {
21+
.container {
22+
margin-left: 2%;
23+
margin-right: 2%;
24+
grid-template-columns: 1fr;
25+
grid-template-rows: auto;
26+
gap: 0px;
27+
}
2728

28-
::selection {
29-
color: rgb(106, 222, 170);
30-
background-color: #c7f2ea4d;
29+
.left-column, .right-column {
30+
position: relative;
31+
height: auto;
32+
}
33+
.right-column {
34+
padding: 0;
35+
}
3136
}

‎src/App.tsx

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,33 @@
11
import React from 'react';
2-
import Navbar from './Components/Navbar/Navbar';
32
import Content from './Components/Content/Content';
4-
import Footer from './Components/Footer/Footer';
53
import './App.scss';
4+
import Hero from './Components/Hero/Hero';
65

7-
const App: React.FC = () => {
6+
const LeftColumn = () => {
87
return (
9-
<div className="App">
10-
<Navbar />
8+
<div className="left-column">
9+
<Hero />
10+
</div>
11+
);
12+
};
13+
14+
const RightColumn = () => {
15+
return (
16+
<div className="right-column">
1117
<Content />
12-
<Footer />
18+
</div>
19+
);
20+
};
21+
22+
const App = () => {
23+
return (
24+
<div className="App">
25+
<div className="FixedSection">
26+
<div className="container">
27+
<LeftColumn />
28+
<RightColumn />
29+
</div>
30+
</div>
1331
</div>
1432
);
1533
};

‎src/Assets/Fonts/Inter-VariableFont_opsz,wght.ttf

854 KB
Binary file not shown.

‎src/Components/About/About.scss

Lines changed: 21 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -5,194 +5,51 @@ $quaternary-color: #95b9b0;
55
$background-color: #262f2aec;
66
$list-item-color: #2bd4a0;
77
$text-color: #fafff0;
8-
$font-color: #a2aa94;
8+
$font-color: #000000;
99
$hover-color: #ced4da;
1010
$box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
1111
$border-radius: 8px;
1212
$language-item-tint: darken($list-item-color, 30%);
1313
$framework-item-tint: darken($list-item-color, 35%);
1414
$tools-item-tint: darken($list-item-color, 40%);
1515

16-
@font-face {
17-
font-family: 'Poppins';
18-
src: url('../../Assets/Fonts/Poppins-Regular.ttf') format('truetype');
19-
font-weight: 400;
20-
font-style: normal;
16+
* {
17+
box-sizing: border-box;
2118
}
2219

2320
.AboutContainer {
24-
padding: 40px;
25-
margin-top: 20px;
26-
margin-left: auto;
27-
margin-right: auto;
28-
}
29-
30-
.AboutContentContainer {
31-
display: flex;
32-
justify-content: space-between;
33-
align-items: flex-start;
34-
}
21+
margin-top: 100px;
22+
width: 100%;
23+
max-width: 100%;
24+
overflow-x: hidden;
25+
justify-self: center;
3526

36-
.AboutContent {
37-
flex: 1;
38-
margin-right: 50px;
39-
font-size: 1rem;
40-
line-height: 1.4;
41-
color: $secondary-color;
42-
background-color: rgba(darken($background-color, 10%), 0.25);
43-
border-radius: $border-radius;
44-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
27+
@media screen and (max-width: 768px) {
28+
margin-top: 0px;
29+
}
30+
@media screen and (max-width: 1024px) {
31+
margin-top: 0px;
32+
}
4533
}
4634

4735
.AboutText {
48-
font-family: 'Poppins', sans-serif;
49-
font-size: 1.8em;
50-
font-weight: 400;
51-
color: lighten($font-color, 30%);
52-
padding: 0px 40px 0px 30px; /* top, right, bottom, left */
53-
}
54-
55-
@media screen and (max-width: 768px) {
56-
.AboutContentContainer {
57-
flex-direction: column;
58-
}
59-
60-
.AboutContent {
61-
margin-right: 0;
62-
margin-bottom: 30px;
63-
}
36+
font-weight: 500;
37+
color: rgb(34,34,34);
38+
font-size: 1.2em;
39+
width: 100%;
6440
}
6541

6642
@media screen and (max-width: 768px) {
6743
.AboutText {
6844
font-size: 1.4em;
69-
padding-left: 20px;
70-
padding-right: 20px;
71-
text-align: center;
7245
}
7346
}
7447

7548
.hoverLink {
76-
color: $list-item-color;
77-
}
78-
79-
@keyframes gradientAnimation {
80-
0% {
81-
background-position: 0% 50%;
82-
}
83-
50% {
84-
background-position: 100% 50%;
85-
}
86-
100% {
87-
background-position: 0% 50%;
88-
}
49+
font-weight: 600;
50+
color: darken($primary-color, 25%);
8951
}
9052

9153
.hoverLink:hover {
92-
background: linear-gradient(
93-
90deg,
94-
$primary-color,
95-
$secondary-color,
96-
$tertiary-color,
97-
$quaternary-color
98-
);
99-
100-
background-size: 200% 200%;
101-
-webkit-background-clip: text;
102-
background-clip: text;
103-
-webkit-text-fill-color: transparent;
104-
animation: gradientAnimation 5s ease infinite;
105-
}
106-
107-
.AboutImageContainer {
108-
display: flex;
109-
flex-direction: column;
110-
justify-content: center;
111-
align-items: center;
112-
height: 100%;
113-
margin: 0 auto;
114-
}
115-
116-
.AboutImage {
117-
border-radius: $border-radius;
118-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
119-
}
120-
121-
.DownloadCVButton {
122-
display: flex;
123-
align-items: center;
124-
justify-content: center;
125-
margin-top: 20px;
126-
padding: 12px 24px;
127-
background: darken(#2bd4a0, 30%);
128-
color: $text-color;
129-
border: none;
130-
border-radius: $border-radius;
131-
cursor: pointer;
132-
font-size: 1.1em;
133-
font-family: 'Poppins', sans-serif;
134-
font-weight: 500;
135-
box-shadow: $box-shadow;
136-
transition:
137-
background 0.3s ease,
138-
transform 0.2s ease;
139-
140-
&:hover {
141-
transform: translateY(-2px);
142-
}
143-
}
144-
145-
.DownloadIcon {
146-
margin-right: 10px;
147-
margin-top: -3px;
148-
font-size: 1.2em;
149-
}
150-
151-
@media screen and (max-width: 768px) {
152-
.AboutImage {
153-
width: 100%;
154-
}
155-
}
156-
157-
.ButtonContainer {
158-
display: flex;
159-
align-items: center;
160-
gap: 10px;
161-
margin-top: 20px;
162-
}
163-
164-
.GitHubButton {
165-
background-color: #161a1f;
166-
display: flex;
167-
align-items: center;
168-
justify-content: center;
169-
margin-top: 20px;
170-
padding: 12px 24px;
171-
color: $text-color;
172-
border: none;
173-
border-radius: $border-radius;
174-
cursor: pointer;
175-
font-size: 1.1em;
176-
font-family: 'Poppins', sans-serif;
177-
font-weight: 500;
178-
box-shadow: $box-shadow;
179-
transition:
180-
background 0.3s ease,
181-
transform 0.2s ease;
182-
183-
&:hover {
184-
transform: translateY(-2px);
185-
}
186-
}
187-
188-
.GitHubIcon {
189-
margin-left: 10px;
190-
margin-top: -3px;
191-
font-size: 1.2em;
192-
}
193-
194-
.StarIcon {
195-
margin-right: 10px;
196-
margin-top: -3px;
197-
font-size: 1.2em;
54+
color: darken($primary-color, 15%);
19855
}

0 commit comments

Comments
 (0)