add footer

Author: luthfib

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -1 +1,37 @@
-# portfolio
+# Example app with next-sass
+
+This example demonstrates how to use Next.js' built-in Global Sass/Scss imports and Component-Level Sass/Scss modules support.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-sass)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-next-sass&project-name=with-next-sass&repository-name=with-next-sass)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-next-sass with-next-sass-app
+# or
+yarn create next-app --example with-next-sass with-next-sass-app
+```
+
+Run production build with:
+
+```bash
+npm run build
+npm run start
+# or
+yarn build
+yarn start
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

components/Footer.js

@@ -0,0 +1,17 @@
+import styles from "./footer.module.scss";
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.imgs}>
+        <a href="https://github.com/luthfib" target="_blank">
+          <img src="/icons/github.svg" alt="github icon" />
+        </a>
+        <a href="https://twitter.com/luthfibf" target="_blank">
+          <img src="/icons/twitter.svg" alt="twitter icon" />
+        </a>
+      </div>
+      <p>[email protected]</p>
+    </footer>
+  );
+}

components/footer.module.scss

@@ -0,0 +1,18 @@
+.footer {
+  font-size: 1.6rem;
+  font-weight: bold;
+  position: fixed;
+  bottom: 1.7rem;
+  left: 1.7rem;
+  color: var(--text-color);
+}
+
+.imgs {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  a {
+    cursor: pointer;
+  }
+}