joyzhao 70b6a27021 feat(blog): add blog posts and typography plugin
Add new blog posts covering React Hooks, Docker with Node.js, Tailwind CSS, and TypeScript best practices. Implement Tailwind Typography plugin for better blog post styling. Create blog post listing pages in both English and Chinese. Update BlogLayout to use prose styling for improved readability.

The changes include:
- Added 4 new blog posts in English and Chinese versions
- Integrated @tailwindcss/typography plugin
- Created blog post index pages
- Updated BlogLayout with typography-focused styling
- Added related dependencies to package.json
2025-06-16 22:24:20 +08:00
2025-04-07 15:50:13 -06:00

Modern Portfolio Template

A sleek, responsive portfolio website built with Astro, React, and Tailwind CSS, featuring modern animations and stunning glassmorphism effects.

Portfolio Screenshot

Features

  • Modern Design Clean, professional layout with elegant glassmorphism
  • Animations Smooth transitions and interactive UI via Framer Motion
  • Dark/Light Mode Automatic theme switching with system preference detection
  • Fully Responsive Optimized for mobile, tablet, and desktop
  • Blazing Fast Powered by Astro for superior performance
  • Modular Structure Built for easy customization and scalability
  • SEO Friendly Structured content and meta tags for better visibility

🚀 Demo

👉 Live Demo

🛠 Getting Started

Prerequisites

  • Node.js (v18+ recommended)
  • npm / yarn / bun

Installation

git clone https://github.com/yourusername/my-portfolio.git
cd my-portfolio

# Install dependencies
npm install
# or
yarn install
# or
bun install

# Start development server
npm run dev
# or
yarn dev
# or
bun dev

Visit http://localhost:4321 in your browser to see it in action.

🧩 Customizing the Portfolio

All your content lives inside src/lib/data.ts. Update the following to make it yours:

1. Personal Info

export const personalInfo = {
  name: "Your Name",
  location: "Your Location",
  email: "your.email@example.com",
  github: "https://github.com/yourusername",
  linkedin: "https://www.linkedin.com/in/yourusername/",
};

2. Work Experience

export const workExperience = [
  {
    company: "Company Name",
    location: "Location",
    position: "Your Position",
    period: "Start Date - End Date",
    achievements: [
      "Achievement 1",
      "Achievement 2",
    ],
  },
];

3. Education

export const education = [
  {
    institution: "University Name",
    location: "Location",
    degree: "Your Degree",
    period: "Start Date - End Date",
    achievements: [
      "Achievement 1",
      "Achievement 2",
    ],
  },
];

4. Skills

export const skills = {
  programmingLanguages: ["TypeScript", "Python"],
  frontendDevelopment: ["React", "Next.js"],
  // and more...
};

5. Projects

export const projects = [
  {
    title: "Project Name",
    github: "https://github.com/yourusername/project",
    description: [
      "What it does",
      "Technologies used",
    ],
  },
];

6. Awards

export const awards = [
  {
    name: "Award Name",
    issuer: "Issuer",
    date: "Date",
    type: "Type",
    position: "Position",
  },
];

📦 Build for Production

npm run build
# or
yarn build
# or
bun run build

To preview the production build locally:

npm run preview
# or
yarn preview

📤 Deployment

Easily deploy to platforms like Vercel, Netlify, GitHub Pages, or any static host of your choice.

📝 License

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

© 2025 Rishikesh S. All rights reserved.

Youre welcome to use this template for your own portfolio — just update data.ts and tweak the design as needed. Please keep attribution to the original author.


🌟 Like it?

If you found this helpful or inspiring, please consider leaving a star on the repo — it helps others discover it too!


🙏 Acknowledgments

Description
No description provided
Readme 1.5 MiB
Languages
Astro 61.9%
TypeScript 30.9%
MDX 4.4%
CSS 2.4%
JavaScript 0.4%