https://github.com/ashish-panicker/johnsmith-portfolio
This is a responsive, animated, and theme-aware personal portfolio website. The purpose of this is to practice react deployment locally and in AWS cloud.
https://github.com/ashish-panicker/johnsmith-portfolio
aws docker javascri nginx reactjs tailwind
Last synced: 3 months ago
JSON representation
This is a responsive, animated, and theme-aware personal portfolio website. The purpose of this is to practice react deployment locally and in AWS cloud.
- Host: GitHub
- URL: https://github.com/ashish-panicker/johnsmith-portfolio
- Owner: ashish-panicker
- License: mit
- Created: 2025-05-06T04:34:43.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-06T04:55:35.000Z (about 1 year ago)
- Last Synced: 2025-05-07T03:15:00.347Z (about 1 year ago)
- Topics: aws, docker, javascri, nginx, reactjs, tailwind
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# John Smith's Portfolio Website
This is a responsive, animated, and theme-aware personal portfolio website built for **John Smith**, a Senior Software Engineer and veteran game developer. It is developed using **React**, **Vite**, **TailwindCSS**, and **Framer Motion**. The project is containerized using **Docker** for easy deployment.
---
## 🌟 Features
- 🧠 About Me section
- 🎮 Projects with visuals and descriptions
- ⚙️ Skills & Tech Stack
- 💼 Experience & Resume (PDF Download)
- ✉️ Contact form (with validation)
- 🌗 Dark / Light theme toggle
- 📱 Responsive design with mobile hamburger menu
- 🧭 Sticky navigation with Framer Motion animation
- 🐳 Dockerized for deployment
---
## 🛠 Tech Stack
- **Frontend**: React + Vite
- **Styling**: TailwindCSS
- **Animation**: Framer Motion
- **Icons**: Lucide React
- **Containerization**: Docker + NGINX
---
## 🚀 Getting Started
### Prerequisites
- Node.js (v18+)
- npm or yarn
- Docker (for containerization)
### Development
```bash
git clone https://github.com/ashish-panicker/johnsmith-portfolio.git
cd johnsmith-portfolio
npm install
npm run dev
```
### Build for Production
```bash
npm run build
```
---
## Local Deployment
### Steps
- Download [Nginx Server](https://nginx.org/en/download.html)
- Extract the zip file to `C:\`
- Build the react project `npm run build`
- Copy the `dist` folder into `nginx-\html\portfolio` folder in the server
- Edit the `nginx-\conf\nginx.conf` file
```
http {
# other configurations
server {
location / {
root html/portfolio/dist;
index index.html index.htm;
}
}
}
```
- Start `nginx-.exe`
- Browse to `http://localhost` and verify the app is deployed
---
## 🐳 Docker Setup
### Build Docker Image
```bash
docker build -t johnsmith-portfolio .
```
### Run Docker Container
```bash
docker run -d -p 3000:80 johnsmith-portfolio
```
Open your browser at [http://localhost:3000](http://localhost:3000)
---
## Cloud Deployment
### 🚀 AWS DevOps Toolchain Summary
A quick overview of key AWS tools used in a CI/CD pipeline:
| Tool | Purpose | Key Features |
| --- | --- | --- |
| **CodeCommit** | Fully managed Git-based source control | Secure and scalable, IAM integration, Git hooks |
| **CodeArtifact** | Managed artifact repository for software packages (npm, Maven, etc.) | Supports multiple formats, dependency sharing, and access control |
| **CodeBuild** | Builds, tests, and packages source code | On-demand scaling, Docker support, environment variables |
| **CodeDeploy** | Automates deployments to EC2, Lambda, and on-prem servers | Blue/green deployments, canary updates, lifecycle hooks |
| **CodePipeline** | Orchestrates the entire CI/CD workflow | Integrates with CodeCommit, CodeBuild, CodeDeploy, and third-party tools |
### 🔄 Typical Workflow
- **CodeCommit** stores your source code.
- **CodeBuild** compiles and builds artifacts.
- **CodeArtifact** (optional) manages shared packages and dependencies.
- **CodeDeploy** deploys your app to various targets.
- **CodePipeline** connects and automates the end-to-end workflow.
---
## 📁 Project Structure
```
src/
components/ # Navbar, ThemeToggle, Sections...
context/ # Theme Context
data/ # Sample Data
assets/ # Images, Resume PDF
App.jsx # Main app component
main.jsx # ReactDOM entry
public/ # Static files
Dockerfile # Docker build config
vite.config.js # Vite bundler config
```
---
## 📄 License
MIT License. Free to use and modify.
---
## 🙌 Acknowledgements
Thanks to open-source contributors of React, Vite, TailwindCSS, Framer Motion, and Lucide for making this project possible.
---