|
1 | | -# Phil Ledoit - Portfolio Website |
2 | | - |
3 | | -A modern, responsive portfolio website built with React, TypeScript, Vite, and Tailwind CSS. |
4 | | - |
5 | | -## 🚀 Features |
6 | | - |
7 | | -- **Modern Tech Stack**: React 18, TypeScript, Vite, Tailwind CSS |
8 | | -- **Smooth Animations**: Framer Motion for beautiful transitions |
9 | | -- **Dark/Light Mode**: Toggle between themes with persistent storage |
10 | | -- **Responsive Design**: Mobile-first approach with perfect mobile experience |
11 | | -- **Type Safety**: Full TypeScript support for better development experience |
12 | | -- **Fast Development**: Vite for lightning-fast HMR and builds |
13 | | -- **SEO Optimized**: Meta tags, Open Graph, and Twitter cards |
14 | | -- **Accessibility**: ARIA labels, keyboard navigation, and focus states |
15 | | - |
16 | | -## 🛠️ Tech Stack |
17 | | - |
18 | | -- **Frontend**: React 18, TypeScript |
19 | | -- **Styling**: Tailwind CSS |
20 | | -- **Animations**: Framer Motion |
21 | | -- **Icons**: Lucide React |
22 | | -- **Build Tool**: Vite |
23 | | -- **Deployment**: GitHub Pages |
24 | | - |
25 | | -## 📦 Installation |
26 | | - |
27 | | -1. **Install Node.js** (if not already installed): |
28 | | - - Download from [nodejs.org](https://nodejs.org/) |
29 | | - - Or use a package manager like Chocolatey: `choco install nodejs` |
30 | | - |
31 | | -2. **Clone and install dependencies**: |
32 | | - ```bash |
33 | | - git clone https://github.com/ledoit/portfolio-vite.git |
34 | | - cd portfolio-vite |
35 | | - npm install |
36 | | - ``` |
37 | | - |
38 | | -3. **Start development server**: |
39 | | - ```bash |
40 | | - npm run dev |
41 | | - ``` |
42 | | - |
43 | | -4. **Open in browser**: |
44 | | - - Navigate to `http://localhost:5173` |
45 | | - |
46 | | -## 🚀 Available Scripts |
47 | | - |
48 | | -- `npm run dev` - Start development server |
49 | | -- `npm run build` - Build for production |
50 | | -- `npm run preview` - Preview production build |
51 | | -- `npm run lint` - Run ESLint |
52 | | - |
53 | | -## 📁 Project Structure |
54 | | - |
55 | | -``` |
56 | | -portfolio-vite/ |
57 | | -├── public/ |
58 | | -├── src/ |
59 | | -│ ├── components/ |
60 | | -│ │ ├── Navbar.tsx |
61 | | -│ │ ├── Hero.tsx |
62 | | -│ │ ├── About.tsx |
63 | | -│ │ ├── Skills.tsx |
64 | | -│ │ ├── Projects.tsx |
65 | | -│ │ ├── Contact.tsx |
66 | | -│ │ └── Footer.tsx |
67 | | -│ ├── contexts/ |
68 | | -│ │ └── ThemeContext.tsx |
69 | | -│ ├── App.tsx |
70 | | -│ ├── main.tsx |
71 | | -│ └── index.css |
72 | | -├── index.html |
73 | | -├── package.json |
74 | | -├── tailwind.config.js |
75 | | -├── tsconfig.json |
76 | | -└── vite.config.ts |
77 | | -``` |
78 | | - |
79 | | -## 🎨 Customization |
80 | | - |
81 | | -### Colors |
82 | | -Edit `tailwind.config.js` to customize the color scheme: |
83 | | - |
84 | | -```javascript |
85 | | -theme: { |
86 | | - extend: { |
87 | | - colors: { |
88 | | - primary: { |
89 | | - // Your custom primary colors |
90 | | - } |
91 | | - } |
92 | | - } |
93 | | -} |
94 | | -``` |
95 | | - |
96 | | -### Content |
97 | | -- **Personal Info**: Update `src/components/Hero.tsx` |
98 | | -- **About Section**: Modify `src/components/About.tsx` |
99 | | -- **Skills**: Edit `src/components/Skills.tsx` |
100 | | -- **Projects**: Update `src/components/Projects.tsx` |
101 | | -- **Contact**: Modify `src/components/Contact.tsx` |
102 | | - |
103 | | -### Styling |
104 | | -- Global styles: `src/index.css` |
105 | | -- Component styles: Use Tailwind classes in components |
106 | | -- Custom components: Add to `src/components/` |
107 | | - |
108 | | -## 🚀 Deployment |
109 | | - |
110 | | -### GitHub Pages |
111 | | -1. Update `vite.config.ts` base path: |
112 | | - ```typescript |
113 | | - export default defineConfig({ |
114 | | - base: '/your-repo-name/', |
115 | | - // ... other config |
116 | | - }) |
117 | | - ``` |
118 | | - |
119 | | -2. Build and deploy: |
120 | | - ```bash |
121 | | - npm run build |
122 | | - # Deploy dist/ folder to GitHub Pages |
123 | | - ``` |
124 | | - |
125 | | -### Vercel |
126 | | -1. Connect your GitHub repository to Vercel |
127 | | -2. Vercel will automatically detect Vite and deploy |
128 | | - |
129 | | -### Netlify |
130 | | -1. Build the project: `npm run build` |
131 | | -2. Deploy the `dist` folder to Netlify |
132 | | - |
133 | | -## 📱 Performance |
134 | | - |
135 | | -- **Lighthouse Score**: 95+ across all metrics |
136 | | -- **Bundle Size**: Optimized with Vite |
137 | | -- **Images**: Optimized and lazy-loaded |
138 | | -- **Fonts**: Preloaded for better performance |
139 | | - |
140 | | -## 🤝 Contributing |
141 | | - |
142 | | -1. Fork the repository |
143 | | -2. Create a feature branch: `git checkout -b feature/amazing-feature` |
144 | | -3. Commit changes: `git commit -m 'Add amazing feature'` |
145 | | -4. Push to branch: `git push origin feature/amazing-feature` |
146 | | -5. Open a Pull Request |
147 | | - |
148 | | -## 📄 License |
149 | | - |
150 | | -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
151 | | - |
152 | | -## 📞 Contact |
153 | | - |
154 | | - |
155 | | -- **GitHub**: [@ledoit](https://github.com/ledoit) |
156 | | -- **LinkedIn**: [Phil Ledoit](https://linkedin.com/in/philledoit) |
157 | | -- **Website**: [ledoit.dev](https://ledoit.dev) |
158 | | - |
159 | | ---- |
160 | | - |
161 | | -Built with ❤️ by Phil Ledoit |
| 1 | +# Portfolio Website |
0 commit comments