Skip to content

Commit

Permalink
please work
Browse files Browse the repository at this point in the history
  • Loading branch information
@lai-huy
lai-huy committed Jan 10, 2025
1 parent e221079 commit d522701
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 141 deletions.
5 changes: 5 additions & 0 deletions src/app/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,8 @@ a {
}
}
}

span.visually-hidden {
display: none;
visibility: hidden;
}
210 changes: 76 additions & 134 deletions src/app/home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,90 +63,106 @@ button.btn-hover {
}
}

h1 {
all: unset;
}

div {
&.background {
background-position: top;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}

&.about {
color: #25283d;
text-align: center;
}

&#about {
color: #25283d;
text-align: center;
}

&#prog {
color: #25283d;
text-align: center;
}

&#social {
color: #25283d;
text-align: center;
}

header.name {
color: #ffffff;
text-align: center;
font-weight: bold;
font-family: "Ubuntu", sans-serif;
}

p {
&.about {
background: #d4bebebf;
text-align: center;
width: 45%;
overflow-wrap: break-word;
display: inline-block;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-size: 24pt;
}

&.prog_req {
background-color: #a09abcbf;
display: inline-block;
font-size: 24pt;
text-align: center;
}

&.links {
display: inline-flex;

svg {
&.github {
g {
fill: #ffd700;
}
}
}
}
}

&.desktop {
&.background {
background-image: url("../../public/assets/images/RoboMastersSimulation.jpg");
background-position: top;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}

div {
&.about {
color: #25283d;
font-size: 38pt;
text-align: center;
}

&#about {
color: #25283d;
text-align: center;
}

&#prog {
color: #25283d;
text-align: center;
}

&#social {
color: #25283d;
text-align: center;
header.name {
font-size: 48pt;
}
}

h1 {
all: unset;
}

header.name {
color: #ffffff;
text-align: center;
font-weight: bold;
font-size: 48pt;
font-family: "Ubuntu", sans-serif;
}

p {
&.about {
background: #d4bebebf;
font-size: 24pt;
text-align: center;
width: 45%;
overflow-wrap: break-word;
display: inline-block;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

&.prog_req {
background-color: #a09abcbf;
display: inline-block;
font-size: 24pt;
text-align: center;
}

&.links {
display: inline-flex;
margin-top: 175px;

svg {
&.github {
g {
fill: #ffd700;
}
}

&.svg-inline--fa {
height: 85px;
width: 85px;
text-decoration: none;
}
}
}
}

Expand All @@ -162,116 +178,41 @@ div {
font-size: 48pt;
font-family: "Ubuntu", sans-serif;
}

&.visually-hidden {
display: none;
visibility: hidden;
}
}
}

&.mobile {
&.background {
background-image: url("../../public/assets/images/face.jpg");
background-position: top;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}

div {
&.about {
color: #25283d;
font-size: 19pt;
text-align: center;
}

&#about {
color: #25283d;
text-align: center;
}

&#prog {
color: #25283d;
text-align: center;
}

&#social {
color: #25283d;
text-align: center;
}
}

h1 {
all: unset;
}

header.name {
color: #ffffff;
text-align: center;
font-weight: bold;
font-size: 24pt;
font-family: "Ubuntu", sans-serif;
}

p {
&.about {
background: #d4bebebf;
font-size: 12pt;
text-align: center;
width: 45%;
overflow-wrap: break-word;
display: inline-block;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

&.prog_req {
background-color: #a09abcbf;
display: inline-block;
font-size: 12pt;
text-align: center;
}

&.links {
display: inline-flex;
margin-top: 87.5px;

svg {
&.github {
g {
fill: #ffd700;
}
}

&.svg-inline--fa {
height: 43px;
width: 43px;
text-decoration: none;
}
}
}
}

span {
&.about {
background: #a09abcbf;
}

&.name {
background: #800000bf;
text-align: center;
font-weight: bold;
font-size: 24pt;
font-family: "Ubuntu", sans-serif;
}

&.visually-hidden {
display: none;
visibility: hidden;
}
}
}
Expand All @@ -288,6 +229,7 @@ svg {

&.fa-envelope {
color: #db4437;
font-size: 6em;
}

&.fa-phone {
Expand Down
5 changes: 1 addition & 4 deletions src/app/navigation/nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { GithubOriginal, LinkedinOriginal } from "devicons-react";
import Link from "next/link";
import "./nav.scss";
import "../globals.scss";

export function Navbar() {
return (
Expand All @@ -32,10 +33,6 @@ export function Navbar() {
<FontAwesomeIcon icon={faGraduationCap} color="#4d4d4e" />
<span className="visually-hidden">Qualifications</span>
</Link>
{/* <Link className="service-link" href="/service" key="/service">
<FontAwesomeIcon icon={faBellConcierge} color="#4d4d4e" />
<span className="visually-hidden">Service</span>
</Link> */}
</nav>

<ul role="menu" className="navigation">
Expand Down
15 changes: 12 additions & 3 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,23 +111,32 @@ export default function Home() {
className="btn-hover github"
onClick={handleGithubClick}
>
<GithubOriginal size="85" className="devicon github" />
<GithubOriginal
size={isMobile ? 40 : 85}
className="devicon github"
/>
</button>

<button
aria-label="Go to my LinkedIn profile"
className="btn-hover linkedin"
onClick={handleLinkedinClick}
>
<LinkedinOriginal size="85" className="devicon" />
<LinkedinOriginal
size={isMobile ? 40 : 85}
className="devicon"
/>
</button>

<button
aria-label="Send me an email"
className="btn-hover email"
onClick={handleEmailClick}
>
<FontAwesomeIcon icon={faEnvelope} />
<FontAwesomeIcon
icon={faEnvelope}
className="devicon"
/>
</button>
</p>
</div>
Expand Down

0 comments on commit d522701

Please sign in to comment.