let go
This commit is contained in:
parent
9732d965fc
commit
f99b72daeb
67
.eleventy.js
67
.eleventy.js
@ -1,13 +1,72 @@
|
||||
module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy("src/css");
|
||||
module.exports = function (eleventyConfig) {
|
||||
// Passthrough copy for static assets
|
||||
eleventyConfig.addPassthroughCopy("src/assets");
|
||||
eleventyConfig.addPassthroughCopy("src/js");
|
||||
|
||||
// Watch targets
|
||||
eleventyConfig.addWatchTarget("src/css");
|
||||
|
||||
// Add year shortcode
|
||||
eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
|
||||
|
||||
// Add date filter for formatting
|
||||
eleventyConfig.addFilter("dateFormat", (date, format = "full") => {
|
||||
const d = new Date(date);
|
||||
const options = {
|
||||
full: { year: 'numeric', month: 'long', day: 'numeric' },
|
||||
short: { year: 'numeric', month: 'short', day: 'numeric' },
|
||||
iso: null,
|
||||
};
|
||||
|
||||
if (format === "iso") {
|
||||
return d.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
return d.toLocaleDateString('en-US', options[format] || options.full);
|
||||
});
|
||||
|
||||
// Add reading time filter
|
||||
eleventyConfig.addFilter("readingTime", (content) => {
|
||||
if (!content) return "1 min read";
|
||||
const words = content.split(/\s+/).length;
|
||||
const minutes = Math.ceil(words / 200);
|
||||
return `${minutes} min read`;
|
||||
});
|
||||
|
||||
// Add excerpt filter
|
||||
eleventyConfig.addFilter("excerpt", (content, length = 150) => {
|
||||
if (!content) return "";
|
||||
const text = content.replace(/<[^>]+>/g, '').replace(/\n/g, ' ').trim();
|
||||
return text.length > length ? text.slice(0, length) + '...' : text;
|
||||
});
|
||||
|
||||
// Add head filter (get first n items from array)
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
if (!Array.isArray(array)) return [];
|
||||
if (n < 0) {
|
||||
return array.slice(n);
|
||||
}
|
||||
return array.slice(0, n);
|
||||
});
|
||||
|
||||
// Collections
|
||||
// Blog posts / Proposals collection
|
||||
eleventyConfig.addCollection("posts", function (collectionApi) {
|
||||
return collectionApi.getFilteredByGlob("src/blog/**/*.md").sort((a, b) => {
|
||||
return new Date(b.date) - new Date(a.date);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
dir: {
|
||||
input: "src",
|
||||
output: "_site",
|
||||
includes: "_includes",
|
||||
layouts: "_layouts"
|
||||
}
|
||||
layouts: "_layouts",
|
||||
data: "_data"
|
||||
},
|
||||
markdownTemplateEngine: "njk",
|
||||
htmlTemplateEngine: "njk",
|
||||
templateFormats: ["html", "njk", "md"]
|
||||
};
|
||||
};
|
||||
|
||||
3203
package-lock.json
generated
3203
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
34
package.json
34
package.json
@ -1,16 +1,32 @@
|
||||
{
|
||||
"name": "5panda.11ty",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"description": "5Panda Portfolio, Blog & Documentation site built with 11ty, Tailwind CSS v4 and daisyUI v5",
|
||||
"scripts": {
|
||||
"start": "eleventy --serve",
|
||||
"build": "eleventy"
|
||||
"dev": "npm-run-all --parallel dev:*",
|
||||
"dev:11ty": "eleventy --serve",
|
||||
"dev:css": "postcss src/css/style.css -o _site/css/style.css --watch",
|
||||
"build": "npm-run-all build:css build:11ty",
|
||||
"build:11ty": "eleventy",
|
||||
"build:css": "postcss src/css/style.css -o _site/css/style.css"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"portfolio",
|
||||
"blog",
|
||||
"docs",
|
||||
"11ty",
|
||||
"tailwindcss",
|
||||
"daisyui"
|
||||
],
|
||||
"author": "5Panda",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.2"
|
||||
"@11ty/eleventy": "^3.1.2",
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"daisyui": "^5.5.14",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"tailwindcss": "^4.1.18"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
}
|
||||
15
src/_data/site.json
Normal file
15
src/_data/site.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "5Panda",
|
||||
"description": "Developer Portfolio, Blog & Documentation",
|
||||
"url": "https://5panda.dev",
|
||||
"author": {
|
||||
"name": "5Panda",
|
||||
"email": "hello@5panda.dev",
|
||||
"url": "https://5panda.dev"
|
||||
},
|
||||
"social": {
|
||||
"github": "https://github.com/5panda",
|
||||
"twitter": "https://twitter.com/5panda",
|
||||
"linkedin": "https://linkedin.com/in/5panda"
|
||||
}
|
||||
}
|
||||
@ -1,31 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<html lang="en" data-theme="panda">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title | default("Dev Log & Portfolio") }}</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<meta name="description" content="{{ description | default('5Panda - Project Proposals') }}">
|
||||
<meta
|
||||
name="author" content="5Panda"> <!-- Open Graph -->
|
||||
<meta property="og:title" content="{{ title | default('5Panda') }}">
|
||||
<meta property="og:description" content="{{ description | default('Project Proposals') }}">
|
||||
<meta property="og:type" content="{{ ogType | default('website') }}">
|
||||
<title>{{ title | default("5Panda") }}</title>
|
||||
<!-- Fonts -->
|
||||
<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=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" class="logo">5Panda</a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{{ content | safe }}
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet"> <!-- Styles -->
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body
|
||||
class="min-h-screen bg-base-100 text-base-content">
|
||||
<!-- Navbar -->
|
||||
<div class="navbar bg-base-100/80 backdrop-blur-xl border-b border-white/5 sticky top-0 z-50">
|
||||
<div class="navbar-start">
|
||||
<a href="/" class="btn btn-ghost text-xl font-bold gradient-text">5Panda</a>
|
||||
</div>
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<ul class="menu menu-horizontal px-1 gap-1">
|
||||
<li>
|
||||
<a
|
||||
href="/"
|
||||
class="rounded-lg {% if page.url == '/' %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10 hover:text-primary
|
||||
transition-colors">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/blog/"
|
||||
class="rounded-lg {% if '/blog' in page.url %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10
|
||||
hover:text-primary transition-colors">
|
||||
Proposals
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="navbar-end">
|
||||
<!-- Theme toggle -->
|
||||
<label class="swap swap-rotate btn btn-ghost btn-circle">
|
||||
<input type="checkbox" class="theme-controller" value="pandaLight"/>
|
||||
<svg class="swap-off h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
|
||||
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/>
|
||||
</svg>
|
||||
<svg class="swap-on h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
|
||||
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<!-- GitHub link -->
|
||||
<a href="https://github.com" target="_blank" class="btn btn-ghost btn-circle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207
|
||||
11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729
|
||||
1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304
|
||||
3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381
|
||||
1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138
|
||||
3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807
|
||||
5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386
|
||||
0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<main class="animate-fade-in">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© {% if year %}{{ year }}{% else %}2025{% endif %} 5Panda Dev Log. Built with 11ty.</p>
|
||||
<!-- Footer -->
|
||||
<footer class="footer footer-center bg-base-200 text-base-content p-10 border-t border-white/5">
|
||||
<aside>
|
||||
<p class="font-bold text-xl gradient-text mb-2">5Panda</p>
|
||||
<p class="text-base-content/60">Project Proposals & Ideas</p>
|
||||
</aside>
|
||||
<nav>
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
class="btn btn-ghost btn-sm btn-circle hover:text-primary transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207
|
||||
11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729
|
||||
1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304
|
||||
3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381
|
||||
1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138
|
||||
3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807
|
||||
5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386
|
||||
0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<aside>
|
||||
<p class="text-sm text-base-content/40">© {% year %} 5Panda. Built with 11ty, Tailwind CSS & daisyUI.</p>
|
||||
</aside>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
47
src/_layouts/post.njk
Normal file
47
src/_layouts/post.njk
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
layout: base.njk
|
||||
---
|
||||
<article class="section-container py-12 animate-slide-up">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Post header -->
|
||||
<header class="mb-10">
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
{% for tag in tags %}
|
||||
{% if tag != "post" and tag != "posts" %}
|
||||
<span class="badge badge-primary badge-outline">{{ tag }}</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">{{ title }}</h1>
|
||||
<div class="flex flex-wrap items-center gap-4 text-base-content/60">
|
||||
<time datetime="{{ date | dateFormat('iso') }}" class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{{ date | dateFormat('full') }}
|
||||
</time>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{{ content | readingTime }}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Post content -->
|
||||
<div class="prose-custom max-w-none">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
||||
<!-- Post footer -->
|
||||
<footer class="mt-12 pt-8 border-t border-white/10">
|
||||
<a href="/blog/" class="btn btn-outline btn-primary gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Back to Blog
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
10
src/about.md
10
src/about.md
@ -1,10 +0,0 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: About Me
|
||||
---
|
||||
|
||||
# About Me
|
||||
|
||||
I am a developer who loves to build things.
|
||||
|
||||
This portfolio is a reflection of my work and my passion for technology.
|
||||
79
src/blog/index.njk
Normal file
79
src/blog/index.njk
Normal file
@ -0,0 +1,79 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: Proposals - 5Panda
|
||||
description: Project proposals and innovative ideas
|
||||
---
|
||||
|
||||
<section class="py-16">
|
||||
<div
|
||||
class="section-container">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-16">
|
||||
<span class="badge badge-primary badge-outline badge-lg mb-4">Proposals</span>
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">Project Proposals</h1>
|
||||
<p class="text-xl text-base-content/70 max-w-2xl mx-auto">
|
||||
Innovative ideas and detailed project proposals.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Proposals List -->
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
{% for post in collections.posts %}
|
||||
<a href="{{ post.url }}" class="post-card block group">
|
||||
<div class="flex flex-col md:flex-row md:items-start gap-4">
|
||||
<div
|
||||
class="flex-1">
|
||||
<!-- Meta -->
|
||||
<div class="flex flex-wrap items-center gap-3 mb-3">
|
||||
<time datetime="{{ post.date | dateFormat('iso') }}" class="text-sm text-base-content/50">
|
||||
{{ post.date | dateFormat('full') }}
|
||||
</time>
|
||||
<span class="text-base-content/30">•</span>
|
||||
<span class="text-sm text-base-content/50">{{ post.content | readingTime }}</span>
|
||||
{% for tag in post.data.tags %}
|
||||
{% if tag != "post" and tag != "posts" %}
|
||||
<span class="badge badge-ghost badge-sm">{{ tag }}</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<h2 class="text-2xl font-bold mb-2 group-hover:text-primary transition-colors">{{ post.data.title }}</h2>
|
||||
<!-- Description -->
|
||||
<p class="text-base-content/70">{{ post.data.description }}</p>
|
||||
</div>
|
||||
<!-- Arrow -->
|
||||
<div class="hidden md:flex items-center justify-center w-10 h-10 rounded-full bg-base-300/50 group-hover:bg-primary/20
|
||||
transition-colors">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-base-content/50 group-hover:text-primary transition-colors"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="text-center py-16">
|
||||
<div class="glass-card p-8 max-w-md mx-auto">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-16 w-16 mx-auto text-base-content/30 mb-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
<h3 class="text-xl font-bold mb-2">No proposals yet</h3>
|
||||
<p class="text-base-content/60">Project proposals will appear here once they're added.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
90
src/blog/sample-proposal.md
Normal file
90
src/blog/sample-proposal.md
Normal file
@ -0,0 +1,90 @@
|
||||
---
|
||||
title: Sample Project Proposal
|
||||
description: A template for creating project proposals with clear structure and goals.
|
||||
date: 2024-12-17
|
||||
tags:
|
||||
- posts
|
||||
- template
|
||||
layout: post.njk
|
||||
---
|
||||
|
||||
## Executive Summary
|
||||
|
||||
Brief overview of what this project aims to achieve and why it matters.
|
||||
|
||||
## Problem Statement
|
||||
|
||||
What problem does this project solve? Who faces this problem?
|
||||
|
||||
- Pain point 1
|
||||
- Pain point 2
|
||||
- Pain point 3
|
||||
|
||||
## Proposed Solution
|
||||
|
||||
### Overview
|
||||
|
||||
Describe your proposed solution at a high level.
|
||||
|
||||
### Key Features
|
||||
|
||||
1. **Feature One** - Description of the first key feature
|
||||
2. **Feature Two** - Description of the second key feature
|
||||
3. **Feature Three** - Description of the third key feature
|
||||
|
||||
## Technical Approach
|
||||
|
||||
### Technology Stack
|
||||
|
||||
| Component | Technology |
|
||||
|-----------|------------|
|
||||
| Frontend | React / Vue / etc. |
|
||||
| Backend | Node.js / Python / etc. |
|
||||
| Database | PostgreSQL / MongoDB / etc. |
|
||||
|
||||
### Architecture
|
||||
|
||||
Describe the system architecture and how components interact.
|
||||
|
||||
```
|
||||
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
|
||||
│ Client │────▶│ Server │────▶│ Database │
|
||||
└─────────────┘ └─────────────┘ └─────────────┘
|
||||
```
|
||||
|
||||
## Timeline
|
||||
|
||||
| Phase | Duration | Deliverables |
|
||||
|-------|----------|--------------|
|
||||
| Phase 1 | 2 weeks | Research & Design |
|
||||
| Phase 2 | 4 weeks | Development |
|
||||
| Phase 3 | 2 weeks | Testing & Launch |
|
||||
|
||||
## Success Metrics
|
||||
|
||||
How will we measure if this project is successful?
|
||||
|
||||
- Metric 1: Target value
|
||||
- Metric 2: Target value
|
||||
- Metric 3: Target value
|
||||
|
||||
## Budget & Resources
|
||||
|
||||
Outline the resources needed for this project.
|
||||
|
||||
## Risks & Mitigation
|
||||
|
||||
| Risk | Impact | Mitigation Strategy |
|
||||
|------|--------|---------------------|
|
||||
| Risk 1 | High | How to address it |
|
||||
| Risk 2 | Medium | How to address it |
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Review and approve proposal
|
||||
2. Assemble team
|
||||
3. Kick off Phase 1
|
||||
|
||||
---
|
||||
|
||||
*This is a sample proposal template. Replace this content with your actual project details.*
|
||||
@ -1,178 +1,444 @@
|
||||
:root {
|
||||
--bg-color: #0f172a;
|
||||
--text-color: #e2e8f0;
|
||||
--primary-color: #38bdf8;
|
||||
--secondary-color: #818cf8;
|
||||
--accent-color: #f472b6;
|
||||
--card-bg: #1e293b;
|
||||
--font-main: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
@import "tailwindcss";
|
||||
@plugin "daisyui";
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* ========================================
|
||||
THEME CONFIGURATION
|
||||
======================================== */
|
||||
|
||||
header {
|
||||
padding: 2rem 5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
@theme {
|
||||
/* Fonts */
|
||||
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(to right, var(--primary-color), var(--accent-color));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Custom animations */
|
||||
--animate-float: float 6s ease-in-out infinite;
|
||||
--animate-glow: glow 2s ease-in-out infinite alternate;
|
||||
--animate-slide-up: slideUp 0.5s ease-out;
|
||||
--animate-fade-in: fadeIn 0.6s ease-out;
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@keyframes float {
|
||||
|
||||
nav a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 800px;
|
||||
margin: 4rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: #94a3b8;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
background: var(--card-bg);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.post-card h2 {
|
||||
margin-top: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.post-card a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 0.9rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
margin-top: 4rem;
|
||||
color: #64748b;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Typography polish */
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
article {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #334155;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.3em;
|
||||
font-size: 0.9em;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #1e293b;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@keyframes glow {
|
||||
from {
|
||||
box-shadow: 0 0 20px -10px oklch(0.7 0.15 200);
|
||||
}
|
||||
|
||||
to {
|
||||
box-shadow: 0 0 40px -10px oklch(0.75 0.18 200);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
/* ========================================
|
||||
DAISYUI THEME CUSTOMIZATION
|
||||
======================================== */
|
||||
|
||||
@plugin "daisyui" {
|
||||
themes: panda --default, pandaLight;
|
||||
}
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "panda";
|
||||
default: true;
|
||||
/* Fun dark theme - cozy night with pops of color */
|
||||
--color-base-100: oklch(0.18 0.015 280);
|
||||
/* Deep purple-ish dark */
|
||||
--color-base-200: oklch(0.22 0.02 280);
|
||||
/* Slightly lighter */
|
||||
--color-base-300: oklch(0.30 0.025 280);
|
||||
/* Cards and borders */
|
||||
--color-base-content: oklch(0.95 0.01 280);
|
||||
/* Crisp white text */
|
||||
--color-primary: oklch(0.75 0.18 15);
|
||||
/* 🧡 Coral/Peach - warm and fun */
|
||||
--color-primary-content: oklch(0.15 0.02 15);
|
||||
--color-secondary: oklch(0.70 0.20 300);
|
||||
/* 💜 Electric Purple - playful */
|
||||
--color-secondary-content: oklch(1 0 0);
|
||||
--color-accent: oklch(0.78 0.15 175);
|
||||
/* 🌊 Minty Teal - fresh pop */
|
||||
--color-accent-content: oklch(0.15 0.02 175);
|
||||
--color-neutral: oklch(0.28 0.02 280);
|
||||
--color-neutral-content: oklch(0.92 0.01 280);
|
||||
--color-info: oklch(0.72 0.14 230);
|
||||
/* Sky blue */
|
||||
--color-success: oklch(0.75 0.18 155);
|
||||
/* Lime green */
|
||||
--color-warning: oklch(0.82 0.16 85);
|
||||
/* Sunny yellow */
|
||||
--color-error: oklch(0.68 0.20 25);
|
||||
/* Soft red */
|
||||
--radius-box: 1.25rem;
|
||||
--radius-btn: 0.75rem;
|
||||
--radius-badge: 9999px;
|
||||
}
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "pandaLight";
|
||||
/* Fun light theme - bright and cheerful */
|
||||
--color-base-100: oklch(0.99 0.005 280);
|
||||
/* Off-white */
|
||||
--color-base-200: oklch(0.96 0.01 280);
|
||||
/* Light lavender tint */
|
||||
--color-base-300: oklch(0.92 0.015 280);
|
||||
/* Subtle purple-gray */
|
||||
--color-base-content: oklch(0.25 0.03 280);
|
||||
/* Dark purple text */
|
||||
--color-primary: oklch(0.65 0.20 15);
|
||||
/* 🧡 Coral - punchy */
|
||||
--color-primary-content: oklch(1 0 0);
|
||||
--color-secondary: oklch(0.58 0.22 300);
|
||||
/* 💜 Rich Purple */
|
||||
--color-secondary-content: oklch(1 0 0);
|
||||
--color-accent: oklch(0.65 0.18 175);
|
||||
/* 🌊 Teal */
|
||||
--color-accent-content: oklch(1 0 0);
|
||||
--color-neutral: oklch(0.45 0.03 280);
|
||||
--color-neutral-content: oklch(0.98 0 0);
|
||||
--color-info: oklch(0.62 0.16 230);
|
||||
--color-success: oklch(0.65 0.20 155);
|
||||
--color-warning: oklch(0.78 0.18 85);
|
||||
--color-error: oklch(0.58 0.22 25);
|
||||
--radius-box: 1.25rem;
|
||||
--radius-btn: 0.75rem;
|
||||
--radius-badge: 9999px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
BASE STYLES
|
||||
======================================== */
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: oklch(0.7 0.15 200 / 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
COMPONENT STYLES
|
||||
======================================== */
|
||||
|
||||
@layer components {
|
||||
|
||||
/* Gradient text effect */
|
||||
.gradient-text {
|
||||
background: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-accent));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Glass morphism card - uses theme-aware colors */
|
||||
.glass-card {
|
||||
background-color: var(--color-base-200);
|
||||
backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--color-base-300);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0 10px 40px -10px oklch(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
/* Hero section styles */
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, var(--color-base-100), var(--color-base-200), var(--color-base-100));
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Project card hover effect - uses theme-aware colors */
|
||||
.project-card {
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--color-base-200);
|
||||
backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--color-base-300);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0 4px 20px -4px oklch(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 50px -12px oklch(0 0 0 / 0.25);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Blog post card - uses theme-aware colors */
|
||||
.post-card {
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--color-base-200);
|
||||
backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--color-base-300);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0 2px 12px -2px oklch(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 30px -6px oklch(0 0 0 / 0.15);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Docs sidebar link */
|
||||
.docs-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
color: oklch(0.9 0.01 260 / 0.7);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.docs-link:hover {
|
||||
color: var(--color-base-content);
|
||||
background-color: oklch(0.28 0.02 260 / 0.5);
|
||||
}
|
||||
|
||||
.docs-link.active {
|
||||
background-color: oklch(0.7 0.15 200 / 0.1);
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
border-left: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
/* Section container */
|
||||
.section-container {
|
||||
max-width: 80rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.section-container {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.section-container {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tech badge */
|
||||
.tech-badge {
|
||||
transition: all 0.2s ease;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tech-badge:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Prose styling for content */
|
||||
.prose-custom {
|
||||
color: var(--color-base-content);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.prose-custom h1,
|
||||
.prose-custom h2,
|
||||
.prose-custom h3,
|
||||
.prose-custom h4 {
|
||||
color: var(--color-base-content);
|
||||
font-weight: 700;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose-custom h1 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.prose-custom h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.prose-custom h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.prose-custom h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.prose-custom p {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.prose-custom a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.prose-custom a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.prose-custom code {
|
||||
background-color: var(--color-base-300);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.prose-custom pre {
|
||||
background-color: var(--color-base-300);
|
||||
border: 1px solid var(--color-neutral);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
overflow-x: auto;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.prose-custom pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
|
||||
.prose-custom ul,
|
||||
.prose-custom ol {
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.prose-custom li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose-custom blockquote {
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: 1em;
|
||||
background-color: var(--color-base-200);
|
||||
padding: 1em 1em 1em 1.5em;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
font-style: italic;
|
||||
color: var(--color-base-content);
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.prose-custom img {
|
||||
border-radius: 0.75rem;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.prose-custom table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.prose-custom th,
|
||||
.prose-custom td {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--color-base-300);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose-custom th {
|
||||
background-color: var(--color-base-200);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose-custom hr {
|
||||
border: none;
|
||||
border-top: 1px solid oklch(1 0 0 / 0.1);
|
||||
margin: 2em 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
UTILITY STYLES
|
||||
======================================== */
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.animate-delay-100 {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
.animate-delay-200 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
.animate-delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.animate-delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
106
src/index.njk
106
src/index.njk
@ -1,22 +1,92 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: Home - 5Panda
|
||||
title: 5Panda - Project Proposals
|
||||
description: Innovative project ideas and proposals
|
||||
---
|
||||
|
||||
<div class="hero">
|
||||
<h1>Building the Future,<br>One Line at a Time.</h1>
|
||||
<p>Welcome to my digital garden. Here I document my journey, share learnings, and showcase my projects.</p>
|
||||
</div>
|
||||
|
||||
<h2>Latest Posts</h2>
|
||||
<ul class="post-list">
|
||||
{%- for post in collections.post | reverse -%}
|
||||
<li class="post-card">
|
||||
<a href="{{ post.url }}">
|
||||
<span class="post-meta">{{ post.date.toDateString() }}</span>
|
||||
<h2>{{ post.data.title }}</h2>
|
||||
<p>{{ post.data.description }}</p>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
<!-- Hero Section -->
|
||||
<section
|
||||
class="hero-gradient min-h-[70vh] flex items-center relative overflow-hidden">
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/20 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary/20 rounded-full blur-3xl animate-float animate-delay-300"></div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/10 rounded-full
|
||||
blur-3xl"></div>
|
||||
</div>
|
||||
<div class="section-container relative z-10">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="animate-slide-up">
|
||||
<span class="badge badge-primary badge-outline badge-lg mb-6">Project Proposals</span>
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
|
||||
Ideas That<br>
|
||||
<span class="gradient-text">Shape Tomorrow.</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-base-content/70 mb-10 max-w-2xl mx-auto">
|
||||
Innovative project proposals and concepts. Explore ideas that push boundaries and create impact.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/blog/" class="btn btn-primary btn-lg gap-2 animate-glow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
View Proposals
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Latest Proposals Section -->
|
||||
<section class="py-20">
|
||||
<div class="section-container">
|
||||
<div class="text-center mb-12">
|
||||
<span class="badge badge-accent badge-outline mb-4">Latest</span>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Recent Proposals</h2>
|
||||
<p class="text-base-content/70 max-w-2xl mx-auto">Browse through the latest project ideas and proposals</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
{% for post in collections.posts | head(4) %}
|
||||
<a href="{{ post.url }}" class="post-card group">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<time datetime="{{ post.date | dateFormat('iso') }}" class="text-sm text-base-content/50">
|
||||
{{ post.date | dateFormat('short') }}
|
||||
</time>
|
||||
<span class="text-base-content/30">•</span>
|
||||
<span class="text-sm text-base-content/50">{{ post.content | readingTime }}</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2 group-hover:text-primary transition-colors">{{ post.data.title }}</h3>
|
||||
<p class="text-base-content/70">{{ post.data.description | excerpt(120) }}</p>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="col-span-full text-center py-16">
|
||||
<div class="glass-card p-8 max-w-md mx-auto">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-16 w-16 mx-auto text-base-content/30 mb-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
<h3 class="text-xl font-bold mb-2">No proposals yet</h3>
|
||||
<p class="text-base-content/60">Project proposals will appear here once they're added.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if collections.posts.length > 4 %}
|
||||
<div class="text-center mt-10">
|
||||
<a href="/blog/" class="btn btn-outline btn-primary">View All Proposals</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
@ -1,25 +0,0 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: Hello World
|
||||
date: 2025-12-16
|
||||
tags: post
|
||||
description: The first post of many. Setting up the environment.
|
||||
---
|
||||
|
||||
# Hello World!
|
||||
|
||||
Welcome to my new blog. This is a starter post to verify that **11ty** is working correctly.
|
||||
|
||||
## Why 11ty?
|
||||
|
||||
* Static Site Generation
|
||||
* Fast build times
|
||||
* Flexible
|
||||
|
||||
Here is a code snippet:
|
||||
|
||||
```javascript
|
||||
console.log("Hello, 5Panda!");
|
||||
```
|
||||
|
||||
Enjoy the stay!
|
||||
Loading…
x
Reference in New Issue
Block a user