mirror of
https://github.com/CoolnsX/my-website.git
synced 2025-12-20 07:15:19 +05:30
feat:rewrite using zola
This commit is contained in:
coolnsx
30
.gitignore
vendored
30
.gitignore
vendored
@@ -1 +1,31 @@
|
|||||||
allanime.xml
|
allanime.xml
|
||||||
|
# Zola build output
|
||||||
|
/public/
|
||||||
|
|
||||||
|
# Zola cache and temp files
|
||||||
|
/.zola/
|
||||||
|
|
||||||
|
# Environment files
|
||||||
|
.env
|
||||||
|
|
||||||
|
# Node modules (if you use npm/yarn for assets)
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# macOS system files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# VSCode settings
|
||||||
|
.vscode/
|
||||||
|
|
||||||
|
# Editor swap files
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# Backup files
|
||||||
|
*~
|
||||||
|
|
||||||
|
# Other OS generated files
|
||||||
|
Thumbs.db
|
||||||
|
|||||||
17
config.toml
Normal file
17
config.toml
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
# The URL the site will be built for
|
||||||
|
base_url = "https://coolans.dev"
|
||||||
|
|
||||||
|
# Whether to automatically compile all Sass files in the sass directory
|
||||||
|
compile_sass = false
|
||||||
|
|
||||||
|
build_search_index = true
|
||||||
|
|
||||||
|
[markdown]
|
||||||
|
highlight_code = true
|
||||||
|
|
||||||
|
# Whether external links are to be opened in a new tab
|
||||||
|
# If this is true, a `rel="noopener"` will always automatically be added for security reasons
|
||||||
|
external_links_target_blank = true
|
||||||
|
|
||||||
|
[extra]
|
||||||
|
# Put all your custom variables here
|
||||||
6
content/blog/_index.md
Normal file
6
content/blog/_index.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
+++
|
||||||
|
title = "Coming Soon"
|
||||||
|
sort_by = "date"
|
||||||
|
template = "blog.html"
|
||||||
|
page_template = "blog-page.html"
|
||||||
|
+++
|
||||||
68
index.html
68
index.html
@@ -1,68 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
|
|
||||||
<meta name="description" content="Portfolio website for CoolansX,Coolans,CoolnsX, Coolns AKA Tanveer Ahmed Ansari">
|
|
||||||
<link rel="canonical" href="https://coolans.dev">
|
|
||||||
<title>Welcome UWU</title>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body style="background-color: rgba(0,0,0,0.85);color: rgb(187, 187, 187);font-size: 20px;">
|
|
||||||
<h1 id="top" style="text-align: center;text-decoration:double;font-size: 60px;">Hello World!!</h1>
|
|
||||||
<hr>
|
|
||||||
<h1>New Site coming soon</h1>
|
|
||||||
<h1>Contents >></h1>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#about" style="color:green;">About Me</a></li>
|
|
||||||
<li><a href="#projects" style="color:green;">My Projects</a></li>
|
|
||||||
<li><a href="#hobbies" style="color:green;">My Hobbies</a></li>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#shell" style="color:green;">Shell Scripting</a></li>
|
|
||||||
<li><a href="#web" style="color:green;">Web Scraping</a></li>
|
|
||||||
</ul>
|
|
||||||
<li><a href="#description" style="color:green;">Description</a></li>
|
|
||||||
<li><a href="#contact" style="color:green;">Contact Me</a></li>
|
|
||||||
</ul>
|
|
||||||
<h1 id="about">About Me >></h1>
|
|
||||||
<ul>
|
|
||||||
<li><p>Hey there, My name is Tanveer Ahmed Ansari. I am a Computer Science Engineer who loves technology and tinkering with gadgets..</p></li>
|
|
||||||
<li><p>I am a minimilistic guy who just wanna have a fast with no fancy UI website, cause why not!!</p></li>
|
|
||||||
<li><p>I am an <a href="https://archlinux.org" style="color:green;text-decoration:none;">Arch Linux</a> user that is proficient in shell programming and web scraping..</p></li>
|
|
||||||
<li><p>I am also proficient in REGEX (regular Expression) that can make your life easier..</p></li>
|
|
||||||
<li><p>I just follow UNIX Philosopy that goes like "Do one thing and Do it well"..</p></li>
|
|
||||||
<li><p>I used all my knowledge about HTML and applied it here.</p></li>
|
|
||||||
</ul>
|
|
||||||
<h1 id="projects">Projects >></h1>
|
|
||||||
<ul>
|
|
||||||
<li><p>Ani-cli (A cli tool for watcing Anime). <a href="https://github.com/pystardust/ani-cli" style="color:green;">More Info</a></p></li>
|
|
||||||
<li><p>Ani-cli-status (Gives the status of ani-cli). <a href="https://github.com/CoolnsX/ani-cli-status" style="color:green;">More Info</a></p></li>
|
|
||||||
<li><p>Dra-cla (A cli tool for watching Korean, Chinese, Japanese Drama). <a href="https://github.com/CoolnsX/dra-cla" style="color:green;">More Info</a></p></li>
|
|
||||||
<li><p>Link Shortener App using Python. <a href="https://github.com/CoolnsX/Link-Shortener-App" style="color:green;">More Info</a></p></li>
|
|
||||||
</ul>
|
|
||||||
<h1 id="hobbies">My Hobbies >></h1>
|
|
||||||
<ul>
|
|
||||||
<li><h3 id="shell">Shell Scripting. <a href="shell-scripting.html" style="color:green;">More Info</a></h3></li>
|
|
||||||
<li><h3 id="web">Website Scraping. <a href="web-scraping.html" style="color:green;">More Info</a></h3></li>
|
|
||||||
</ul>
|
|
||||||
<h1 id="description">Description >></h1>
|
|
||||||
<ul>
|
|
||||||
<li><p>This site is Blazing Fast.. It contains all My project links and How to Reach me..</p></li>
|
|
||||||
<li><p>If you find the site ugly then I can't do anything.. I am more of a backend guy..</p></li>
|
|
||||||
<li><p>If you find something is not working.. Or any problem with site except Bad UI.. then you can <a href="#contact" style="color:green;">contact me</a>..</p></li>
|
|
||||||
<li><p>I know this site looks more like README of github.. Cause I want to give the information you want..</p></li>
|
|
||||||
<li><p>This site is completely scrapable, As I do web-scraping Myself. Though the source code is available on Github.</p></li>
|
|
||||||
</ul>
|
|
||||||
<h1 id="contact">How to Reach me >></h1>
|
|
||||||
<ul>
|
|
||||||
<li><p>Instagram >> <a href="https://www.instagram.com/coolans.x" style="color:green;">@coolans.x</a></p></li>
|
|
||||||
<li><p>Mail >> ansari.tan20@gmail.com</a></p></li>
|
|
||||||
<li><p>Discord >> <a href="https://discordapp.com/users/795922336368427030" style="color:green;">@CoolansX</a></p></li>
|
|
||||||
<li><p>Github >> <a href="https://github.com/CoolnsX" style="color:green;">@CoolnsX</a></p></li>
|
|
||||||
</ul>
|
|
||||||
<hr>
|
|
||||||
<h2 style="text-align: center;"><a href="#top" style="color:green;">Go to Top</a></h2>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
1214
package-lock.json
generated
Normal file
1214
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
11
package.json
Normal file
11
package.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"build": "NODE_ENV=production npx tailwindcss -i styles/main.css -o static/styles/main.css",
|
||||||
|
"watch": "npx tailwindcss -i styles/main.css -o static/styles/main.css --watch"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindcss/cli": "^4.1.7",
|
||||||
|
"@tailwindcss/typography": "^0.5.16",
|
||||||
|
"tailwindcss": "^4.1.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Shell Scripting</title>
|
|
||||||
</head>
|
|
||||||
<body style="background-color: rgba(0,0,0,0.85);color: rgb(187, 187, 187);font-size: 20px;">
|
|
||||||
<h1 id="top" style="text-align: center;text-decoration:double;font-size: 60px;">Shell Scripting</h1>
|
|
||||||
<hr>
|
|
||||||
<p>A shell script is a computer program designed to be run by the Unix shell, a command-line interpreter. The various dialects of shell scripts are considered to be scripting languages. Typical operations performed by shell scripts include file manipulation, program execution, and printing text. </p>
|
|
||||||
<p>The Logic behind shell scripting is to create automated task that you do on regular basis.. (Source:<a href="https://en.m.wikipedia.org/wiki/Shell_script" style="color:green;">Wikipedia</a>)</p>
|
|
||||||
<h2 id="repos"><a href="https://github.com/CoolnsX/and-scripts" style="color:green;">My Scripts Repository link</a> >></h2>
|
|
||||||
<p>It contains the scripts that I wrote and use on the daily basis to make my life easier.</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
BIN
static/assets/background.webp
Normal file
BIN
static/assets/background.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
806
static/styles/main.css
Normal file
806
static/styles/main.css
Normal file
@@ -0,0 +1,806 @@
|
|||||||
|
/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
|
||||||
|
@layer properties;
|
||||||
|
@layer theme, base, components, utilities;
|
||||||
|
@layer theme {
|
||||||
|
:root, :host {
|
||||||
|
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||||
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||||
|
"Courier New", monospace;
|
||||||
|
--color-blue-400: oklch(70.7% 0.165 254.624);
|
||||||
|
--color-blue-600: oklch(54.6% 0.245 262.881);
|
||||||
|
--color-blue-700: oklch(48.8% 0.243 264.376);
|
||||||
|
--color-gray-300: oklch(87.2% 0.01 258.338);
|
||||||
|
--color-gray-400: oklch(70.7% 0.022 261.325);
|
||||||
|
--color-gray-700: oklch(37.3% 0.034 259.733);
|
||||||
|
--color-gray-800: oklch(27.8% 0.033 256.848);
|
||||||
|
--color-gray-900: oklch(21% 0.034 264.665);
|
||||||
|
--color-black: #000;
|
||||||
|
--color-white: #fff;
|
||||||
|
--spacing: 0.25rem;
|
||||||
|
--text-sm: 0.875rem;
|
||||||
|
--text-sm--line-height: calc(1.25 / 0.875);
|
||||||
|
--text-lg: 1.125rem;
|
||||||
|
--text-lg--line-height: calc(1.75 / 1.125);
|
||||||
|
--text-xl: 1.25rem;
|
||||||
|
--text-xl--line-height: calc(1.75 / 1.25);
|
||||||
|
--text-2xl: 1.5rem;
|
||||||
|
--text-2xl--line-height: calc(2 / 1.5);
|
||||||
|
--text-4xl: 2.25rem;
|
||||||
|
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||||
|
--text-5xl: 3rem;
|
||||||
|
--text-5xl--line-height: 1;
|
||||||
|
--font-weight-medium: 500;
|
||||||
|
--font-weight-semibold: 600;
|
||||||
|
--font-weight-bold: 700;
|
||||||
|
--font-weight-extrabold: 800;
|
||||||
|
--leading-tight: 1.25;
|
||||||
|
--radius-lg: 0.5rem;
|
||||||
|
--radius-2xl: 1rem;
|
||||||
|
--blur-md: 12px;
|
||||||
|
--default-transition-duration: 150ms;
|
||||||
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--default-font-family: var(--font-sans);
|
||||||
|
--default-mono-font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@layer base {
|
||||||
|
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0 solid;
|
||||||
|
}
|
||||||
|
html, :host {
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
tab-size: 4;
|
||||||
|
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||||
|
font-feature-settings: var(--default-font-feature-settings, normal);
|
||||||
|
font-variation-settings: var(--default-font-variation-settings, normal);
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
height: 0;
|
||||||
|
color: inherit;
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
abbr:where([title]) {
|
||||||
|
-webkit-text-decoration: underline dotted;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
-webkit-text-decoration: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
b, strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
code, kbd, samp, pre {
|
||||||
|
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
||||||
|
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
||||||
|
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
sub, sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
text-indent: 0;
|
||||||
|
border-color: inherit;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: auto;
|
||||||
|
}
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
ol, ul, menu {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
img, svg, video, canvas, audio, iframe, embed, object {
|
||||||
|
display: block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
img, video {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
button, input, select, optgroup, textarea, ::file-selector-button {
|
||||||
|
font: inherit;
|
||||||
|
font-feature-settings: inherit;
|
||||||
|
font-variation-settings: inherit;
|
||||||
|
letter-spacing: inherit;
|
||||||
|
color: inherit;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
:where(select:is([multiple], [size])) optgroup {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
:where(select:is([multiple], [size])) optgroup option {
|
||||||
|
padding-inline-start: 20px;
|
||||||
|
}
|
||||||
|
::file-selector-button {
|
||||||
|
margin-inline-end: 4px;
|
||||||
|
}
|
||||||
|
::placeholder {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
||||||
|
::placeholder {
|
||||||
|
color: currentcolor;
|
||||||
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
|
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
::-webkit-date-and-time-value {
|
||||||
|
min-height: 1lh;
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
::-webkit-datetime-edit {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
::-webkit-datetime-edit-fields-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
||||||
|
padding-block: 0;
|
||||||
|
}
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
||||||
|
appearance: button;
|
||||||
|
}
|
||||||
|
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
[hidden]:where(:not([hidden="until-found"])) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@layer utilities {
|
||||||
|
.visible {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.fixed {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.sticky {
|
||||||
|
position: sticky;
|
||||||
|
}
|
||||||
|
.inset-0 {
|
||||||
|
inset: calc(var(--spacing) * 0);
|
||||||
|
}
|
||||||
|
.top-0 {
|
||||||
|
top: calc(var(--spacing) * 0);
|
||||||
|
}
|
||||||
|
.top-full {
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
.right-4 {
|
||||||
|
right: calc(var(--spacing) * 4);
|
||||||
|
}
|
||||||
|
.-z-5 {
|
||||||
|
z-index: calc(5 * -1);
|
||||||
|
}
|
||||||
|
.-z-10 {
|
||||||
|
z-index: calc(10 * -1);
|
||||||
|
}
|
||||||
|
.z-10 {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.z-50 {
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
@media (width >= 40rem) {
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
max-width: 48rem;
|
||||||
|
}
|
||||||
|
@media (width >= 64rem) {
|
||||||
|
max-width: 64rem;
|
||||||
|
}
|
||||||
|
@media (width >= 80rem) {
|
||||||
|
max-width: 80rem;
|
||||||
|
}
|
||||||
|
@media (width >= 96rem) {
|
||||||
|
max-width: 96rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mx-auto {
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
.my-10 {
|
||||||
|
margin-block: calc(var(--spacing) * 10);
|
||||||
|
}
|
||||||
|
.mt-2 {
|
||||||
|
margin-top: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
.mt-4 {
|
||||||
|
margin-top: calc(var(--spacing) * 4);
|
||||||
|
}
|
||||||
|
.mt-6 {
|
||||||
|
margin-top: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
.mb-4 {
|
||||||
|
margin-bottom: calc(var(--spacing) * 4);
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.h-6 {
|
||||||
|
height: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
.min-h-screen {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.w-6 {
|
||||||
|
width: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
.w-full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.flex-grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.flex-col {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.space-y-2 {
|
||||||
|
:where(& > :not(:last-child)) {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
|
||||||
|
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.space-x-6 {
|
||||||
|
:where(& > :not(:last-child)) {
|
||||||
|
--tw-space-x-reverse: 0;
|
||||||
|
margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
|
||||||
|
margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.scroll-smooth {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
.rounded-2xl {
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
}
|
||||||
|
.rounded-lg {
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
}
|
||||||
|
.border {
|
||||||
|
border-style: var(--tw-border-style);
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
.border-gray-700 {
|
||||||
|
border-color: var(--color-gray-700);
|
||||||
|
}
|
||||||
|
.border-gray-800 {
|
||||||
|
border-color: var(--color-gray-800);
|
||||||
|
}
|
||||||
|
.bg-black {
|
||||||
|
background-color: var(--color-black);
|
||||||
|
}
|
||||||
|
.bg-black\/70 {
|
||||||
|
background-color: color-mix(in srgb, #000 70%, transparent);
|
||||||
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
|
background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-blue-600 {
|
||||||
|
background-color: var(--color-blue-600);
|
||||||
|
}
|
||||||
|
.bg-gray-900\/80 {
|
||||||
|
background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
|
||||||
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
|
background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.bg-\[url\(\'\/assets\/background\.webp\'\)\] {
|
||||||
|
background-image: url('/assets/background.webp');
|
||||||
|
}
|
||||||
|
.bg-cover {
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.bg-center {
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.px-3 {
|
||||||
|
padding-inline: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
.px-4 {
|
||||||
|
padding-inline: calc(var(--spacing) * 4);
|
||||||
|
}
|
||||||
|
.px-6 {
|
||||||
|
padding-inline: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
.py-2 {
|
||||||
|
padding-block: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
.py-3 {
|
||||||
|
padding-block: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
.py-4 {
|
||||||
|
padding-block: calc(var(--spacing) * 4);
|
||||||
|
}
|
||||||
|
.py-10 {
|
||||||
|
padding-block: calc(var(--spacing) * 10);
|
||||||
|
}
|
||||||
|
.pt-6 {
|
||||||
|
padding-top: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.text-2xl {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||||
|
}
|
||||||
|
.text-4xl {
|
||||||
|
font-size: var(--text-4xl);
|
||||||
|
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||||
|
}
|
||||||
|
.text-lg {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
line-height: var(--tw-leading, var(--text-lg--line-height));
|
||||||
|
}
|
||||||
|
.text-sm {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||||
|
}
|
||||||
|
.text-xl {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||||
|
}
|
||||||
|
.leading-tight {
|
||||||
|
--tw-leading: var(--leading-tight);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
}
|
||||||
|
.font-bold {
|
||||||
|
--tw-font-weight: var(--font-weight-bold);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
}
|
||||||
|
.font-extrabold {
|
||||||
|
--tw-font-weight: var(--font-weight-extrabold);
|
||||||
|
font-weight: var(--font-weight-extrabold);
|
||||||
|
}
|
||||||
|
.font-medium {
|
||||||
|
--tw-font-weight: var(--font-weight-medium);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
}
|
||||||
|
.font-semibold {
|
||||||
|
--tw-font-weight: var(--font-weight-semibold);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
}
|
||||||
|
.text-blue-400 {
|
||||||
|
color: var(--color-blue-400);
|
||||||
|
}
|
||||||
|
.text-gray-300 {
|
||||||
|
color: var(--color-gray-300);
|
||||||
|
}
|
||||||
|
.text-gray-400 {
|
||||||
|
color: var(--color-gray-400);
|
||||||
|
}
|
||||||
|
.text-white {
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
.shadow {
|
||||||
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||||
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||||
|
}
|
||||||
|
.shadow-xl {
|
||||||
|
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||||
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||||
|
}
|
||||||
|
.blur-md {
|
||||||
|
--tw-blur: blur(var(--blur-md));
|
||||||
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||||
|
}
|
||||||
|
.backdrop-blur-md {
|
||||||
|
--tw-backdrop-blur: blur(var(--blur-md));
|
||||||
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||||
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||||
|
}
|
||||||
|
.backdrop-blur-none {
|
||||||
|
--tw-backdrop-blur: ;
|
||||||
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||||
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||||
|
}
|
||||||
|
.transition {
|
||||||
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
|
||||||
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||||
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||||
|
}
|
||||||
|
.transition-colors {
|
||||||
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||||
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||||
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||||
|
}
|
||||||
|
.duration-300 {
|
||||||
|
--tw-duration: 300ms;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
}
|
||||||
|
.hover\:bg-blue-700 {
|
||||||
|
&:hover {
|
||||||
|
@media (hover: hover) {
|
||||||
|
background-color: var(--color-blue-700);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover\:text-blue-400 {
|
||||||
|
&:hover {
|
||||||
|
@media (hover: hover) {
|
||||||
|
color: var(--color-blue-400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover\:text-white {
|
||||||
|
&:hover {
|
||||||
|
@media (hover: hover) {
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover\:underline {
|
||||||
|
&:hover {
|
||||||
|
@media (hover: hover) {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.focus\:ring-2 {
|
||||||
|
&:focus {
|
||||||
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||||
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.focus\:ring-white {
|
||||||
|
&:focus {
|
||||||
|
--tw-ring-color: var(--color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.focus\:outline-none {
|
||||||
|
&:focus {
|
||||||
|
--tw-outline-style: none;
|
||||||
|
outline-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:static {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:mt-0 {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
margin-top: calc(var(--spacing) * 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:flex {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:hidden {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:flex-row {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:items-center {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:space-x-6 {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
:where(& > :not(:last-child)) {
|
||||||
|
--tw-space-x-reverse: 0;
|
||||||
|
margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
|
||||||
|
margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:py-0 {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
padding-block: calc(var(--spacing) * 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md\:text-5xl {
|
||||||
|
@media (width >= 48rem) {
|
||||||
|
font-size: var(--text-5xl);
|
||||||
|
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@property --tw-space-y-reverse {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0;
|
||||||
|
}
|
||||||
|
@property --tw-space-x-reverse {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0;
|
||||||
|
}
|
||||||
|
@property --tw-border-style {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: solid;
|
||||||
|
}
|
||||||
|
@property --tw-leading {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-font-weight {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-shadow {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0 0 #0000;
|
||||||
|
}
|
||||||
|
@property --tw-shadow-color {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-shadow-alpha {
|
||||||
|
syntax: "<percentage>";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 100%;
|
||||||
|
}
|
||||||
|
@property --tw-inset-shadow {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0 0 #0000;
|
||||||
|
}
|
||||||
|
@property --tw-inset-shadow-color {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-inset-shadow-alpha {
|
||||||
|
syntax: "<percentage>";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 100%;
|
||||||
|
}
|
||||||
|
@property --tw-ring-color {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-ring-shadow {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0 0 #0000;
|
||||||
|
}
|
||||||
|
@property --tw-inset-ring-color {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-inset-ring-shadow {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0 0 #0000;
|
||||||
|
}
|
||||||
|
@property --tw-ring-inset {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-ring-offset-width {
|
||||||
|
syntax: "<length>";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0px;
|
||||||
|
}
|
||||||
|
@property --tw-ring-offset-color {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: #fff;
|
||||||
|
}
|
||||||
|
@property --tw-ring-offset-shadow {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0 0 #0000;
|
||||||
|
}
|
||||||
|
@property --tw-blur {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-brightness {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-contrast {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-grayscale {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-hue-rotate {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-invert {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-opacity {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-saturate {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-sepia {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-drop-shadow {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-drop-shadow-color {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-drop-shadow-alpha {
|
||||||
|
syntax: "<percentage>";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 100%;
|
||||||
|
}
|
||||||
|
@property --tw-drop-shadow-size {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-blur {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-brightness {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-contrast {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-grayscale {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-hue-rotate {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-invert {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-opacity {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-saturate {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-sepia {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-duration {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@layer properties {
|
||||||
|
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||||
|
*, ::before, ::after, ::backdrop {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
--tw-space-x-reverse: 0;
|
||||||
|
--tw-border-style: solid;
|
||||||
|
--tw-leading: initial;
|
||||||
|
--tw-font-weight: initial;
|
||||||
|
--tw-shadow: 0 0 #0000;
|
||||||
|
--tw-shadow-color: initial;
|
||||||
|
--tw-shadow-alpha: 100%;
|
||||||
|
--tw-inset-shadow: 0 0 #0000;
|
||||||
|
--tw-inset-shadow-color: initial;
|
||||||
|
--tw-inset-shadow-alpha: 100%;
|
||||||
|
--tw-ring-color: initial;
|
||||||
|
--tw-ring-shadow: 0 0 #0000;
|
||||||
|
--tw-inset-ring-color: initial;
|
||||||
|
--tw-inset-ring-shadow: 0 0 #0000;
|
||||||
|
--tw-ring-inset: initial;
|
||||||
|
--tw-ring-offset-width: 0px;
|
||||||
|
--tw-ring-offset-color: #fff;
|
||||||
|
--tw-ring-offset-shadow: 0 0 #0000;
|
||||||
|
--tw-blur: initial;
|
||||||
|
--tw-brightness: initial;
|
||||||
|
--tw-contrast: initial;
|
||||||
|
--tw-grayscale: initial;
|
||||||
|
--tw-hue-rotate: initial;
|
||||||
|
--tw-invert: initial;
|
||||||
|
--tw-opacity: initial;
|
||||||
|
--tw-saturate: initial;
|
||||||
|
--tw-sepia: initial;
|
||||||
|
--tw-drop-shadow: initial;
|
||||||
|
--tw-drop-shadow-color: initial;
|
||||||
|
--tw-drop-shadow-alpha: 100%;
|
||||||
|
--tw-drop-shadow-size: initial;
|
||||||
|
--tw-backdrop-blur: initial;
|
||||||
|
--tw-backdrop-brightness: initial;
|
||||||
|
--tw-backdrop-contrast: initial;
|
||||||
|
--tw-backdrop-grayscale: initial;
|
||||||
|
--tw-backdrop-hue-rotate: initial;
|
||||||
|
--tw-backdrop-invert: initial;
|
||||||
|
--tw-backdrop-opacity: initial;
|
||||||
|
--tw-backdrop-saturate: initial;
|
||||||
|
--tw-backdrop-sepia: initial;
|
||||||
|
--tw-duration: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
styles/main.css
Normal file
1
styles/main.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
module.exports = {
|
||||||
|
purge: ["./templates/**/*.html", "./theme/**/*.html"],
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {},
|
||||||
|
variants: {},
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
],
|
||||||
|
};
|
||||||
109
templates/base.html
Normal file
109
templates/base.html
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="dark scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>{% block title %}{% endblock title %} - Coolans</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="{{ get_url(path='styles/main.css') | safe }}"
|
||||||
|
/>
|
||||||
|
<script>
|
||||||
|
// Mobile menu toggle
|
||||||
|
function toggleMobileMenu() {
|
||||||
|
const menu = document.getElementById("mobile-menu");
|
||||||
|
menu.classList.toggle("hidden");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body
|
||||||
|
class="min-h-screen flex flex-col bg-black text-white relative transition-colors duration-300"
|
||||||
|
>
|
||||||
|
<!-- Blurred Background Image -->
|
||||||
|
<div
|
||||||
|
class="fixed inset-0 -z-10 bg-[url('/assets/background.webp')] bg-cover bg-center blur-md"
|
||||||
|
></div>
|
||||||
|
<div class="fixed inset-0 bg-black/70 -z-5"></div>
|
||||||
|
|
||||||
|
<!-- Top Navigation -->
|
||||||
|
<nav class="sticky top-0 z-50 bg-transparent backdrop-blur-none py-4">
|
||||||
|
<div
|
||||||
|
class="container mx-auto px-4 flex justify-between items-center"
|
||||||
|
>
|
||||||
|
<!-- Logo Island -->
|
||||||
|
<div
|
||||||
|
class="px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md"
|
||||||
|
>
|
||||||
|
<a href="/" class="text-xl font-bold text-white">Coolans</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile menu button -->
|
||||||
|
<button
|
||||||
|
class="md:hidden px-3 py-2 rounded-lg text-gray-300 bg-gray-900/80 border border-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
onclick="toggleMobileMenu()"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Nav Links Island -->
|
||||||
|
<ul
|
||||||
|
id="mobile-menu"
|
||||||
|
class="hidden md:flex md:static absolute right-4 top-full mt-2 md:mt-0 px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 md:space-x-6 flex-col md:flex-row text-gray-300 md:items-center"
|
||||||
|
>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="hover:text-blue-400 block py-2 md:py-0"
|
||||||
|
>Home</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="/blog"
|
||||||
|
class="hover:text-blue-400 block py-2 md:py-0"
|
||||||
|
>Blogs</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Main Content Section -->
|
||||||
|
<main class="flex-grow section py-10 relative z-10 rounded-2xl">
|
||||||
|
<div
|
||||||
|
class="container mx-auto px-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm"
|
||||||
|
>
|
||||||
|
{% block content %}{% endblock content %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="w-full py-10 relative z-10">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div
|
||||||
|
class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm text-gray-400"
|
||||||
|
>
|
||||||
|
© {{ now() | date(format="%Y") }} Coolans. All rights
|
||||||
|
reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
templates/blog-page.html
Normal file
10
templates/blog-page.html
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h1 class="title">
|
||||||
|
{{ page.title }}
|
||||||
|
</h1>
|
||||||
|
<p class="subtitle"><strong>{{ page.date }}</strong></p>
|
||||||
|
{{ page.content | safe }}
|
||||||
|
{% endblock content %}
|
||||||
|
|
||||||
14
templates/blog.html
Normal file
14
templates/blog.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %} Blogs {% endblock title %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h1 class="text-4xl md:text-5xl font-extrabold">
|
||||||
|
{{ section.title }}
|
||||||
|
</h1>
|
||||||
|
<ul>
|
||||||
|
{% for page in section.pages %}
|
||||||
|
<li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endblock content %}
|
||||||
126
templates/index.html
Normal file
126
templates/index.html
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
{% extends "base.html" %} {% block title %}Welcome{% endblock title %} {% block
|
||||||
|
content %}
|
||||||
|
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight">
|
||||||
|
Hi, I'm Tanveer — a Full Stack Developer & Self-Taught SysAdmin.
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="mt-6 text-lg text-gray-300">
|
||||||
|
I build performant, secure, and maintainable web applications using
|
||||||
|
<span class="text-white font-semibold">Laravel</span>. Beyond web
|
||||||
|
development, I handle Linux servers, automate deployment pipelines, and
|
||||||
|
optimize infrastructure using tools like
|
||||||
|
<span class="font-semibold">NGINX</span>,
|
||||||
|
<span class="font-semibold">Docker</span>, and
|
||||||
|
<span class="font-semibold">systemd</span>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-4 text-lg text-gray-300">
|
||||||
|
From building REST APIs and scalable backends to managing uptime and DevOps
|
||||||
|
workflows — I care deeply about clean code, automation, and reliability.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-4 text-lg text-gray-300">
|
||||||
|
My goal? Deliver fast, secure, and elegant solutions that make an impact —
|
||||||
|
whether for a side project, startup, or enterprise system.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="pt-6">
|
||||||
|
<a
|
||||||
|
href="{{ get_url(path='@/blog/_index.md') }}"
|
||||||
|
class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow transition"
|
||||||
|
>
|
||||||
|
Read My Blog →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="my-10 border-gray-700" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold mb-4">📬 Get in Touch</h2>
|
||||||
|
<p class="text-lg text-gray-300 mb-4">
|
||||||
|
I'm always open to collaborating, freelancing, or just chatting tech.
|
||||||
|
</p>
|
||||||
|
<ul class="text-gray-300 space-y-2">
|
||||||
|
<li>
|
||||||
|
<strong>Email:</strong>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="obfuscated-link text-blue-400 hover:underline text-lg"
|
||||||
|
data-encoded="bWVAY29vbGFucy5kZXY="
|
||||||
|
>Loading...</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<strong>Github:</strong>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="obfuscated-link text-blue-400 hover:underline text-lg"
|
||||||
|
data-encoded="aHR0cHM6Ly9naXRodWIuY29tL2Nvb2xuc3g="
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>Loading...</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>LinkedIn:</strong>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="obfuscated-link text-blue-400 hover:underline text-lg"
|
||||||
|
data-encoded="aHR0cHM6Ly9saW5rZWRpbi5jb20vaW4vY29vbGFucw=="
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>Loading...</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Matrix:</strong>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="obfuscated-link text-blue-400 hover:underline text-lg"
|
||||||
|
data-encoded="aHR0cHM6Ly9tYXRyaXgudG8vIy9AY29vbGFuczpjb29sYW5zLmRldg=="
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>Loading...</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function decodeAndFillLinks() {
|
||||||
|
const links = document.querySelectorAll(".obfuscated-link");
|
||||||
|
links.forEach((link) => {
|
||||||
|
const encoded = link.getAttribute("data-encoded");
|
||||||
|
if (!encoded) return;
|
||||||
|
|
||||||
|
const decoded = atob(encoded);
|
||||||
|
|
||||||
|
// Determine if email, phone, or URL by simple checks:
|
||||||
|
if (decoded.includes("@") && !decoded.startsWith('http')) {
|
||||||
|
// Email
|
||||||
|
link.href = `mailto:${decoded}`;
|
||||||
|
link.textContent = decoded;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (decoded.startsWith('http')) {
|
||||||
|
// URL - set href to full URL,
|
||||||
|
// but visible text to last segment after last '/'
|
||||||
|
link.href = decoded;
|
||||||
|
|
||||||
|
// Remove trailing slash if any
|
||||||
|
const trimmed = decoded.endsWith('/') ? decoded.slice(0, -1) : decoded;
|
||||||
|
|
||||||
|
// Extract last segment after '/'
|
||||||
|
const parts = trimmed.split('/');
|
||||||
|
const lastSegment = parts[parts.length - 1] || decoded;
|
||||||
|
link.textContent = lastSegment;
|
||||||
|
} else {
|
||||||
|
// Default fallback — just text
|
||||||
|
link.textContent = decoded;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", decodeAndFillLinks);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{% endblock content %}
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Web Scraping</title>
|
|
||||||
</head>
|
|
||||||
<body style="background-color: rgba(0,0,0,0.85);color: rgb(187, 187, 187);font-size: 20px;">
|
|
||||||
<h1 id="top" style="text-align: center;text-decoration:double;font-size: 60px;">Web Scraping</h1>
|
|
||||||
<hr>
|
|
||||||
<p>Web scraping is an automatic method to obtain large amounts of data from websites. Most of this data is unstructured data in an HTML format which is then converted into structured data in a spreadsheet or a database so that it can be used in various applications. </p>
|
|
||||||
<p>There are many different ways to perform web scraping to obtain data from websites. These include using online services, particular API’s or even creating your code for web scraping from scratch. (Source:<a href="https://www.geeksforgeeks.org/what-is-web-scraping-and-how-to-use-it" style="color:green;">Geeks for geeks</a>)</p>
|
|
||||||
<h3 id="repos"><a href="https://github.com/CoolnsX/and-scripts" style="color:green;">Repository link</a></h3>
|
|
||||||
<h2>Websites which I scraped successfully >></h2>
|
|
||||||
<table border="2" cellpadding="8" align="center">
|
|
||||||
<tr>
|
|
||||||
<th>Website Name</th>
|
|
||||||
<th>Video Qualities</th>
|
|
||||||
<th>STATUS</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://goload.pro" style="color:green;">Gogoanime</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>Auto</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/gogoplay.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://animixplay.to" style="color:green;">Animixplay</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>Auto</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/animixplay.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://www.fembed.net/" style="color:green;">Xstreamcdn</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>480p</li>
|
|
||||||
<li>720p</li>
|
|
||||||
<li>1080p</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/xstreamcdn.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://dood.ws" style="color:green;">Doodstream</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>High</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/doodstream.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://www.mp4upload.com/" style="color:green;">Mp4Upload</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>High</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/mp4upload.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://odnoklassniki.ru" style="color:green;">Odnoklassniki(okru)</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>144p</li>
|
|
||||||
<li>240p</li>
|
|
||||||
<li>360p</li>
|
|
||||||
<li>480p</li>
|
|
||||||
<li>720p</li>
|
|
||||||
<li>1080p</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/okru.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://streamlare.com/" style="color:green;">Streamlare</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>High</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/streamlare.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://hentaimama.io" style="color:green;">Hentaimama(NSFW)</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>Auto</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/hentaimama.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><h3 align="center"><a href="https://theflix.to" style="color:green;">Theflix</a></h3></td>
|
|
||||||
<td><ul>
|
|
||||||
<li>High</li>
|
|
||||||
</ul></td>
|
|
||||||
<td><img src="https://github.com/CoolnsX/ani-cli-status/blob/main/images/theflix.jpg?raw=true" width="250" height="40"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user