theclashfruit.me / website
My personal site. theclashfruit.me
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: final layout for now

TheClashFruit c83d418d 944b6dbe

+141 -23
-2
app/(main)/page.mdx
··· 2 2 title: 'Home', 3 3 }; 4 4 5 - # Markdown :3 6 - 7 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue urna sed lectus condimentum blandit. Suspendisse sodales hendrerit commodo. Pellentesque ac massa urna. Donec ut posuere enim. Aliquam id velit tincidunt, lobortis ante at, varius dui. Ut lacinia elit enim, eget aliquam ligula eleifend non. Aliquam non mauris et nulla vulputate iaculis et sed felis. Donec bibendum suscipit elementum. In facilisis lacinia justo. 8 6 9 7 Mauris eu tristique purus. Sed vulputate ultrices justo eget vehicula. Vestibulum ac purus id lectus finibus accumsan. Vestibulum congue purus lectus, ut ullamcorper lorem bibendum at. Vivamus et egestas nisi. Nunc vulputate, sapien sollicitudin tristique mattis, nibh leo suscipit augue, in volutpat est neque id est. Suspendisse potenti. Duis blandit sapien vestibulum lorem iaculis, id semper leo dapibus. Curabitur a nulla diam. Curabitur a consequat nunc. Donec tincidunt vitae dui at tristique. Mauris finibus erat non nibh tincidunt, in ultrices diam sodales. Integer cursus sollicitudin nulla dapibus vehicula. Fusce blandit imperdiet eros, a porta nunc interdum ac.
+3 -1
components/Header.tsx
··· 8 8 return ( 9 9 <header className={styles.header}> 10 10 <Container> 11 - <Leaf size={32} /> 11 + <div className={styles.navHeader}> 12 + <Leaf size={32} /> 13 + </div> 12 14 13 15 <h1>TheClashFruit</h1> 14 16 </Container>
+42 -9
components/NavBar.tsx
··· 1 + 'use client'; 2 + 1 3 import Link from 'next/link'; 4 + import { usePathname } from 'next/navigation'; 5 + 6 + import { 7 + BookText, 8 + Home, 9 + LineSquiggle, 10 + Image, 11 + Bookmark, 12 + GitPullRequestCreateArrow, 13 + AtSign 14 + } from 'lucide-react'; 15 + 16 + import styles from '@/styles/components/NavBar.module.scss'; 2 17 3 18 export default function NavBar() { 19 + const path = usePathname(); 20 + 4 21 return ( 5 - <nav> 6 - <h1>Menu</h1> 7 - 22 + <nav className={styles.navBar}> 8 23 <ul> 9 24 <li> 10 - <Link href="/">Home</Link> 25 + <Link href="/" className={path === '/' ? styles.active : ''}> 26 + <Home /> 27 + Home 28 + </Link> 11 29 </li> 12 30 <li> 13 - <Link href="/blog">Blog</Link> 31 + <Link href="/blog" className={path === '/blog' ? styles.active : ''}> 32 + <BookText /> 33 + Blog 34 + </Link> 14 35 </li> 15 36 <li> 16 - <Link href="/art">Art</Link> 37 + <Link href="/art" className={path === '/art' ? styles.active : ''}> 38 + <LineSquiggle /> 39 + Art 40 + </Link> 17 41 </li> 18 42 <li> 19 - <Link href="/photos">Photos</Link> 43 + <Link href="/photos" className={path === '/photos' ? styles.active : ''}> 44 + <Image /> 45 + Photos 46 + </Link> 20 47 </li> 21 48 <li> 22 - <Link href="/projects">Projects</Link> 49 + <Link href="/projects" className={path === '/projects' ? styles.active : ''}> 50 + <GitPullRequestCreateArrow /> 51 + Projects 52 + </Link> 23 53 </li> 24 54 <li> 25 - <Link href="/links">Links</Link> 55 + <Link href="/links" className={path === '/links' ? styles.active : ''}> 56 + <Bookmark /> 57 + Links 58 + </Link> 26 59 </li> 27 60 </ul> 28 61 </nav>
+2
styles/components/Footer.module.scss
··· 5 5 justify-content: space-between; 6 6 align-items: center; 7 7 8 + padding: 16px; 9 + 8 10 ul { 9 11 display: flex; 10 12
+26 -2
styles/components/Header.module.scss
··· 1 1 .header { 2 - background: var(--surfaceVariant); 3 - 4 2 > div { 5 3 display: flex; 4 + 5 + align-items: center; 6 + 7 + gap: 16px; 8 + 9 + padding: 16px; 10 + 11 + > .navHeader { 12 + width: 215px; 13 + 14 + display: flex; 15 + 16 + align-items: center; 17 + justify-content: end; 18 + 19 + > svg { 20 + color: var(--primary); 21 + } 22 + } 23 + 24 + > h1 { 25 + margin: 0; 26 + 27 + font-size: 180%; 28 + font-weight: 600; 29 + } 6 30 } 7 31 }
+46
styles/components/NavBar.module.scss
··· 1 + .navBar { 2 + width: 215px; 3 + // max-height: 550px; 4 + 5 + display: flex; 6 + flex-direction: column; 7 + 8 + justify-content: space-between; 9 + 10 + > ul { 11 + display: flex; 12 + flex-direction: column; 13 + 14 + gap: 2px; 15 + 16 + list-style: none; 17 + 18 + > li { 19 + > a { 20 + display: flex; 21 + 22 + gap: 12px; 23 + 24 + align-items: center; 25 + 26 + padding: 12px 16px; 27 + 28 + width: 100%; 29 + 30 + border-radius: 8px; 31 + 32 + color: var(--onSurface); 33 + 34 + text-decoration: none; 35 + 36 + &:hover, 37 + &.active { 38 + font-weight: 600; 39 + 40 + color: var(--primary); 41 + background: color-mix(var(--primary) 20%, transparent 80%); 42 + } 43 + } 44 + } 45 + } 46 + }
+12 -5
styles/globals.scss
··· 6 6 margin: 0; 7 7 8 8 box-sizing: border-box; 9 - 9 + 10 10 scrollbar-color: var(--primary) var(--surface); 11 11 } 12 12 ··· 15 15 color: var(--onSurface); 16 16 17 17 min-height: 100svh; 18 + 19 + display: flex; 20 + flex-direction: column; 21 + 22 + > main { 23 + flex: 1; 24 + } 18 25 } 19 26 20 27 a { 21 28 color: var(--primary); 22 - 29 + 23 30 transition: 100ms; 24 - 31 + 25 32 text-decoration-thickness: 1px; 26 - 33 + 27 34 &:hover { 28 35 text-decoration-thickness: 3px; 29 36 } 30 - } 37 + }
+6
styles/layout/Main.module.scss
··· 2 2 display: flex; 3 3 4 4 gap: 16px; 5 + 6 + padding: 0 16px; 7 + 8 + > div { 9 + flex: 1; 10 + } 5 11 }
+4 -4
styles/typography.module.scss
··· 17 17 } 18 18 19 19 h1 { 20 - font-size: 250%; 20 + font-size: 210%; 21 21 } 22 22 23 23 h2 { 24 - font-size: 210%; 24 + font-size: 180%; 25 25 } 26 26 27 27 h3 { 28 - font-size: 180%; 28 + font-size: 160%; 29 29 } 30 30 31 31 h4 { 32 - font-size: 150%; 32 + font-size: 140%; 33 33 } 34 34 35 35 h5 {