Skip to content

Commit

Permalink
dots-background
Browse files Browse the repository at this point in the history
  • Loading branch information
@AB10110F
AB10110F committed Jul 18, 2023
1 parent 75e0cce commit a73e572
Show file tree
Hide file tree
Showing 8 changed files with 33 additions and 242 deletions.
Binary file added src/app/e-dot-digital-7.ttf
View file
Binary file not shown.
12 changes: 5 additions & 7 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -16,9 +15,8 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<Dots/>
<body className={inter.className}>
<Terminal/>
<Dots/>
{children}
</body>
</html>
Expand Down
227 changes: 4 additions & 223 deletions src/app/page.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
12 changes: 7 additions & 5 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<main className={styles.main}>
<section>
<article>
</article>
<p>Text</p>
</section>
<h1 className={dotFont.className}>Front-End Developer</h1>
<Terminal/>
</main>
)
}
11 changes: 6 additions & 5 deletions src/components/Dots.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<HTMLDivElement>(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);
Expand Down Expand Up @@ -79,7 +80,7 @@ const Dots = () => {
new p5(sketch, sketchRef.current as HTMLElement);
}, []);

return <div ref={sketchRef} />;
return <div className={styles.background} ref={sketchRef} />;
};

export default Dots;
6 changes: 6 additions & 0 deletions src/css/dots.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.background
{
position: absolute;
z-index: -1;
top: 0;
}
3 changes: 3 additions & 0 deletions src/css/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,9 @@ html,
body {
max-width: 100vw;
overflow-x: hidden;

border: 0; /* TODO */

}

body {
Expand Down
4 changes: 2 additions & 2 deletions src/css/terminal.module.css
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down

0 comments on commit a73e572

Please sign in to comment.