diff --git a/README.md b/README.md index e215bc4..6898d08 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,2 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -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. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +# Last2014 +Hi! \ No newline at end of file diff --git a/next.config.ts b/next.config.ts index e9ffa30..00c940e 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,10 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - /* config options here */ + output: "export", + images: { + unoptimized: true, + }, }; export default nextConfig; diff --git a/package-lock.json b/package-lock.json index 5a4e2f0..ee57b83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,15 +8,21 @@ "name": "last2014", "version": "0.1.0", "dependencies": { - "next": "15.3.3", - "react": "^19.0.0", - "react-dom": "^19.0.0" + "@icons-pack/react-simple-icons": "^13.0.0", + "@types/eslint": "^9.6.1", + "@types/next": "^9.0.0", + "bulma": "^1.0.4", + "next": "^15.3.3", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-fast-marquee": "^1.6.5" }, "devDependencies": { "@eslint/eslintrc": "^3", + "@iconify/react": "^6.0.0", "@types/node": "^20", - "@types/react": "^19", - "@types/react-dom": "^19", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", "eslint": "^9", "eslint-config-next": "15.3.3", "typescript": "^5" @@ -262,6 +268,38 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@iconify/react": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@iconify/react/-/react-6.0.0.tgz", + "integrity": "sha512-eqNscABVZS8eCpZLU/L5F5UokMS9mnCf56iS1nM9YYHdH8ZxqZL9zyjSwW60IOQFsXZkilbBiv+1paMXBhSQnw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@iconify/types": "^2.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/cyberalien" + }, + "peerDependencies": { + "react": ">=16" + } + }, + "node_modules/@iconify/types": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", + "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@icons-pack/react-simple-icons": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-13.0.0.tgz", + "integrity": "sha512-Dmofr27ZlfBHS/2HDBKodKTUTnIjhH7cjw36WPt1CLg+1gytjr+LeabwWZ6khu/QUxmLjs3e1KrNPiuvOkEpJQ==", + "license": "MIT", + "peerDependencies": { + "react": "^16.13 || ^17 || ^18 || ^19" + } + }, "node_modules/@img/sharp-darwin-arm64": { "version": "0.34.2", "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.2.tgz", @@ -903,18 +941,26 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/eslint": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz", + "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==", + "license": "MIT", + "dependencies": { + "@types/estree": "*", + "@types/json-schema": "*" + } + }, "node_modules/@types/estree": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz", "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==", - "dev": true, "license": "MIT" }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", - "dev": true, "license": "MIT" }, "node_modules/@types/json5": { @@ -924,6 +970,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/next": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@types/next/-/next-9.0.0.tgz", + "integrity": "sha512-gnBXM8rP1mnCgT1uE2z8SnpFTKRWReJlhbZLZkOLq/CH1ifvTNwjIVtXvsywTy1dwVklf+y/MB0Eh6FOa94yrg==", + "deprecated": "This is a stub types definition. next provides its own type definitions, so you do not need this installed.", + "license": "MIT", + "dependencies": { + "next": "*" + } + }, "node_modules/@types/node": { "version": "20.17.57", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.57.tgz", @@ -934,24 +990,32 @@ "undici-types": "~6.19.2" } }, + "node_modules/@types/prop-types": { + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/react": { - "version": "19.1.6", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz", - "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==", + "version": "18.3.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", + "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", "dev": true, "license": "MIT", "dependencies": { + "@types/prop-types": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "19.1.5", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.5.tgz", - "integrity": "sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", "dev": true, "license": "MIT", - "peerDependencies": { - "@types/react": "^19.0.0" + "dependencies": { + "@types/react": "*" } }, "node_modules/@typescript-eslint/eslint-plugin": { @@ -1799,6 +1863,12 @@ "node": ">=8" } }, + "node_modules/bulma": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz", + "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==", + "license": "MIT" + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -4342,6 +4412,16 @@ "react": "^19.1.0" } }, + "node_modules/react-fast-marquee": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz", + "integrity": "sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16.8.0 || ^18.0.0", + "react-dom": ">= 16.8.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 2c2fdc4..91c30f5 100644 --- a/package.json +++ b/package.json @@ -9,17 +9,23 @@ "lint": "next lint" }, "dependencies": { - "react": "^19.0.0", - "react-dom": "^19.0.0", - "next": "15.3.3" + "@icons-pack/react-simple-icons": "^13.0.0", + "@types/eslint": "^9.6.1", + "@types/next": "^9.0.0", + "bulma": "^1.0.4", + "next": "^15.3.3", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-fast-marquee": "^1.6.5" }, "devDependencies": { - "typescript": "^5", + "@eslint/eslintrc": "^3", + "@iconify/react": "^6.0.0", "@types/node": "^20", - "@types/react": "^19", - "@types/react-dom": "^19", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", "eslint": "^9", "eslint-config-next": "15.3.3", - "@eslint/eslintrc": "^3" + "typescript": "^5" } } diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..dc1ba0e Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/file.svg b/public/file.svg deleted file mode 100644 index 004145c..0000000 --- a/public/file.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg deleted file mode 100644 index 567f17b..0000000 --- a/public/globe.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/last2014.png b/public/last2014.png new file mode 100644 index 0000000..9cc4c59 Binary files /dev/null and b/public/last2014.png differ diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index 7705396..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/window.svg b/public/window.svg deleted file mode 100644 index b2b2a44..0000000 --- a/public/window.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/src/app/favicon.ico and /dev/null differ diff --git a/src/app/globals.css b/src/app/globals.css index e3734be..b001a00 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,42 +1,7 @@ -:root { - --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - -body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} +@import "bulma/css/bulma.min.css"; * { - box-sizing: border-box; - padding: 0; margin: 0; -} - -a { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} + padding: 0; + border-radius: 0; +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 42fc323..81a891d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,20 +1,9 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Last2014", + description: "Last2014 Website", }; export default function RootLayout({ @@ -23,8 +12,8 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - + + {children} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..11080a0 --- /dev/null +++ b/src/app/not-found.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; + +export default function NotFound() { + return( +
+ +

