diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index c92cb0f..0bedfac 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -4,7 +4,7 @@ name: Deploy Hugo site to Pages on: # Runs on pushes targeting the default branch push: - branches: ["master"] + branches: ["*"] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: diff --git a/assets/css/dark.css b/assets/css/dark.css index 23d4db2..10a07cb 100644 --- a/assets/css/dark.css +++ b/assets/css/dark.css @@ -1,8 +1,8 @@ @layer components { .dark body { - @apply bg-stone-900 text-gray-400 + @apply bg-slate-900 text-gray-400 } - .dark noise{ + /* .dark noise{ @apply opacity-30 } .dark .single h1, .dark .single h2, .dark .single h3, .dark blockquote, .dark .section, .dark .single .title, .dark intro h1, .dark #side .title, .dark #split .company { @@ -22,5 +22,5 @@ } .dark blockquote { @apply text-amber-400 !important - } + } */ } \ No newline at end of file diff --git a/assets/css/hero.css b/assets/css/hero.css index 893321b..501d3e8 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -8,55 +8,22 @@ /* Code Version */ body.code { background-image: none; - @apply bg-gray-900 cursor-help + @apply text-neutral-300 bg-gray-900 cursor-help } - - .code, .code intro p { - @apply text-gray-400 - } - - .code a::before { - @apply bg-green-300 !important - } - - .code a:hover { - @apply text-gray-900 cursor-help - } - - .code a:hover::before { - @apply bg-green-200 text-gray-900 - } - - .code noise { - @apply opacity-10 + .code a, .code nav *, .code nav svg, .code nav svg path { + @apply text-green-400 fill-green-400 !important } - .code nav { - @apply bg-transparent - } - - .code h1, .code .section, .code .project .title, .code a{ - font-family: 'DM Mono', monospace; - @apply text-green-500 !important - } - - .code .card .title, .code .company { - font-family: 'DM Mono', monospace; - } - - .code .company{ - @apply text-gray-400 !important - } - - .code intro h1::after{ - @apply opacity-100 bg-green-200 + .code nav, .code .section, .code .project .title, .code #theme-toggle { + font-family: 'JetBrains Mono', monospace; } - .code intro profile img:nth-child(1) { - @apply opacity-0 + .code #type-text { + font-family: 'JetBrains Mono', monospace; + @apply bg-green-400 text-black } - .code intro profile img:nth-child(3) { - @apply opacity-100 + .code .project .title.secondary { + @apply font-extrabold } #matrix { diff --git a/assets/css/main.css b/assets/css/main.css index 31c8910..e1a818a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -3,315 +3,99 @@ @tailwind utilities; @import 'dark.css'; @import 'hero.css'; -@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap'); +@import 'project.css'; +@import 'single.css'; +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap'); @layer components { - body { - font-family: "Inter", sans-serif; - height: 100vh; - @apply transition-all duration-200 ease-in bg-stone-200 text-base text-slate-800 bg-fixed - } - - .top nav{ - @apply backdrop-blur-0 bg-stone-200/0 - } - - noise { - pointer-events: none; - z-index: -1; - position: fixed; - top: 0; left: 0; - width: 100%; - height: 100%; - background: repeat center center url('../noise.svg'); - background-size: 24%; - opacity: .9; - mix-blend-mode: luminosity; - } - - a { - @apply relative no-underline - } - a:hover{ - @apply text-slate-800 - } - a:not(.card,.thumb):hover::before { - @apply h-full w-full bg-amber-400 scale-110 - } - a:not(.card,.thumb)::before { - content: ""; - @apply w-11/12 h-1/6 bg-amber-400 absolute left-0 right-0 bottom-0 m-auto -z-10 rounded-sm transition-all duration-100 - } - - nav{ - @apply w-full fixed top-0 left-0 right-0 m-auto flex justify-end pt-3 pb-3 backdrop-blur-md z-30 bg-stone-200/80 - } - nav .content{ - @apply w-full max-w-5xl m-auto flex gap-4 items-center - } - nav a { - @apply text-sm transition-all duration-100 + @apply max-w-6xl mx-auto bg-neutral-100 text-slate-700; } - - nav a:first-child{ - @apply ml-auto - } - - nav #theme-toggle{ - @apply w-6 h-6 p-1 rounded-sm transition-all duration-100 bg-transparent - } - - nav #theme-toggle:hover{ - @apply bg-amber-400 fill-slate-800 - } - - nav #theme-toggle:hover svg { - @apply fill-slate-800 + * { + @apply box-content } - - #content { - @apply m-auto max-w-5xl + a:not(.project) { + @apply text-primary underline; } - intro { - @apply flex pt-32 pb-32 + /* Navigation */ + nav { + @apply py-6 flex items-center justify-between } - - intro div { - @apply w-full + nav svg, #theme-toggle { + @apply w-5 h-5; } - - intro profile { - @apply w-48 h-48 mr-8 relative shrink-0 + .social a, #theme-toggle { + @apply text-slate-700 p-1.5 rounded-md transition-all duration-300 } - - intro profile img { - @apply w-full rounded-full transition-all duration-200 ease-in + .social a:hover { + @apply shadow-lg scale-110 } - intro profile:hover{ - @apply cursor-zoom-in + .social a:hover svg path { + @apply fill-white } - intro profile:hover img { - @apply scale-125 shadow-xl + .social a svg, .social a svg path { + @apply fill-current text-current; } - - intro profile img:nth-child(2), - intro profile img:nth-child(3){ - @apply opacity-0 pointer-events-none absolute top-0 left-0 + #linkedin:hover{ + @apply bg-blue-700; } - - intro profile:hover img:nth-child(2) { - @apply opacity-100 + #github:hover{ + @apply bg-black; } - - intro p { - @apply py-0 m-0 text-base text-slate-600 tracking-tight font-medium + #twitter:hover{ + @apply bg-blue-400; } - - intro strike { - @apply inline-block opacity-40 line-through + .social { + @apply flex items-center text-sm gap-3; } - - intro h1 { - font-family: 'Libre Baskerville', serif; - @apply text-7xl text-slate-800 pt-2 pb-6 font-semibold tracking-tighter inline-flex items-center gap-2 + .social #theme-toggle{ + @apply flex items-center justify-center transition-all duration-100 bg-transparent } - intro h1::after { - content: ""; - @apply w-3 h-14 inline-flex animate-blink opacity-0 + nav #theme-toggle:hover{ + @apply bg-primary fill-slate-800 } - #wave { - @apply inline-flex mr-1 transition duration-300 ease-in-out transform cursor-pointer select-none + nav #theme-toggle:hover svg { + @apply fill-white } - #wave:hover{ - transform: scale(2) rotate(12deg); + #logo{ + @apply font-bold no-underline text-xl text-slate-700 } - footer { - @apply flex w-full max-w-5xl m-auto pt-24 pb-12 text-sm text-center - } - footer > *{ - @apply w-full - } - footer social{ - @apply text-left flex gap-4 - } - footer tag{ - @apply text-right - } - .section { - font-family: 'Libre Baskerville', serif; - @apply text-5xl text-slate-800 font-semibold tracking-tighter - } - .section.mini{ - @apply mt-16 - } - #side { - @apply grid gap-x-20 gap-y-10 mt-10 grid-cols-2 - } - #side .project { - @apply flex + /* Intro */ + intro { + @apply block pt-24 pb-40 text-3xl leading-relaxed; } - #side img { - @apply w-16 h-16 rounded-lg mr-5 shadow-sm hover:shadow-lg hover:scale-110 hover:cursor-pointer transition duration-200 ease-in-out + #type-text { + @apply inline-block bg-primary text-white px-2 hover:cursor-alias; } - #side .title { - @apply font-bold text-slate-800 - } - #projects{ - @apply flex flex-col pb-24 gap-12 mt-10 - } - .card{ - @apply relative overflow-hidden rounded-xl pt-32 p-16 border-0 bg-stone-900 border-stone-800 dark:border-gray-800 transition duration-200 ease-in-out - } - .card:hover{ - @apply shadow-2xl scale-105 - } - .card:nth-child(odd){ - @apply hover:rotate-1 - } - .card:nth-child(even){ - @apply hover:-rotate-1 - } - .card .title{ - font-family: 'Libre Baskerville', serif; - @apply relative z-20 pt-16 text-5xl font-bold text-slate-100 - } - .card .description{ - @apply relative z-20 text-slate-300 - } - .card .gradient { - @apply w-full h-full top-0 left-0 absolute rounded-xl bg-gradient-to-t from-neutral-900 to-neutral-900/50 z-10 - } + /* Content */ - .card .thumbnail{ - @apply -rotate-12 w-full absolute top-0 bottom-0 left-0 m-auto z-0 scale-105 + #content.single { + @apply w-full max-w-none } - .single .title{ - font-family: 'Libre Baskerville', serif; - @apply mt-32 text-7xl text-slate-800 font-semibold tracking-tighter - } - .single .description{ - @apply mt-2 text-xl pt-0 pb-0 - } - .single separator{ - height: 1px; - @apply flex w-full mt-12 mb-12 bg-stone-300 - } - .single h1, .single h2, .single h3 { - font-family: 'Libre Baskerville', serif; - @apply pt-10 pb-3 text-slate-800 font-semibold tracking-tighter - } - .single h1, .single h2, .single h3, .single p, .single ul { - @apply max-w-4xl m-auto - } - .single h1 { - @apply text-4xl - } - .single h2 { - @apply text-2xl - } - .single h3 { - @apply text-xl - } - .single p{ - @apply pt-4 pb-4 - } - .single blockquote{ - font-family: 'Libre Baskerville', serif; - @apply text-4xl font-bold text-amber-600 pt-4 pb-4 - } - .single img, .single video { - @apply mt-8 mb-8 w-full - } - .single li { - @apply list-disc ml-8 - } - #split{ - @apply flex flex-row mt-24 md:gap-20 - } - #split .col{ - @apply w-full - } - #split .company{ - @apply font-bold mt-6 text-slate-700 - } - #split .detail{ - @apply flex flex-row max-w-sm - } - #split .col:nth-child(2) .detail{ - @apply max-w-md - } - #split .detail p { - @apply w-full - } - #split .detail .date{ - @apply text-right - } - #split .detail.inline{ - @apply mt-6 - } - #split .detail.inline .company { - @apply mt-0 - } +} - @media only screen and (max-width: 800px) { - body > .container { - @apply p-4 - } - #split{ - @apply flex-col - } - .col:nth-child(2){ - @apply mt-16 - } - #side{ - @apply grid-cols-1 +/* for mobile */ +@media (max-width: 640px) { + @layer components { + body { + @apply p-8 } - .card .thumbnail{ - @apply w-screen scale-125 - } - nav{ - @apply pr-8 - } - .card { - @apply p-8 pt-10 - } - .card .title { - @apply text-4xl - } - } - @media only screen and (max-width: 600px) { - footer{ - @apply flex-col - } - footer tag{ - @apply text-left mt-8 - } - intro { - @apply flex-col - } - intro profile { - @apply mb-12 m-auto - } - intro h1 { - @apply text-6xl pb-4 pt-4 - } } -} +} \ No newline at end of file diff --git a/assets/css/project.css b/assets/css/project.css new file mode 100644 index 0000000..b11f4d1 --- /dev/null +++ b/assets/css/project.css @@ -0,0 +1,111 @@ +@layer components { + /* Projects */ + .section { + @apply mt-32 mb-10 text-3xl font-bold; + } + #selected-work { + @apply grid grid-flow-row gap-2; + } + .project { + @apply flex flex-col relative w-full h-96 overflow-hidden no-underline transition duration-300 ease-in-out; + } + .project::before { + content: ""; + width: 95%; + height: 90%; + @apply absolute top-0 left-0 right-0 bottom-0 m-auto border-solid border-8 mix-blend-overlay border-transparent z-10 transition duration-300 ease-in; + } + .project .thumbnail { + @apply w-full absolute top-0 bottom-0 left-0 m-auto z-0 transition duration-300 ease-in-out; + } + .project .title, + .project .description { + @apply absolute bottom-28 left-20; + } + .project .description { + @apply bottom-20 transition duration-300 ease-in-out; + } + .project .title { + @apply flex items-center text-8xl font-extrabold z-10 m-0 no-underline text-primary mix-blend-overlay transition duration-300 ease-in; + } + .project .title svg { + @apply w-16 h-16 ml-4 -translate-x-4 transition duration-200 ease-in; + } + .project .title.secondary { + @apply mix-blend-multiply opacity-0 z-20; + } + .project .description { + @apply text-xl font-medium z-10 m-0 no-underline text-primary opacity-0; + } + .project:hover::before { + @apply border-primary + } + .project:hover { + @apply scale-105 z-10; + } + .project:hover .description { + @apply opacity-100; + } + .project:hover .title.secondary { + @apply opacity-100; + } + .project:hover .thumbnail { + @apply scale-125; + } + .project:hover svg { + @apply translate-x-0; + } + + /* Side Projects */ + #side-projects { + @apply grid gap-x-20 gap-y-10 mt-10 grid-cols-2; + } + + #side-projects .side-project { + @apply flex flex-row items-center; + } + + #side-projects img { + @apply w-16 h-16 rounded-lg mr-5 shadow-sm hover:shadow-lg hover:scale-110 hover:cursor-pointer transition duration-200 ease-in-out; + } + + .side-project-title { + @apply flex items-center font-bold w-fit; + } + .side-project-title svg { + @apply w-5 h-5 ml-1 -translate-x-2 opacity-0 transition duration-150 ease-in; + } + .side-project-title:hover svg { + @apply translate-x-0 opacity-100; + } + + /* Background */ + #split { + @apply flex flex-row md:gap-20; + } + #split .col { + @apply w-full; + } + #split .company { + @apply font-bold mt-6; + } + #split .detail { + @apply flex flex-row max-w-sm; + } + #split .col:nth-child(2) .detail { + @apply max-w-md; + } + #split .detail p { + @apply w-full; + } + #split .detail .date { + @apply text-right; + } + #split .detail.inline { + @apply mt-6; + } + #split .detail.inline .company { + @apply mt-0; + } + +} diff --git a/assets/css/single.css b/assets/css/single.css new file mode 100644 index 0000000..1653297 --- /dev/null +++ b/assets/css/single.css @@ -0,0 +1,18 @@ +@layer components { + .single .title { + @apply text-8xl mb-4 font-extrabold m-0 pt-24 !important; + } + .single .description { + @apply text-xl font-medium; + } + .single separator { + height: 1px; + @apply w-full block mt-8 mb-8 bg-current opacity-10 + } + .single img, .single video { + @apply w-full h-full rounded-lg shadow-lg mt-12 mb-12 + } + .single h1 { + @apply text-4xl font-bold mb-4 mt-20 + } +} diff --git a/assets/js/scripts.js b/assets/js/scripts.js index de26952..6fe40f7 100644 --- a/assets/js/scripts.js +++ b/assets/js/scripts.js @@ -149,4 +149,17 @@ themeToggleBtn.addEventListener('click', function() { } } +}); + + +// typewriter effect +// https://github.com/tameemsafi/typewriterjs +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Typewriter",[],t):"object"==typeof exports?exports.Typewriter=t():e.Typewriter=t()}("undefined"!=typeof self?self:this,(()=>(()=>{var e={75:function(e){(function(){var t,n,r,o,a,i;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(e.exports=function(){return(t()-a)/1e6},n=process.hrtime,o=(t=function(){var e;return 1e9*(e=n())[0]+e[1]})(),i=1e9*process.uptime(),a=o-i):Date.now?(e.exports=function(){return Date.now()-r},r=Date.now()):(e.exports=function(){return(new Date).getTime()-r},r=(new Date).getTime())}).call(this)},4087:(e,t,n)=>{for(var r=n(75),o="undefined"==typeof window?n.g:window,a=["moz","webkit"],i="AnimationFrame",s=o["request"+i],u=o["cancel"+i]||o["cancelRequest"+i],l=0;!s&&l{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var r={};return(()=>{"use strict";n.d(r,{default:()=>C});var e=n(4087),t=n.n(e);const o=function(e){return new RegExp(/<[a-z][\s\S]*>/i).test(e)},a=function(e,t){return Math.floor(Math.random()*(t-e+1))+e};var i="TYPE_CHARACTER",s="REMOVE_CHARACTER",u="REMOVE_ALL",l="REMOVE_LAST_VISIBLE_NODE",c="PAUSE_FOR",p="CALL_FUNCTION",d="ADD_HTML_TAG_ELEMENT",f="CHANGE_DELETE_SPEED",v="CHANGE_DELAY",h="CHANGE_CURSOR",m="PASTE_STRING",y="HTML_TAG";function g(e){return g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},g(e)}function E(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function w(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n1&&void 0!==arguments[1]?arguments[1]:null;if(o(e))return E.typeOutHTMLString(e,t);if(e){var n=(E.options||{}).stringSplitter,r="function"==typeof n?n(e):e.split("");E.typeCharacters(r,t)}return E})),A(this,"pasteString",(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return o(e)?E.typeOutHTMLString(e,t,!0):(e&&E.addEventToQueue(m,{character:e,node:t}),E)})),A(this,"typeOutHTMLString",(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2?arguments[2]:void 0,r=function(e){var t=document.createElement("div");return t.innerHTML=e,t.childNodes}(e);if(r.length>0)for(var o=0;o0&&void 0!==arguments[0]?arguments[0]:"natural";return E.addEventToQueue(u,{speed:e}),E})),A(this,"changeDeleteSpeed",(function(e){if(!e)throw new Error("Must provide new delete speed");return E.addEventToQueue(f,{speed:e}),E})),A(this,"changeDelay",(function(e){if(!e)throw new Error("Must provide new delay");return E.addEventToQueue(v,{delay:e}),E})),A(this,"changeCursor",(function(e){if(!e)throw new Error("Must provide new cursor");return E.addEventToQueue(h,{cursor:e}),E})),A(this,"deleteChars",(function(e){if(!e)throw new Error("Must provide amount of characters to delete");for(var t=0;t1&&void 0!==arguments[1]?arguments[1]:null;if(!e||!Array.isArray(e))throw new Error("Characters must be an array");return e.forEach((function(e){E.addEventToQueue(i,{character:e,node:t})})),E})),A(this,"removeCharacters",(function(e){if(!e||!Array.isArray(e))throw new Error("Characters must be an array");return e.forEach((function(){E.addEventToQueue(s)})),E})),A(this,"addEventToQueue",(function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return E.addEventToStateProperty(e,t,n,"eventQueue")})),A(this,"addReverseCalledEvent",(function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return E.options.loop?E.addEventToStateProperty(e,t,n,"reverseCalledEvents"):E})),A(this,"addEventToStateProperty",(function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=arguments.length>3?arguments[3]:void 0,o={eventName:e,eventArgs:t||{}};return E.state[r]=n?[o].concat(b(E.state[r])):[].concat(b(E.state[r]),[o]),E})),A(this,"runEventLoop",(function(){E.state.lastFrameTime||(E.state.lastFrameTime=Date.now());var e=Date.now(),n=e-E.state.lastFrameTime;if(!E.state.eventQueue.length){if(!E.options.loop)return;E.state.eventQueue=b(E.state.calledEvents),E.state.calledEvents=[],E.options=w({},E.state.initialOptions)}if(E.state.eventLoop=t()(E.runEventLoop),!E.state.eventLoopPaused){if(E.state.pauseUntil){if(eProjects

