diff --git a/package-lock.json b/package-lock.json index d68cf46..4ad0b38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,9 @@ "dependencies": { "next": "14.2.5", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^5.3.0", + "typewriter-effect": "^2.21.0" }, "devDependencies": { "@types/node": "^20", @@ -3185,7 +3187,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -3454,6 +3455,12 @@ "node": ">=8" } }, + "node_modules/performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==", + "license": "MIT" + }, "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", @@ -3525,7 +3532,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -3564,6 +3570,15 @@ ], "license": "MIT" }, + "node_modules/raf": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", + "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", + "license": "MIT", + "dependencies": { + "performance-now": "^2.1.0" + } + }, "node_modules/react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", @@ -3589,11 +3604,19 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/reflect.getprototypeof": { @@ -4386,6 +4409,20 @@ "node": ">=14.17" } }, + "node_modules/typewriter-effect": { + "version": "2.21.0", + "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz", + "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1", + "raf": "^3.4.1" + }, + "peerDependencies": { + "react": "^17.x || ^18.x", + "react-dom": "^17.x || ^18.x" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index de5902c..1cdf194 100644 --- a/package.json +++ b/package.json @@ -6,19 +6,22 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss,md}'" }, "dependencies": { + "next": "14.2.5", "react": "^18", "react-dom": "^18", - "next": "14.2.5" + "react-icons": "^5.3.0", + "typewriter-effect": "^2.21.0" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", - "eslint-config-next": "14.2.5" + "eslint-config-next": "14.2.5", + "typescript": "^5" } } diff --git a/public/bash.svg b/public/bash.svg new file mode 100644 index 0000000..135a86a --- /dev/null +++ b/public/bash.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/public/bxs-folder.svg b/public/bxs-folder.svg new file mode 100644 index 0000000..c4555f6 --- /dev/null +++ b/public/bxs-folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/css.svg b/public/css.svg new file mode 100644 index 0000000..b05df9c --- /dev/null +++ b/public/css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/docker.svg b/public/docker.svg new file mode 100644 index 0000000..27a8697 --- /dev/null +++ b/public/docker.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/express.svg b/public/express.svg new file mode 100644 index 0000000..36eda1f --- /dev/null +++ b/public/express.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/public/flask.svg b/public/flask.svg new file mode 100644 index 0000000..59274e5 --- /dev/null +++ b/public/flask.svg @@ -0,0 +1,221 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/git.svg b/public/git.svg new file mode 100644 index 0000000..93e0e4e --- /dev/null +++ b/public/git.svg @@ -0,0 +1,27 @@ + + + + + team-collaboration/version-control/git + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/public/html.svg b/public/html.svg new file mode 100644 index 0000000..37e9e74 --- /dev/null +++ b/public/html.svg @@ -0,0 +1,19 @@ + + + + + html [#124] + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/javascript.svg b/public/javascript.svg new file mode 100644 index 0000000..dd48ef2 --- /dev/null +++ b/public/javascript.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/linux.svg b/public/linux.svg new file mode 100644 index 0000000..2346a36 --- /dev/null +++ b/public/linux.svg @@ -0,0 +1,6 @@ + + + linux + + + \ No newline at end of file diff --git a/public/lua.svg b/public/lua.svg new file mode 100644 index 0000000..8823bf6 --- /dev/null +++ b/public/lua.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/mariadb.svg b/public/mariadb.svg new file mode 100644 index 0000000..e3da2e1 --- /dev/null +++ b/public/mariadb.svg @@ -0,0 +1,6 @@ + + + +mariadb + + \ No newline at end of file diff --git a/public/mongodb.svg b/public/mongodb.svg new file mode 100644 index 0000000..ec079b5 --- /dev/null +++ b/public/mongodb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/narutopxl.png b/public/narutopxl.png new file mode 100644 index 0000000..b04f553 Binary files /dev/null and b/public/narutopxl.png differ diff --git a/public/neovim.svg b/public/neovim.svg new file mode 100644 index 0000000..8de1a76 --- /dev/null +++ b/public/neovim.svg @@ -0,0 +1,2 @@ + +Neovim icon \ No newline at end of file diff --git a/public/nextjs.svg b/public/nextjs.svg new file mode 100644 index 0000000..50ccbbd --- /dev/null +++ b/public/nextjs.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/public/nodejs.svg b/public/nodejs.svg new file mode 100644 index 0000000..d44e3fd --- /dev/null +++ b/public/nodejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/pixilart-drawing.png b/public/pixilart-drawing.png new file mode 100644 index 0000000..979bfd5 Binary files /dev/null and b/public/pixilart-drawing.png differ diff --git a/public/postman.svg b/public/postman.svg new file mode 100644 index 0000000..52ea797 --- /dev/null +++ b/public/postman.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/python.svg b/public/python.svg new file mode 100644 index 0000000..fa16091 --- /dev/null +++ b/public/python.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/react.svg b/public/react.svg new file mode 100644 index 0000000..cb133a9 --- /dev/null +++ b/public/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/components/asciiart/asciiart.module.css b/src/app/components/asciiart/asciiart.module.css new file mode 100644 index 0000000..168a8bf --- /dev/null +++ b/src/app/components/asciiart/asciiart.module.css @@ -0,0 +1,15 @@ +@import url("https://fonts.cdnfonts.com/css/common-pixel"); + +.typingText { + font-size: 1.2rem; + font-family: "Space mono", monospace; + font-weight: 300; + display: flex; + flex-direction: column; +} + +.typingText h3 { + color: red; + margin: auto; + margin-top: 30px; +} diff --git a/src/app/components/asciiart/asciiart.tsx b/src/app/components/asciiart/asciiart.tsx new file mode 100644 index 0000000..a7c7f65 --- /dev/null +++ b/src/app/components/asciiart/asciiart.tsx @@ -0,0 +1,20 @@ +import React, { useEffect } from "react"; +import { startTyping } from "../../scripts/animatedTyping"; +import styles from "./asciiart.module.css"; + +const TypingAnimation = () => { + useEffect(() => { + startTyping( + "typingText", + "hello world i am Ramdani Ramdane am born on 2002 , I am a develloper , my blaz is REY , m also an artist and a gym lover etc adbcuaidxbkcsq
have a good vibe when u navigate on my portfolio and apreciate it if u are a neovim user :)

> explore

", + 100 + ); + }, []); + return ( +
+ +
+ ); +}; + +export default TypingAnimation; diff --git a/src/app/components/buffer/buffer.module.css b/src/app/components/buffer/buffer.module.css new file mode 100644 index 0000000..e268199 --- /dev/null +++ b/src/app/components/buffer/buffer.module.css @@ -0,0 +1,4 @@ +.bufferContainer { + height: 20px; + backdrop-filter: blur(8px); +} diff --git a/src/app/components/buffer/buffer.tsx b/src/app/components/buffer/buffer.tsx new file mode 100644 index 0000000..60990d6 --- /dev/null +++ b/src/app/components/buffer/buffer.tsx @@ -0,0 +1,8 @@ +import styles from "./buffer.module.css"; + +function Buffer() { + return (
+

buffer

+
) +} +export default Buffer; diff --git a/src/app/components/display/display.module.css b/src/app/components/display/display.module.css new file mode 100644 index 0000000..378a50a --- /dev/null +++ b/src/app/components/display/display.module.css @@ -0,0 +1,5 @@ +.container { + background: #080c1299; + backdrop-filter: blur(8px); + border: solid 3px blue; +} diff --git a/src/app/components/display/display.tsx b/src/app/components/display/display.tsx new file mode 100644 index 0000000..74695e5 --- /dev/null +++ b/src/app/components/display/display.tsx @@ -0,0 +1,18 @@ +"use client"; +import styles from "./display.module.css"; +import Index from "../../index"; +import { usePathname } from "next/navigation"; + +function DisplayArea() { + const router = usePathname(); + const pathname = router; + const renderPage = () => { + switch (pathname) { + case "/index": + return ; + } + }; + return
{renderPage()}
; +} + +export default DisplayArea; diff --git a/src/app/components/navbar/navbar.module.css b/src/app/components/navbar/navbar.module.css new file mode 100644 index 0000000..e29bb24 --- /dev/null +++ b/src/app/components/navbar/navbar.module.css @@ -0,0 +1,61 @@ +@import url("https://fonts.googleapis.com/css2?family=Poiret+One&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); +.leftSide { + background: #080c1299; + backdrop-filter: blur(8px); + height: 100vh; + width: 230px; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.links { + list-style-type: none; + cursor: pointer; + width: 100%; +} + +.logoContainer { + width: 100%; + padding: 0; + display: flex; +} + +.logo { + font-family: "Space mono", monospace; + margin: auto; + font-size: 1.8rem; + font-weight: 200; + color: #eeeeee; +} + +.folderName { + font-family: "Space mono", monospace; + color: #dddddd; + font-weight: 500; + padding: 5px 0px 0px 20px; +} + +.pwdName { + color: #dddddd; + font-weight: 300; + font-style: italic; + margin-bottom: 5px; +} + +.pwdName:hover { + color: #ffffff; +} + +.fileName { + padding: 5px 0px 5px 45px; +} + +.fileName:hover { + background: #191e2a; +} + +.fileNameA { + padding: 5px 0px 5px 45px; + background: #191e2a; +} diff --git a/src/app/components/navbar/navbar.tsx b/src/app/components/navbar/navbar.tsx new file mode 100644 index 0000000..7c71283 --- /dev/null +++ b/src/app/components/navbar/navbar.tsx @@ -0,0 +1,144 @@ +"use client"; +import { useState } from "react"; +import styles from "./navbar.module.css"; +import { BiSolidFolder } from "react-icons/bi"; +import { BiLogoJavascript } from "react-icons/bi"; +import Link from "next/link"; +import React from "react"; +import { usePathname } from "next/navigation"; + +function NavBar() { + const [indicatorAbout, setIndicatorAbout] = useState(1); + const [indicatorProjects, setIndicatorProjects] = useState(1); + const [indicatorContact, setIndicatorContact] = useState(1); + const [indicatorHobies, setIndicatorHobies] = useState(1); + const route = usePathname(); + const pathname = route; + console.log(pathname); + function handleAboutClick() { + setIndicatorAbout((a) => a * -1); + } + function handleProjectsClick() { + setIndicatorProjects((a) => a * -1); + } + function handleContactClick() { + setIndicatorContact((a) => a * -1); + } + function handleHobiesClick() { + setIndicatorHobies((a) => a * -1); + } + + return ( +
+
+

REY

+
+ +
+ ); +} + +export default React.memo(NavBar); diff --git a/src/app/components/title/title.module.css b/src/app/components/title/title.module.css new file mode 100644 index 0000000..8182bf9 --- /dev/null +++ b/src/app/components/title/title.module.css @@ -0,0 +1,10 @@ +.text{ + color: #aaa; + font-size: 1.5rem; + font-weight: 900; + margin: auto; +} + +.textColored{ + color:red ; +} diff --git a/src/app/components/title/title.tsx b/src/app/components/title/title.tsx new file mode 100644 index 0000000..2177b0e --- /dev/null +++ b/src/app/components/title/title.tsx @@ -0,0 +1,11 @@ +import styles from './title.module.css' + +function Title(props){ + return( +
+

{props.text} {props.textColored}

+
+ ) +} + +export default Title diff --git a/src/app/experience/page.tsx b/src/app/experience/page.tsx new file mode 100644 index 0000000..31911b6 --- /dev/null +++ b/src/app/experience/page.tsx @@ -0,0 +1,7 @@ +export default function experience() { + return ( +
+

d experience page

+
+ ); +} diff --git a/src/app/globals.css b/src/app/globals.css index f4bd77c..8c45dad 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,107 +1,106 @@ :root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", - "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", - "Fira Mono", "Droid Sans Mono", "Courier New", monospace; + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", + "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", + "Fira Mono", "Droid Sans Mono", "Courier New", monospace; - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; } @media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); + --primary-glow: radial-gradient( + rgba(1, 65, 255, 0.4), + rgba(1, 65, 255, 0) + ); + --secondary-glow: linear-gradient( + to bottom right, + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0.3) + ); - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); + --tile-start-rgb: 2, 13, 46; + --tile-end-rgb: 2, 5, 19; + --tile-border: conic-gradient( + #ffffff80, + #ffffff40, + #ffffff30, + #ffffff20, + #ffffff10, + #ffffff10, + #ffffff80 + ); - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; + } } * { - box-sizing: border-box; - padding: 0; - margin: 0; + box-sizing: border-box; + padding: 0; + margin: 0; } html, body { - max-width: 100vw; - overflow-x: hidden; + max-width: 100vw; + overflow: hidden; } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + color: rgb(var(--foreground-rgb)); + background: #04060a; + padding: 20px; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } @media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } + html { + color-scheme: dark; + } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3314e47..f79a32c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,22 +1,84 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; +import NavBar from "./components/navbar/navbar"; +import Buffer from "./components/buffer/buffer"; +import styles from "./page.module.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Rey", + description: "", }; export default function RootLayout({ - children, + children, }: Readonly<{ - children: React.ReactNode; + children: React.ReactNode; }>) { - return ( - - {children} - - ); + return ( + + +
+ + + + + + + + +
+
+
+ +
+
+ +
+
+

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+

10

+

11

+

12

+

13

+

14

+

15

+

16

+

17

+

18

+

19

+

20

+

21

+

22

+

23

+

24

+

25

+

26

+

27

+

29

+

30

+

31

+

32

+

33

+

34

+
+
+ {children} +
+
+
+
+ + + ); } diff --git a/src/app/page.module.css b/src/app/page.module.css index 5c4b1e6..755d982 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -1,230 +1,172 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - 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)); - max-width: 100%; - width: var(--max-width); -} - -.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; - text-wrap: balance; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; +.container { + display: flex; + border: solid 2px #88f; + border-radius: 10px; + height: calc(100vh - 40px); + overflow: hidden; } - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; +.wrapper { + position: fixed; + z-index: -1; } - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; +.wrapper span { + position: fixed; + bottom: -180px; + height: 50px; + width: 50px; + z-index: -1; + background-color: #18191f; + box-shadow: + 0 0 50px #0072ff, + 0 0 100px #0072ff, + 0 0 150px #0072ff, + 0 0 200px #0072ff; + animation: animate 10s linear infinite; +} +.wrapper span:nth-child(1) { + left: 60px; + animation-delay: 0.6s; +} +.wrapper span:nth-child(2) { + left: 10%; + animation-delay: 3s; + width: 60px; + height: 60px; +} +.wrapper span:nth-child(3) { + left: 20%; + animation-delay: 2s; +} +.wrapper span:nth-child(4) { + left: 30%; + animation-delay: 5s; + width: 80px; + height: 80px; +} +.wrapper span:nth-child(5) { + left: 40%; + animation-delay: 1s; +} +.wrapper span:nth-child(6) { + left: 50%; + animation-delay: 7s; +} +.wrapper span:nth-child(7) { + left: 60%; + animation-delay: 6s; + width: 100px; + height: 100px; +} +.wrapper span:nth-child(8) { + left: 70%; + animation-delay: 8s; +} +.wrapper span:nth-child(9) { + left: 80%; + animation-delay: 6s; + width: 90px; + height: 90px; +} +.wrapper span:nth-child(10) { + left: 90%; + animation-delay: 4s; +} +.banner { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} +.content h2 b { + -webkit-text-fill-color: transparent; + -webkit-text-stroke-width: 3px; + -webkit-text-stroke-color: #fff; + font-family: montserrat; + font-size: 80px; + text-transform: uppercase; + letter-spacing: 12px; +} +@keyframes animate { + 0% { + transform: translateY(0); + opacity: 1; + } + 80% { + opacity: 0.7; + } + 100% { + transform: translateY(-800px) rotate(360deg); + opacity: 0; + } +} + +.leftSide { + width: 250px; +} + +.rightSide { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; } -.center::before, -.center::after { - content: ""; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); +.vp { + display: flex; + flex-direction: row; + width: wrap; + height: 100%; } -.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); - } +.lineCounter { + width: 20px; + height: calc(100% - 20px);; + background: #080c1299; + backdrop-filter: blur(8px); + display: flex; + flex-direction: column; + text-align: right; + overflow: hidden; } -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } +.lineCounter p { + color: #888888; } -/* 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 { +.displayContainer { + overflow: scroll; + background: #080c1299; + height: 100%; + width: 100%; display: flex; + flex-direction: row; 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; - } + align-items: start; + align-content: center; + text-align: center; + padding: 20px; + backdrop-filter: blur(8px); } -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } +.reyVimImg { + filter: grayscale(100%) brightness(80%) contrast(120%); + width: 100%; + height: 100%; } -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } +.reyVimImgContainer { + display: flex; + width: 100px; + margin: auto; + border-bottom: solid 1px #555; } -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } +.card { + width: 600px; + height: 300px; + margin: auto; + margin-top: 20px; + border: double #aaa; + padding: 10px; + text-align: left; } diff --git a/src/app/page.tsx b/src/app/page.tsx index d2c63a4..54c5aec 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,95 +1,19 @@ +"use client"; +import reyVimImg from "../../public/narutopxl.png"; import Image from "next/image"; import styles from "./page.module.css"; +import Link from "next/link"; +import TypingAnimation from "./components/asciiart/asciiart"; export default function Home() { - return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{" "} - Vercel Logo - + return ( +
+
+ +
+
+ +
-
- -
- Next.js Logo -
- -
- -

- Docs -> -

-

Find in-depth information about Next.js features and API.

- - - -

- Learn -> -

-

Learn about Next.js in an interactive course with quizzes!

- - - -

- Templates -> -

-

Explore starter templates for Next.js.

- - - -

- Deploy -> -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ); + ); } diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx new file mode 100644 index 0000000..69fd948 --- /dev/null +++ b/src/app/projects/page.tsx @@ -0,0 +1,7 @@ +export default function projects() { + return ( + <> +

projects page

+ + ); +} diff --git a/src/app/scripts/animatedTyping.js b/src/app/scripts/animatedTyping.js new file mode 100644 index 0000000..a3c63be --- /dev/null +++ b/src/app/scripts/animatedTyping.js @@ -0,0 +1,17 @@ +export function startTyping(elementId, text, speed) { + const element = document.getElementById(elementId); + element.innerHTML = ""; + let i = 0; + let ch = ""; + let clinDash; + const type = () => { + if (i < text.length) { + ch += text.charAt(i); + clinDash = !(i % 2) || i == text.length - 1 ? "" : "_"; + element.innerHTML = ch + clinDash; + i += 1; + setTimeout(type, speed); + } + }; + type(); +} diff --git a/src/app/skils/page.module.css b/src/app/skils/page.module.css new file mode 100644 index 0000000..75833e3 --- /dev/null +++ b/src/app/skils/page.module.css @@ -0,0 +1,46 @@ +.gridContainer{ + width: 100%; + height: 100%; + overflow: scroll; + display: grid; + grid-template-columns: repeat(5,1fr); + margin: auto; + gap: 50px; + margin-top: 50px; + margin-bottom: 100px; +} + +.gridItem{ + background: #080c1255; + backdrop-filter: blur(2px); + width: 100px; + height: 100px; + margin: 10px; + border: solid 1px #aaa; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + +} + +.gridItem:hover{ + +} + +.icon{ + margin: auto; + filter: invert(99%) sepia(0%) saturate(1576%) hue-rotate(-21deg) brightness(80%) contrast(73%); +} + +.icon:hover{ + +} + +@keyframes rotate { + 0%{transform: rotateZ(0deg);} + 25%{transform: rotateZ(90deg);} + 50%{transform: rotateZ(180deg);} + 75%{transform: rotateZ(270deg);} + 100%{transform: rotateZ(360deg);} +} diff --git a/src/app/skils/page.tsx b/src/app/skils/page.tsx new file mode 100644 index 0000000..d471043 --- /dev/null +++ b/src/app/skils/page.tsx @@ -0,0 +1,28 @@ +import styles from "./page.module.css"; +import Title from "../components/title/title" +import Image from "next/image" + + +function SkilsDisplay(){ + let skils = ["html.svg","python.svg","javascript.svg","linux.svg","css.svg","bash.svg","lua.svg","nodejs.svg","express.svg","nextjs.svg","mongodb.svg" , "git.svg","postman.svg","neovim.svg","react.svg","docker.svg"] + skils.map((skil)=>( + skil=`../../../public/$[skil]` + )) + return( +
+ {skils.map((skil)=>( +
skil
+ ))} +
+ ) +} + +export default function skils() { + return( +
+ + <SkilsDisplay /> + </div> + + ) +}