Skip to content

Commit 58ed41f

Browse files
edem8edem8
committed
feat:
colored icons font change to inter projects page
1 parent cec8aa4 commit 58ed41f

File tree

7 files changed

+71
-63
lines changed

7 files changed

+71
-63
lines changed

‎src/app/(routes)/projects/page.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1+
import { FolderUp } from "lucide-react";
12
import React from "react";
23

34
export default function Projects() {
45
return (
5-
<div className="flex flex-col sm:gap-6 gap-5 lg:w-3/4 w-full row-start-2 font-semibold pt-10 sm:pt-12">
6-
Projects
6+
<div className="flex flex-col sm:gap-6 gap-5 lg:w-3/4 w-full row-start-2 pt-10 sm:pt-10 px-1">
7+
<h1 className="font-bold text-xl tracking-wide">Projects</h1>
8+
<p>
9+
I've tried many and a lot of things. These are the ones I could collect
10+
<br />
11+
and showcase; or just proud of them.
12+
</p>
13+
<div className="mt-5">
14+
<div className="text-sm">
15+
<div className="flex gap-1 items-center text-gray-700 font-bold"><FolderUp size={20}/>APPS</div>
16+
</div>
17+
</div>
718
</div>
819
);
920
}

‎src/app/about.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ import Link from "next/link";
1313

