Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thetallprogrammer/my-portfolio-site
A fully functional portfolio site built with React.js and modern tools, provided for demonstration purposes. Clone, modify, and customize it for your own use while exploring best practices for web development and deployment.
https://github.com/thetallprogrammer/my-portfolio-site
3d css figma firebase frontend html javascript jsx react reactjs software-engineering spline ui website
Last synced: about 4 hours ago
JSON representation
A fully functional portfolio site built with React.js and modern tools, provided for demonstration purposes. Clone, modify, and customize it for your own use while exploring best practices for web development and deployment.
- Host: GitHub
- URL: https://github.com/thetallprogrammer/my-portfolio-site
- Owner: TheTallProgrammer
- License: mit
- Created: 2025-01-09T17:31:03.000Z (3 days ago)
- Default Branch: main
- Last Pushed: 2025-01-09T18:57:52.000Z (3 days ago)
- Last Synced: 2025-01-09T19:44:11.936Z (3 days ago)
- Topics: 3d, css, figma, firebase, frontend, html, javascript, jsx, react, reactjs, software-engineering, spline, ui, website
- Language: JavaScript
- Homepage: https://loganfalkenberg.com/
- Size: 25.8 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Logan Falkenberg’s Portfolio Site
👋 **Welcome!** Thanks for checking out my portfolio’s codebase! If you decide to use it, **please reference the link back to this repo somewhere visible in your code or documentation. And hey—while you’re at it, drop me a follow on GitHub!** Your support genuinely means a lot. 🙌
---
## 🛠️ Tech Stack
This project harnesses a range of modern tools and technologies:
1. **⚛️ React.js**
Driving the front end, React’s modular structure makes it easy to build and maintain an interactive UI.
2. **🎨 Figma**
I redesigned my resume in Figma (originally made in Canva). I exported it as an SVG to feed into Spline for 3D rendering and hero section animations.
3. **💫 Spline**
Powers interactive 3D elements. I briefly used the premium version to remove watermarks and unlock extra features.
4. **🔥 Firebase**
Hosts the website and ensures things run smoothly for visitors. No more complicated servers—just quick deployment.
5. **⚙️ GitHub Actions**
Every time I push changes, GitHub Actions automatically updates the live site, so you’re always seeing the latest version.
6. **🌐 Namecheap**
Keeps the domain name—[loganfalkenberg.com](http://loganfalkenberg.com/)—up and running.
7. **💻 Uiverse.io**
Adds that extra bit of flair with open-source HTML/CSS components and dynamic UI elements.
8. **📧 Email.js**
Handles the contact form functionality, letting users shoot me an email directly from the site.
9. **🛠️ GitKraken**
For version control, I use GitKraken to push/pull the repo. It simplifies git interactions (compared to GitHub Desktop or CLI), especially for large projects like this. GitKraken handles challenges like **Git LFS** (Large File Storage) seamlessly, making it a highly recommended tool for managing version control efficiently.
---
## 🚀 Getting Started
Feel free to clone or fork this repo to get it running on your own machine:
### **1. Clone the Repository**
```bash
git clone https://github.com/TheTallProgrammer/My-Portfolio-Site
```
### **2. Navigate to the Project Directory**
```bash
cd My-Portfolio-Site
```
### **3. Install Dependencies**
Make sure Node.js is installed. Then run:
```bash
npm install
```
### **4. Start the Application**
```bash
npm run start
```
🌐 Open `http://localhost:3000` in your browser, and you’re good to go!
---
## 🤝 How to Fork and Pull Changes
Contributions are always welcome! Here’s how you can fork the repo, tinker with the code, and open a pull request:
1. Visit: `https://github.com/username/repo-name`
2. Click **Fork** in the upper-right corner.
3. Clone your newly forked repo:
```bash
git clone https://github.com/your-username/repo-name.git
```
4. Check out the **Getting Started** steps above.
5. Make your edits. ✏️
6. Push to your forked repo.
7. Create a Pull Request:
- On your repo page, navigate to **Pull requests** > **New pull request**.
- Compare changes and submit. 🚀
---
## 🌟 Key Features
- **Immersive 3D Scenes** using **Spline**.
- **Dynamic UI Components** thanks to **Uiverse.io**.
- **Built-In Email Functionality** with **Email.js** (no separate backend needed!).
- **Real-Time Deployment** via **Firebase** & **GitHub Actions**.
- **Sleek, Professional Design** from **Figma** & **Canva**.
---
## 💰 Project Costs
Just to be transparent, here’s what keeps this project running:
- **Spline.io Premium**: $10 for a one-month subscription (mainly to remove watermarks and unlock goodies).
- **Namecheap Domain**: ~$11 per year for loganfalkenberg.com.
**🤑 Total Upfront Cost:** $21
**💸 Ongoing Cost:** $11/year
---
## 📚 Helpful Resources
- [React.js Documentation](https://reactjs.org/docs/getting-started.html)
- [Spline](https://spline.design/)
- [Uiverse.io](https://uiverse.io/)
- [Email.js](https://www.emailjs.com/)
- [Firebase Documentation](https://firebase.google.com/docs)
---
## 📜 License
This project is licensed under the MIT License. See the `LICENSE` file for details.
---
## 🎉 Credits
- [Document used for reference and inspiration](https://docs.google.com/document/d/1wXuXgStf9ZTEIpFYRuRH1Y-wH3LffQFrsgiky4xQa50/edit?tab=t.0#heading=h.y8r13cuesee2)
---
Thanks for stopping by! ✌️ Let me know if you have questions or feedback. 💬