init

frontend/src/application/app.js

@@ -0,0 +1,35 @@
+import 'vite/modulepreload-polyfill'
+// import "../styles/app.css"
+
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+(function(){
+    // DOM is ready.
+    setTimeout(async () => {
+        const response = await fetch("/hit/", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                'X-CSRFToken': getCookie("csrftoken")
+            },
+            mode: 'same-origin',
+            body: JSON.stringify({
+
+            })
+        });
+    }, 1000)
+})();

frontend/src/application/app2.js

@@ -0,0 +1,5 @@
+import "../components/sidebar";
+
+window.document.addEventListener("DOMContentLoaded", function () {
+  window.console.log("dom ready 2");
+});

frontend/src/application/blog.js

@@ -0,0 +1,2 @@
+import "../styles/blog.css"
+

frontend/src/application/cv.js

@@ -0,0 +1 @@
+// import "../styles/cv.css"

frontend/src/components/sidebar.js

@@ -0,0 +1 @@
+window.console.log("sidebar is loaded");

frontend/src/styles/app.css

@@ -0,0 +1,48 @@
+@import "normalize.css";
+
+html::-webkit-scrollbar {
+    display: none;
+}
+
+html{
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+}
+
+body{
+    background-color: rgba(43, 43, 42, 0.8);
+    overflow-y: scroll;
+}
+
+ul{
+    list-style-type: none;
+}
+
+#main_header{
+    background-color: white;
+    margin-top: 0;
+}
+
+#main_header nav{
+    max-width: 90%;
+    margin: 0 auto;
+    padding: 0;
+}
+
+#main_header ul{
+    margin-top: 0;
+    display: flex;
+    justify-content: center;
+}
+
+#main_header li {
+    padding: 1rem;
+}
+
+#main_app{
+    max-width: 90%;
+    min-height: 50rem;
+    margin: 0 auto;
+    padding: 1rem;
+    background-color: white;
+}

frontend/src/styles/blog.css

@@ -0,0 +1,38 @@
+/* hello */
+
+#article_list{
+    /*background-color: grey;*/
+}
+
+#article_list article{
+    /*background-color: green;*/
+    display: flex;
+    border: 0.1rem solid green;
+    margin: 1rem;
+    /*height: 10rem;*/
+}
+
+#article_list a{
+    text-decoration: none;
+    color: black;
+}
+
+.article_image{
+    width: 30%;
+    background-color: grey;
+}
+
+.article_image img{
+    /*image-;*/
+    width: 100%;
+    height: 100%;
+}
+
+.article_text{
+    width: 70%;
+    margin: 1rem;
+}
+
+.article_text h2{
+    text-align: center;
+}

frontend/src/styles/cv.css

@@ -0,0 +1,150 @@
+#cv_main{
+    display: flex;
+    justify-content: normal;
+    flex-direction: row;
+}
+
+#cv_main > #cv_left{
+    background-color: beige;
+    max-width: 30%;
+    padding: 1rem;
+}
+
+#cv_main > #cv_right{
+    background-color: cadetblue;
+    min-width: 70%;
+    padding: 1rem;
+}
+
+article header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: #e0e0e0;
+    justify-content: center;
+    position: relative;
+}
+
+article header>div:first-child{
+    margin-left: 1rem;
+    position: absolute;
+    left: 0;
+    text-align: center;
+}
+
+.cv_header_title{
+    margin: auto;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.cv_header_title>*{
+    padding: 0;
+    margin: 0.1rem;
+}
+
+.cv_content_competence{
+    max-width: 30%;
+    display: grid;
+    grid-template-columns: repeat(4, 2fr);
+    column-gap: 1rem;
+    row-gap: 1rem;
+}
+
+
+
+/*article header{*/
+/*    display: flex;*/
+/*    flex-direction: row;*/
+/*    align-items: center;*/
+/*    background-color: #e0e0e0;*/
+/*    justify-content: center;*/
+/*    position: relative;*/
+/*}*/
+/*article header>div:first-child{*/
+/*    margin-left: 1rem;*/
+/*}*/
+
+/*.cv_header_title{*/
+/*    margin: auto;*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    align-items: center;*/
+
+/*}*/
+
+/*.cv_header_title>*{*/
+/*    padding: 0;*/
+/*    margin: 0.1rem;*/
+/*}*/
+/*.g_pas_idee {*/
+/*    position: absolute;*/
+/*    left: 0;*/
+/*    background-color: red;*/
+/*    text-align: center;*/
+/*}*/
+
+/*@media screen and (max-width: 700px) {*/
+/*    .g_pas_idee {*/
+/*        position: inherit;*/
+/*        width: 100%;*/
+/*    }*/
+/*    article header{*/
+/*        flex-direction: column;*/
+/*    }*/
+/*}*/
+
+
+
+/*article header{*/
+/*    display: grid;*/
+/*    grid-template-columns: 3fr 5fr;*/
+/*    align-items: center;*/
+/*    background-color: #e0e0e0;*/
+/*}*/
+
+/*article header>div:first-child{*/
+/*    margin-left: 1rem;*/
+/*}*/
+
+/*.cv_header_title{*/
+/*    text-align: center;*/
+/*    margin-right: auto;*/
+/*}*/
+
+/*.cv_header_title>h2,h3{*/
+/*    margin: .5rem;*/
+/*}*/
+
+/*article header>div{*/
+/*    max-width: 60%;*/
+/*    text-align: center;*/
+/*}*/
+
+/*.cv_header_title{*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*}*/
+
+.cv_content h4 {
+    text-decoration: underline;
+}
+
+
+
+@media (max-width: 800px) {
+    #cv_main{
+        flex-direction: column;
+    }
+
+    #cv_main > #cv_left{
+        max-width: 90%;
+    }
+
+    #cv_main > #cv_right{
+        min-width: 90%;
+        padding: 1rem;
+    }
+}

frontend/src/styles/index.scss

@@ -0,0 +1,17 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+//.jumbotron {
+//  // should be relative path of the entry scss file
+//  background-image: url("../../vendors/images/sample.jpg");
+//  background-size: cover;
+//}
+//
+//.btn-blue {
+//  @apply inline-block px-4 py-2;
+//  @apply font-semibold rounded-lg shadow-md;
+//  @apply bg-blue-500 text-white;
+//  @apply hover:bg-blue-700 focus:outline-none;
+//  @apply focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
+//}