From ae2651154a9c22b7d2f395fe45af2996c8d82c4b Mon Sep 17 00:00:00 2001 From: Aryan Gupta Date: Thu, 19 Jun 2025 14:18:42 +1000 Subject: [PATCH 1/6] Add line break --- src/vce/spec-maths/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vce/spec-maths/index.html b/src/vce/spec-maths/index.html index 1a884ee..e47b971 100644 --- a/src/vce/spec-maths/index.html +++ b/src/vce/spec-maths/index.html @@ -67,7 +67,7 @@

Bound Reference Materials

diff --git a/src/index.html b/src/index.html index 5f1eafd..4fa5798 100644 --- a/src/index.html +++ b/src/index.html @@ -73,6 +73,14 @@ Blogs +
  • + + + + + Research + +
    • diff --git a/src/vce/chem/index.html b/src/vce/chem/index.html index f8d4144..42c6e0b 100644 --- a/src/vce/chem/index.html +++ b/src/vce/chem/index.html @@ -49,6 +49,14 @@ Blogs +
  • + + + + + Research + +
    • diff --git a/src/vce/eng/index.html b/src/vce/eng/index.html index 03a82e2..e9da85c 100644 --- a/src/vce/eng/index.html +++ b/src/vce/eng/index.html @@ -49,6 +49,14 @@ Blogs +
  • + + + + + Research + +
    • diff --git a/src/vce/index.html b/src/vce/index.html index 167ead1..6e61e47 100644 --- a/src/vce/index.html +++ b/src/vce/index.html @@ -51,6 +51,14 @@ Blogs +
  • + + + + + Research + +
    • diff --git a/src/vce/physics/index.html b/src/vce/physics/index.html index 5c7279b..defe10d 100644 --- a/src/vce/physics/index.html +++ b/src/vce/physics/index.html @@ -49,6 +49,14 @@ Blogs +
  • + + + + + Research + +
    • diff --git a/src/vce/spec-maths/index.html b/src/vce/spec-maths/index.html index e47b971..c2c2e8a 100644 --- a/src/vce/spec-maths/index.html +++ b/src/vce/spec-maths/index.html @@ -50,6 +50,14 @@ Blogs +
  • + + + + + Research + +
    • From 1963fd03a9e5c6de8d217f93fc98d6f0ecd536f4 Mon Sep 17 00:00:00 2001 From: Aryan Gupta Date: Fri, 20 Jun 2025 12:09:30 +1000 Subject: [PATCH 3/6] Minor file structure changes + github workflow --- .github/workflows/eleventy-build.yml | 19 +++++++++++++++++-- src/_includes/{ => layouts}/base.njk | 0 src/_includes/layouts/post.njk | 2 +- src/blog/index.njk | 2 +- 4 files changed, 19 insertions(+), 4 deletions(-) rename src/_includes/{ => layouts}/base.njk (100%) diff --git a/.github/workflows/eleventy-build.yml b/.github/workflows/eleventy-build.yml index a26c4e9..f99f495 100644 --- a/.github/workflows/eleventy-build.yml +++ b/.github/workflows/eleventy-build.yml @@ -1,14 +1,29 @@ -name: Eleventy Build and Deploy +# .github/workflows/eleventy-build.yml + +name: Build and Deploy Eleventy Site on: push: branches: - main + pull_request: + branches: + - main + + workflow_dispatch: + +concurrency: + group: "pages" + cancel-in-progress: true + jobs: build_and_deploy: runs-on: ubuntu-latest + permissions: + contents: write + steps: - name: Checkout code uses: actions/checkout@v4 @@ -26,9 +41,9 @@ jobs: run: npm run build - name: Deploy to GitHub Pages + if: github.event_name == 'push' && github.ref == 'refs/heads/main' uses: peaceiris/actions-gh-pages@v4 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./docs - publish_branch: gh-pages cname: aryan-gupta.is-a.dev \ No newline at end of file diff --git a/src/_includes/base.njk b/src/_includes/layouts/base.njk similarity index 100% rename from src/_includes/base.njk rename to src/_includes/layouts/base.njk diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk index 22c0309..ffda1c0 100644 --- a/src/_includes/layouts/post.njk +++ b/src/_includes/layouts/post.njk @@ -1,5 +1,5 @@ --- -layout: 'base.njk' +layout: 'layouts/base.njk' ---
    diff --git a/src/blog/index.njk b/src/blog/index.njk index c2e5b66..dd3e809 100644 --- a/src/blog/index.njk +++ b/src/blog/index.njk @@ -1,5 +1,5 @@ --- -layout: base.njk +layout: layouts/base.njk title: Blog permalink: /blog/index.html templateEngineOverride: njk, md From 7209403a44e3c70f0655b8d74c61518423813093 Mon Sep 17 00:00:00 2001 From: Aryan Gupta Date: Fri, 20 Jun 2025 15:14:15 +1000 Subject: [PATCH 4/6] Initital research article sample, nunjacks template, css styles --- eleventy.config.js | 6 + src/_includes/layouts/base.njk | 4 + src/_includes/layouts/research-list.njk | 26 ++++ src/_includes/layouts/research-post.njk | 13 ++ src/css/research.css | 180 ++++++++++++++++++++++++ src/research/2025/sample-article.md | 26 ++++ src/research/index.md | 6 + 7 files changed, 261 insertions(+) create mode 100644 src/_includes/layouts/research-list.njk create mode 100644 src/_includes/layouts/research-post.njk create mode 100644 src/css/research.css create mode 100644 src/research/2025/sample-article.md create mode 100644 src/research/index.md diff --git a/eleventy.config.js b/eleventy.config.js index 059f2dd..ebab6ee 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -35,6 +35,12 @@ module.exports = function(eleventyConfig) { flat: false // Whether to generate a flat list or nested list }); + // --- Collections --- + // This new collection will group all posts with the 'research' tag. + eleventyConfig.addCollection("research", function(collectionApi) { + return collectionApi.getFilteredByTag("research"); + }); + // --- Passthrough Copy --- // (Keep your existing passthrough copy lines) diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 76adb12..bb16395 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -2,6 +2,9 @@ + + + {{ title | default("Aryan Gupta - Portfolio") }} @@ -9,6 +12,7 @@ + diff --git a/src/_includes/layouts/research-list.njk b/src/_includes/layouts/research-list.njk new file mode 100644 index 0000000..78ccb5a --- /dev/null +++ b/src/_includes/layouts/research-list.njk @@ -0,0 +1,26 @@ +
    +
    +

    {{ title }}

    +

    {{ content | safe }}

    + +
    + {% for post in collections.research | reverse %} +
    +
    +

    {{ post.data.title }}

    + {% if post.data.status %} + {{ post.data.status }} + {% endif %} +
    +

    + +

    + {% if post.data.description %} +

    {{ post.data.description }}

    + {% endif %} + Read More → +
    + {% endfor %} +
    +
    +
    \ No newline at end of file diff --git a/src/_includes/layouts/research-post.njk b/src/_includes/layouts/research-post.njk new file mode 100644 index 0000000..f1faa3d --- /dev/null +++ b/src/_includes/layouts/research-post.njk @@ -0,0 +1,13 @@ +
    +
    +
    +

    {{ title }}

    +

    + Published on +

    +
    +
    + {{ content | safe }} +
    +
    +
    \ No newline at end of file diff --git a/src/css/research.css b/src/css/research.css new file mode 100644 index 0000000..ec7a411 --- /dev/null +++ b/src/css/research.css @@ -0,0 +1,180 @@ +/* ============================================= + RESEARCH SECTION STYLES + ============================================= */ + +/* --- Custom Properties (Variables) --- */ +:root { + --research-font-serif: 'Lora', serif; + --research-font-sans: 'Poppins', sans-serif; + --research-accent-color: #a78bfa; /* Your site's main accent */ + --research-text-color: #dcdcdc; + --research-meta-color: #aaa; + --research-bg-light: #1e1e30; + --research-border-color: #333; + --status-completed-bg: rgba(60, 179, 113, 0.15); + --status-completed-text: #3cb371; + --status-in-progress-bg: rgba(100, 149, 237, 0.15); + --status-in-progress-text: #6495ed; +} + +/* --- Research List Page --- */ +#research-list { + max-width: 800px; + margin: 0 auto; +} + +#research-list h1 { + font-family: var(--research-font-sans); + text-align: center; + font-size: 2.2em; + margin-bottom: 10px; +} + +#research-list p.intro { + text-align: center; + max-width: 650px; + margin: 0 auto 40px auto; + color: var(--research-meta-color); +} + +.article-list { + display: flex; + flex-direction: column; + gap: 25px; +} + +.article-item { + background-color: var(--research-bg-light); + border: 1px solid var(--research-border-color); + padding: 25px; + border-radius: 6px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.article-item:hover { + transform: translateY(-4px); + box-shadow: 0 5px 15px rgba(0,0,0,0.2); +} + +.article-title-line { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 15px; + margin-bottom: 5px; +} + +.article-item h2 { + font-family: var(--research-font-sans); + text-align: left; + margin-bottom: 0; + font-size: 1.4em; +} + +.article-item h2 a { + color: var(--research-text-color); + text-decoration: none; +} +.article-item h2 a:hover { + color: var(--research-accent-color); +} + +.article-item .meta { + color: var(--research-meta-color); + font-size: 0.9em; + margin-bottom: 15px; +} + +.article-item .excerpt { + font-family: var(--research-font-serif); + line-height: 1.7; +} + +.article-item .read-more { + display: inline-block; + margin-top: 15px; + color: var(--research-accent-color); + text-decoration: none; + font-weight: bold; +} +.article-item .read-more:hover { + text-decoration: underline; +} + + +/* --- Status Badge Styling --- */ +.status-badge { + flex-shrink: 0; /* Prevents the badge from shrinking */ + font-size: 0.75em; + font-weight: bold; + padding: 4px 10px; + border-radius: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.status-completed { + background-color: var(--status-completed-bg); + color: var(--status-completed-text); + border: 1px solid var(--status-completed-text); +} + +.status-in-progress { + background-color: var(--status-in-progress-bg); + color: var(--status-in-progress-text); + border: 1px solid var(--status-in-progress-text); +} + + +/* --- Individual Research Article Page --- */ +.research-article-container { + max-width: 750px; + margin: 0 auto; +} + +.research-header { + text-align: center; + padding-bottom: 20px; + margin-bottom: 30px; + border-bottom: 1px solid var(--research-border-color); +} +.research-header h1 { + font-family: var(--research-font-sans); + font-size: 2.5em; + margin-bottom: 10px; +} +.research-header .meta { + color: var(--research-meta-color); + font-style: italic; +} + +.research-content { + font-family: var(--research-font-serif); + color: var(--research-text-color); + font-size: 1.1em; + line-height: 1.8; +} + +.research-content h2, .research-content h3 { + font-family: var(--research-font-sans); + margin-top: 2em; + margin-bottom: 0.8em; +} + +.research-content a { + color: var(--research-accent-color); +} + + +/* --- Mobile Responsiveness --- */ +@media (max-width: 768px) { + #research-list h1 { + font-size: 1.8em; + } + .research-header h1 { + font-size: 2em; + } + .research-content { + font-size: 1em; + } +} \ No newline at end of file diff --git a/src/research/2025/sample-article.md b/src/research/2025/sample-article.md new file mode 100644 index 0000000..8075b87 --- /dev/null +++ b/src/research/2025/sample-article.md @@ -0,0 +1,26 @@ +--- +title: "Sample Research Article" +description: "A brief look into a sample topic for demonstration purposes." +date: 2025-06-20 +layout: layouts/research-post.njk +permalink: "/research/{{ page.date.getFullYear() }}/{{ page.fileSlug }}/" +tags: + - research +status: "Completed" +--- + +## Abstract + +This is a sample article created to demonstrate the structure and layout of the new research section. It contains placeholder text and headings. + +## Introduction + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. + +## Methods + +Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. + +## Conclusion + +Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. \ No newline at end of file diff --git a/src/research/index.md b/src/research/index.md new file mode 100644 index 0000000..dd02d7f --- /dev/null +++ b/src/research/index.md @@ -0,0 +1,6 @@ +--- +layout: layouts/research-list.njk +title: Research & Explorations +--- + +Welcome to my research hub. Here you'll find explorations into various topics, from reviving abandoned open-source projects to technical deep-dives and analyses. \ No newline at end of file From fac44ce2e4b5cef8a6e70249cd7f375b14a49f56 Mon Sep 17 00:00:00 2001 From: Aryan Gupta Date: Sat, 21 Jun 2025 11:52:14 +1000 Subject: [PATCH 5/6] Fix styling + Research Articles work --- src/_includes/layouts/research-list.njk | 4 + src/_includes/layouts/research-post.njk | 45 +++++-- src/css/research.css | 160 +++++++++++++++++++++--- src/research/2025/sample-article.md | 3 +- 4 files changed, 184 insertions(+), 28 deletions(-) diff --git a/src/_includes/layouts/research-list.njk b/src/_includes/layouts/research-list.njk index 78ccb5a..0ce6ebf 100644 --- a/src/_includes/layouts/research-list.njk +++ b/src/_includes/layouts/research-list.njk @@ -1,3 +1,7 @@ +--- +layout: 'layouts/base.njk' +--- +

    {{ title }}

    diff --git a/src/_includes/layouts/research-post.njk b/src/_includes/layouts/research-post.njk index f1faa3d..bd2df56 100644 --- a/src/_includes/layouts/research-post.njk +++ b/src/_includes/layouts/research-post.njk @@ -1,13 +1,34 @@ -
    -
    -
    -

    {{ title }}

    -

    - Published on -

    -
    -
    - {{ content | safe }} +--- +layout: 'layouts/base.njk' +--- +{# This new top-level container will manage our new grid layout #} +
    + + {# The "Left Leaf": TOC Sidebar #} +
    -
    \ No newline at end of file + + + {# The "Middle Leaf": Main Article Content #} +
    +
    +
    +

    {{ title }}

    +

    + Published on + {% if status == "In Progress" and lastUpdated %} +
    + Last updated on + {% endif %} +

    +
    +
    + {{ content | safe }} +
    +
    +
    + + \ No newline at end of file diff --git a/src/css/research.css b/src/css/research.css index ec7a411..9e20f4e 100644 --- a/src/css/research.css +++ b/src/css/research.css @@ -20,24 +20,26 @@ /* --- Research List Page --- */ #research-list { max-width: 800px; - margin: 0 auto; + padding-top: 0; + margin-top: -145px; } #research-list h1 { font-family: var(--research-font-sans); text-align: center; font-size: 2.2em; - margin-bottom: 10px; + margin-bottom: -15px; } #research-list p.intro { text-align: center; max-width: 650px; - margin: 0 auto 40px auto; + margin: 25px; color: var(--research-meta-color); } .article-list { + margin-top: 30px; display: flex; flex-direction: column; gap: 25px; @@ -48,12 +50,13 @@ border: 1px solid var(--research-border-color); padding: 25px; border-radius: 6px; - transition: transform 0.2s ease, box-shadow 0.2s ease; + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .article-item:hover { - transform: translateY(-4px); - box-shadow: 0 5px 15px rgba(0,0,0,0.2); + border-color: var(--research-accent-color); + transform: translateY(-2px); + box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .article-title-line { @@ -128,11 +131,17 @@ /* --- Individual Research Article Page --- */ .research-article-container { + /* This adds a 60px buffer of space at the top, pushing the title down from the navbar. */ + margin-top: 0 !important; + padding-top: 120px !important; max-width: 750px; - margin: 0 auto; + margin-left: auto; + margin-right: auto; } .research-header { + margin-top: -150px; + position: static !important; text-align: center; padding-bottom: 20px; margin-bottom: 30px; @@ -159,22 +168,143 @@ font-family: var(--research-font-sans); margin-top: 2em; margin-bottom: 0.8em; + color: #e0e0e0; /* White text color from your blog's style */ + border-bottom: 1px solid #555; /* The line underneath */ + padding-bottom: 0.3em; /* Space between text and the line */ } .research-content a { color: var(--research-accent-color); } +.research-header .last-updated { + font-size: 0.9em; + opacity: 0.9; +} + +.research-content h2, +.research-content h3, +.research-content h4 { + position: relative; +} + +.research-content .heading-anchor-link { + position: absolute; + /* This positions the anchor outside and to the left of the heading */ + left: -1.2em; + top: 0.1em; /* Adjust for vertical alignment */ + + /* Ensure no other margins are interfering */ + margin-left: 0; + + /* Keep it subtle until hovered */ + opacity: 0; + transition: opacity 0.2s ease; +} + +.research-content h2:hover .heading-anchor-link, +.research-content h3:hover .heading-anchor-link, +.research-content h4:hover .heading-anchor-link { + opacity: 0.7; +} + +.research-content .heading-anchor-link:hover { + opacity: 1; +} + +/* --- Two-Column Layout & Sticky Sidebar for Articles --- */ +.page-with-left-sidebar .page-content-main { + max-width: none; +} + +.page-with-left-sidebar { + display: grid; + /* This creates 5 columns to precisely control the layout: + 1. Flexible empty space on the left + 2. The TOC sidebar + 3. The gap between the TOC and content + 4. The main content + 5. Flexible empty space on the right + */ + grid-template-columns: 1fr 250px 80px 1100px 1fr; +} + +.sticky-toc { + position: -webkit-sticky; /* For Safari compatibility */ + position: sticky; + /* This tells the TOC to "stick" 120px from the top of the screen, + which should clear your main navigation bar. Adjust if needed. */ + top: 250px; +} + +/* --- Styling for TOC Links Inside the Sidebar --- */ + +/* Removes the default bullet points and spacing */ +.sticky-toc nav.toc ul { + list-style: none; + padding-left: 0; + margin-top: 15px; +} + +.sticky-toc nav.toc li { + margin: 0; +} + +/* Styles for each link in the TOC */ +.sticky-toc nav.toc a { + display: block; + padding: 10px 15px; + border-radius: 4px; + color: var(--research-meta-color); /* Softer text color */ + text-decoration: none; + font-size: 0.9em; + border-left: 3px solid transparent; /* A subtle indicator for the active link */ + transition: all 0.2s ease-in-out; +} + +/* Style for when you hover over a link */ +.sticky-toc nav.toc a:hover { + color: var(--research-text-color); + background-color: rgba(167, 139, 250, 0.1); +} + +/* Style for the link of the section you are currently viewing */ +/* (Note: This will require JavaScript to activate, but the style will be ready) */ +.sticky-toc nav.toc a.active { + color: var(--research-accent-color); + font-weight: bold; + border-left-color: var(--research-accent-color); +} + +.page-sidebar { + grid-column: 2; + justify-self: end; +} -/* --- Mobile Responsiveness --- */ -@media (max-width: 768px) { - #research-list h1 { - font-size: 1.8em; +.page-content-main { + grid-column: 4; + max-width: none; /* We control width with the grid now */ +} + +/* --- Responsive styles for smaller screens --- */ +@media (max-width: 1200px) { + .page-with-left-sidebar { + display: block; /* Revert to a normal, single-column flow */ } - .research-header h1 { - font-size: 2em; + + .page-sidebar { + width: 100%; + margin-bottom: 2em; } - .research-content { - font-size: 1em; + + .sticky-toc { + position: static; /* Disable sticky positioning */ } +} +/* --- Final Fix for Expanding Content --- */ + +/* This selects the main container ONLY on the research article page + and removes its max-width, allowing our grid to use the full space. */ +main:has(.page-with-left-sidebar) { + max-width: none; } \ No newline at end of file diff --git a/src/research/2025/sample-article.md b/src/research/2025/sample-article.md index 8075b87..1fad6ab 100644 --- a/src/research/2025/sample-article.md +++ b/src/research/2025/sample-article.md @@ -6,7 +6,8 @@ layout: layouts/research-post.njk permalink: "/research/{{ page.date.getFullYear() }}/{{ page.fileSlug }}/" tags: - research -status: "Completed" +status: "In Progress" +lastUpdated: 2025-06-21 # The new field --- ## Abstract From 4cf83e16e6c3f78334e8336cbb9f02676ffba55a Mon Sep 17 00:00:00 2001 From: Aryan Gupta Date: Sat, 21 Jun 2025 15:44:41 +1000 Subject: [PATCH 6/6] Finish comment stripping --- eleventy.config.js | 44 ++++------- src/css/components.css | 128 ++++++++++++------------------ src/css/layout.css | 157 ++++++++++++++++--------------------- src/css/navigation.css | 99 ++++++++++------------- src/css/research.css | 63 ++++----------- src/css/style.css | 84 ++++++++------------ src/js/main.js | 6 +- src/js/particles-config.js | 49 ++++++------ src/js/slider.js | 46 +++++------ 9 files changed, 276 insertions(+), 400 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index ebab6ee..53a70db 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,5 +1,4 @@ -// eleventy.config.js -const { DateTime } = require("luxon"); // Import Luxon library for dates +const { DateTime } = require("luxon"); const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginTOC = require('eleventy-plugin-toc'); const markdownIt = require('markdown-it'); @@ -9,7 +8,6 @@ module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(syntaxHighlight); - // --- TOC & Anchor Plugin Configuration --- eleventyConfig.setLibrary( 'md', markdownIt({ @@ -19,76 +17,64 @@ module.exports = function(eleventyConfig) { }).use(markdownItAnchor, { slugify: s => s.trim().toLowerCase().replace(/[\s+,.']/g, '-').replace(/[()]/g, ''), // Ensure consistent slugification permalink: markdownItAnchor.permalink.ariaHidden({ - placement: 'before', // Or 'after' - class: 'heading-anchor-link', // Optional: A class for styling the anchor link - symbol: '#', // Optional: The symbol for the anchor link - level: [2,3,4] // Optional: Only add permalinks to h2, h3, h4 + placement: 'before', + class: 'heading-anchor-link', + symbol: '#', + level: [2,3,4] }) }) ); eleventyConfig.addPlugin(pluginTOC, { - tags: ['h2', 'h3'], // Which heading tags to include in the TOC, h4 can be added if needed - wrapper: 'nav', // What element to wrap the TOC in, e.g., 'nav' - wrapperClass: 'toc', // Class for the wrapper element - ul: true, // Whether to use an unordered list (ul) or ordered list (ol) - flat: false // Whether to generate a flat list or nested list + tags: ['h2', 'h3'], + wrapper: 'nav', + wrapperClass: 'toc', + ul: true, + flat: false }); - // --- Collections --- - // This new collection will group all posts with the 'research' tag. eleventyConfig.addCollection("research", function(collectionApi) { return collectionApi.getFilteredByTag("research"); }); - - // --- Passthrough Copy --- - // (Keep your existing passthrough copy lines) eleventyConfig.addPassthroughCopy("src/css"); eleventyConfig.addPassthroughCopy("src/js"); eleventyConfig.addPassthroughCopy("src/images"); - eleventyConfig.addPassthroughCopy("src/favicon-32x32.png"); // Adjust if needed + eleventyConfig.addPassthroughCopy("src/favicon-32x32.png"); eleventyConfig.addPassthroughCopy("robots.txt"); eleventyConfig.addPassthroughCopy("sitemap.xml"); - // --- Filters --- - // Readable Date Filter (e.g., May 5, 2025) eleventyConfig.addFilter("readableDate", (dateObj, format = "DD") => { - // Luxon format tokens: https://moment.github.io/luxon/#/formatting?id=table-of-tokens + return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat(format); }); - // HTML Date String Filter (e.g., 2025-05-05) eleventyConfig.addFilter('htmlDateString', (dateObj) => { return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd'); }); - // Truncate Filter (for excerpts) eleventyConfig.addFilter("truncate", (content, length = 150, end = "...") => { if (!content || typeof content !== 'string') return ''; if (content.length <= length) return content; let truncated = content.substring(0, length); let lastSpace = truncated.lastIndexOf(' '); - if (lastSpace > length / 2) { // Only truncate at space if it's not too early + if (lastSpace > length / 2) { truncated = truncated.substring(0, lastSpace); } return truncated + end; }); - // --- Shortcodes --- - // Current Year Shortcode eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); - // --- Return Eleventy Options --- return { dir: { input: "src", includes: "_includes", - layout: "_includes/layouts/", // <<< Define layouts subfolder + layout: "_includes/layouts/", output: "docs" }, passthroughFileCopy: true, markdownTemplateEngine: "njk", htmlTemplateEngine: "njk" }; -}; +}; \ No newline at end of file diff --git a/src/css/components.css b/src/css/components.css index 7958967..3eba200 100644 --- a/src/css/components.css +++ b/src/css/components.css @@ -1,83 +1,73 @@ -/* --- Skills Accordion Styling --- */ -#about h3 { /* Style the main "Skills" heading if needed */ +#about h3 { margin-bottom: 15px; text-align: center; } .skill-category { - margin-bottom: 10px; /* Space below each category box */ + margin-bottom: 10px; border: 1px solid #444; - border-radius: 4px; /* Slightly rounded corners */ - background-color: #1a1a2e; /* Dark background */ - overflow: hidden; /* Prevents content overflow issues */ + border-radius: 4px; + background-color: #1a1a2e; + overflow: hidden; } .skill-category summary { - padding: 12px 15px; /* Padding inside the clickable title */ + padding: 12px 15px; font-weight: bold; - cursor: pointer; /* Makes it look clickable */ - outline: none; /* Removes default focus outline */ - background-color: #2a2a3a; /* Background for the title bar */ - transition: background-color 0.2s ease; /* Smooth hover effect */ - border-bottom: 1px solid #444; /* Darker border when closed */ - /* Ensure summary behaves like a block */ + cursor: pointer; + outline: none; + background-color: #2a2a3a; + transition: background-color 0.2s ease; + border-bottom: 1px solid #444; + text-align: center; display: block; } .skill-category summary:hover { - background-color: #3a3a4a; /* Darker background on hover */ + background-color: #3a3a4a; } -/* Style the default arrow marker (optional) */ -.skill-category summary::marker { /* Standard way */ - /* You could change color, etc. */ - /* color: #007bff; */ +.skill-category summary::marker { + } -.skill-category summary::-webkit-details-marker { /* For Chrome/Safari */ - /* Style the default arrow specifically */ +.skill-category summary::-webkit-details-marker { + } -/* Style the list inside the details */ .skill-category ul { - list-style: disc; /* Use standard bullet points */ - margin: 15px 0 15px 35px; /* Add margin/indentation for the list */ - padding-right: 15px; /* Ensure padding on the right too */ + list-style: disc; + margin: 15px 0 15px 35px; + padding-right: 15px; } -.skill-category ul li::marker { /* Style the bullet points */ - color: #a78bfa; /* Purple bullets */ +.skill-category ul li::marker { + color: #a78bfa; } -/* Optional: Add padding directly when details is open */ .skill-category[open] { - padding-bottom: 5px; /* Add a little space at the bottom when open */ + padding-bottom: 5px; } -/* Optional: Remove border below summary when open */ .skill-category[open] summary { - border-bottom: none; /* Add a line when open */ - margin-bottom: 10px; /* Add space below summary when open */ + border-bottom: none; + margin-bottom: 10px; } -/* --- Project Section CSS --- */ -/* Container for the slider, if you used one */ .project-slider-container { - position: relative; /* For positioning custom arrows if you add them later */ - max-width: 1200px; /* Or your preferred max width for the slider area */ - margin: 30px auto; /* Center the slider container */ - padding: 0 50px; /* Default padding for desktop for arrows */ - box-sizing: border-box; /* Ensure padding doesn't add to width */ + position: relative; + max-width: 1200px; + margin: 30px auto; + padding: 0 50px; + box-sizing: border-box; } -/* The actual slider generated by Tiny Slider might have class tns-outer, tns-inner, tns-slider */ -/* Your project items are the slides */ .project-item { - background-color: rgba(26, 26, 46, 0.85); /* Darker, semi-transparent card */ + background-color: rgba(26, 26, 46, 0.85); color: #dcdcdc; padding: 25px; - border: 1px solid #444; /* Darker border for dark theme */ - border-radius: 8px; /* Increased radius */ + border: 1px solid #444; + border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; @@ -85,9 +75,8 @@ flex-direction: column; justify-content: space-between; margin-top: 20px; - margin-right: 2px; /* Consider if this is needed with gutter */ - /* height: 500px; /* Consider making this min-height or auto if content varies significantly */ - min-height: 480px; /* Or a suitable min-height */ + margin-right: 2px; + min-height: 480px; } .project-item:hover { @@ -158,13 +147,12 @@ margin-bottom: 5px; } -/* Styles for Tiny Slider Controls */ .tns-controls button { font-size: 0 !important; - width: 36px !important; /* Slightly smaller controls */ + width: 36px !important; height: 36px !important; border-radius: 50% !important; - background-color: rgba(40, 40, 60, 0.7) !important; /* Slightly more visible */ + background-color: rgba(40, 40, 60, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; position: absolute !important; top: 50% !important; @@ -183,33 +171,30 @@ } .tns-controls button[data-controls="prev"] { - left: 10px !important; /* Adjusted for smaller container padding on mobile */ + left: 10px !important; } .tns-controls button[data-controls="prev"]::before { content: '\2039'; - font-size: 22px; /* Slightly smaller arrow */ + font-size: 22px; font-weight: bold; - line-height: 1; /* Ensure it's centered */ + line-height: 1; } .tns-controls button[data-controls="next"] { - right: 10px !important; /* Adjusted for smaller container padding on mobile */ + right: 10px !important; } .tns-controls button[data-controls="next"]::before { content: '\203A'; - font-size: 22px; /* Slightly smaller arrow */ + font-size: 22px; font-weight: bold; - line-height: 1; /* Ensure it's centered */ + line-height: 1; } -/* Ensure the main #projects intro paragraph is still centered */ #projects > p:first-of-type { text-align: center; margin-bottom: 30px; } -/* --- End of Inactive Project CSS --- */ - #contact p { margin-bottom: 25px; text-align: center; @@ -270,9 +255,6 @@ color: #aaa; } -/* --- End of Contact Section CSS --- */ - -/* --- VCE Landing Page Subject Links --- */ .subject-link-container { display: flex; flex-wrap: wrap; @@ -301,7 +283,6 @@ color: #a78bfa; transform: translateY(-3px); } -/* --- End VCE Subject Links --- */ .blog-post-list { display: grid; @@ -380,21 +361,20 @@ transform: translateX(3px) translateY(-1px); } -/* --- ADD MEDIA QUERIES FOR MOBILE --- */ @media (max-width: 768px) { .project-slider-container { - padding: 0 15px; /* Reduce padding for mobile */ + padding: 0 15px; } - .tns-controls button { /* Make controls smaller and position them slightly differently if needed */ + .tns-controls button { width: 30px !important; height: 30px !important; } .tns-controls button[data-controls="prev"] { - left: -5px !important; /* Adjust if they feel too cramped or too far */ + left: -5px !important; } .tns-controls button[data-controls="next"] { - right: -5px !important; /* Adjust */ + right: -5px !important; } .tns-controls button[data-controls="prev"]::before, .tns-controls button[data-controls="next"]::before { @@ -402,10 +382,8 @@ } .project-item { - /* If fixedWidth in JS is not changed for mobile, item width is less critical here. - But if fixedWidth IS changed or removed for mobile, ensure items can flow. */ - padding: 20px; /* Reduce padding within cards on mobile */ - min-height: auto; /* Allow height to be more flexible on mobile, or set a smaller min-height */ + padding: 20px; + min-height: auto; } .project-item h3 { font-size: 1.1em; @@ -414,10 +392,9 @@ font-size: 0.85em; } .project-image { - height: 150px; /* Smaller image height on mobile */ + height: 150px; } - /* Adjustments for other components on mobile */ .skill-category summary { padding: 10px 12px; } @@ -448,7 +425,7 @@ @media (max-width: 480px) { .project-slider-container { - padding: 0 10px; /* Even less padding for very small screens */ + padding: 0 10px; } .tns-controls button[data-controls="prev"] { left: 0px !important; @@ -463,5 +440,4 @@ .project-image { height: 120px; } -} - +} \ No newline at end of file diff --git a/src/css/layout.css b/src/css/layout.css index 323138d..e521e7c 100644 --- a/src/css/layout.css +++ b/src/css/layout.css @@ -1,125 +1,117 @@ -/* --- Header & Navigation --- */ header { - /* Default state (at top) */ - background-color: transparent; /* <<< Make background clear initially */ - backdrop-filter: none; /* <<< No blur initially */ - color: #f0f0f0; /* Keep text light */ + + background-color: transparent; + backdrop-filter: none; + color: #f0f0f0; padding: 15px 0; position: fixed; width: 100%; top: 0; left: 0; z-index: 100; - box-shadow: none; /* <<< No shadow initially */ - border-bottom: 1px solid transparent; /* <<< Transparent border initially */ - /* Add transitions for a smooth change */ + box-shadow: none; + border-bottom: 1px solid transparent; + transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; } header.header-scrolled { - background-color: rgba(20, 20, 40, 0.85); /* Darker semi-transparent background */ - /* Apply blur - add prefix for Safari */ + background-color: rgba(20, 20, 40, 0.85); + -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* Add shadow */ - border-bottom: 1px solid #333; /* Add border */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); + border-bottom: 1px solid #333; } -/* Responsiveness (Original Desktop Styles) */ .container { width: 960px; margin: 0 auto; - padding-left: 15px; /* Add some default padding */ - padding-right: 15px;/* Add some default padding */ + padding-left: 15px; + padding-right: 15px; } .sidebar { width: 30%; float: left; - padding: 0 15px; /* Add padding to sidebar */ + padding: 0 15px; } .main-content { width: 70%; float: left; - padding: 0 15px; /* Add padding to main content */ + padding: 0 15px; } -/* If you use .flex-container for the main two-column layout (content + sidebar) */ -.flex-page-layout { /* Assuming a class for the main layout flex container */ +.flex-page-layout { display: flex; - width: 960px; /* Or your preferred desktop width */ + width: 960px; margin: 0 auto; } -.flex-page-layout .main-content-flex { /* Assuming a class for the main content area */ - flex: 3; /* Example ratio */ +.flex-page-layout .main-content-flex { + flex: 3; padding: 20px; } -.flex-page-layout .sidebar-flex { /* Assuming a class for the sidebar */ - flex: 1; /* Example ratio */ +.flex-page-layout .sidebar-flex { + flex: 1; padding: 20px; - background-color: #2a2a3e; /* Example sidebar background */ + background-color: #2a2a3e; } - -/* --- Main Content Area --- */ main { - /* Remove or change background-color if you want body background to show through */ - background-color: transparent; /* Or a very dark color like #1a1a2e */ + + background-color: transparent; z-index: 1; width: 80%; max-width: 960px; - margin: 100px auto 20px auto; /* Adjusted top margin due to fixed header height */ + margin: 100px auto 20px auto; padding: 25px; border-radius: 8px; - box-shadow: none; /* Remove shadow if background is transparent */ - /* border: 1px solid #444; */ /* Optional: subtle border instead */ + box-shadow: none; + } -/* --- Section Styling --- */ section { - padding: 30px 0; /* Vertical padding within each section */ - margin-bottom: 20px; /* Space below each section */ - border-bottom: 1px solid #333; /* Light separator line */ + padding: 30px 0; + margin-bottom: 20px; + border-bottom: 1px solid #333; } section:last-of-type { - border-bottom: none; /* Remove border from the last section */ + border-bottom: none; margin-bottom: 0; } #hero { - text-align: center; /* Center text in the hero section */ - border-bottom: none; /* No line needed after hero usually */ - padding-top: 20px; /* Less padding at the very top inside main */ + text-align: center; + border-bottom: none; + padding-top: 20px; } #hero h1 { margin-bottom: 10px; - font-size: 2.2em; /* Make main heading larger, adjust for mobile later */ + font-size: 2.2em; } #hero p { - font-size: 1.0em; /* Adjust for mobile later */ + font-size: 1.0em; color: #dcdcdc; } -/* --- Headings --- */ h2 { - margin-bottom: 20px; /* Space below section headings */ - color: #a78bfa; /* << Purple accent for headings */ + margin-bottom: 20px; + color: #a78bfa; text-align: center; - font-size: 1.8em; /* Adjust for mobile later */ + font-size: 1.8em; } h3 { - margin-bottom: 10px; /* Space below project titles */ - font-size: 1.5em; /* Adjust for mobile later */ + margin-bottom: 10px; + font-size: 1.5em; } -/* --- Footer --- */ footer { text-align: center; margin-top: 40px; @@ -129,7 +121,6 @@ footer { z-index: 1; } -/* --- VCE Subject Page Spacing & HR Styling --- */ #spec-maths-resources, #physics-resources, #chem-resources, @@ -147,7 +138,7 @@ footer { margin-left: auto; margin-right: auto; line-height: 1.6; - font-size: 0.95em; /* Adjust for mobile */ + font-size: 0.95em; } #spec-maths-resources hr, @@ -170,7 +161,7 @@ footer { padding-bottom: 8px; border-bottom: 1px solid #555; text-align: left; - font-size: 1.3em; /* Adjust for mobile */ + font-size: 1.3em; } #spec-maths-resources h3:first-of-type, @@ -193,7 +184,7 @@ footer { position: relative; line-height: 1.5; color: #ccc; - font-size: 0.9em; /* Adjust for mobile */ + font-size: 0.9em; } .resource-list li::before { @@ -206,10 +197,7 @@ footer { color: #a78bfa; font-size: 1em; } -/* --- End VCE Subject Page Styling --- */ -/* --- Custom 404 Page Styling (Updated for 2-column layout) --- */ -/* Your existing 404 styles are good, including the media query. No changes needed here for now. */ #custom-404-page { display: flex; flex-wrap: wrap; @@ -313,19 +301,16 @@ footer { box-shadow: 0 4px 8px rgba(0,0,0,0.3); } -/* --- MOBILE STYLES --- */ - -/* Targeting screens up to 1024px (Tablets and potentially small desktops) */ @media (max-width: 1024px) { .container, - .flex-page-layout { /* If using flex for main layout */ - width: 90%; /* Make container more fluid */ + .flex-page-layout { + width: 90%; } main { - width: 90%; /* Make main content area more fluid */ + width: 90%; padding: 20px; - margin-top: 90px; /* Adjust if header height changes */ + margin-top: 90px; } #hero h1 { @@ -344,49 +329,45 @@ footer { #physics-resources h3, #chem-resources h3, #eng-resources h3 { - font-size: 1.2em; /* Slightly smaller for subject subheadings */ + font-size: 1.2em; } } -/* Targeting screens up to 768px (Typical mobile phones) */ @media (max-width: 768px) { header { - padding: 10px 0; /* Reduce header padding */ + padding: 10px 0; } .container, - .flex-page-layout { /* If using flex for main layout */ - width: 95%; /* Even more fluid, or use 100% and manage padding on children */ + .flex-page-layout { + width: 95%; padding-left: 10px; padding-right: 10px; } - /* If using the float-based .sidebar and .main-content */ .sidebar, .main-content { width: 100%; - float: none; /* Stack them */ - padding-left: 0; /* Reset padding if container handles it */ + float: none; + padding-left: 0; padding-right: 0; } .sidebar { - margin-bottom: 20px; /* Add space when stacked */ + margin-bottom: 20px; } - /* If using .flex-page-layout for the main two-column layout */ .flex-page-layout { - flex-direction: column; /* Stack items vertically */ + flex-direction: column; } .flex-page-layout .sidebar-flex { - margin-bottom: 20px; /* Add space when stacked */ + margin-bottom: 20px; } - main { - width: 100%; /* Full width on mobile */ - margin-top: 80px; /* Adjust if header height changes */ + width: 100%; + margin-top: 80px; padding: 15px; - border-radius: 0; /* Optional: remove border-radius on mobile for edge-to-edge feel */ + border-radius: 0; } section { @@ -406,7 +387,6 @@ footer { font-size: 1.2em; } - /* VCE Subject Page adjustments for mobile */ #spec-maths-resources > p:first-of-type, #physics-resources > p:first-of-type, #chem-resources > p:first-of-type, @@ -435,24 +415,23 @@ footer { .resource-list li { margin-bottom: 12px; - padding-left: 25px; /* Slightly reduce padding if icon feels too far */ + padding-left: 25px; font-size: 0.85em; } .resource-list li::before { - top: 2px; /* May need slight adjustment */ - font-size: 0.9em; /* Slightly smaller icon */ + top: 2px; + font-size: 0.9em; } - /* 404 Page - already has its own good media query, but ensure consistency */ #custom-404-page { - padding: 20px 5%; /* Adjust padding */ + padding: 20px 5%; min-height: 80vh; } .error-text-content { margin-top: 20px; } .error-page-image-new { - max-width: 200px; /* Further reduce 404 image if needed */ + max-width: 200px; } .take-me-home { padding: 12px 25px; @@ -460,13 +439,12 @@ footer { } } -/* Targeting screens up to 480px (Smaller mobile phones) */ @media (max-width: 480px) { header { padding: 8px 0; } main { - margin-top: 70px; /* Adjust if header height changes */ + margin-top: 70px; padding: 10px; } #hero h1 { @@ -482,7 +460,6 @@ footer { font-size: 1.1em; } - /* Further fine-tuning for VCE pages if needed */ #spec-maths-resources h3, #physics-resources h3, #chem-resources h3, @@ -492,4 +469,4 @@ footer { .resource-list li { font-size: 0.8em; } -} +} \ No newline at end of file diff --git a/src/css/navigation.css b/src/css/navigation.css index a8dafb9..2ce897a 100644 --- a/src/css/navigation.css +++ b/src/css/navigation.css @@ -1,11 +1,11 @@ header nav { max-width: 1100px; margin: 0 auto; - padding: 0 20px; /* Slightly reduce padding for more space on smaller desktops */ + padding: 0 20px; display: flex; justify-content: space-between; align-items: center; - position: relative; /* For positioning mobile menu later if needed */ + position: relative; } header .logo a { @@ -13,7 +13,7 @@ header .logo a { text-decoration: none; font-size: 1.8em; font-weight: bold; - z-index: 10; /* Ensure logo is above mobile menu background */ + z-index: 10; } header nav ul.nav-links { @@ -22,7 +22,7 @@ header nav ul.nav-links { align-items: center; margin: 0; padding: 0; - gap: 20px; /* Slightly reduce gap */ + gap: 20px; } header nav ul.nav-links li a { @@ -32,14 +32,14 @@ header nav ul.nav-links li a { color: #f0f0f0; text-decoration: none; font-weight: 500; - font-size: 1em; /* Slightly reduce font size */ - padding: 8px 10px; /* Adjust padding */ + font-size: 1em; + padding: 8px 10px; border-radius: 4px; transition: color 0.3s ease, background-color 0.3s ease; } .nav-icon { - width: 1.3em; /* Slightly smaller icons */ + width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; @@ -50,7 +50,7 @@ header nav ul.nav-links li a { } .special-icon { - width: 1.3em; /* Slightly smaller icons */ + width: 1.3em; height: 1.3em; fill: currentColor; stroke: currentColor; @@ -64,70 +64,64 @@ header nav ul.nav-links li a:hover { color: #a78bfa; } -/* --- Mobile Navigation Styles --- */ .mobile-nav-toggle { - display: none; /* Hidden on desktop */ + display: none; background: none; border: none; - color: #f0f0f0; /* This will be the stroke color for the SVG if not overridden by SVG itself */ + color: #f0f0f0; cursor: pointer; - padding: 8px; /* Adjust padding around SVG */ - z-index: 1001; /* Ensure it's above other header content */ - line-height: 0; /* Prevents extra space if SVG is inline-block */ + padding: 8px; + z-index: 1001; + line-height: 0; } .mobile-nav-toggle .hamburger-svg-icon { - width: 28px; /* Adjust size as needed */ - height: 28px; /* Adjust size as needed */ - /* stroke: #f0f0f0; /* Default stroke color for paths if not set on paths themselves. SVG uses currentColor by default. */ + width: 28px; + height: 28px; + } -/* Styling for the user's SVG animating to an X */ .mobile-nav-toggle .hamburger-svg-icon path { - stroke: currentColor; /* Inherits color from .mobile-nav-toggle button */ - stroke-width: 2; /* Matches SVG attribute */ - stroke-linecap: round; /* Matches SVG attribute */ + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; - transform-origin: center center; /* Crucial for correct rotation */ + transform-origin: center center; } -/* Active state for SVG animation to "X" */ -/* Adjusted translateY to correct perceived skew in the "X" */ .mobile-nav-toggle.active .hamburger-svg-icon .line-top { - /* Original y=7. Target meeting point y=12.5 (slightly lower than SVG mid-point 12) */ + transform: translateY(5.8px) rotate(45deg); } .mobile-nav-toggle.active .hamburger-svg-icon .line-middle { opacity: 0; - transform: scaleX(0); /* Optional: makes the fade out look a bit better */ + transform: scaleX(0); } .mobile-nav-toggle.active .hamburger-svg-icon .line-bottom { - /* Original y=17. Target meeting point y=12.5 */ + transform: translateY(-4.2px) rotate(-45deg); } -/* --- Table of Contents Styling (Enhanced Aesthetics - with Background Box) --- */ .toc-container { - background-color: #262638; /* Dark shade for the container */ - border: 1px solid #3a3a4f; /* Softer border color */ - border-radius: 8px; /* Slightly more rounded corners */ - padding: 20px 25px; /* Padding inside the container */ + background-color: #262638; + border: 1px solid #3a3a4f; + border-radius: 8px; + padding: 20px 25px; margin-bottom: 35px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Subtle shadow */ + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } -.toc-container h2 { /* The "Table of Contents" heading */ +.toc-container h2 { margin-top: 0; margin-bottom: 20px; font-size: 1.5em; font-weight: 600; - text-align: center; /* As per your screenshot preference */ + text-align: center; color: #e8e8e8; border-bottom: 1px solid #4a4a60; padding-bottom: 12px; } -/* Styles for the