feat(*): initial commit

Author: UsboKirishima

.formatter.exs

@@ -0,0 +1,5 @@
+[
+  import_deps: [:ecto, :phoenix],
+  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
+  subdirectories: ["priv/*/migrations"]
+]

.gitignore

@@ -0,0 +1,34 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+profile-*.tar
+
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
+
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
+
+# In case you use Node.js/npm, you want to ignore these.
+npm-debug.log
+/assets/node_modules/
+

CNAME

@@ -0,0 +1,6 @@
+<div align="center">
+
+# Profile
+### My personal website made using Elixir with Phoenix web framework.
+
+</div>

README.md

@@ -0,0 +1,90 @@
+/* This file is for your main application CSS */
+@import "./phoenix.css";
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
+
+:root {
+    /*Rosé Pìne theme*/
+    --base: #232136;
+    --surface: #2a273f;
+    --overlay: #393552;
+    --muted: #9893a5;
+    --subtle: #797593;
+    --text: #575279;
+    --love: #b4637a;
+    --gold: #ea9d34;
+    --rose: #d7827e;
+    --pine: #286983;
+    --foam: #56949f;
+    --iris: #907aa9;
+    --hightlight: #44415a;
+    --low: #2a283e;
+
+    /*Darcula theme*/
+    --background: #282a36;
+    --current_line: #242236;
+    --selection: #44475a;
+    --foreground: #f8f8f2;
+    --comment: #6272a4;
+    --cyan: #8be9fd;
+    --green: #50fa7b;
+    --orange: #ffb86c;
+    --pink: #ff79c6;
+    --purple: #bd93f9;
+    --red: #ff5555;
+    --yellow: #f1fa8c;
+}
+
+body {
+  background: var(--base);
+}
+
+.navbar {
+  overflow: hidden;
+  width: 100%;
+  height: 40px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: var(--overlay);
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-items {
+  margin: 10px 0 0 0;
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  text-align: center;
+  justify-content: center;
+}
+
+.navbar-item {
+  list-style-type: none;
+  transition: 0.2s;
+}
+
+.navbar-link {
+  text-decoration: none;
+  text-transform: uppercase;
+  font-family: 'Silkscreen', cursive;
+  color: var(--foreground);
+  font-size: 15px;
+}
+
+.navbar-item:hover {
+  opacity: 75%;
+  transition: 0.2s;
+}
+
+.trt {
+  text-transform: uppercase;
+  font-family: 'Silkscreen', cursive;
+  color: var(--foreground);
+  font-size: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
+}

assets/css/app.css

@@ -0,0 +1,45 @@
+// We import the CSS which is extracted to its own file by esbuild.
+// Remove this line if you add a your own CSS build pipeline (e.g postcss).
+import "../css/app.css"
+
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
+//
+//     import "../vendor/some-package.js"
+//
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import "phoenix_html"
+// Establish Phoenix Socket and LiveView configuration.
+import {Socket} from "phoenix"
+import {LiveSocket} from "phoenix_live_view"
+import topbar from "../vendor/topbar"
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", info => topbar.show())
+window.addEventListener("phx:page-loading-stop", info => topbar.hide())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket
+

assets/css/phoenix.css

@@ -0,0 +1,157 @@
+/**
+ * @license MIT
+ * topbar 1.0.0, 2021-01-06
+ * https://buunguyen.github.io/topbar
+ * Copyright (c) 2021 Buu Nguyen
+ */
+(function (window, document) {
+  "use strict";
+
+  // https://gist.github.com/paulirish/1579671
+  (function () {
+    var lastTime = 0;
+    var vendors = ["ms", "moz", "webkit", "o"];
+    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+      window.requestAnimationFrame =
+        window[vendors[x] + "RequestAnimationFrame"];
+      window.cancelAnimationFrame =
+        window[vendors[x] + "CancelAnimationFrame"] ||
+        window[vendors[x] + "CancelRequestAnimationFrame"];
+    }
+    if (!window.requestAnimationFrame)
+      window.requestAnimationFrame = function (callback, element) {
+        var currTime = new Date().getTime();
+        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+        var id = window.setTimeout(function () {
+          callback(currTime + timeToCall);
+        }, timeToCall);
+        lastTime = currTime + timeToCall;
+        return id;
+      };
+    if (!window.cancelAnimationFrame)
+      window.cancelAnimationFrame = function (id) {
+        clearTimeout(id);
+      };
+  })();
+
+  var canvas,
+    progressTimerId,
+    fadeTimerId,
+    currentProgress,
+    showing,
+    addEvent = function (elem, type, handler) {
+      if (elem.addEventListener) elem.addEventListener(type, handler, false);
+      else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
+      else elem["on" + type] = handler;
+    },
+    options = {
+      autoRun: true,
+      barThickness: 3,
+      barColors: {
+        0: "rgba(26,  188, 156, .9)",
+        ".25": "rgba(52,  152, 219, .9)",
+        ".50": "rgba(241, 196, 15,  .9)",
+        ".75": "rgba(230, 126, 34,  .9)",
+        "1.0": "rgba(211, 84,  0,   .9)",
+      },
+      shadowBlur: 10,
+      shadowColor: "rgba(0,   0,   0,   .6)",
+      className: null,
+    },
+    repaint = function () {
+      canvas.width = window.innerWidth;
+      canvas.height = options.barThickness * 5; // need space for shadow
+
+      var ctx = canvas.getContext("2d");
+      ctx.shadowBlur = options.shadowBlur;
+      ctx.shadowColor = options.shadowColor;
+
+      var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+      for (var stop in options.barColors)
+        lineGradient.addColorStop(stop, options.barColors[stop]);
+      ctx.lineWidth = options.barThickness;
+      ctx.beginPath();
+      ctx.moveTo(0, options.barThickness / 2);
+      ctx.lineTo(
+        Math.ceil(currentProgress * canvas.width),
+        options.barThickness / 2
+      );
+      ctx.strokeStyle = lineGradient;
+      ctx.stroke();
+    },
+    createCanvas = function () {
+      canvas = document.createElement("canvas");
+      var style = canvas.style;
+      style.position = "fixed";
+      style.top = style.left = style.right = style.margin = style.padding = 0;
+      style.zIndex = 100001;
+      style.display = "none";
+      if (options.className) canvas.classList.add(options.className);
+      document.body.appendChild(canvas);
+      addEvent(window, "resize", repaint);
+    },
+    topbar = {
+      config: function (opts) {
+        for (var key in opts)
+          if (options.hasOwnProperty(key)) options[key] = opts[key];
+      },
+      show: function () {
+        if (showing) return;
+        showing = true;
+        if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
+        if (!canvas) createCanvas();
+        canvas.style.opacity = 1;
+        canvas.style.display = "block";
+        topbar.progress(0);
+        if (options.autoRun) {
+          (function loop() {
+            progressTimerId = window.requestAnimationFrame(loop);
+            topbar.progress(
+              "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
+            );
+          })();
+        }
+      },
+      progress: function (to) {
+        if (typeof to === "undefined") return currentProgress;
+        if (typeof to === "string") {
+          to =
+            (to.indexOf("+") >= 0 || to.indexOf("-") >= 0
+              ? currentProgress
+              : 0) + parseFloat(to);
+        }
+        currentProgress = to > 1 ? 1 : to;
+        repaint();
+        return currentProgress;
+      },
+      hide: function () {
+        if (!showing) return;
+        showing = false;
+        if (progressTimerId != null) {
+          window.cancelAnimationFrame(progressTimerId);
+          progressTimerId = null;
+        }
+        (function loop() {
+          if (topbar.progress("+.1") >= 1) {
+            canvas.style.opacity -= 0.05;
+            if (canvas.style.opacity <= 0.05) {
+              canvas.style.display = "none";
+              fadeTimerId = null;
+              return;
+            }
+          }
+          fadeTimerId = window.requestAnimationFrame(loop);
+        })();
+      },
+    };
+
+  if (typeof module === "object" && typeof module.exports === "object") {
+    module.exports = topbar;
+  } else if (typeof define === "function" && define.amd) {
+    define(function () {
+      return topbar;
+    });
+  } else {
+    this.topbar = topbar;
+  }
+}.call(this, window, document));

