Skip to content

Commit 6a5c562

Browse files
divyansh0x0divyansh0x0
committed
Added navbar
1 parent 6c72b25 commit 6a5c562

10 files changed

Lines changed: 3326 additions & 8414 deletions

File tree

‎app/assets/css/colors.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
color-scheme: dark;
3737

3838

39+
--color-border: oklch(37.941% 0.02571 279.122);
3940

4041
--color-error: oklch(0.838 0.089 26.757);
4142
--color-error-container: oklch(0.417 0.17 27.379);
@@ -55,7 +56,7 @@
5556
--color-on-secondary-fixed-variant: oklch(0.398 0.034 282.509);
5657
--color-on-surface: oklch(0.914 0.011 303.101);
5758
--color-on-surface-variant: oklch(0.828 0.015 294.41);
58-
--color-on-tertiary: oklch(0.318 0.058 341.16);
59+
--color-on-tertiary: oklch(31.826% 0.05769 341.126 / 0.704);
5960
--color-on-tertiary-container: oklch(0.921 0.052 343.229);
6061
--color-on-tertiary-fixed: oklch(0.231 0.057 338.999);
6162
--color-on-tertiary-fixed-variant: oklch(0.404 0.058 340.904);
@@ -73,11 +74,15 @@
7374
--color-shadow: oklch(0 0 0 / 0.29);
7475
--color-surface: oklch(0.189 0.01 285.397);
7576
--color-surface-bright: oklch(0.347 0.01 285.848);
77+
78+
7679
--color-surface-container: oklch(0.242 0.011 285.52);
77-
--color-surface-container-high: oklch(0.284 0.011 293.341);
78-
--color-surface-container-highest: oklch(0.327 0.011 285.805);
80+
--color-surface-container-high: oklch(28.442% 0.01097 293.282 / 0.363);
81+
--color-surface-container-highest: oklch(32.737% 0.01054 285.76 / 0.508);
7982
--color-surface-container-low: oklch(0.225 0.012 285.432);
8083
--color-surface-container-lowest: oklch(0.166 0.01 285.212);
84+
85+
8186
--color-surface-dim: oklch(0.189 0.01 285.397);
8287
--color-surface-tint: oklch(0.832 0.085 281.444);
8388
--color-surface-variant: oklch(0.398 0.015 285.697);

‎app/components/Footer.vue‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

‎app/components/FooterComponent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function send(e:any){
1919
</script>
2020

2121
<template>
22-
<section
22+
<section id="footer"
2323
style="background: var(--color-surface-container-lowest);
2424
height: fit-content !important;
2525
width:100%">

‎app/components/HeroSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
<template>
3-
<section class="hero">
3+
<section id="hero" class="hero">
44
<BlogBackground
55
style="position: absolute;
66
z-index: -1;

‎app/components/NavBar.vue‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<script lang="ts" setup>
2+
import HeroSection from './HeroSection.vue';
3+
4+
5+
const page_links = [
6+
{
7+
name: "About",
8+
href: "/#hero"
9+
},
10+
{
11+
name: "Projects",
12+
href: "/#projects"
13+
},
14+
{
15+
name: "Contact",
16+
href: "/#footer"
17+
}
18+
]
19+
20+
const social_links = [
21+
{
22+
name: "Github",
23+
href: "https://www.github.com/divyansh0x0",
24+
icon: "mdi:github"
25+
}
26+
]
27+
</script>
28+
29+
<template>
30+
<nav style="position: fixed;
31+
top: var(--spacing-left);
32+
left: var(--spacing-left);
33+
z-index: 999;
34+
display: flex;
35+
width: 100%;
36+
height: fit-content;
37+
justify-content: space-between;
38+
">
39+
<div>
40+
<ul style="display: flex;
41+
gap: var(--spacing-md);
42+
padding: var(--padding-sm);
43+
list-style: none;">
44+
<li v-for="link in page_links" :key="link.name">
45+
46+
<NuxtLink class="nav-link" :href="link.href">
47+
{{ link.name }}
48+
49+
</NuxtLink>
50+
</li>
51+
</ul>
52+
</div>
53+
<div>
54+
<ul style="display: flex;
55+
gap: var(--spacing-md);
56+
padding: var(--padding-sm);
57+
list-style: none;">
58+
<li v-for="link in social_links" :key="link.name">
59+
60+
<NuxtLink
61+
62+
style="
63+
padding: var(--padding-sm);
64+
display: block; height: 100%;
65+
align-items: center;"
66+
:href="link.href" target="_blank">
67+
<Icon class="icon"
68+
:name="link.icon"></Icon>
69+
70+
</NuxtLink>
71+
</li>
72+
</ul>
73+
</div>
74+
</nav>
75+
</template>
76+
77+
<style scoped lang="scss">
78+
.nav-link {
79+
display: block;
80+
background-color: var(--color-surface-container-high);
81+
82+
border-radius: var(--border-radius-circle);
83+
border: 1px solid var(--color-border);
84+
85+
padding: var(--padding-md);
86+
87+
backdrop-filter: blur(10px);
88+
89+
transition: background var(--transition-speed) ease;
90+
91+
92+
&:hover {
93+
background-color: var(--color-surface-container-highest);
94+
95+
}
96+
}
97+
98+
.icon{
99+
width: 2em;
100+
height: 2em;
101+
transition: transform var(--transition-speed) ease;
102+
&:hover{
103+
transform: scale(1.2);
104+
}
105+
}
106+
</style>

‎app/components/ProjectSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const allProjects: ProjectCategory[] = [
112112
</script>
113113

114114
<template>
115-
<section style="background-color: var(--color-surface-container-low)">
115+
<section id="projects" style="background-color: var(--color-surface-container-low)">
116116
<h2>Projects</h2>
117117
<div v-for="projectCat in allProjects" :key="projectCat.name" class="project-category">
118118
<h3>

‎app/pages/index.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ProjectSection from "~/components/ProjectSection.vue";
66

77
<template>
88
<div>
9+
<NavBar/>
910
<HeroSection/>
1011
<ProjectSection/>
1112
</div>

‎nuxt.config.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,6 @@ export default defineNuxtConfig({
1313
"/assets/css/colors.css",
1414
],
1515
modules: [
16-
'@nuxt/hints',
17-
'@nuxt/test-utils',
18-
'@nuxt/ui',
19-
'@nuxt/scripts',
20-
'@nuxt/eslint'
16+
'@nuxt/icon'
2117
]
2218
})

0 commit comments

Comments
 (0)