twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

fix: implement tailwindcss

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-09-01 17:57:53 -04:00
parent b204e5a351
commit 87c304f0df
8 changed files with 2839 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.eleventy.js
View File

@@ -4,14 +4,15 @@ const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
module.exports = function(eleventyConfig) {
// Pass through static assets from the "src" directory
eleventyConfig.addPassthroughCopy("src/css");
eleventyConfig.addPassthroughCopy("src/js");
eleventyConfig.addPassthroughCopy("src/resume");
eleventyConfig.addPassthroughCopy("src/assets/images");
eleventyConfig.addPassthroughCopy({ "src/favicon" : "/" } );
eleventyConfig.addPassthroughCopy({ 'src/robots.txt': '/robots.txt' });
eleventyConfig.addPassthroughCopy({ 'src/sitemap.xml': '/sitemap.xml' });
eleventyConfig.addPassthroughCopy("./src/css/style.css");
eleventyConfig.addPassthroughCopy("./src/css/prism-tomorrow.css");
eleventyConfig.addPlugin(syntaxHighlight);
@@ -60,6 +61,9 @@ module.exports = function(eleventyConfig) {
});
}
// Watch the Tailwind config file for changes
eleventyConfig.addWatchTarget("./tailwind.config.js");
return {
// Set the source and output directories
dir: {

2
.gitignore vendored
View File

@@ -3,3 +3,5 @@ _site
.DS_Store
src/_data/views.json
src/_data/likes.json
src/css/style.css

2849
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@@ -3,9 +3,13 @@
"version": "1.0.0",
"description": "An Eleventy project with Docker and VS Code debugging.",
"scripts": {
"start": "eleventy --serve",
"debug": "node --inspect=0.0.0.0:9229 ./node_modules/.bin/eleventy --serve --watch",
"build": "eleventy"
"build:css": "tailwindcss -i ./src/css/input.css -o ./src/css/style.css --minify",
"watch:css": "tailwindcss -i ./src/css/input.css -o ./src/css/style.css --watch",
"start": "npm-run-all -p serve watch:css",
"serve": "eleventy --serve",
"debug": "npm-run-all -p debug:eleventy watch:css",
"debug:eleventy": "node --inspect=0.0.0.0:9229 ./node_modules/.bin/eleventy --serve --watch",
"build": "npm run build:css && eleventy"
},
"keywords": [],
"author": "",
@@ -21,7 +25,10 @@
"luxon": "^3.7.1"
},
"devDependencies": {
"autoprefixer": "^10.4.19",
"http-proxy-middleware": "^3.0.0",
"nodemon": "^3.1.0"
"npm-run-all": "^4.1.5",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

15
src/_includes/layout.njk
View File

@@ -41,14 +41,13 @@
}
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="canonical" href="{{ site.url }}{{ page.url }}">
<link rel="stylesheet" href="/css/prism-tomorrow.css">
<link rel="canonical" href="{{ site.url }}{{ page.url }}">
</head>
<body class="antialiased">
<!-- Header & Nav -->
@@ -66,7 +65,7 @@
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="text-white focus:outline-none">
<i class="fas fa-bars text-2xl" alt="Toggle mobile menu"></i>
<i class="fas fa-bars text-2xl" aria-label="Toggle mobile menu" role="img"></i>
</button>
</div>
</nav>
@@ -78,7 +77,9 @@
<a href="/#skills" class="block text-gray-300 hover:text-blue-400">Skills</a>
<a href="/#experience" class="block text-gray-300 hover:text-blue-400">Experience</a>
<a href="/#contact" class="block text-gray-300 hover:text-blue-400">Contact</a>
<a href="/resume" style="margin-left: 4rem; margin-right: 4rem;" class="block btn mt-2 mb-2 m">View Resume</a>
<div class="text-center">
<a href="/resume" class="btn">View Resume</a>
</div>
</div>
</header>
<main class="main-content container mx-auto px-6 md:px-10 lg:px-20 py-12">
@@ -86,10 +87,10 @@
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-6">
<div class="container mx-auto px-6 text-center">
<div class="container mx-auto px-6">
<div class="flex justify-center space-x-6 mb-4">
<a href="{{ site.author.linkedinUrl }}" target="_blank" class="hover:text-blue-400" alt="LinkedIn link"><i class="fab fa-linkedin fa-2x" alt="LinkedIn logo"></i></a>
<a href="mailto:{{ site.author.email }}" class="hover:text-blue-400" alt="Email link"><i class="fas fa-envelope fa-2x" alt="Email icon"></i></a>
<a href="{{ site.author.linkedinUrl }}" target="_blank" class="hover:text-blue-400" aria-label="LinkedIn profile of {{ site.author.name }}"><i class="fab fa-linkedin fa-2x" aria-hidden="true"></i></a>
<a href="mailto:{{ site.author.email }}" class="hover:text-blue-400" aria-label="Email {{ site.author.name }}"><i class="fas fa-envelope fa-2x" aria-hidden="true"></i></a>
</div>
<p>&copy; {% year %} {{ site.author.name }}. All Rights Reserved.</p>
</div>

4
src/css/style.css → src/css/input.css
View File

@@ -1,3 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body {
height: 100%;
}
@@ -108,7 +111,6 @@ body {
.icon {
font-size: 1.5rem;
margin-right: 1rem;
color: #4299e1;
}
article {
max-width: 80vw;

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,njk,md,js}',
'./.eleventy.js',
],
theme: {
extend: {},
},
plugins: [],
};