Personal portfolio website built with React, TypeScript, Vite, and Tailwind CSS
- React 18 - UI library
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- React Router v6 - Client-side routing
- React Helmet Async - SEO and meta tags
- ScrollReveal - Scroll animations
- Marked - Markdown parsing for content
portfolio/
├── content/ # Markdown content files
│ ├── education/ # Education entries
│ ├── jobs/ # Work experience entries
│ └── posts/ # Blog posts
├── public/ # Static assets
├── scripts/ # Build scripts
│ └── build-content.mjs # Converts markdown to JSON
├── src/
│ ├── components/ # React components
│ ├── data/ # Generated JSON data
│ ├── features/ # Feature components
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page components
│ ├── styles/ # CSS files
│ └── utils/ # Utility functions
└── dist/ # Production build output
-
Install dependencies
npm install
-
Build content from markdown files
npm run content
-
Start the development server
npm run dev
The site will be available at
http://localhost:5173
-
Generate a production build
npm run build
This will:
- Build content from markdown files
- Create an optimized production build in the
dist/folder
-
Preview the production build
npm run preview
Content is managed through Markdown files in the content/ directory:
- Education:
content/e 7A33 ducation/{Name}/index.md - Jobs:
content/jobs/{Company}/index.md - Posts:
content/posts/{slug}/index.md
The build script (scripts/build-content.mjs) converts these markdown files to JSON, which is then consumed by the React components.
To rebuild content after making changes:
npm run content| Color | Hex |
|---|---|
| Background | #ffffff |
| Light Gray | #e9ecef |
| Lightest Gray | #dee2e6 |
| Dark Gray | #212529 |
| Slate | #343a40 |
| Accent Blue | #007bff |
This project is open source and available under the MIT License.