720686751a
Implement internationalization across all components by adding lang prop and translation keys Update data structure to use translation keys instead of hardcoded text Add comprehensive English and Chinese translations in ui.ts
Modern Portfolio Template
A sleek, responsive portfolio website built with Astro, React, and Tailwind CSS, featuring modern animations and stunning glassmorphism effects.
✨ 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
🛠 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.
©️ Copyright
© 2025 Rishikesh S. All rights reserved.
You’re 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!