mirror of
https://github.com/CodeF53/personal-site.git
synced 2024-09-20 06:10:34 +00:00
colors and icons
This commit is contained in:
parent
5937d563c0
commit
eb5b81f399
5 changed files with 137 additions and 19 deletions
|
|
@ -1,7 +1,10 @@
|
|||
// dark!
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
background-color: #0c0c0c;
|
||||
--accent-dark: hsl(270, 90%, 5%);
|
||||
--accent-light: hsl(293, 88%, 84%);
|
||||
|
||||
background-color: var(--accent-dark);
|
||||
}
|
||||
body {
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
export default defineNuxtConfig({
|
||||
devtools: { enabled: true },
|
||||
typescript: { strict: true, typeCheck: true, shim: false },
|
||||
modules: ['nuxt-lodash'],
|
||||
modules: ['nuxt-lodash', 'nuxt-icon'],
|
||||
|
||||
css: ['~/assets/styles/layout.scss', '~/assets/styles/misc.scss', '~/assets/styles/font.scss'],
|
||||
|
||||
|
|
|
|||
93
package-lock.json
generated
93
package-lock.json
generated
|
|
@ -16,6 +16,7 @@
|
|||
"eslint": "^8.52.0",
|
||||
"lint-staged": "^15.0.2",
|
||||
"nuxt": "^3.8.0",
|
||||
"nuxt-icon": "^0.6.5",
|
||||
"nuxt-lodash": "^2.5.3",
|
||||
"simple-git-hooks": "^2.9.0",
|
||||
"typescript": "^5.2.2",
|
||||
|
|
@ -1339,6 +1340,36 @@
|
|||
"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@iconify/collections": {
|
||||
"version": "1.0.353",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.353.tgz",
|
||||
"integrity": "sha512-Xm5jFJyR+Z7xwfYZdipnaAQVZZXBVcf60ZXn6ZTmfnt2vPEcUYG2dy1fY6O50/g+iRyJxnIRLHrW61EHdGQQ4g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@iconify/types": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify/types": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
|
||||
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@iconify/vue": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
|
||||
"integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@iconify/types": "^2.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/cyberalien"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3"
|
||||
}
|
||||
},
|
||||
"node_modules/@ioredis/commands": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
|
||||
|
|
@ -9752,6 +9783,68 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/nuxt-icon": {
|
||||
"version": "0.6.5",
|
||||
"resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.6.5.tgz",
|
||||
"integrity": "sha512-+NwwFkVRsqCd3kRR2B1IPPpfERrjxGhco/JwtvuIa3fti5MNauTlPJBBQiQsoljOSwwVeZS6Ie67jr56m2runA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@iconify/collections": "^1.0.352",
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@nuxt/devtools-kit": "^1.0.0",
|
||||
"@nuxt/kit": "^3.8.1"
|
||||
}
|
||||
},
|
||||
"node_modules/nuxt-icon/node_modules/@nuxt/kit": {
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.8.1.tgz",
|
||||
"integrity": "sha512-DrhG1Z85iH68QOTkgfb0HVfM2g7+CfcMWrFWMDwck9ofyM2RXQUZyfmvMedwBnui1AjjpgpLO9078yZM+RqNUg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@nuxt/schema": "3.8.1",
|
||||
"c12": "^1.5.1",
|
||||
"consola": "^3.2.3",
|
||||
"defu": "^6.1.3",
|
||||
"globby": "^13.2.2",
|
||||
"hash-sum": "^2.0.0",
|
||||
"ignore": "^5.2.4",
|
||||
"jiti": "^1.21.0",
|
||||
"knitwork": "^1.0.0",
|
||||
"mlly": "^1.4.2",
|
||||
"pathe": "^1.1.1",
|
||||
"pkg-types": "^1.0.3",
|
||||
"scule": "^1.0.0",
|
||||
"semver": "^7.5.4",
|
||||
"ufo": "^1.3.1",
|
||||
"unctx": "^2.3.1",
|
||||
"unimport": "^3.4.0",
|
||||
"untyped": "^1.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.18.0 || >=16.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nuxt-icon/node_modules/@nuxt/schema": {
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.8.1.tgz",
|
||||
"integrity": "sha512-fSaWRcI/2mUskfTZTGSnH6Ny0x05CRzylbVn6WFV0d6UEKIVy42Qd6n+h7yoFfp4cq4nji6u16PT4SqS1DEhsw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@nuxt/ui-templates": "^1.3.1",
|
||||
"consola": "^3.2.3",
|
||||
"defu": "^6.1.3",
|
||||
"hookable": "^5.5.3",
|
||||
"pathe": "^1.1.1",
|
||||
"pkg-types": "^1.0.3",
|
||||
"std-env": "^3.4.3",
|
||||
"ufo": "^1.3.1",
|
||||
"unimport": "^3.4.0",
|
||||
"untyped": "^1.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.18.0 || >=16.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nuxt-lodash": {
|
||||
"version": "2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/nuxt-lodash/-/nuxt-lodash-2.5.3.tgz",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"eslint": "^8.52.0",
|
||||
"lint-staged": "^15.0.2",
|
||||
"nuxt": "^3.8.0",
|
||||
"nuxt-icon": "^0.6.5",
|
||||
"nuxt-lodash": "^2.5.3",
|
||||
"simple-git-hooks": "^2.9.0",
|
||||
"typescript": "^5.2.2",
|
||||
|
|
|
|||
|
|
@ -14,33 +14,38 @@
|
|||
<ul class="links gap4 row centerChildren">
|
||||
<li>
|
||||
<NuxtLink to="mailto:fseusb@gmail.com" aria-label="email">
|
||||
<img src="/assets/email.svg">
|
||||
<Icon name="material-symbols:mail-rounded" />
|
||||
<span>Email</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="https://github.com/CodeF53" aria-label="github">
|
||||
<img src="/assets/github.svg">
|
||||
<Icon name="ph:github-logo-fill" />
|
||||
<span>Github</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="https://dev.to/f53" aria-label="blog">
|
||||
Blog
|
||||
<Icon name="ri:article-fill" />
|
||||
<span>Blog</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<NuxtLink to="https://dev.to/f53" aria-label="blog">
|
||||
<Icon name="mdi:linkedin" />
|
||||
<span>LinkedIn</span>
|
||||
</NuxtLink>
|
||||
</li> -->
|
||||
</ul>
|
||||
</main>
|
||||
</div>
|
||||
<div>
|
||||
<h2>TODO:</h2>
|
||||
<ul>
|
||||
<li>background: move render to worker thread</li>
|
||||
<li>colors</li>
|
||||
<li>experience page: (education + jobs + projects) handled with markdown, click to learn more, filterable, sortable</li>
|
||||
<li>blog page: handled with markdown, filterable, sortable</li>
|
||||
<li>background: move render to worker thread, smoothly move points after a resize</li>
|
||||
<li>markdown articles for blogs and experience, filterable, sortable</li>
|
||||
<li>header for non-homepage pages</li>
|
||||
<li>duplicate site, but with real name and picture, with minimal duplicate source code</li>
|
||||
<li>duplicate site, but with real name and picture</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -72,17 +77,33 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
background-color: var(--accent-light);
|
||||
&, > * { color: var(--accent-dark); }
|
||||
&:hover { filter: brightness(0.95); scale: 0.95; }
|
||||
&:active { filter: brightness(0.9); scale: 1.05; }
|
||||
transition: scale 0.6s cubic-bezier(0.34, 3, 0.64, 1);
|
||||
|
||||
font-weight: bold;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
gap: .25rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
height: 1.5rem;
|
||||
|
||||
> svg {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 { color: var(--accent-light); }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue