├── .eslintrc.json ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── music │ └── audio.mp3 ├── next.svg ├── thirteen.svg └── vercel.svg ├── src ├── app │ ├── api │ │ └── hello │ │ │ └── route.ts │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── assets │ ├── effects │ │ └── stars-universe.gif │ ├── icons │ │ ├── close.png │ │ ├── directory.ico │ │ ├── folder.png │ │ ├── ludmila-abl.png │ │ ├── maxify.png │ │ ├── minify.png │ │ ├── notepad.ico │ │ ├── volume-off.png │ │ ├── volume-on.png │ │ └── win95-logo.ico │ └── images │ │ └── athena-statue.png ├── components │ ├── BackgroundElements │ │ └── BackgroundElements.tsx │ ├── DraggableArea │ │ └── DraggableArea.tsx │ ├── FilePreview │ │ └── FilePreview.tsx │ ├── SystemProperties │ │ └── SystemProperties.tsx │ └── Taskbar │ │ ├── NotificationArea │ │ ├── NotificationArea.tsx │ │ └── VolumeSlider │ │ │ └── VolumeSlider.tsx │ │ ├── StartMenu │ │ └── StartMenu.tsx │ │ └── Taskbar.tsx └── data │ └── mock.ts ├── tailwind.config.js └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules\\typescript\\lib", 3 | "typescript.enablePromptUseWorkspaceTsdk": true 4 | } 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Please give this repo a ⭐ if you like it 2 | 3 | ![image](https://user-images.githubusercontent.com/86361434/226988884-610b5b5d-5fd3-4317-a7fe-2690768b866b.png) 4 | ![image](https://user-images.githubusercontent.com/86361434/226989048-9f06baaf-171b-4b78-ad7d-1f7fe74bfc9b.png) 5 | 6 | 7 | Click to unmute and listen to Rondo Alla Turca. 8 | 9 | ![image](https://user-images.githubusercontent.com/86361434/226989317-fba5def3-77de-4797-9e1a-61f1898b995c.png) 10 | 11 | 12 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 13 | 14 | ## Getting Started 15 | 16 | First, run the development server: 17 | 18 | ```bash 19 | npm run dev 20 | # or 21 | yarn dev 22 | # or 23 | pnpm dev 24 | ``` 25 | 26 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 27 | 28 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 29 | 30 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 31 | 32 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 33 | 34 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 35 | 36 | ## Learn More 37 | 38 | To learn more about Next.js, take a look at the following resources: 39 | 40 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 41 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 42 | 43 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 44 | 45 | ## Deploy on Vercel 46 | 47 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 48 | 49 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 50 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | experimental: { 4 | appDir: true, 5 | }, 6 | } 7 | 8 | module.exports = nextConfig 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mila-dev", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@types/node": "18.15.3", 13 | "@types/react": "18.0.28", 14 | "@types/react-dom": "18.0.11", 15 | "@types/react-slider": "^1.3.1", 16 | "@types/react-sound": "^1.2.3", 17 | "eslint": "8.36.0", 18 | "eslint-config-next": "13.2.4", 19 | "next": "13.2.4", 20 | "react": "18.2.0", 21 | "react-dom": "18.2.0", 22 | "react-draggable": "^4.4.5", 23 | "react-markdown": "^8.0.5", 24 | "react-slider": "^2.0.4", 25 | "react-sound": "^1.2.0", 26 | "react-timer-hook": "^3.0.5", 27 | "remark-gfm": "^3.0.1", 28 | "typescript": "4.9.5" 29 | }, 30 | "devDependencies": { 31 | "autoprefixer": "^10.4.14", 32 | "postcss": "^8.4.21", 33 | "tailwindcss": "^3.2.7" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/music/audio.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/public/music/audio.mp3 -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/api/hello/route.ts: -------------------------------------------------------------------------------- 1 | export async function GET(request: Request) { 2 | return new Response('Hello, Next.js!') 3 | } 4 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/app/favicon.ico -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | #react-markdown h1 { 7 | @apply text-black w-fit px-2; 8 | width: fit-content; 9 | background-color: theme('colors.neon-yellow'); 10 | } 11 | #react-markdown a { 12 | @apply underline; 13 | color: theme('colors.neon-yellow'); 14 | overflow-wrap: break-word; 15 | } 16 | #react-markdown pre { 17 | @apply whitespace-pre-line; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import './globals.css'; 2 | import { Inconsolata } from 'next/font/google'; 3 | import { PropsWithChildren } from 'react'; 4 | 5 | const inconsolata = Inconsolata({ subsets: ['latin'] }) 6 | 7 | export const metadata = { 8 | title: 'Full-stack developer Ludmila A.', 9 | description: 'My recreation of https://zach.dev website.', 10 | } 11 | 12 | export default function RootLayout({ 13 | children, 14 | } : PropsWithChildren) { 15 | return ( 16 | 17 | 18 | {children} 19 | 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import './globals.css'; 4 | import { Inconsolata } from 'next/font/google'; 5 | import { useState, Fragment } from 'react'; 6 | import BackgroundElements from '@/components/BackgroundElements/BackgroundElements'; 7 | import Taskbar from '@/components/Taskbar/Taskbar'; 8 | import DraggableArea from '@/components/DraggableArea/DraggableArea'; 9 | import SystemProperties from '@/components/SystemProperties/SystemProperties'; 10 | import FilePreview from '@/components/FilePreview/FilePreview'; 11 | import { WindowsFile, availableFiles, initialOpenedFiles } from '@/data/mock'; 12 | 13 | export default function Home() { 14 | const [openedFiles, setOpenedFiles] = useState>(initialOpenedFiles); 15 | return ( 16 | 17 |
18 | 19 | {openedFiles.map( 20 | (openedFile : WindowsFile, index : number) => 21 | 22 | { 23 | const newOpenedFiles = [...openedFiles]; 24 | const updatedFile = {...openedFile, isMaxified: !openedFile.isMaxified}; 25 | newOpenedFiles.splice(index, 1, updatedFile); 26 | setOpenedFiles(newOpenedFiles); 27 | }} 28 | onClose={() => { 29 | const newOpenedFiles = [...openedFiles]; 30 | newOpenedFiles.splice(index, 1); 31 | setOpenedFiles(newOpenedFiles); 32 | }} 33 | onMinify={() => { 34 | const newOpenedFiles = [...openedFiles]; 35 | const updatedFile = {...openedFile, isToggled: !openedFile.isToggled}; 36 | newOpenedFiles.splice(index, 1, updatedFile); 37 | setOpenedFiles(newOpenedFiles); 38 | }} 39 | key={openedFile.name} file={openedFile} /> 40 | 41 | )} 42 |
43 | 44 | 45 | 46 | ) 47 | } 48 | -------------------------------------------------------------------------------- /src/assets/effects/stars-universe.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/effects/stars-universe.gif -------------------------------------------------------------------------------- /src/assets/icons/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/close.png -------------------------------------------------------------------------------- /src/assets/icons/directory.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/directory.ico -------------------------------------------------------------------------------- /src/assets/icons/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/folder.png -------------------------------------------------------------------------------- /src/assets/icons/ludmila-abl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/ludmila-abl.png -------------------------------------------------------------------------------- /src/assets/icons/maxify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/maxify.png -------------------------------------------------------------------------------- /src/assets/icons/minify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/minify.png -------------------------------------------------------------------------------- /src/assets/icons/notepad.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/notepad.ico -------------------------------------------------------------------------------- /src/assets/icons/volume-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/volume-off.png -------------------------------------------------------------------------------- /src/assets/icons/volume-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/volume-on.png -------------------------------------------------------------------------------- /src/assets/icons/win95-logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/icons/win95-logo.ico -------------------------------------------------------------------------------- /src/assets/images/athena-statue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milaabl/zack-dev-recreation--nextjs-typescript/ccffa7e24f50de0caa0e392d6ab1dfe8cdd2e864/src/assets/images/athena-statue.png -------------------------------------------------------------------------------- /src/components/BackgroundElements/BackgroundElements.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import athenaStatueImg from '@/assets/images/athena-statue.png'; 3 | import starsImg from '@/assets/effects/stars-universe.gif'; 4 | 5 | 6 | export default function BackgroundElements () { 7 | return
10 |
11 | Athena goddess statue 18 |
19 |
20 | }; 21 | -------------------------------------------------------------------------------- /src/components/DraggableArea/DraggableArea.tsx: -------------------------------------------------------------------------------- 1 | import { PropsWithChildren } from 'react'; 2 | import Draggable from 'react-draggable'; 3 | 4 | export default function DraggableArea ({ 5 | children 6 | } : PropsWithChildren) { 7 | return 8 |
{children}
9 | 10 | 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/FilePreview/FilePreview.tsx: -------------------------------------------------------------------------------- 1 | import remarkGfm from 'remark-gfm'; 2 | import { WindowsFile } from '@/data/mock'; 3 | import ReactMarkdown from 'react-markdown'; 4 | import minifyIcon from '@/assets/icons/minify.png'; 5 | import maxifyIcon from '@/assets/icons/maxify.png'; 6 | import closeIcon from '@/assets/icons/close.png'; 7 | import Image from 'next/image'; 8 | 9 | interface FileEditorProps { 10 | file: WindowsFile; 11 | onClose: () => void; 12 | onMinify: () => void; 13 | onMaxify: () => void; 14 | }; 15 | 16 | export default function FileEditor ({ 17 | file, 18 | onClose, 19 | onMinify, 20 | onMaxify 21 | } : FileEditorProps) { 22 | return
23 |
24 | 25 | {file.name} 26 | {file.location} 27 | 28 |
29 | 32 | 35 | 38 |
39 |
40 |
41 | {file.name} 42 |
43 | 44 | {file.markdownContents} 45 | 46 |
47 |
48 |
49 | }; 50 | -------------------------------------------------------------------------------- /src/components/SystemProperties/SystemProperties.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { Fragment, useState } from 'react'; 4 | import folderIcon from '@/assets/icons/folder.png'; 5 | import closeIcon from '@/assets/icons/close.png'; 6 | import ludmilaAblIcon from '@/assets/icons/ludmila-abl.png'; 7 | import Image from 'next/image'; 8 | 9 | export default function SystemProperties () { 10 | const [isOpen, setIsOpen] = useState(false); 11 | const closeModal = () => setIsOpen(val => !val); 12 | return 13 | setIsOpen((val : boolean) => !val)} width={96} height={96} src={folderIcon.src} alt="System properties" /> 14 |
15 |
System properties
16 |
17 | Mila A 18 |
19 |

Mila A

20 |

This is a developer portfolio website

21 |
22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | }; 30 | -------------------------------------------------------------------------------- /src/components/Taskbar/NotificationArea/NotificationArea.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useState } from 'react'; 4 | import { useTime } from 'react-timer-hook'; 5 | import volumeOnIcon from '@/assets/icons/volume-on.png'; 6 | import volumeOffIcon from '@/assets/icons/volume-off.png'; 7 | import ReactSound from 'react-sound'; 8 | import VolumeSlider from '@/components/Taskbar/NotificationArea/VolumeSlider/VolumeSlider'; 9 | import Image from 'next/image'; 10 | 11 | export default function NotificationArea () { 12 | const [volume, setVolume] = useState(0); 13 | const [playStatus, setPlayStatus] = useState<'PLAYING' | 'STOPPED' | 'PAUSED'>('STOPPED'); 14 | const { 15 | minutes, 16 | hours, 17 | ampm 18 | } = useTime({ 19 | format: '12-hour' 20 | }); 21 | 22 | const [isOpen, setIsOpen] = useState(false); 23 | return
{ 24 | playStatus !== 'PLAYING' && setPlayStatus('PLAYING'); 25 | }} className="ml-auto border-2 border-windows-grey border-b-white h-full items-center gap-2 px-1 flex"> 26 |
27 | 32 | 33 |
34 | {hours === 0 ? '00' : hours < 10 ? '0' + hours : hours}:{minutes === 0 ? '00' : minutes < 10 ? '0' + minutes : minutes} {ampm} 35 |
; 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/Taskbar/NotificationArea/VolumeSlider/VolumeSlider.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import React from 'react'; 4 | import ReactSlider from 'react-slider'; 5 | 6 | interface VolumeSliderProps { 7 | volume: number; 8 | setVolume: React.Dispatch>; 9 | isOpen: boolean; 10 | }; 11 | 12 | export default function VolumeSlider ({ 13 | volume, 14 | setVolume, 15 | isOpen 16 | } : VolumeSliderProps) { 17 | return isOpen ?
18 | Volume 19 |
20 |
21 |
22 |
23 |
24 | { 28 | setVolume(value); 29 | }} 30 | invert 31 | renderThumb={(props, state) =>
} 32 | renderTrack={(props, state) => props.key === 'track-0' ?
:
} 33 | orientation="vertical" 34 | pearling 35 | minDistance={1} 36 | /> 37 |
38 |
39 | { 40 | setVolume((value : number) => value <= 0 ? 100 : 0); 41 | }} /> 42 | Mute 43 |
44 |
: null; 45 | }; 46 | -------------------------------------------------------------------------------- /src/components/Taskbar/StartMenu/StartMenu.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import startMenuIcon from '@/assets/icons/win95-logo.ico'; 3 | import Image from 'next/image'; 4 | import { WindowsFile } from '@/data/mock'; 5 | 6 | interface StartMenuProps { 7 | openedFiles: Array; 8 | availableFiles: Array; 9 | setOpenedFiles: React.Dispatch>>; 10 | }; 11 | 12 | export default function StartMenu ({ 13 | availableFiles, 14 | setOpenedFiles, 15 | openedFiles 16 | }: StartMenuProps) { 17 | const [isOpen, setIsOpen] = useState(false); 18 | return )} 30 |
31 | ; 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/Taskbar/Taskbar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import StartMenu from '@/components/Taskbar/StartMenu/StartMenu'; 3 | import NotificationArea from '@/components/Taskbar/NotificationArea/NotificationArea'; 4 | import { WindowsFile } from '@/data/mock'; 5 | import Image from 'next/image'; 6 | 7 | interface TaskbarProps { 8 | setOpenedFiles: React.Dispatch>>, 9 | openedFiles: Array, 10 | availableFiles: Array 11 | } 12 | 13 | export default function Taskbar ({ 14 | setOpenedFiles, 15 | openedFiles, 16 | availableFiles 17 | } : TaskbarProps) { 18 | return (
19 | 20 | 35 | 36 |
); 37 | }; 38 | -------------------------------------------------------------------------------- /src/data/mock.ts: -------------------------------------------------------------------------------- 1 | import homeIcon from '@/assets/icons/directory.ico'; 2 | import blogIcon from '@/assets/icons/notepad.ico'; 3 | 4 | export const availableFiles = [{ 5 | isToggled: true, 6 | isMaxified: false, 7 | location: 'C:/mila.dev/home', 8 | markdownContents: `# About 9 | I decided to recreate https://zach.dev using Typescript, NextJS and TailwindCSS 10 | 11 | The The GitHub repo is: https://github.com/milaabl/mila-dev-website`, 12 | name: 'Home', 13 | icon: homeIcon.src 14 | }, 15 | { 16 | isToggled: true, 17 | isMaxified: false, 18 | markdownContents: `In progress...`, 19 | location: 'C:/mila.dev/blog', 20 | name: 'Blog', 21 | icon: blogIcon.src 22 | }]; 23 | 24 | export const initialOpenedFiles = [ 25 | ...availableFiles 26 | ]; 27 | 28 | export interface WindowsFile { 29 | isMaxified: boolean; 30 | location: string; 31 | markdownContents: string; 32 | name: string; 33 | icon: string; 34 | isToggled: boolean; 35 | }; 36 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{ts,tsx}", 5 | ], 6 | mode: 'jit', 7 | important: true, 8 | theme: { 9 | extend: { 10 | colors: { 11 | 'windows-tan': '#bdbebd', 12 | 'windows-grey': '#6d6d6d', 13 | 'neon-red': '#ff0000', 14 | 'neon-yellow': '#f9ff00', 15 | 'neon-green': '#56d7e4', 16 | 'dark-blue': '#06157f' 17 | }, 18 | backgroundImage: { 19 | 'old-computer-screen': 'linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.25) 0),linear-gradient(90deg,rgba(255,0,0,.06),rgba(0,255,0,.02),rgba(0,0,255,.06))' 20 | }, 21 | backgroundSize: { 22 | 'old-computer-screen-pixel': '100% 2px,3px 100%' 23 | } 24 | }, 25 | }, 26 | plugins: [], 27 | } 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./src/*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } 29 | --------------------------------------------------------------------------------