diff --git a/src/app/e-dot-digital-7.ttf b/src/app/e-dot-digital-7.ttf
new file mode 100644
index 0000000..2e48a8d
Binary files /dev/null and b/src/app/e-dot-digital-7.ttf differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 947b8ae..e2b2bb4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,11 @@
-/* import './globals.css'*/
+/* import '@/css/globals.css' */
import { Inter } from 'next/font/google'
-import Terminal from '@/components/Terminal'
-import Dots from '@/components/Dots'
+import Dots from '@/components/Dots'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app',
+ title: 'AB10110F',
+ description: 'Portfolio',
}
export default function RootLayout({
@@ -16,9 +15,8 @@ export default function RootLayout({
}) {
return (
+
-
-
{children}
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 9411a5e..8da502b 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -3,227 +3,8 @@
flex-direction: column;
justify-content: space-between;
align-items: center;
- padding: 6rem;
+ padding: 4rem;
min-height: 100vh;
-}
-
-.description {
- display: inherit;
- justify-content: inherit;
- align-items: inherit;
- font-size: 0.85rem;
- max-width: var(--max-width);
- width: 100%;
- z-index: 2;
- font-family: var(--font-mono);
-}
-
-.description a {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 0.5rem;
-}
-
-.description p {
- position: relative;
- margin: 0;
- padding: 1rem;
- background-color: rgba(var(--callout-rgb), 0.5);
- border: 1px solid rgba(var(--callout-border-rgb), 0.3);
- border-radius: var(--border-radius);
-}
-
-.code {
- font-weight: 700;
- font-family: var(--font-mono);
-}
-
-.grid {
- display: grid;
- grid-template-columns: repeat(4, minmax(25%, auto));
- width: var(--max-width);
- max-width: 100%;
-}
-
-.card {
- padding: 1rem 1.2rem;
- border-radius: var(--border-radius);
- background: rgba(var(--card-rgb), 0);
- border: 1px solid rgba(var(--card-border-rgb), 0);
- transition: background 200ms, border 200ms;
-}
-
-.card span {
- display: inline-block;
- transition: transform 200ms;
-}
-
-.card h2 {
- font-weight: 600;
- margin-bottom: 0.7rem;
-}
-
-.card p {
- margin: 0;
- opacity: 0.6;
- font-size: 0.9rem;
- line-height: 1.5;
- max-width: 30ch;
-}
-
-.center {
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- padding: 4rem 0;
-}
-
-.center::before {
- background: var(--secondary-glow);
- border-radius: 50%;
- width: 480px;
- height: 360px;
- margin-left: -400px;
-}
-
-.center::after {
- background: var(--primary-glow);
- width: 240px;
- height: 180px;
- z-index: -1;
-}
-
-.center::before,
-.center::after {
- content: '';
- left: 50%;
- position: absolute;
- filter: blur(45px);
- transform: translateZ(0);
-}
-
-.logo {
- position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
- .card:hover {
- background: rgba(var(--card-rgb), 0.1);
- border: 1px solid rgba(var(--card-border-rgb), 0.15);
- }
-
- .card:hover span {
- transform: translateX(4px);
- }
-}
-
-@media (prefers-reduced-motion) {
- .card:hover span {
- transform: none;
- }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
- .content {
- padding: 4rem;
- }
-
- .grid {
- grid-template-columns: 1fr;
- margin-bottom: 120px;
- max-width: 320px;
- text-align: center;
- }
-
- .card {
- padding: 1rem 2.5rem;
- }
-
- .card h2 {
- margin-bottom: 0.5rem;
- }
-
- .center {
- padding: 8rem 0 6rem;
- }
-
- .center::before {
- transform: none;
- height: 300px;
- }
-
- .description {
- font-size: 0.8rem;
- }
-
- .description a {
- padding: 1rem;
- }
-
- .description p,
- .description div {
- display: flex;
- justify-content: center;
- position: fixed;
- width: 100%;
- }
-
- .description p {
- align-items: center;
- inset: 0 0 auto;
- padding: 2rem 1rem 1.4rem;
- border-radius: 0;
- border: none;
- border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
- background: linear-gradient(
- to bottom,
- rgba(var(--background-start-rgb), 1),
- rgba(var(--callout-rgb), 0.5)
- );
- background-clip: padding-box;
- backdrop-filter: blur(24px);
- }
-
- .description div {
- align-items: flex-end;
- pointer-events: none;
- inset: auto 0 0;
- padding: 2rem;
- height: 200px;
- background: linear-gradient(
- to bottom,
- transparent 0%,
- rgb(var(--background-end-rgb)) 40%
- );
- z-index: 1;
- }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
- .grid {
- grid-template-columns: repeat(2, 50%);
- }
-}
-
-@media (prefers-color-scheme: dark) {
- .vercelLogo {
- filter: invert(1);
- }
-
- .logo {
- filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
- }
-}
-
-@keyframes rotate {
- from {
- transform: rotate(360deg);
- }
- to {
- transform: rotate(0deg);
- }
-}
+ font-size: 50px;
+ color: white;
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c1940f9..e424a0d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,14 +1,16 @@
import Image from 'next/image'
import styles from './page.module.css'
+import { Metadata } from 'next'
+import Terminal from '@/components/Terminal'
+import localFont from 'next/font/local'
+
+const dotFont = localFont({ src: './e-dot-digital-7.ttf' })
export default function Home() {
return (
-
+ Front-End Developer
+
)
}
diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx
index a525797..2b0380c 100644
--- a/src/components/Dots.tsx
+++ b/src/components/Dots.tsx
@@ -1,21 +1,22 @@
"use client"
import React, { useEffect, useRef } from 'react';
import p5 from 'p5';
+import styles from '../css/dots.module.css'
const Dots = () => {
const sketchRef = useRef(null);
useEffect(() => {
const dotSize:number = 4;
- const spacing:number = dotSize * 8;
- const minTvalue:number = 40;
- const areaAffected:number = 60;
+ const spacing:number = dotSize * 16;
+ const minTvalue:number = 50;
+ const areaAffected:number = 80;
let mouseIsMoving:boolean = false;
let dots:any[] = [];
const sketch = (p: p5) => {
p.setup = () => {
- p.createCanvas(p.windowWidth, 400);
+ p.createCanvas(p.windowWidth, document.documentElement.scrollHeight);
for (let i = 0; i < p.width; i += spacing) {
for (let j = 0; j < p.height; j += spacing) {
let dot = new Dot(i + spacing / 2, j + spacing / 2, dotSize);
@@ -79,7 +80,7 @@ const Dots = () => {
new p5(sketch, sketchRef.current as HTMLElement);
}, []);
- return ;
+ return ;
};
export default Dots;
diff --git a/src/css/dots.module.css b/src/css/dots.module.css
new file mode 100644
index 0000000..420f86c
--- /dev/null
+++ b/src/css/dots.module.css
@@ -0,0 +1,6 @@
+.background
+{
+ position: absolute;
+ z-index: -1;
+ top: 0;
+}
\ No newline at end of file
diff --git a/src/css/globals.css b/src/css/globals.css
index d4f491e..fc42e73 100644
--- a/src/css/globals.css
+++ b/src/css/globals.css
@@ -83,6 +83,9 @@ html,
body {
max-width: 100vw;
overflow-x: hidden;
+
+ border: 0; /* TODO */
+
}
body {
diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css
index c8d38ef..5e8ca66 100644
--- a/src/css/terminal.module.css
+++ b/src/css/terminal.module.css
@@ -1,14 +1,14 @@
.terminal
{
height: 400px;
- width: 55%;
+ width: 70%;
background-color: rgb(26, 26, 26);
color: white;
box-sizing: border-box;
font-size: 15px;
overflow-y:auto;
overflow-x: hidden;
- border: 1px solid rgb(26, 26, 26);
+ border: 1px solid rgb(117, 117, 117);
}
.windowOptions