init

guanyixi · Apr 11, 2024 · 7affe63 · 7affe63
1 parent 6f95d98
commit 7affe63
Show file tree

Hide file tree

Showing 40 changed files with 90 additions and 302 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -2,12 +2,13 @@ const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss");
 
 module.exports = function (eleventyConfig) {
 
-  eleventyConfig.addWatchTarget("./src/img/");
+  eleventyConfig.addPassthroughCopy("./src/img/");
+  eleventyConfig.addPassthroughCopy("./src/js/");
 
   eleventyConfig.addPlugin(eleventySass);
 
   return {
-    pathPrefix: "", // 1. Github: /repo-name/ 2. Netlify: empty
+    pathPrefix: "/eleventy-starter/", // 1. Github: /repo-name/ 2. Netlify: empty
     dir: {
       input: "src",
       output: "public",

diff --git a/src/_data/global.json b/src/_data/global.json
@@ -0,0 +1,5 @@
+{
+    "title": "Site Title",
+    "keywords": "keyword1, keyword2",
+    "metaDescription": "Meta Description"
+}
diff --git a/src/_data/projects.json b/src/_data/projects.json
@@ -0,0 +1,14 @@
+{
+    "projects": [
+        {
+            "title": "Project 1 Title",
+            "content": "Project description",
+            "image": "/img/projects/fish.jpg"
+        },
+        {
+            "title": "Project 2 Title",
+            "content": "Project description",
+            "image": "/img/projects/bird.jpg"
+        }
+    ]
+}
diff --git a/src/_data/tech.json b/src/_data/tech.json
diff --git a/src/_includes/base.njk b/src/_includes/base.njk
@@ -3,11 +3,13 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="keywords" content="{{ global.keywords }}">
+	<meta name="description" content="{{ global.description }}">
 	<link rel="apple-touch-icon" sizes="180x180" href="{{ '/img/favicons/apple-touch-icon.png' | url }}">
 	<link rel="icon" type="image/png" sizes="32x32" href="{{ '/img/favicons/favicon-32x32.png' | url }}">
 	<link rel="icon" type="image/png" sizes="16x16" href="{{ '/img/favicons/favicon-16x16.png' | url }}">
 	<link rel="manifest" href="{{ '/img/favicons/site.webmanifest' | url }}">
-	<title>Brooklyn Guan - {{ title }}</title>
+	<title>{{ global.title }} - {{ title }}</title>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
@@ -25,17 +27,15 @@
 				<div class="bar"></div>
 			</button>
 			<nav>
-				<li><a href="#technologies">Technologies</a></li>
-				<li><a href="#approaches">Approaches</a></li>
-				<li><a href="#about">About Me</a></li>
+				<li><a href="/blog/">Blog</a></li>
 			</nav>
 		</div>
 	</header>
 	<main>
 	{{ content | safe }}
 	</main>
 	<footer>
-		<div class="container text-center">© <span class="current-year"></span> brooklynguan.com</div>
+		<div class="container text-center">© <span class="current-year"></span> sitename.com</div>
 	<script src="{{ '/js/index.js' | url }}"></script>
 </body>
 </html>
diff --git a/src/blog.njk b/src/blog.njk
@@ -0,0 +1,15 @@
+---
+layout: base.njk
+title: Blog
+---
+
+<h1>Blog Posts</h1>
+
+<ul>
+{% for post in collections.posts %}
+  <li>
+    <a href="{{ post.url }}">{{ post.data.title }}</a>
+    <p>{{ post.data.description }}</p>
+  </li>
+{% endfor %}
+</ul>
diff --git a/src/css/_components.scss b/src/css/_components.scss
@@ -15,25 +15,4 @@
             opacity: 1;
         }
     }
-}
-
-.content-blocks{
-  .content-block{
-    margin:3rem 0;
-  }
-  @media(min-width:768px){
-    display: flex;
-    flex-wrap: wrap;
-    margin:3rem 0;
-    .content-block{
-      width:50%;
-      margin:1rem 0;
-      &:nth-child(odd){
-        padding-right:2rem;
-      }
-      &:nth-child(even){
-        padding-left:2rem;
-      }
-    }
-  }
 }
diff --git a/src/css/_elements.scss b/src/css/_elements.scss
@@ -106,28 +106,4 @@ h6, .h6{
   @media(max-width:767px){
     font-size: 1rem;
   }
-}
-
-.font-light{
-  font-weight: 300;
-}
-
-.font-normal{
-  font-weight: 400;
-}
-
-.font-bold{
-  font-weight: 600;
-}
-
-.leading-tight{
-  line-height: 1.25;
-}
-
-.leading-snug{
-  line-height: 1.375;
-}
-
-.leading-normal{
-  line-height: 1.5;
 }
