├── .env.example ├── .gitignore ├── LICENSE ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── arrow-up.png ├── conestoga_logo.png ├── fonts │ ├── Inter-VariableFont_opsz,wght.ttf │ └── Roboto-VariableFont_wdth,wght.ttf ├── icons │ ├── c-sharp.svg │ ├── css-3.svg │ ├── eslint.svg │ ├── github-icon.svg │ ├── html-5.svg │ ├── javascript.svg │ ├── markdown.svg │ ├── nextjs.svg │ ├── prettier.svg │ ├── python.svg │ ├── react.svg │ ├── redux.svg │ ├── tailwindcss-icon.svg │ ├── threejs.svg │ ├── typescript-icon.svg │ ├── unity.svg │ ├── vercel.svg │ └── vite.svg ├── logo.png ├── logo.svg ├── projects │ ├── KarateGalaxy_Main.png │ ├── Portfolio_Main.png │ ├── ThreeRun_Main_Screen.png │ └── skif.png ├── resume_anzhelika_kostyuk.pdf └── varlab_logo.png ├── src ├── App.css ├── App.jsx ├── components │ ├── CursorGlow.jsx │ ├── Footer.jsx │ ├── Loader.jsx │ ├── MouseScroll.jsx │ ├── Navbar.jsx │ ├── ProjectCard.jsx │ ├── SkillsSphere.jsx │ └── StarField.jsx ├── constants │ └── data.ts ├── main.jsx └── sections │ ├── Contact.jsx │ ├── Experience.jsx │ ├── Hero.jsx │ ├── Projects.jsx │ └── Skills.jsx ├── tailwind.config.js └── vite.config.js /.env.example: -------------------------------------------------------------------------------- 1 | VITE_EMAILJS_SERVICE_ID=your_service_id 2 | VITE_EMAILJS_TEMPLATE_ID=your_template_id 3 | VITE_EMAILJS_PUBLIC_KEY=your_public_key 4 | VITE_EMAILJS_TO_NAME=YourName 5 | VITE_EMAILJS_TO_EMAIL=you@example.com 6 | -------------------------------------------------------------------------------- /.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 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Anzhelika Kostyuk 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 |
2 |

👋 Welcome to My Portfolio Website

3 |
4 | 5 |
6 | Logo 7 |      8 |

9 | A showcase of my skills, projects, and expertise as a Software Developer. 10 | This website is built using modern web technologies and includes interactive 3D elements to create an engaging experience. 11 |

12 |

13 | 🔗 Live Demo: 14 | 15 | Anzhelika Kostyuk 16 | 17 |

18 |
19 | 20 |
21 | 22 |
23 | 24 | ### 🎯 **About This Project** 25 | A professional portfolio and personal branding site that brings my developer journey to life with interactive 3D elements and smooth animations. It features clean UI/UX and highlights my work and skills through modern web tech. 26 | 27 | ### 🔥 **Key Highlights** 28 | ✅ **3D Interactivity** – Built with **React Three Fiber & Three.js** for immersive 3D experiences. 29 | ✅ **Performance Optimized** – Fast load times with optimized assets and lazy loading. 30 | ✅ **Fully Responsive** – Works across desktops, tablets, and mobile devices. 31 | ✅ **Modern UI/UX** – Styled with **Tailwind CSS** for a clean and professional look. 32 | ✅ **Easy Navigation** – Smooth scrolling and intuitive layout for better user experience. 33 | ✅ **Hosted on GitHub Pages** – Easily accessible with continuous deployment. 34 | 35 | --- 36 | 37 | ### 🛠️ **Tech Stack & Tools** 38 | 39 | **Frontend:**

40 | ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) 41 | ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 42 | ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) 43 | ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 44 |

**3D Graphics:**