assets/js/app.js

@@ -0,0 +1,52 @@
+# This file is responsible for configuring your application
+# and its dependencies with the aid of the Config module.
+#
+# This configuration file is loaded before any dependency and
+# is restricted to this project.
+
+# General application configuration
+import Config
+
+config :profile,
+  ecto_repos: [Profile.Repo]
+
+# Configures the endpoint
+config :profile, ProfileWeb.Endpoint,
+  url: [host: "localhost"],
+  render_errors: [view: ProfileWeb.ErrorView, accepts: ~w(html json), layout: false],
+  pubsub_server: Profile.PubSub,
+  live_view: [signing_salt: "eo4oO/SS"]
+
+# Configures the mailer
+#
+# By default it uses the "Local" adapter which stores the emails
+# locally. You can see the emails in your browser, at "/dev/mailbox".
+#
+# For production it's recommended to configure a different adapter
+# at the `config/runtime.exs`.
+config :profile, Profile.Mailer, adapter: Swoosh.Adapters.Local
+
+# Swoosh API client is needed for adapters other than SMTP.
+config :swoosh, :api_client, false
+
+# Configure esbuild (the version is required)
+config :esbuild,
+  version: "0.14.29",
+  default: [
+    args:
+      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ]
+
+# Configures Elixir's Logger
+config :logger, :console,
+  format: "$time $metadata[$level] $message\n",
+  metadata: [:request_id]
+
+# Use Jason for JSON parsing in Phoenix
+config :phoenix, :json_library, Jason
+
+# Import environment specific config. This must remain at the bottom
+# of this file so it overrides the configuration defined above.
+import_config "#{config_env()}.exs"