├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── public ├── CNAME ├── favicon.ico └── favicon.png ├── src ├── App.vue ├── assets │ ├── images │ │ ├── covid_pic.png │ │ ├── initials.png │ │ ├── portfolio_pic.png │ │ ├── portrait1.jpeg │ │ ├── portrait2.jpeg │ │ ├── portrait3.jpeg │ │ ├── recentportrait.png │ │ ├── sudoku_pic.png │ │ ├── tracksubs_pic.png │ │ ├── trivia_pic.png │ │ ├── version_edtech_pic.png │ │ └── webdevportfolio_pic.png │ └── main.css ├── components │ ├── ExperienceCard.vue │ ├── Navbar.vue │ ├── WorkUnit.vue │ ├── icons │ │ └── bullet_point.svg │ └── transitions │ │ ├── LoadTransition.vue │ │ ├── NavTransition.vue │ │ └── ProjectTransition.vue ├── composables │ └── onIntersect.js ├── icons.js ├── main.js ├── portfolio.js ├── router │ └── index.js └── views │ ├── AboutView.vue │ ├── ContactView.vue │ ├── ExperienceView.vue │ ├── LandingView.vue │ ├── MainView.vue │ ├── SplashView.vue │ └── WorkView.vue ├── tailwind.config.js └── vite.config.js /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: 5 | - main 6 | workflow_dispatch: 7 | 8 | jobs: 9 | build: 10 | name: Build 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Checkout repo 15 | uses: actions/checkout@v3 16 | 17 | - name: Setup Node 18 | uses: actions/setup-node@v3 19 | 20 | - name: Install npm dependencies 21 | run: npm ci --ignore-scripts 22 | 23 | - name: Build project 24 | run: npm run build 25 | 26 | - name: Upload production-ready build files 27 | uses: actions/upload-artifact@v3 28 | with: 29 | name: production-files 30 | path: ./dist 31 | 32 | deploy: 33 | name: Deploy 34 | needs: build 35 | runs-on: ubuntu-latest 36 | if: github.ref == 'refs/heads/main' 37 | 38 | steps: 39 | - name: Download artifact 40 | uses: actions/download-artifact@v3 41 | with: 42 | name: production-files 43 | path: ./dist 44 | 45 | - name: Deploy to GitHub Pages 46 | uses: peaceiris/actions-gh-pages@v3 47 | with: 48 | github_token: ${{ secrets.GITHUB_TOKEN }} 49 | publish_dir: ./dist -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/ 22 | .vscode 23 | .vscode/* 24 | .idea 25 | *.suo 26 | *.ntvs* 27 | *.njsproj 28 | *.sln 29 | *.sw? 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Maxim Shelepov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 💻 Web Developer Portfolio   [](https://github.com/feifyKike/webdev_portfolio/blob/main/LICENSE) 2 | 3 | ## A modern, clean, & simple to navigate portfolio template for web developers (or any developer)! 4 | 5 | ### Includes Pertinent Sections for any Web Developer Portfolio: 6 | ✔️ Name & Introduction\ 7 | ✔️ About\ 8 | ✔️ Experience\ 9 | ✔️ Projects / Work\ 10 | ✔️ Contact 11 | 12 | To add your own info into the template just alter the [src/portfolio.js](src/portfolio.js) file variables. More customization options will come & be incorporated in the future 🔮. 13 | 14 | If you have any suggestions on what else you want to be customized through the [portfolio.js](src/portfolio.js) file or added / changed in general please feel free to reach out through the hosted page [contact form](https://forms.gle/vhWrKD32i1d2MSZGA) or leave an issue. 15 | 16 | If you would like to contribute to the project take a look at the [Issues](https://github.com/feifyKike/webdev_portfolio/issues). 17 | 18 | Want to add a personal touch to the portfolio? Feel free to open a [pull request](https://github.com/feifyKike/webdev_portfolio/pulls). 19 | 20 | 🙏 I would greatly appreciate proper credit if you do decided to use this portfolio for any of your purposes. Just leaving the footer as is at the bottom of the template **Designed & Created by Maxim Shelepov** would be enough. Thanks. 21 | 22 | ⭐️ Also leave a star if you would like to see the project further develop and be improved. 23 | 24 | ## Table of Contents 25 | - [Getting Started](#getting-started) 26 | - [How to Use](#how-to-use) 27 | - [Customizing Content](#customizing-content) 28 | - [Deployment](#deployment) 29 | - [Technologies Used](#technologies-used) 30 | - [Images and Icons](#images-and-icons) 31 | - [Future](#future) 32 | - [License](#license) 33 | 34 | Check out the [live demo](https://feifykike.github.io/webdev_portfolio/) of the project. 35 | 36 | ## Getting Started 37 | 38 | These instructions will help you get the project up and running on your local machine for your development, testing, & eventual deployment. 39 | 40 | ### Fork the repository (that's it really) 41 | To keep your changes and version of the portfolio under your github and actions [fork this repository](https://github.com/feifyKike/webdev_portfolio/fork). More on forking repositories [here](https://docs.github.com/en/get-started/quickstart/fork-a-repo). 42 | 43 | After creating your fork, you can make all content ([src/portfolio.js](src/portfolio.js)) updates and commits in github without cloning on your machine for local development. To run the deployment of your portfolio site make your first change to and commit (that will trigger the workflow and pages site deployment). 44 | 45 | > 46 | > ℹ️ The following steps in this section describe the setup for local development which is recommended if you want to see your styling (css) and content (js and html) changes instantly without rebuilding the Github Actions site each time. 47 | > 48 | 49 | ### For local development 50 | You will need to install [Git](https://github.com/git-guides/install-git), [Node.js](https://nodejs.org/en/download), & [npm](https://www.npmjs.com/package/npm). 51 | 52 | Using [brew](https://brew.sh) package manager is recommended for mac users. 53 | 54 | #### Clone your forked repository 55 | After installing the global packages from the previous step and copying your forked repo clone url. 56 | ```sh 57 | # Copy the forked remote repository to your local directory (folder) 58 | git clone https://github.com/your-github-username/webdev_portfolio.git # the name of the clone repo should match the forked repo name 59 | 60 | # Navigate into the project folder within your current directory 61 | cd webdev_portfolio 62 | ``` 63 | 64 | #### Install necessary project required packages 65 | ```sh 66 | npm install 67 | ``` 68 | 69 | ## How to Use 70 | Once all is set up, you can start developing by running the vite server and viewing the site from your browser. 71 | ### Compile and Hot-Reload for Development 72 | ```sh 73 | npm run dev 74 | ``` 75 | A `localhost:####/webdev_portfolio` link should appear. Paste into your browser and view. 76 | 77 | ### Making commits, pushing them to your forked remote repository, & syncing changes 78 | To push your local changes to your forked github repository: 79 | ```sh 80 | git add . # add all the changes to the stage 81 | git status # shows all the staged changes 82 | 83 | git commit -m "Updating portfolio.js content." 84 | git push # automatically points to the origin url / target specified in `git remote -v` 85 | ``` 86 | Syncing changes between your forked repository and this repository: 87 | ```sh 88 | git remote add upstream https://github.com/feifykike/webdev_portfolio.git # set a remote url to point to original repository (this one) 89 | git remote -v # shows the set remotes 90 | 91 | # When you want to sync new changes/updates from the original repository 92 | git fetch upstream # fetches changes from this repository 93 | git merge upstream/main # merges changes with your code; conflicts may occur 94 | ``` 95 | 🎉 Now watch and enjoy as the latest commit appears in your remote repo and the automatic deployment begins. For deployment, check out the [Deployment](#deployment) section. 96 | 97 | ## Customizing Content 98 | 99 | To personalize the template site to your content you can: 100 | 1. Populate your own information, appearance settings, & site behavioral setting in [src/portfolio.js](src/portfolio.js). 101 | 2. Change the [index.html](index.html) `