https://github.com/mooshieblob1/ktvuong
Full-stack developer portfolio site built with SvelteKit and Tailwind CSS, featuring email obfuscation and responsive design
https://github.com/mooshieblob1/ktvuong
javascript personal-website portfolio svelte sveltekit tailwindcss web-development
Last synced: 2 months ago
JSON representation
Full-stack developer portfolio site built with SvelteKit and Tailwind CSS, featuring email obfuscation and responsive design
- Host: GitHub
- URL: https://github.com/mooshieblob1/ktvuong
- Owner: Mooshieblob1
- Created: 2025-03-05T07:48:48.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-06T09:32:01.000Z (over 1 year ago)
- Last Synced: 2025-03-06T10:32:56.487Z (over 1 year ago)
- Topics: javascript, personal-website, portfolio, svelte, sveltekit, tailwindcss, web-development
- Language: Svelte
- Homepage: https://ktvuong.com/
- Size: 4.01 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal Portfolio
A modern, responsive portfolio website built with Svelte and Tailwind CSS.
## Features
- Responsive design that works on mobile, tablet, and desktop
- Clean, modern UI with smooth animations
- Project showcase with detailed cards
- Technical skills visualization
- Email obfuscation to prevent scraping by bots
- Fast performance and accessibility features
- Dark mode support
- SEO optimized
## Tech Stack
- **Frontend Framework**: SvelteKit
- **Styling**: Tailwind CSS
- **Email Protection**: Custom obfuscation system
- **Deployment**: Cloudflare Pages
- **Analytics**: Cloudflare Web Analytics
## Key Implementation Details
### Email Obfuscation
The site implements a custom email obfuscation system to protect against email harvesting bots:
- Uses XOR cipher to encode email address in the HTML
- Client-side JavaScript decodes the email only when needed
- No plain text email addresses in source code or DOM
- Works with both header icon and contact button
### Project Showcase
The portfolio includes a showcase of projects with:
- Visual thumbnails
- Project descriptions
- Technology tags
- Direct links to live sites
### Responsive Design
- Mobile-first approach
- Optimized layouts for various screen sizes
- Maintains clean aesthetics across devices
## Project Structure
```
portfolio/
├── public/ # Static assets
│ └── emailProtection.js # Email protection script
├── src/
│ ├── components/ # Reusable UI components
│ ├── data/ # Project and skills data
│ ├── lib/ # Utility functions
│ ├── routes/ # Page routes
│ ├── app.css # Global styles
│ ├── app.html # HTML template
│ └── main.js # Entry point
├── .gitignore
├── package.json
├── README.md
├── svelte.config.js
├── tailwind.config.js
└── vite.config.js
```
## Customization
### Adding Projects
To add a new project, edit the projects array:
```javascript
const projects = [
{
title: 'Project Name',
description: 'Description of the project',
image: '/path/to/image.jpg',
tags: ['Tag1', 'Tag2', 'Tag3'],
link: 'https://project-link.com'
}
// Add more projects here
];
```
### Updating Skills
The skills section can be customized by editing the skills list:
```javascript
- JavaScript
- TypeScript
```
## License
MIT
## Contact
Kent Vuong - Contact information available on the website
Project Link: [https://github.com/Mooshieblob1/ktvuong](https://github.com/Mooshieblob1/ktvuong)