-
+ +
{{ range where .Pages "Params.project" "==" "large" }} - +

{{.Title}}

+

{{.Title}}

{{.Description}}

-
- + {{ end }}
+

Side Projects

-
+
{{ $smallProjects := where .Site.RegularPages "Params.project" "==" "small" }} {{ range $smallProjects }} -
+
{{.Title}}
- {{.Title}} -

{{.Description}}

+ {{.Title}} +

{{.Description}}

{{ end }}
+

Background

@@ -89,11 +91,6 @@

2009 - 2012

-
-

Artmil Design Studio

-

2007 - 2009

-
-
@@ -132,7 +129,9 @@
-
+ + +
-{{ partial "footer" . }} \ No newline at end of file + {{ partial "footer" . }} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index e6d52b0..1bb25bb 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,6 +3,8 @@

{{ .Title }}

{{ .Description }}

+ {{/*

{{ .Title }}

+

{{ .Description }}

*/}} {{ .Content }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index f4f5bfa..047509e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -10,9 +10,6 @@ {{ .Site.Title }} - {{ .Page.Title }} - {{ $styles := resources.Get "css/main.css" }} {{ $styles = $styles | resources.PostCSS (dict "inlineImports" true) }} @@ -41,9 +38,6 @@ - + - -
+
diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html index e75caad..4020d3a 100644 --- a/layouts/partials/intro.html +++ b/layouts/partials/intro.html @@ -1,12 +1,4 @@ - - Miguel Solorio - Miguel Solorio - Miguel Solorio - -
-

👋 Hello, my name is

-

Miguel Solorio

-

I'm a software product designer from Seattle, WA and I'm passionate about tooling and bridging the gap between design & code.

-
+👋 Hello, I am a
product
designer from Seattle.
+I'm passionate about bridging the gap between design & code. \ No newline at end of file diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html index 227ad50..f577796 100644 --- a/layouts/partials/navigation.html +++ b/layouts/partials/navigation.html @@ -1,32 +1,48 @@ -{{ $currentPage := . }} -
- {{ range .Site.Menus.main }} - {{ .Name }} - {{ end }} - -
+ + + \ No newline at end of file diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index c624255..5502fd9 100644 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -1,3 +1,4 @@ +{{ $title := .Get "title" }} {{ $src := .Get "src" }} {{ $alt := .Get "alt" }} {{ $class := .Get "class" }} diff --git a/package.json b/package.json index 2cc4d7b..2574eff 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "export": "hugo --minify" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.9", "autoprefixer": "^10.4.13", "hugo-bin": "^0.111.3", "postcss": "^8.4.20", diff --git a/static/icons.png b/static/icons.png index f62876d..e484204 100644 Binary files a/static/icons.png and b/static/icons.png differ diff --git a/static/kanvas.png b/static/kanvas.png index 5322617..99287f9 100644 Binary files a/static/kanvas.png and b/static/kanvas.png differ diff --git a/static/notebooks.png b/static/notebooks.png index 524c742..babb76c 100644 Binary files a/static/notebooks.png and b/static/notebooks.png differ diff --git a/static/onboarding.png b/static/onboarding.png index 407e323..ddbd1fc 100644 Binary files a/static/onboarding.png and b/static/onboarding.png differ diff --git a/tailwind.config.js b/tailwind.config.js index bf0dfd3..8ff3098 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,6 +5,9 @@ module.exports = { }, theme: { extend: { + colors: { + 'primary': '#2A25FF', + }, screens: { dark: { raw: '(prefers-color-scheme: dark)' @@ -14,16 +17,23 @@ module.exports = { 'laptop': '1024px', 'desktop': '1280px', }, - animation: { - blink: 'blink 1s step-end infinite', - gradientX: 'gradientX 15s ease-in infinite', - gradientY: 'gradientY 15s ease-in infinite', - gradientXY: 'gradientXY 15s ease-in infinite', - }, keyframes: { + typing: { + "0%": { + width: "0%", + visibility: "hidden" + }, + "100%": { + width: "100%" + } + }, blink: { - 'from,to': { 'visibility': 'hidden' }, - '50%': { 'visibility': 'visible' } + "50%": { + borderColor: "transparent" + }, + "100%": { + borderColor: "white" + } }, gradientY: { '0%, 100%': { @@ -55,9 +65,16 @@ module.exports = { 'background-position': 'right center' } } + }, + animation: { + typing: "typing 2s steps(20) infinite alternate, blink .7s", + gradientX: 'gradientX 15s ease-in infinite', + gradientY: 'gradientY 15s ease-in infinite', + gradientXY: 'gradientXY 15s ease-in infinite', } }, }, variants: {}, - plugins: [] + plugins: [ + ] };