NotFound - HTTP404

+ +
+

+ {"The page you requested"} +
+ {"could not be found"} +

+
+ + + Go to Home + + +
+ ) +} \ No newline at end of file diff --git a/src/app/page.module.css b/src/app/page.module.css deleted file mode 100644 index a11c8f3..0000000 --- a/src/app/page.module.css +++ /dev/null @@ -1,168 +0,0 @@ -.page { - --gray-rgb: 0, 0, 0; - --gray-alpha-200: rgba(var(--gray-rgb), 0.08); - --gray-alpha-100: rgba(var(--gray-rgb), 0.05); - - --button-primary-hover: #383838; - --button-secondary-hover: #f2f2f2; - - display: grid; - grid-template-rows: 20px 1fr 20px; - align-items: center; - justify-items: center; - min-height: 100svh; - padding: 80px; - gap: 64px; - font-family: var(--font-geist-sans); -} - -@media (prefers-color-scheme: dark) { - .page { - --gray-rgb: 255, 255, 255; - --gray-alpha-200: rgba(var(--gray-rgb), 0.145); - --gray-alpha-100: rgba(var(--gray-rgb), 0.06); - - --button-primary-hover: #ccc; - --button-secondary-hover: #1a1a1a; - } -} - -.main { - display: flex; - flex-direction: column; - gap: 32px; - grid-row-start: 2; -} - -.main ol { - font-family: var(--font-geist-mono); - padding-left: 0; - margin: 0; - font-size: 14px; - line-height: 24px; - letter-spacing: -0.01em; - list-style-position: inside; -} - -.main li:not(:last-of-type) { - margin-bottom: 8px; -} - -.main code { - font-family: inherit; - background: var(--gray-alpha-100); - padding: 2px 4px; - border-radius: 4px; - font-weight: 600; -} - -.ctas { - display: flex; - gap: 16px; -} - -.ctas a { - appearance: none; - border-radius: 128px; - height: 48px; - padding: 0 20px; - border: none; - border: 1px solid transparent; - transition: - background 0.2s, - color 0.2s, - border-color 0.2s; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - line-height: 20px; - font-weight: 500; -} - -a.primary { - background: var(--foreground); - color: var(--background); - gap: 8px; -} - -a.secondary { - border-color: var(--gray-alpha-200); - min-width: 158px; -} - -.footer { - grid-row-start: 3; - display: flex; - gap: 24px; -} - -.footer a { - display: flex; - align-items: center; - gap: 8px; -} - -.footer img { - flex-shrink: 0; -} - -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - a.primary:hover { - background: var(--button-primary-hover); - border-color: transparent; - } - - a.secondary:hover { - background: var(--button-secondary-hover); - border-color: transparent; - } - - .footer a:hover { - text-decoration: underline; - text-underline-offset: 4px; - } -} - -@media (max-width: 600px) { - .page { - padding: 32px; - padding-bottom: 80px; - } - - .main { - align-items: center; - } - - .main ol { - text-align: center; - } - - .ctas { - flex-direction: column; - } - - .ctas a { - font-size: 14px; - height: 40px; - padding: 0 16px; - } - - a.secondary { - min-width: auto; - } - - .footer { - flex-wrap: wrap; - align-items: center; - justify-content: center; - } -} - -@media (prefers-color-scheme: dark) { - .logo { - filter: invert(); - } -} diff --git a/src/app/page.tsx b/src/app/page.tsx index 84af2cb..e37eb4c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,95 +1,24 @@ -import Image from "next/image"; -import styles from "./page.module.css"; +import "./style.css"; + +// Cards +import TopProfile from "@/cards/topProfile"; +import AboutMe from "@/cards/aboutMe"; +import Skill from "@/cards/skill"; +import Links from "@/cards/links"; +import Details from "@/cards/details"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing src/app/page.tsx. -
    2. -
  2. Save and see your changes instantly.
    3. -
+ <> + -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+ + + + + + +
+ ); } diff --git a/src/app/style.css b/src/app/style.css new file mode 100644 index 0000000..64fb626 --- /dev/null +++ b/src/app/style.css @@ -0,0 +1,21 @@ +.card { + width: 40em; + display: block; + margin: 0 auto; + margin-top: 1em; + margin-bottom: 1em; +} + +.topCard { + margin-top: 3em; +} + +.media-content { + overflow: hidden; + word-wrap: break-word; + word-break: break-all; +} + +#icon { + border-radius: 100%; +} \ No newline at end of file diff --git a/src/cards/aboutMe.tsx b/src/cards/aboutMe.tsx new file mode 100644 index 0000000..735defa --- /dev/null +++ b/src/cards/aboutMe.tsx @@ -0,0 +1,18 @@ +import { Icon } from "@iconify/react"; + +export default function AboutMe() { + return( +
+
+

