initial structure

.env.example

@@ -0,0 +1,7 @@
+# This file is a placeholder for environment variables required to run this project.
+# Currently, there are no environment variables needed.
+
+# Example of what future variables might look like:
+# NEXT_PUBLIC_API_KEY=your_api_key_here
+# DATABASE_URL=your_database_url_here
+# SECRET_KEY=your_secret_key_here

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,31 @@
+Build your portfolio with Once UI's Magic Portfolio template:
+* **Config:** Render necessary pages dynamically.
+* **Content:** Manage content in a separate file.
+
+## Authors
+Connect with us on X or LinkedIn.
+
+Lorant Toth - [X](https://x.com/lorant_one), [LinkedIn](https://www.linkedin.com/in/tothlorant/)  
+Zsofia Komaromi - [X](https://x.com/zsofiakomaromi), [LinkedIn](https://www.linkedin.com/in/zsofiakomaromi/)
+
+## Get involved
+- Join the [Once UI Discord server](https://discord.com/invite/5EyAQ4eNdS) to connect with designers, developers and share your projects.
+- Report a [bug](https://github.com/once-ui-system/nextjs-starter/issues/new?labels=bug&template=bug_report.md).
+- Submit a [feature request](https://github.com/once-ui-system/nextjs-starter/issues/new?labels=feature%20request&template=feature_request.md).
+
+## License
+
+Distributed under the MIT License. See `LICENSE.txt` for more information.
+
+## Figma library
+
+Once UI is also available for Figma.  
+Design and prototype entire products from scratch in hours. Use the same tokens and components as the Next.js design system.
+
+Grab a copy from the [Figma Community](https://figma.com/).
+
+## Deploy your project
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/76DR9Q?referralCode=QW2HBC)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonce-ui-system%2Fnextjs-starter&redirect-url=https%3A%2F%2Fonce-ui.com%2Fdocs%2F)

next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+	"name": "@once-ui-system/nextjs-starter",
+	"version": "0.3.0",
+	"scripts": {
+		"dev": "next dev",
+		"export": "next export",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@floating-ui/react-dom": "^2.1.1",
+		"classnames": "^2.5.1",
+		"next": "^14.2.4",
+		"postcss": "^8.4.39",
+		"postcss-preset-env": "^9.5.15",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-icons": "^5.2.1",
+		"sass": "^1.77.6",
+		"sharp": "^0.33.4"
+	},
+	"devDependencies": {
+		"@csstools/postcss-global-data": "^2.1.1",
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"postcss-custom-media": "^10.0.7",
+		"postcss-flexbugs-fixes": "^5.0.2",
+		"typescript": "^5"
+	}
+}

postcss.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+    "plugins": [
+        [
+            '@csstools/postcss-global-data',
+            {
+                files: ['src/once-ui/styles/breakpoints.scss'],
+            },
+        ],
+        "postcss-custom-media",
+        "postcss-flexbugs-fixes",
+        [
+            "postcss-preset-env",
+            {
+                "autoprefixer": {
+                    "flexbox": "no-2009"
+                },
+                "stage": 3,
+                "features": {
+                    "custom-properties": false
+                }
+            }
+        ],
+    ]
+};

src/app/about/page.tsx

@@ -0,0 +1,31 @@
+import { Avatar, Flex, Heading, Text } from '@/once-ui/components';
+import { content } from '@/app/resources'
+
+export default function About() {
+    return (
+        <Flex
+            fillWidth
+            direction="column">
+            <Flex
+                alignItems="center"
+                gap="xl">
+                <Avatar
+                    src="/images/avatar.png"
+                    size="xl"/>
+                <Flex
+                    direction="column"
+                    gap="12">
+                    <Heading
+                        variant="display-strong-xl">
+                        {content.name}
+                    </Heading>
+                    <Text
+                        variant="display-default-xs"
+                        onBackground="neutral-weak">
+                        {content.role}
+                    </Text>
+                </Flex>
+            </Flex>
+        </Flex>
+    );
+}

src/app/components/Footer.tsx

@@ -0,0 +1,50 @@
+import { Flex, IconButton, Text } from "@/once-ui/components"
+import { content } from '@/app/resources'
+
+export const Footer = () => {
+    return (
+        <Flex
+            as="footer"
+            fillWidth padding="8"
+            justifyContent="center">
+            <Flex
+                fillWidth maxWidth="m" paddingY="8" paddingX="16"
+                justifyContent="space-between" alignItems="center">
+                <Text
+                    variant="body-default-s"
+                    onBackground="neutral-strong">
+                    <Text onBackground="neutral-weak">
+                        © 2024 /
+                    </Text> {content.name}
+                </Text>
+                <Flex
+                    gap="16">
+                    { content.social.github && (
+                        <IconButton
+                            href={content.social.github}
+                            icon="github"
+                            tooltip="GitHub"
+                            size="s"
+                            variant="ghost"/>
+                    )}
+                    { content.social.linkedin && (
+                        <IconButton
+                            href={content.social.linkedin}
+                            icon="linkedin"
+                            tooltip="LinkedIn"
+                            size="s"
+                            variant="ghost"/>
+                    )}
+                    { content.social.x && (
+                        <IconButton
+                            href={content.social.x}
+                            icon="x"
+                            tooltip="X"
+                            size="s"
+                            variant="ghost"/>
+                    )}
+                </Flex>
+            </Flex>
+        </Flex>
+    )
+}

src/app/components/Header.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Flex, SmartLink } from "@/once-ui/components"
+import { usePathname } from "next/navigation";
+import { config } from '@/app/resources'
+
+export const Header = () => {
+    const pathname = usePathname() ?? '';
+
+    return (
+        <Flex style={{top: '0'}}
+            as="header"
+            position="sticky"
+            fillWidth padding="8"
+            justifyContent="center">
+            <Flex
+                background="surface" border="surface" borderStyle="solid-1" radius="l" shadow="l"
+                paddingY="12" paddingX="16"
+                justifyContent="center">
+                <Flex
+                    gap="16"
+                    textVariant="body-default-s">
+                    { config.routes['/'] && (
+                        <SmartLink
+                            prefixIcon="home"
+                            href="/"
+                            selected={pathname === "/"}>
+                            Home
+                        </SmartLink>
+                    )}
+                    { config.routes['/about'] && (
+                        <SmartLink
+                            prefixIcon="person"
+                            href="/about"
+                            selected={pathname === "/about"}>
+                            About
+                        </SmartLink>
+                    )}
+                    { config.routes['/projects'] && (
+                        <SmartLink
+                            prefixIcon="grid"
+                            href="/projects"
+                            selected={pathname === "/projects"}>
+                            Projects
+                        </SmartLink>
+                    )}
+                    { config.routes['/blog'] && (
+                        <SmartLink
+                            prefixIcon="book"
+                            href="/blog"
+                            selected={pathname === "/blog"}>
+                            Blog
+                        </SmartLink>
+                    )}
+                </Flex>
+            </Flex>
+        </Flex>
+    )
+}