Loading repository data…
kznava / repository
Welcome to my personal space on the web. I build things with code and share my journey through technology.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Personal Website & Developer Portfolio
A modern, minimalistic developer portfolio built with Astro, Tailwind CSS, and shadcn/ui. Features a vibrant blue theme, smooth animations, and comprehensive technical writing capabilities.
Built on top of the excellent astro-erudite template by @jktrn, this site has been extensively customized to reflect my personal brand and development philosophy.
This is my personal website and portfolio, serving as a hub for my blog posts, projects, and professional information. The site showcases my journey as a Software Developer and Information System Manager with over 9 years of experience in the .NET ecosystem and enterprise software development.
| Category | Technology |
|---|---|
| Framework | Astro |
| Styling | Tailwind CSS |
| Components | shadcn/ui |
| Content | MDX |
| Icons | Lucide Icons via astro-icon |
| Code | Expressive Code, Shiki |
| Deployment | Vercel / Your preferred hosting |
Clone the repository:
git clone https://github.com/kznava/kznava-website.git
cd kznava-website
Install dependencies:
npm install
Start the development server:
npm run dev
Open your browser and visit http://localhost:4321
| Command | Description |
|---|---|
npm run dev | Start development server |
npm run build | Build the project for production |
npm run preview | Preview the production build locally |
npm run astro | Run Astro CLI commands |
npm run prettier | Format all files using Prettier |
kznava-website/
├── public/
│ └── static/ # Static assets (images, avatar, etc.)
├── src/
│ ├── components/ # Reusable Astro/React components
│ │ ├── TechSection.astro
│ │ ├── WorkExperience.astro
│ │ ├── BlogCard.astro
│ │ └── ...
│ ├── content/ # Content collections
│ │ ├── blog/ # Blog posts (MDX)
│ │ ├── projects/ # Project entries
│ │ └── authors/ # Author profiles
│ ├── layouts/ # Page layouts
│ ├── pages/ # File-based routing
│ ├── styles/ # Global styles and animations
│ │ └── global.css # Color palette, animations
│ └── consts.ts # Site configuration
└── astro.config.ts # Astro configuration
The src/consts.ts file contains site metadata, navigation, and social links:
export const SITE: Site = {
title: 'kznava',
description: 'Personal website of kznava...',
href: 'https://kznava.dev',
featuredPostCount: 1,
postsPerPage: 6,
}
export const NAV_LINKS: SocialLink[] = [
{ href: '/blog', label: 'blog' },
{ href: '/projects', label: 'projects' },
{ href: '/about', label: 'about' },
]
export const SOCIAL_LINKS: SocialLink[] = [
{ href: 'https://github.com/kznava', label: 'GitHub' },
{ href: 'https://linkedin.com/in/juan-ignacio-navarro-maza', label: 'LinkedIn' },
// ...
]
The site uses a custom blue color palette defined in src/styles/global.css using OKLCH format:
:root {
--background: oklch(0.99 0.008 260);
--foreground: oklch(0.15 0 0);
--primary: oklch(0.50 0.20 260); /* Blue */
--ring: oklch(0.60 0.20 260);
--border: oklch(0.88 0.025 260);
/* ... */
}
[data-theme='dark'] {
--background: oklch(0.13 0.015 260);
--foreground: oklch(0.98 0 0);
--primary: oklch(0.70 0.20 260); /* Lighter blue */
--ring: oklch(0.65 0.20 260);
--border: oklch(0.25 0.04 260);
/* ... */
}
The blue theme is applied consistently throughout with specific values like:
#0066ff / #338aff for gradientsoklch(0.50 0.20 260) for primary actionsTo make this your own:
src/consts.tspublic/static/avatar.jpgsrc/styles/global.csssrc/pages/about.astro with your experiencesrc/content/projects/src/content/blog/public/ directory and src/components/Favicons.astroCreate new blog posts in src/content/blog/ as MDX files:
---
title: 'Your Post Title'
description: 'A brief description'
date: 2025-01-17
tags: ['astro', 'web-development']
image: './banner.png'
authors: ['kznava']
---
Your content here...
See the Building kznava.dev post as an example.
Update your author profile in src/content/authors/kznava.md:
---
name: 'Juan Navarro'
avatar: '/static/avatar.jpg'
bio: 'Software Developer & Information System Manager'
website: 'https://kznava.dev'
github: 'https://github.com/kznava'
linkedin: 'https://linkedin.com/in/juan-ignacio-navarro-maza'
mail: 'youremail@gmail.com'
---
Add projects in src/content/projects/ as Markdown files:
---
name: 'Your Project'
description: 'Brief project description'
tags: ['C#', '.NET', 'Azure']
link: 'https://github.com/yourusername/project'
startDate: '2024-01-01'
endDate: '2024-12-31'
---
Images are optional. Projects are displayed on the /projects page and can be featured on the about page.
This site can be deployed to any static hosting platform. Recommended options:
For Vercel:
npm run build
# Deploy the dist/ folder
Built with Astro, based on the astro-erudite template by @jktrn.
Special thanks to the Astro community and all the open-source projects that made this possible.
This project is open source and available under the MIT License.
Selected from shared topics, language and repository description—not editorial ratings.
sanjibroy360 /
Welcome to my portfolio website repository! I'm Sanjib Roy, an experienced Full Stack Developer with 4+ years of remote work. This repository showcases my journey, projects, and blogs, highlighting my skills in the MERN stack, Next.js, and Ruby on Rails.
61/100 healthmuhammad-fiaz /
Welcome to my personal GitHub Pages repository. Here, you'll find a collection of my projects, articles, and coding adventures. Join me on my journey in the world of software development and technology. Explore, learn, and collaborate with me on exciting projects. Let's build the future together!
56/100 healthorodrigojose /
My personal blog to post my notes and studies, sooo... welcome :)
34/100 health