{"id":15204082,"url":"https://github.com/andydeux/my-portfolio-website-take","last_synced_at":"2026-03-11T00:03:19.894Z","repository":{"id":254676408,"uuid":"845557454","full_name":"AndyDeux/My-Portfolio-Website-Take","owner":"AndyDeux","description":"A responsive web portfolio with ReactJS, ThreeJS, Drei, React-Three-Fiber and Styled-Components","archived":false,"fork":false,"pushed_at":"2024-08-25T15:00:33.000Z","size":19555,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T22:03:00.351Z","etag":null,"topics":["portfolio-website","react","react-native-maps","react-three-drei","react-three-fiber","styled-components","three-js","webdevelopment","website"],"latest_commit_sha":null,"homepage":"https://andrijagajic.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndyDeux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-21T13:32:12.000Z","updated_at":"2024-08-25T15:00:35.000Z","dependencies_parsed_at":"2024-08-25T11:21:17.576Z","dependency_job_id":"eaa91aad-7bf4-44df-922f-ce137bc96ed4","html_url":"https://github.com/AndyDeux/My-Portfolio-Website-Take","commit_stats":{"total_commits":9,"total_committers":2,"mean_commits":4.5,"dds":0.2222222222222222,"last_synced_commit":"4ef874375c5f196fa062f45752a024922da43fb8"},"previous_names":["andydeux/portfolio-react","andydeux/my-portfolio-website-take"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyDeux%2FMy-Portfolio-Website-Take","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyDeux%2FMy-Portfolio-Website-Take/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyDeux%2FMy-Portfolio-Website-Take/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyDeux%2FMy-Portfolio-Website-Take/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndyDeux","download_url":"https://codeload.github.com/AndyDeux/My-Portfolio-Website-Take/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238768422,"owners_count":19527197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["portfolio-website","react","react-native-maps","react-three-drei","react-three-fiber","styled-components","three-js","webdevelopment","website"],"created_at":"2024-09-28T05:21:09.450Z","updated_at":"2025-10-29T04:31:49.520Z","avatar_url":"https://github.com/AndyDeux.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 **My Portfolio Website Take**\n\n![Website](https://github.com/user-attachments/assets/18b6a0ed-7da1-4b93-824d-4e36a42f48c7)\n\n\nThis project came to life from my newfound passion for [Three.js](https://threejs.org/) and its amazing 3D graphics capabilities, enabling the creation of engaging and visually pleasing web designs. A significant motivator was my need for a personal website, so I decided to build something beyond a basic HTML page and CSS stylesheet.\n\n🚀 **Journey:**  \nIt has been a rollercoaster, especially since I had no prior experience with JavaScript and had to learn it from scratch. The project is built on [React.js](https://reactjs.org/), with [Three.js](https://threejs.org/), [Drei](https://github.com/pmndrs/drei), and [React-Three-Fiber](https://github.com/pmndrs/react-three-fiber) handling the 3D graphics, and [Styled-Components](https://styled-components.com/) managing the styling of the webpage.\n\n🛠️ **Challenges:**  \nImplementing multiple technologies that work together was a Sisyphean task, especially as a newcomer to front-end web development. Along the way, I encountered challenges like miscompiled 3D objects and Three.js's issue of not receiving touch input on the canvas, which prevented mobile users from scrolling. However, with time and patience, I was able to resolve these issues.\n\n💡 **Future Plans:**  \nThis version is just the beginning. I plan to continuously add new features, as the current iteration is still basic and lacks many functionalities—but all in due time.\n\n## 💻 Tech Stack Overview 🛠️\n\n\n```plaintext\n┌──────────────────────┐\n│      React.js        │\n│  (App Structure)     │\n└──────────┬───────────┘\n           │\n           ▼\n┌──────────────────────┐     ┌─────────────────────┐\n│      Three.js        │     │   Styled-Components │\n│   (3D Graphics)      │◄───►│     (Styling)       │\n└──────────┬───────────┘     └──────────┬──────────┘\n           │                             │\n           ▼                             │\n┌──────────────────────┐     ┌───────────▼─────────┐\n│      Drei            │     │    FontAwesome      │\n│ (Helper Components)  │     │       (Icons)       │\n└──────────────────────┘     └─────────────────────┘\n```\n\n\tReact.js: The backbone framework of the application.\n\tThree.js: Handles the 3D graphics and animations.\n\tDrei: Provides useful helper components for Three.js.\n\tReact-Three-Fiber: Integrates Three.js with React for easier 3D rendering.\n\tStyled-Components: Styles the web components much easier with React.\n\tFontAwesome: Adds a variety of icons, such as the ones I used in the Find Me On section.\n\n## 📦 **Modules Required for Running the App**\n\nTo run this project, you'll need to install the following modules:\n\n```bash\nyarn\nvite\nyarn add styled-components\nyarn add three-js\nyarn add @react-three/drei\nyarn add react-three-fiber\nyarn add react-simple-maps\nyarn add @fortawesome/fontawesome-svg-core\nyarn add @fortawesome/free-solid-svg-icons\nyarn add @fortawesome/react-fontawesome\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandydeux%2Fmy-portfolio-website-take","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandydeux%2Fmy-portfolio-website-take","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandydeux%2Fmy-portfolio-website-take/lists"}