diff --git a/src/css/_home.scss b/src/css/_home.scss
@@ -1,48 +0,0 @@
-#home{
-    background-color: $dark;
-    padding:4rem 0;
-    color: white;
-    @media(min-width:600px){
-        padding:6rem 2vw;
-    }
-    @media(min-width:1024px){
-        padding:8rem 2vw;
-    }
-    @media(min-width:1280px){
-        padding:9rem 2rem;
-    }
-    .tech-icons{
-        margin-top:4rem;
-        padding-bottom:1rem;
-        .splide__slide{
-            display:flex;
-            justify-content: center;
-            align-items: center;
-            img{
-                margin:1rem;
-            }
-        }
-    }
-}
-
-#technologies{
-    .units{
-        margin:3rem 0;
-        .unit{
-            margin-bottom:3.5rem;
-            img{
-                width:500px;
-                margin:0.75rem 0;
-            }
-            @media(min-width:768px){
-                display: flex;
-                align-items: flex-start;
-                justify-content: space-between;
-                img{
-
-                    margin-right:4rem;
-                }
-            }
-        }
-    }
-}

diff --git a/src/css/_news.scss b/src/css/_news.scss
diff --git a/src/css/_utilities.scss b/src/css/_utilities.scss
@@ -1,45 +1,3 @@
-
-.btn{
-    display: inline-block;
-    background-color: $accent;
-    color: white;
-    font-size: 14px;
-    text-transform: uppercase;
-    text-decoration: none;
-    letter-spacing: 2px;
-    box-shadow: none;
-    border:0;
-    border-radius: 100px;
-    padding:18px 26px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: all 0.25s ease;
-    &:hover{
-      background-color: $accent-200;
-      color: white;
-    }
-    @media(max-width:767px){
-      padding:14px 22px;
-    }
-  }
-
-  .btn-text{
-    background:transparent;
-    border:0;
-    font-size: 16px;
-    color: $primary;
-    font-family: $font_main;
-    padding:0;
-    width:auto;
-    cursor: pointer;
-    font-weight: 500;
-    img{
-      position: relative;
-      top: 1px;;
-      margin-left:2px;
-    }
-  }
-
   .container-lg{
     max-width:1380px;
   }
@@ -120,44 +78,26 @@
     text-align: center;
   }
 
-  .font-bold{
-    font-weight: bold;
+  .font-light{
+    font-weight: 300;
   }
-
-  .label{
-    letter-spacing: 1px;
-    font-weight: 600;
-    text-transform: uppercase;
+
+  .font-normal{
+    font-weight: 400;
   }
-
-  .pill{
-    width:48px;
-    height:8px;
-    background: linear-gradient(to right, $primary, $primary-200);
-    border-radius: 4px;
-    margin:0 auto 18px
+
+  .font-bold{
+    font-weight: 600;
   }
-
-  .card{
-    background-color: white;
-    border-radius: 12px;
-    box-shadow: 0 10px 16px rgba(black, 0.1);
-    margin:2rem 0;
-    overflow: hidden;
+
+  .leading-tight{
+    line-height: 1.25;
   }
-
-  .gra-primary{
-    background: linear-gradient(45deg, $primary-200, $primary);
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
-    -webkit-text-fill-color: transparent;
+
+  .leading-snug{
+    line-height: 1.375;
   }
-
-  .gra-accent{
-    background: linear-gradient(45deg, $accent-200, $accent);
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
-    -webkit-text-fill-color: transparent;
+
+  .leading-normal{
+    line-height: 1.5;
   }
diff --git a/src/css/_vars.scss b/src/css/_vars.scss
@@ -16,9 +16,6 @@ $accent: #60CFFF;
 $accent-200: #1fa6df;
 $accent-300: #0176a8;
 
-$gra_primary: linear-gradient(-55deg, $primary-200, $primary);
-$gra_accent: linear-gradient(-55deg, $accent-200, $accent);
-
 $font_main: "Nunito Sans", sans-serif;
 $font_title: "Barlow Condensed", sans-serif;
 

diff --git a/src/css/style.scss b/src/css/style.scss
@@ -6,5 +6,4 @@
 @import "./components.scss";
 
 // Pages
-@import "./home.scss";
-@import "./news.scss";
+@import "./home.scss";
diff --git a/src/img/blog/nextjs-supabase-feature.jpg b/src/img/blog/nextjs-supabase-feature.jpg
diff --git a/src/img/blog/11ty-feature.jpg → src/img/blog/post-1.jpg b/src/img/blog/11ty-feature.jpg → src/img/blog/post-1.jpg
diff --git a/src/img/blog/calculator-feature.jpg → src/img/blog/post-2.jpg b/src/img/blog/calculator-feature.jpg → src/img/blog/post-2.jpg
diff --git a/src/img/blog/wordpress-feature.jpg b/src/img/blog/wordpress-feature.jpg
diff --git a/src/img/icon-down.svg b/src/img/icon-down.svg
diff --git a/src/img/icon-external-link.svg b/src/img/icon-external-link.svg
diff --git a/src/img/icon-location.svg b/src/img/icon-location.svg
diff --git a/src/img/linkedin.svg b/src/img/linkedin.svg