|
1 | | -# AngularJS Demo Project |
| 1 | +# AngularJS Portfolio Demo |
2 | 2 |
|
3 | | -This is a simple AngularJS demo project showcasing basic single-page application features including routing, data binding, and Material Design styling. |
4 | | - |
5 | | -## 🔗 Live Demo |
6 | | - |
7 | | -You can view the live deployed version of this project here: |
8 | | -**[https://ongunakaycom.github.io/angular-js-demo/](https://ongunakaycom.github.io/angular-js-demo/)** |
9 | | - |
10 | | ---- |
11 | | - |
12 | | -## 🚀 Deployment |
13 | | - |
14 | | -This project is automatically deployed to GitHub Pages using a GitHub Actions workflow. Every push to the \`main\` branch triggers a deployment pipeline that publishes the latest version to the \`gh-pages\` branch. |
15 | | - |
16 | | -### CI/CD Workflow |
17 | | - |
18 | | -- Runs on every push to `main` |
19 | | -- Builds the public directory from project files |
20 | | -- Pushes content to `gh-pages` branch |
21 | | -- Uses [peaceiris/actions-gh-pages](https://github.com/peaceiris/actions-gh-pages) |
22 | | - |
23 | | -GitHub Actions config file: `.github/workflows/deploy.yml` |
| 3 | +A simple single-page portfolio website built with **AngularJS**, **ngRoute**, and **Angular Material**. It demonstrates routing, modular architecture, and dynamic data binding for a personal portfolio. |
24 | 4 |
|
25 | 5 | --- |
26 | 6 |
|
27 | | -## 📁 Project Structure |
| 7 | +## Project Structure |
28 | 8 |
|
29 | 9 | ``` |
| 10 | +
|
| 11 | +angular-js-demo/ |
30 | 12 | ├── .github/ |
31 | 13 | │ └── workflows/ |
32 | | -│ └── deploy.yml |
| 14 | +│ └── deploy.yml # GitHub Actions workflow for deployment |
33 | 15 | ├── .gitignore |
34 | | -├── about.html |
35 | | -├── app.js |
36 | | -├── cv.html |
37 | | -├── home.html |
38 | | -├── index.html |
39 | | -├── readme.md |
40 | | -└── style.css |
41 | | -``` |
42 | | - |
43 | | -## 📄 File Descriptions |
| 16 | +├── index.html # Main entry point |
| 17 | +├── home.html # Home page template |
| 18 | +├── about.html # About page template |
| 19 | +├── cv.html # CV / Resume page template |
| 20 | +├── app.js # AngularJS application and controllers |
| 21 | +├── style.css # Main stylesheet |
| 22 | +├── LICENSE |
| 23 | +└── readme.md |
44 | 24 |
|
45 | | -- `index.html`: Main entry point of the application |
46 | | -- `app.js`: AngularJS module and route configuration |
47 | | -- `home.html`, `about.html`, `cv.html`: Different views for the single-page app |
48 | | -- `style.css`: Custom CSS styles |
49 | | -- `readme.md`: This project documentation |
50 | | -- `.github/workflows/deploy.yml`: GitHub Actions deployment configuration |
51 | | -- `.gitignore`: Git ignore file for excluding files from version control |
| 25 | +```` |
52 | 26 |
|
53 | 27 | --- |
54 | 28 |
|
55 | | -## ✨ Features |
| 29 | +## Features |
56 | 30 |
|
57 | | -- AngularJS routing with ngRoute |
58 | | -- Dynamic content loading based on views |
59 | | -- Material Design styling with Angular Material |
60 | | -- Responsive single-page application (SPA) |
61 | | -- Lightweight and easy to understand codebase |
62 | | -- Automated deployment to GitHub Pages |
| 31 | +- **SPA with AngularJS** using `ngRoute` for client-side routing. |
| 32 | +- **Three main pages**: Home, About, CV. |
| 33 | +- **Dynamic content** rendered via controllers (`HomeController`, `AboutController`, `CvController`). |
| 34 | +- **Responsive layout** using Angular Material design components. |
| 35 | +- **GitHub Pages deployment** automated with GitHub Actions. |
63 | 36 |
|
64 | 37 | --- |
65 | 38 |
|
66 | | -## 🧰 Prerequisites |
| 39 | +## AngularJS App Overview |
67 | 40 |
|
68 | | -- A modern web browser (Chrome, Firefox, Edge, etc.) |
69 | | -- A simple HTTP server (Python, Node, etc.) |
| 41 | +```javascript |
| 42 | +angular.module('cvApp', ['ngRoute', 'ngMaterial']) |
| 43 | + .config(['$routeProvider', function($routeProvider) { |
| 44 | + $routeProvider |
| 45 | + .when('/', { templateUrl: 'home.html', controller: 'HomeController', controllerAs: 'home' }) |
| 46 | + .when('/about', { templateUrl: 'about.html', controller: 'AboutController', controllerAs: 'about' }) |
| 47 | + .when('/cv', { templateUrl: 'cv.html', controller: 'CvController', controllerAs: 'cv' }) |
| 48 | + .otherwise({ redirectTo: '/' }); |
| 49 | + }]); |
| 50 | +```` |
| 51 | +
|
| 52 | +* **HomeController**: Manages welcome message. |
| 53 | +* **AboutController**: Displays personal biography. |
| 54 | +* **CvController**: Handles contact info, career objectives, qualifications, experience, and skills. |
70 | 55 |
|
71 | 56 | --- |
72 | 57 |
|
73 | | -## 📦 Usage |
| 58 | +## Installation & Usage |
74 | 59 |
|
75 | | -### Option 1: Python HTTP Server |
| 60 | +1. **Clone the repository** |
76 | 61 |
|
77 | 62 | ```bash |
78 | | -cd path/to/angular-js-demo |
79 | | -python3 -m http.server 8000 |
| 63 | +git clone https://github.com/ongunakaycom/angular-js-demo.git |
| 64 | +cd angular-js-demo |
80 | 65 | ``` |
81 | 66 |
|
82 | | -Access it at: `http://localhost:8000` |
| 67 | +2. **Open `index.html`** in your browser (no server required for this static demo). |
83 | 68 |
|
84 | | -### Option 2: Node.js Live Server |
| 69 | +3. **Optional: Run on a local server** (for routing support) |
85 | 70 |
|
86 | 71 | ```bash |
87 | | -npm install -g live-server |
88 | | -cd path/to/angular-js-demo |
89 | | -live-server |
| 72 | +# Using Python |
| 73 | +python -m http.server 8080 |
| 74 | +# Then navigate to http://localhost:8080 |
90 | 75 | ``` |
91 | 76 |
|
92 | | -### Option 3: Direct File Access |
93 | | - |
94 | | -Simply open `index.html` directly in your browser (note: routing may not work properly with this method). |
95 | | - |
96 | 77 | --- |
97 | 78 |
|
98 | | -## 🌐 Browser Compatibility |
| 79 | +## Deployment |
99 | 80 |
|
100 | | -- Chrome 60+ |
101 | | -- Firefox 55+ |
102 | | -- Safari 12+ |
103 | | -- Edge 79+ |
| 81 | +This project uses **GitHub Actions** to deploy to GitHub Pages automatically when changes are pushed to the `main` branch. |
104 | 82 |
|
105 | | ---- |
| 83 | +Workflow: `.github/workflows/deploy.yml` |
106 | 84 |
|
107 | | -## 🔧 Development |
| 85 | +Key steps: |
108 | 86 |
|
109 | | -1. Clone the repository |
110 | | -2. Modify files as needed |
111 | | -3. Run locally using one of the server methods above |
112 | | -4. Push changes to `main` to trigger auto-deployment |
| 87 | +1. Checkout repository. |
| 88 | +2. Copy project files to a `public` folder. |
| 89 | +3. Deploy contents of `public/` to GitHub Pages using `peaceiris/actions-gh-pages`. |
113 | 90 |
|
114 | 91 | --- |
115 | 92 |
|
116 | | -## 🛠️ Technology Stack |
| 93 | +## About Me |
117 | 94 |
|
118 | | -- **AngularJS** (1.8.2) |
119 | | -- **Angular Material** |
120 | | -- **ngRoute** |
121 | | -- **HTML5**, **CSS3** |
122 | | -- **GitHub Actions** (CI/CD) |
| 95 | +* Website: [ongunakay.com](https://ongunakay.com) |
| 96 | +* GitHub: [github.com/ongunakaycom](https://github.com/ongunakaycom) |
| 97 | +* LinkedIn: [linkedin.com/in/ongunakay](https://linkedin.com/in/ongunakay) |
| 98 | +* Email: [info@ongunakay.com](mailto:info@ongunakay.com) |
123 | 99 |
|
124 | 100 | --- |
125 | 101 |
|
126 | | -## 📝 License |
127 | | - |
128 | | -This project is licensed under the **Apache-2.0 License**. |
129 | | - |
130 | | ---- |
131 | | - |
132 | | -## 👨💻 About Me |
133 | | - |
134 | | -I'm **Ongun Akay**, a Senior Full-Stack Developer with expertise across various technologies. |
135 | | - |
136 | | -- 👀 I specialize in full-stack development with deep frontend/backend skills |
137 | | -- 🌱 Currently sharpening advanced web architecture and deployment practices |
138 | | -- 💬 Reach out: info@ongunakay.com |
139 | | - |
140 | | ---- |
141 | | - |
142 | | -## 🤝 Contributing |
143 | | - |
144 | | -Pull requests, suggestions, and stars ⭐️ are always welcome! |
145 | | - |
146 | | ---- |
147 | | - |
148 | | -## 📌 Changelog |
149 | | - |
150 | | -- ✅ Initial release with SPA functionality |
151 | | -- 🎨 Angular Material styling added |
152 | | -- 🚀 GitHub Pages deployment with CI/CD |
153 | | - |
154 | 102 | ## License |
155 | 103 |
|
156 | | -This project is licensed under the [MIT License](./LICENSE). |
| 104 | +This project is licensed under the MIT License. See [LICENSE](LICENSE) for details. |
0 commit comments