Skip to content

Commit be09554

Browse files
blackd44blackd44
committed
adding the contact page - Day 4
1 parent f6ca6f1 commit be09554

File tree

7 files changed

+154
-10
lines changed

7 files changed

+154
-10
lines changed

‎components/content.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Content = ({ children, type }) => {
2323
<Link href=''><span>my Achievements</span></Link>
2424
</div>
2525
<div>
26-
<Link href=''><span>contact me</span></Link>
26+
<Link href={router.pathname == '/contact' ? '/' : '/contact'} className={(router.pathname == '/contact' ? 'active' : '') + ' ' + (router.pathname.includes('/contact') ? 'inside' : '')}><span>contact me</span></Link>
2727
</div>
2828
</div>
2929
</div>

‎components/header.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import Link from "next/link";
22
import { useEffect, useState } from "react";
3-
import CodepenSvg from "./svg/codepen";
4-
import GithubSvg from "./svg/github";
5-
import LinkedinSvg from "./svg/linkedin";
6-
import Settings from "./svg/settings";
3+
import { CodepenSvg, GithubSvg, LinkedinSvg, Settings } from "./svg";
74

85
const Header = () => {
96
let [lineColor1Value, setLineColor1] = useState('#00ffff')

‎components/layout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const Layout = ({ children }) => {
99
<Head>
1010
<title>BlackD44</title>
1111
</Head>
12-
<Mouse />
1312
<div className="main-container">
1413
<div className="main-container-outer">
1514
<div className="main-container-inner">
@@ -21,6 +20,7 @@ const Layout = ({ children }) => {
2120
</div>
2221
</div>
2322
</div>
23+
<Mouse />
2424
</>
2525
);
2626
}

‎components/svg/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import GithubSvg from "./github";
2+
import LinkedinSvg from "./linkedin";
3+
import Settings from "./settings";
4+
import CodepenSvg from "./codepen";
5+
6+
module.exports = {
7+
GithubSvg,
8+
LinkedinSvg,
9+
Settings,
10+
CodepenSvg,
11+
}

‎pages/contact/index.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Head from "next/head";
2+
import Content from "../../components/content";
3+
4+
const Contacts = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Contact | BlackD44</title>
9+
</Head>
10+
<Content type="links">
11+
<h3><span data-cursor-filter="invert(1)" data-cursor-size="50px">Message me </span></h3>
12+
<div>
13+
<form>
14+
<div>
15+
<label>
16+
<span>Full Name</span>
17+
<input type='text' required />
18+
</label>
19+
</div>
20+
<div>
21+
<label>
22+
<span>Email</span>
23+
<input type='email' required />
24+
</label>
25+
</div>
26+
<div>
27+
<label>
28+
<span>Message</span>
29+
<textarea onChange={(e) => {
30+
e.target.style.height = e.target.scrollHeight + "px"
31+
}
32+
} required />
33+
</label>
34+
</div>
35+
<button data-cursor-filter="invert(1)" data-cursor-size="40px">Send Message</button>
36+
</form>
37+
</div>
38+
</Content>
39+
</>
40+
);
41+
}
42+
43+
export default Contacts;

‎styles/globals.scss‎

Lines changed: 96 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -369,9 +369,99 @@ main {
369369
>div {
370370
padding-left: calc(var(--padding-size) + 10px);
371371
position: relative;
372+
373+
div:has(input, textarea, select) {
374+
margin-bottom: 1.5rem;
375+
376+
>label {
377+
@include flexColumns;
378+
position: relative;
379+
padding: 0 0 10px;
380+
min-height: 40px;
381+
height: fit-content;
382+
border-bottom: 2px solid currentColor;
383+
384+
>span {
385+
display: inline-block;
386+
width: 100%;
387+
background: var(--color-dark);
388+
position: absolute;
389+
translate: 0 21px 0;
390+
font-size: 120%;
391+
letter-spacing: 2px;
392+
transition: var(--fast-transition-speed) ease;
393+
}
394+
395+
input,
396+
textarea,
397+
select {
398+
@include fill;
399+
margin: 20px 0 0;
400+
padding: 0;
401+
border: none;
402+
background-color: transparent;
403+
color: var(--color-bright);
404+
outline: none;
405+
font-size: 120%;
406+
}
407+
408+
textarea {
409+
padding-bottom: .5rem;
410+
resize: none;
411+
height: 38px;
412+
}
413+
}
414+
415+
>label:has(input:valid,
416+
textarea:valid,
417+
select:valid,
418+
input:focus,
419+
textarea:focus,
420+
select:focus) {
421+
>span {
422+
font-size: 80%;
423+
translate: 0 0 0;
424+
}
425+
}
426+
427+
>label:has(textarea) {
428+
height: fit-content;
429+
padding-bottom: 0;
430+
}
431+
}
432+
433+
button {
434+
width: 100%;
435+
padding: 0.7rem;
436+
border: 1px solid transparent;
437+
border-radius: 4px;
438+
background: var(--color-bright);
439+
color: var(--color-dark);
440+
font-size: 120%;
441+
font-weight: bold;
442+
margin-top: 3rem;
443+
}
444+
445+
button:hover {
446+
box-shadow: 0 0 1.5rem var(--color-hidden);
447+
}
448+
449+
button:disabled {
450+
border-color: currentColor;
451+
background-color: var(--color-dark);
452+
color: var(--color-hidden);
453+
}
454+
}
455+
456+
@media screen and (max-width: 900px) {
457+
>div {
458+
form {
459+
padding-right: calc(var(--padding-size) + 10px);
460+
}
461+
}
372462
}
373463

374-
>div::after {
464+
>div::before {
375465
content: '';
376466
height: 100%;
377467
width: var(--sm-line-width);
@@ -430,15 +520,15 @@ footer {
430520
}
431521

432522
::-webkit-scrollbar-track {
433-
background: #fff4;
523+
background: #fff1;
434524
}
435525

436526
::-webkit-scrollbar-thumb {
437-
background: var(--color-active);
527+
background: var(--linear-gradient-medium);
438528
}
439529

440530
::-webkit-scrollbar-thumb:hover {
441-
background: var(--color-active-2);
531+
background: var(--linear-gradient-medium-invert);
442532
}
443533

444534
.linear-gradient-md {
@@ -460,6 +550,8 @@ footer {
460550
border: 2px solid currentColor;
461551
border-width: 0;
462552
translate: -100px -100px;
553+
top: 0;
554+
left: 0;
463555

464556
>div {
465557
position: absolute;

‎styles/variable.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
//gradients
1010
--linear-gradient-medium-half: linear-gradient(135deg, var(--color-active) 0%, var(--color-active-2) 50%);
1111
--linear-gradient-medium: linear-gradient(135deg, var(--color-active), var(--color-active-2));
12+
--linear-gradient-medium-invert: linear-gradient(-45deg, var(--color-active), var(--color-active-2));
1213
--linear-gradient-large: linear-gradient(135deg, var(--color-active) 0%, var(--color-active-2) 15%, var(--color-active-2) 85%, var(--color-active) 99%);
1314

1415
//numbers

0 commit comments

Comments
 (0)