1414
export default function About() {
1515
return (
16-
<div className="flex flex-col sm:gap-6 gap-5 lg:w-3/4 w-full row-start-2 font-semibold pt-10 sm:pt-12">
17-
<div className="tracking-wider text-sm space-y-2">
16+
<div className="flex flex-col sm:gap-6 gap-5 lg:w-3/4 w-full row-start-2 font-medium pt-10 sm:pt-20">
17+
<div className="tracking-wider text-lg space-y-2">
1818
<p>
19-
<span className="text-green-500 bg-[#232D27] pt-1 pb-1 pl-4 pr-4 border rounded-2xl font-semibold border-green-500">
19+
<span className="text-green-500 bg-[#232D27] pt-1 pb-1 pl-4 pr-4 border rounded-2xl border-green-500">
2020
Ayekoo!
2121
</span>
2222
</p>
23-
<p className="sm:text-base">いらっしゃいませ</p>
23+
<p className="sm:text-base font-semibold">いらっしゃいませ</p>
2424
</div>
2525

2626
<div className="text-xs sm:text-base">

‎src/app/layout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import type { Metadata } from "next";
2-
import { DM_Sans } from "next/font/google";
2+
import { Inter } from "next/font/google";
33
import "../styles/globals.css";
44
import Header from "@/components/layout/header";
55
import Footer from "@/components/layout/footer";
66

7-
const dm_sans = DM_Sans({
7+
const inter = Inter({
88
subsets: ["latin"],
9-
weight: "300",
9+
weight: ["400", "500", "700"],
1010
});
1111

1212
export const metadata: Metadata = {
@@ -21,7 +21,7 @@ export default function RootLayout({
2121
}>) {
2222
return (
2323
<html lang="en">
24-
<body className={dm_sans.className}>
24+
<body className={inter.className}>
2525
<div className="grid grid-rows-[auto_1fr_auto] justify-items-center bg-background min-h-screen gap-16 p-5 sm:p-20 font-[family-name:var(--font-geist-sans)]">
2626
<Header />
2727

‎src/components/layout/header.tsx‎

Lines changed: 28 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,55 @@
1+
"use client";
12
import React from "react";
23
import Image from "next/image";
34
import Link from "next/link";
5+
import { usePathname } from "next/navigation";
6+
import { FolderKanban, Glasses, Shell, Users } from "lucide-react";
47

58
export default function Header() {
9+
const pathname = usePathname();
10+
11+
const getLinkClasses = (path: string) =>
12+
pathname === path
13+
? "border-zinc-600 bg-[#404040] border text-white"
14+
: "hover:bg-[#262626]";
15+
616
return (
7-
<header className="flex flex-col gap-2 pb-1 sm:pb-3 sm:pt-3 pt-10 lg:w-3/4 w-full row-start-1 font-semibold">
8-
<nav className=" flex flex-col xxs:flex-row xs:gap-2 gap-0 items-start justify-start sm:text-base text-xs xs:text-sm font-semibold">
17+
<header className="flex flex-col gap-2 pb-1 sm:pb-3 sm:pt-3 pt-10 lg:w-3/4 w-full row-start-1 ">
18+
<nav className=" flex flex-col xxs:flex-row xs:gap-2 gap-0 items-start justify-start sm:text-base text-xs font-semibold">
919
<Link
10-
className="flex items-center xs:gap-1.5 gap-1 hover:bg-[#262626] border rounded-lg p-1 pl-2 pr-2 border-zinc-600 bg-[#404040] text-white"
20+
className={`flex items-center xs:gap-1.5 gap-1 rounded-lg p-1 pl-2 pr-2 ${getLinkClasses(
21+
"/"
22+
)} `}
1123
href="/"
1224
>
13-
<Image
14-
aria-hidden
15-
src="/file.svg"
16-
alt="File icon"
17-
width={16}
18-
height={16}
19-
/>
25+
<Shell color="#EC7C4C" />
2026
Home
2127
</Link>
2228
<Link
23-
className="flex items-center xs:gap-1.5 gap-1 hover:bg-[#262626] p-1 pl-2 pr-2 rounded-lg"
29+
className={`flex items-center xs:gap-1.5 gap-1 rounded-lg p-1 pl-2 pr-2 ${getLinkClasses(
30+
"/projects"
31+
)} `}
2432
href={"/projects"}
2533
>
26-
<Image
27-
aria-hidden
28-
src="/window.svg"
29-
alt="Window icon"
30-
width={16}
31-
height={16}
32-
/>
34+
<FolderKanban color="#F3C725" />
3335
Projects
3436
</Link>
3537
<Link
36-
className="flex items-center xs:gap-1.5 gap-1 hover:bg-[#262626] p-1 pl-2 pr-2 rounded-lg"
38+
className={`flex items-center xs:gap-1.5 gap-1 rounded-lg p-1 pl-2 pr-2 ${getLinkClasses(
39+
"/blogs"
40+
)} `}
3741
href={"/blogs"}
3842
>
39-
<Image
40-
aria-hidden
41-
src="/globe.svg"
42-
alt="Globe icon"
43-
width={16}
44-
height={16}
45-
/>
43+
<Glasses color="pink" />
4644
Blog
4745
</Link>
4846
<Link
49-
className="flex items-center xs:gap-1.5 rounded-lg gap-1 hover:bg-[#2d2d2d] p-1 pl-2 pr-2"
47+
className={`flex items-center xs:gap-1.5 gap-1 rounded-lg p-1 pl-2 pr-2 ${getLinkClasses(
48+
"/guests"
49+
)} `}
5050
href="/guests"
5151
>
52-
<Image
53-
aria-hidden
54-
src="/globe.svg"
55-
alt="Globe icon"
56-
width={16}
57-
height={16}
58-
/>
52+
<Users color="#4B4438" />
5953
Guest Book
6054
</Link>
6155
</nav>

‎src/data/data.ts‎

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

‎src/lib/utils.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { clsx, type ClassValue } from "clsx"
22
import { twMerge } from "tailwind-merge"
33

4+
5+
46
export function cn(...inputs: ClassValue[]) {
57
return twMerge(clsx(inputs))
68
}
9+
10+

‎tsconfig.json‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
{
22
"compilerOptions": {
33
"target": "ES2017",
4-
"lib": ["dom", "dom.iterable", "esnext"],
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
59
"allowJs": true,
610
"skipLibCheck": true,
711
"strict": true,
@@ -11,17 +15,26 @@
1115
"moduleResolution": "node",
1216
"resolveJsonModule": true,
1317
"isolatedModules": true,
14-
"jsx": "react-jsx",
18+
"jsx": "preserve",
1519
"incremental": true,
1620
"plugins": [
1721
{
1822
"name": "next"
1923
}
2024
],
2125
"paths": {
22-
"@/*": ["./src/*"]
26+
"@/*": [
27+
"./src/*"
28+
]
2329
}
2430
},
25-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26-
"exclude": ["node_modules"]
31+
"include": [
32+
"next-env.d.ts",
33+
"**/*.ts",
34+
"**/*.tsx",
35+
".next/types/**/*.ts"
36+
],
37+
"exclude": [
38+
"node_modules"
39+
]
2740
}

0 commit comments

Comments
 (0)