https://github.com/tjklint/tjklint.github.io
My personal, custom, technical portfolio website built with React, TypeScript, and SASS.
https://github.com/tjklint/tjklint.github.io
github-api github-pages personal-website portfolio portfolio-page portfolio-site portfolio-website react reactjs reactts sass tsx typescript
Last synced: about 1 month ago
JSON representation
My personal, custom, technical portfolio website built with React, TypeScript, and SASS.
- Host: GitHub
- URL: https://github.com/tjklint/tjklint.github.io
- Owner: tjklint
- License: mit
- Created: 2024-07-17T15:10:34.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-14T18:10:25.000Z (2 months ago)
- Last Synced: 2025-04-11T03:14:48.309Z (about 1 month ago)
- Topics: github-api, github-pages, personal-website, portfolio, portfolio-page, portfolio-site, portfolio-website, react, reactjs, reactts, sass, tsx, typescript
- Language: TypeScript
- Homepage: https://tjklint.github.io/
- Size: 71.5 MB
- Stars: 20
- Watchers: 1
- Forks: 2
- Open Issues: 73
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
A fully-custom, responsive, and modern ReactTS portfolio
Technologies used:
Like what you see? Give me a ⭐ to support my work!
## 📋 Table of Contents
1. ⚙️ [Tech Stack](#tech-stack)
2. ✨ [Features](#features)
3. 🚀 [Deploy Locally](#deploy)
## ⚙️ Tech Stack
👉 **React**: To leverage its rich ecosystem and large community support, streamlined development workflow, modern web development practices, and high performance.
👉 **TypeScript**: The added benefit of catching errors early, and lovely static-typing
👉 **SASS**: Easier to organize and more added features compared to CSS
👉 **NodeJS**: A unified development process.
👉 **Figma**: Efficient design.
## ✨ Features
1️⃣ **Hero**: Captivating introduction featuring a spaceship with a moving spaceship effect.
2️⃣ **Work Experience**: Prominent display of professional background for emphasis and credibility, including a resume inbed.
3️⃣ **Responsiveness**: Seamless adaptability across all devices, ensuring optimal viewing experience for every user.
4️⃣ **Projects Showcase**: Visually appealing presentation of projects with detailed descriptions and links to GitHub repositories.
5️⃣ **Tech Stack**: Display of skills and technologies used, organized into categories for easy viewing.
6️⃣ **Contribution Map**: Interactive GitHub contribution graph showing recent activity.
7️⃣ **Social Links**: Integration of social media icons linking to profiles on platforms like LinkedIn, GitHub, Medium, and Dev.to.
8️⃣ **Custom Fonts**: Implementation of custom fonts for a unique and polished look.
9️⃣ **Footer**: Well-designed footer with developer credits, social links, and copyright information.
1️⃣0️⃣ **Code Architecture**: Clean and maintainable code architecture with a focus on reusability and scalability.
## 🚀 Deploy locally
Prerequisites:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
```
# Clone the repository
git clone https://github.com/tjklint/tjklint.github.io.git
# Navigate to the project directory
cd tjklint.github.io
# Install dependencies
npm i
# Run the local server
npm run start
```