45 | ![Threejs](https://img.shields.io/badge/threejs-black?style=for-the-badge&logo=three.js&logoColor=white) 46 | ![React Three Fiber](https://img.shields.io/badge/React%20Three%20Fiber-6e42c1?style=for-the-badge&logo=three.js&logoColor=white) 47 | ![Drei](https://img.shields.io/badge/Drei-4A90E2?style=for-the-badge) 48 |

**Styling:**

49 | ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 50 | ![CSS](https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3&logoColor=white) 51 |

**Build Tool:**

52 | ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white) 53 |

**Code quality and Formatting:**

54 | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) 55 | ![Prettier](https://img.shields.io/badge/prettier-%23F7B93E.svg?style=for-the-badge&logo=prettier&logoColor=black) 56 |

**Version Control:**

57 | ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white) 58 | ![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white) 59 |

**Hosting:**

60 | ![Github Pages](https://img.shields.io/badge/github%20pages-121013?style=for-the-badge&logo=github&logoColor=white) 61 | 62 | --- 63 | 64 | ### 🚀 Getting Started 65 | To run this project locally, follow these steps: 66 | 67 | ### Prerequisites 68 | - [Node.js](https://nodejs.org/) installed 69 | - Git installed 70 | 71 | ### Installation 72 | 1. **Clone the repository** 73 | ```sh 74 | git clone https://github.com/A-coderr/three_portfolio.git 75 | cd three_portfolio 76 | ``` 77 | 2. **Install dependencies** 78 | ```sh 79 | npm install 80 | ``` 81 | 3. **Run the development server** 82 | ```sh 83 | npm run dev 84 | ``` 85 | --- 86 | 87 | ### 📜 License 88 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. 89 | 90 |

91 | 92 |
93 |

📩 Connect with Me ⬇️

94 |

I’m actively looking for new opportunities! If you're a recruiter or hiring manager, feel free to reach out.

95 | 96 | LinkedIn Profile 97 | 98 | 99 | GitHub Profile 100 | 101 |
102 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react/no-unknown-property' : 'off', 33 | 'react-refresh/only-export-components': [ 34 | 'warn', 35 | { allowConstantExport: true }, 36 | ], 37 | }, 38 | }, 39 | ] 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Anzhelika Kostyuk 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three_portfolio", 3 | "private": true, 4 | "version": "1.2.3", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview", 11 | "deploy": "gh-pages -d ./dist" 12 | }, 13 | "dependencies": { 14 | "@emailjs/browser": "^4.4.1", 15 | "@emotion/react": "^11.13.3", 16 | "@emotion/styled": "^11.13.0", 17 | "@fortawesome/fontawesome-svg-core": "^6.6.0", 18 | "@fortawesome/free-brands-svg-icons": "^6.6.0", 19 | "@fortawesome/free-regular-svg-icons": "^6.6.0", 20 | "@fortawesome/free-solid-svg-icons": "^6.6.0", 21 | "@fortawesome/react-fontawesome": "^0.2.2", 22 | "@mui/icons-material": "^6.1.0", 23 | "@mui/material": "^6.1.0", 24 | "@react-three/drei": "^9.114.0", 25 | "@react-three/fiber": "^8.17.9", 26 | "emailjs": "^4.0.3", 27 | "framer-motion": "^12.5.0", 28 | "hugeicons-react": "^0.3.0", 29 | "leva": "^0.9.35", 30 | "react": "^18.3.1", 31 | "react-dom": "^18.3.1", 32 | "react-icons": "^5.3.0", 33 | "react-motion": "^0.5.2", 34 | "react-responsive": "^10.0.0", 35 | "react-social-icons": "^6.22.0", 36 | "react-spring-3d-carousel": "^1.3.4", 37 | "react-text-gradients": "^1.0.2", 38 | "react-vertical-timeline-component": "^3.5.3", 39 | "three": "^0.168.0", 40 | "uuid": "^11.1.0" 41 | }, 42 | "devDependencies": { 43 | "@eslint/js": "^9.9.0", 44 | "@types/react": "^18.3.3", 45 | "@types/react-dom": "^18.3.0", 46 | "@vitejs/plugin-react": "^4.3.1", 47 | "autoprefixer": "^10.4.20", 48 | "eslint": "^9.9.0", 49 | "eslint-plugin-react": "^7.35.0", 50 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 51 | "eslint-plugin-react-refresh": "^0.4.9", 52 | "gh-pages": "^6.3.0", 53 | "globals": "^15.9.0", 54 | "postcss": "^8.4.45", 55 | "tailwindcss": "^3.4.11", 56 | "vite": "^5.4.1" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/arrow-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/arrow-up.png -------------------------------------------------------------------------------- /public/conestoga_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/conestoga_logo.png -------------------------------------------------------------------------------- /public/fonts/Inter-VariableFont_opsz,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/fonts/Inter-VariableFont_opsz,wght.ttf -------------------------------------------------------------------------------- /public/fonts/Roboto-VariableFont_wdth,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/fonts/Roboto-VariableFont_wdth,wght.ttf -------------------------------------------------------------------------------- /public/icons/c-sharp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | C# 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/icons/css-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/icons/eslint.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/icons/github-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/icons/html-5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /public/icons/javascript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/icons/markdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/nextjs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Next.js 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/icons/prettier.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /public/icons/python.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/icons/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/redux.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/tailwindcss-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/icons/threejs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | threejs 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/typescript-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | TypeScript 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/icons/unity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/vercel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/vite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/logo.png -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/projects/KarateGalaxy_Main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/projects/KarateGalaxy_Main.png -------------------------------------------------------------------------------- /public/projects/Portfolio_Main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/projects/Portfolio_Main.png -------------------------------------------------------------------------------- /public/projects/ThreeRun_Main_Screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/projects/ThreeRun_Main_Screen.png -------------------------------------------------------------------------------- /public/projects/skif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/projects/skif.png -------------------------------------------------------------------------------- /public/resume_anzhelika_kostyuk.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/resume_anzhelika_kostyuk.pdf -------------------------------------------------------------------------------- /public/varlab_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3ss127/threejs-portfolio-sample/dc70a8acb5346350b049086d61f6e402fa2fc09d/public/varlab_logo.png -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @font-face { 6 | font-family: 'Inter-VariableFont_opsz,wght'; 7 | font-weight: normal; 8 | font-style: normal; 9 | src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype'); 10 | } 11 | 12 | @font-face { 13 | font-family: 'Roboto-VariableFont_wdth,wght'; 14 | font-weight: normal; 15 | font-style: normal; 16 | src: url('/fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype'); 17 | } 18 | 19 | body { 20 | font-family: 'Roboto-VariableFont_wdth,wght', sans-serif; 21 | background-color: #1a191e; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | h1, h2, h3, h4, h5, h6 { 27 | font-family: 'Inter-VariableFont_opsz,wght'; 28 | } 29 | 30 | * { 31 | scroll-behavior: smooth; 32 | } 33 | 34 | @keyframes scroll { 35 | 0% { opacity: 0; } 36 | 10% { transform: translateY(0); opacity: 1; } 37 | 100% { transform: translateY(15px); opacity: 0; } 38 | } 39 | .animate-scroll { 40 | animation: scroll 2.2s cubic-bezier(.15,.41,.69,.94) infinite; 41 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Navbar from "./components/Navbar"; 3 | import Hero from "./sections/Hero"; 4 | import Experience from "./sections/Experience"; 5 | import Skills from "./sections/Skills"; 6 | import Projects from "./sections/Projects"; 7 | import Contact from "./sections/Contact"; 8 | import StarCanvas from "./components/StarField"; 9 | import Footer from "./components/Footer"; 10 | import CursorGlow from "./components/CursorGlow"; 11 | 12 | export default function App() { 13 | return ( 14 | <> 15 | 16 | 17 | 18 | 19 | 20 | 21 |