Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/96syh/webvblog

https://github.com/96syh/webvblog

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (9.5%) to scientific vocabulary
Last synced: 10 months ago · JSON representation

Repository

Basic Info
  • Host: GitHub
  • Owner: 96syh
  • Language: TypeScript
  • Default Branch: main
  • Size: 0 Bytes
Statistics
  • Stars: 0
  • Watchers: 0
  • Forks: 0
  • Open Issues: 0
  • Releases: 0
Created about 1 year ago · Last pushed about 1 year ago
Metadata Files
Readme

README.md

# 🌟 Modern Portfolio Website *A sophisticated, responsive portfolio platform built with cutting-edge web technologies* [![Next.js](https://img.shields.io/badge/Next.js-15.3.2-black?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/) [![Framer Motion](https://img.shields.io/badge/Framer_Motion-11.0-pink?style=for-the-badge&logo=framer&logoColor=white)](https://www.framer.com/motion/) [Live Demo](https://webvblog.vercel.app) • [Documentation](#documentation) • [Contributing](#contributing)

✨ Features

🎨 Modern Design System
Clean, minimalist interface with carefully crafted typography and spacing
🌙 Smart Theme Toggle
Seamless dark/light mode with system preference detection
📱 Responsive Excellence
Pixel-perfect design across all devices and screen sizes
⚡ Performance Optimized
Built with Next.js 15, Turbopack, and modern optimization techniques
📊 Privacy-First Analytics
Local analytics dashboard with zero external tracking
🎭 Smooth Animations
Delightful micro-interactions powered by Framer Motion

🚀 Quick Start

Prerequisites

  • Node.js 18+ or Bun runtime
  • Git

Installation

```bash

Clone the repository

git clone https://github.com/96syh/webvblog.git cd webvblog

Install dependencies (recommended: Bun for faster installs)

bun install

or npm install

Start development server

bun dev

or npm run dev

```

Visit http://localhost:3001 to see your portfolio in action.

🏗️ Architecture

├── src/ │ ├── app/ # Next.js App Router │ │ ├── (pages)/ # Page routes │ │ │ ├── about/ # About page │ │ │ ├── work/ # Portfolio showcase │ │ │ ├── blog/ # Blog system │ │ │ └── analytics/ # Analytics dashboard │ │ └── layout.tsx # Root layout │ ├── components/ # Reusable components │ │ ├── ui/ # Base UI components │ │ ├── Sidebar.tsx # Navigation │ │ └── ThemeProvider.tsx # Theme management │ ├── contexts/ # React contexts │ ├── lib/ # Utilities and configs │ └── styles/ # Global styles ├── public/ # Static assets └── docs/ # Documentation

🛠️ Tech Stack

Core Technologies - **Framework**: Next.js 15 with App Router - **Language**: TypeScript - **Styling**: Tailwind CSS + CSS Variables - **Animations**: Framer Motion - **Icons**: Lucide React - **Font**: Inter (self-hosted)
Development Tools - **Runtime**: Bun - **Linting**: ESLint + Biome - **Type Checking**: TypeScript - **Git Hooks**: Husky - **Code Formatting**: Prettier
Performance Features - **Bundler**: Turbopack (development) - **Image Optimization**: Next.js Image Component - **Font Optimization**: next/font - **Code Splitting**: Automatic - **PWA Ready**: Service Worker included

📦 Available Scripts

```bash

Development

bun dev # Start development server with Turbopack bun build # Create production build bun start # Start production server bun preview # Preview production build locally

Code Quality

bun lint # Run ESLint bun type-check # TypeScript type checking bun format # Format code with Prettier

Testing

bun test # Run test suite bun test:watch # Run tests in watch mode bun test:coverage # Generate coverage report ```

🌐 Deployment

Vercel (Recommended)

Deploy with Vercel

Other Platforms

Netlify ```bash # Build command bun run build # Publish directory out ```
Docker ```dockerfile FROM node:18-alpine AS base WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "start"] ```

🎨 Customization

Theme Configuration

typescript // tailwind.config.ts export default { theme: { extend: { colors: { primary: { 50: '#f0f9ff', 500: '#3b82f6', 950: '#172554', } } } } }

Component Architecture

All components follow a consistent structure: - TypeScript interfaces for props - Responsive design patterns - Accessibility best practices - Performance optimizations

📈 Analytics

The built-in analytics system provides:

  • Page Views: Track visitor engagement
  • Session Data: Understanding user behavior
  • Performance Metrics: Core Web Vitals monitoring
  • Privacy Compliance: No external trackers, GDPR compliant

Access your analytics at /analytics route.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Commit your changes: git commit -m 'Add amazing feature'
  4. Push to the branch: git push origin feature/amazing-feature
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • Next.js - The React framework for production
  • Tailwind CSS - A utility-first CSS framework
  • Framer Motion - A production-ready motion library for React
  • Lucide - Beautiful & consistent icon toolkit
**[⬆ Back to Top](#-modern-portfolio-website)** Made with ❤️ and modern web technologies

Owner

  • Login: 96syh
  • Kind: user

GitHub Events

Total
  • Watch event: 1
  • Push event: 1
  • Create event: 1
Last Year
  • Watch event: 1
  • Push event: 1
  • Create event: 1

Dependencies

package.json npm
  • @biomejs/biome 1.9.4 development
  • @eslint/eslintrc ^3.3.1 development
  • @types/node ^20.17.50 development
  • @types/react ^18.3.22 development
  • @types/react-dom ^18.3.7 development
  • bippy ^0.3.16 development
  • eslint ^9.27.0 development
  • eslint-config-next 15.1.7 development
  • postcss ^8.5.3 development
  • tailwindcss ^3.4.17 development
  • typescript ^5.8.3 development
  • @notionhq/client ^3.1.3
  • @vercel/analytics ^1.5.0
  • class-variance-authority ^0.7.1
  • clsx ^2.1.1
  • framer-motion ^12.16.0
  • lucide-react ^0.475.0
  • next ^15.3.2
  • next-themes ^0.4.6
  • react ^18.3.1
  • react-dom ^18.3.1
  • tailwind-merge ^3.3.0
  • tailwindcss-animate ^1.0.7