+ + About Me +

+
+ +
+ {"A programmer in elementary school. I'm playing around with Next.js and home servers."} +
+
+ ) +} \ No newline at end of file diff --git a/src/cards/details.tsx b/src/cards/details.tsx new file mode 100644 index 0000000..d5955d1 --- /dev/null +++ b/src/cards/details.tsx @@ -0,0 +1,64 @@ +"use client"; + +import { useState } from "react"; +import { Icon } from "@iconify/react"; + +export default function Details() { + const [open, setOpen] = useState(false); + + type DetailItem = { + icon: string, + name: string, + value?: string, + }; + + const details: DetailItem[] = [ + { + icon: "iconoir:calendar", + name: "Birthday", + value: "2014-12-08", + }, + { + icon: "iconoir:map-pin", + name: "Location", + value: "Kanagawa, Japan", + }, + ]; + + return ( +
+
+ + Details + setOpen((prev) => !prev)} + > + + +
+ + {open && ( +
+ {details.map((item, idx) => ( +
+
+ + {item.name} + {item.value && ( + + {item.value} + + )} +
+
+ ))} +
+ )} +
+ ); +} diff --git a/src/cards/links.tsx b/src/cards/links.tsx new file mode 100644 index 0000000..d399aab --- /dev/null +++ b/src/cards/links.tsx @@ -0,0 +1,113 @@ +"use client"; + +import { useState } from "react"; +import { Icon } from "@iconify/react"; + +import { + SiQiita, + SiGitea +} from "@icons-pack/react-simple-icons"; +import { IconType } from "@icons-pack/react-simple-icons"; + +type LinkItem = { + icon: string; + iconType: "iconify" | "simpleicons"; + name: string; + about?: string; + url?: string; +}; + +const links: LinkItem[] = [ + { + icon: "iconoir:home", + iconType: "iconify", + name: "Home Page", + about: "This Page", + url: "/", + }, + { + icon: "carbon:blog", + iconType: "iconify", + name: "Blog", + about: "Coming soon...", + url: "https://blog.last2014.f5.si" + }, + { + icon: "SiQiita", + iconType: "simpleicons", + name: "Qiita", + about: "Qiita Profile", + url: "https://qiita.com/last2014", + }, + { + icon: "SiGitea", + iconType: "simpleicons", + name: "Gitea", + about: "Public Sourcecode", + url: "https://gitea.last2014.f5.si/last2014", + }, +]; + +const simpleIconMap: { [key: string]: IconType } = { + SiQiita, + SiGitea, +}; + +export default function Link() { + const [open, setOpen] = useState(false); + + return ( +
+
+ + Links + setOpen((prev) => !prev)} + > + + +
+ + {open && ( +
+ {links.map((item, idx) => { + let iconElement; + if (item.iconType === "iconify") { + iconElement = ; + } else if (item.iconType === "simpleicons") { + const SimpleIcon = simpleIconMap[item.icon]; + iconElement = SimpleIcon ? : null; + } + + return ( + +
+ {iconElement} + {item.name} + {item.about && ( + + {item.about} + + )} +
+ + ); + })} +
+ )} +
+ ); +} diff --git a/src/cards/skill.css b/src/cards/skill.css new file mode 100644 index 0000000..b13b1b9 --- /dev/null +++ b/src/cards/skill.css @@ -0,0 +1,10 @@ +.SkillIcon { + --SkillIconMargin: 5px; + margin-right: var(--SkillIconMargin); + margin-left: var(--SkillIconMargin); +} + +.skillsContainer { + display: flex; + gap: 0; +} \ No newline at end of file diff --git a/src/cards/skill.tsx b/src/cards/skill.tsx new file mode 100644 index 0000000..77ccb04 --- /dev/null +++ b/src/cards/skill.tsx @@ -0,0 +1,67 @@ +import { + SiHtml5, + SiCss, + SiJavascript, + SiTypescript, + SiPhp, + SiReact, + SiNextdotjs, + SiNodedotjs, + SiBulma, + SiGit, + SiGitea, + SiCloudflare, +} from "@icons-pack/react-simple-icons"; + +// アイコン配列を作成 +const icons = [ + SiHtml5, + SiCss, + SiJavascript, + SiTypescript, + SiPhp, + SiReact, + SiNextdotjs, + SiNodedotjs, + SiBulma, + SiGit, + SiGitea, + SiCloudflare +]; + +const repeat = 3; +const iconList = Array.from({ length: repeat }) +.flatMap(() => icons); + +import { Icon } from "@iconify/react"; + +import Marquee from "react-fast-marquee"; + +import "./skill.css"; + +export default function Skill() { + return ( +
+

+ + Skills +

+
+
+ Use these to create websites etc. +
+ + + {iconList.map((Icon, i) => ( + + ))} + +
+
+ ); +} diff --git a/src/cards/topProfile.tsx b/src/cards/topProfile.tsx new file mode 100644 index 0000000..f409b76 --- /dev/null +++ b/src/cards/topProfile.tsx @@ -0,0 +1,30 @@ +import Image from "next/image"; + +export default function TopProfile() { + return( +
+
+
+
+ Last2014 Icon +
+
+ +
+

Last2014

+

@last2014

+
+
+ +
+ Web Developer +
+
+ ) +} \ No newline at end of file