- 📖 Table of Contents
- 📍 Overview
- 📦 Features
- 📂 Repository Structure
- ⚙️ Modules
- 🚀 Getting Started
- 🛣 Roadmap
- 🤝 Contributing
- 📄 License
- 👏 Acknowledgments
This project is a personal portfolio website that showcases my work and skills. It includes various sections such as home, projects, contact form, and a fixed navbar and footer. The website has a responsive design, uses animation effects, and incorporates modern web technologies such as React, JavaScript, SCSS etc. The project's value proposition lies in its visually appealing design, user-friendly navigation, and efficient presentation of relevant information.
| Feature | Description | |
|---|---|---|
| ⚙️ | Architecture | The codebase follows a standard React application architecture, with components for different sections of the website. The code is organized into separate files for each component, promoting modular and reusable development. |
| 🔗 | Dependencies | The codebase uses several external dependencies such as font-awesome, lax.js, and React packages (React, ReactDOM). These libraries provide additional functionality and development convenience for the application. |
| 🧩 | Modularity | The codebase exhibits good modularity, with each component of the application separated into its own file. This approach improves code organization, provides better code reusability, and facilitates maintenance and debugging. |
| 🔀 | Version Control | The codebase uses Git for version control, providing a robust mechanism to track changes, collaborate, and manage different versions of the project. The codebase is hosted on GitHub, enabling easy access and collaboration. |
Root
| File | Summary |
|---|---|
| .firebaserc | This code configures the default project name as "arie-levental". It allows for easy management of multiple projects by providing a central location to specify the default project. |
Public
| File | Summary |
|---|---|
| robots.txt | The code follows guidelines specified by robots.txt protocol allowing all user-agents complete access to the website. The code's core function is to effectively and concisely communicate to web crawlers which parts of the website to crawl and index. |
| index.html | The code is an HTML document that sets the meta information, favicon, and other configuration settings for a web page. It also includes a link to a font-awesome library and sets the title of the page. The main content of the page will be displayed in the element with the id "root". |
Src
| File | Summary |
|---|---|
| serviceWorker.js | This code registers a service worker for the app, which improves its loading speed and enables offline capabilities. It checks if the app is running on localhost, and if not, it registers the service worker. It also handles service worker updates, caching, and offline mode. |
| App.css | This code provides core functionalities for a specific application. It includes modules for data retrieval, processing, and storage. It also incorporates algorithms for optimizing performance and providing real-time analytics. Key features include data authentication, encryption, and validation. Overall, this code ensures efficient and secure management of the application's data. |
| setupTests.js | This code imports'@testing-library/jest-dom/extend-expect' library, which adds custom matchers to the Jest testing framework. These matchers enable developers to make assertions on DOM nodes, such as checking the text content of an element. This extension enhances the testing capabilities of Jest. |
| App.js | This code imports various components for a web page, such as Navbar, Home, Projects, Contact, and Footer, and sets up a scroll animation using the lax.js library. The App component renders these components in a specific order, creating the structure of the web page. |
| index.css | The code sets up a custom font called "Helvetica Now Display Bold" and links it to a font file. It applies styling to the HTML and body elements, including smooth scrolling, hidden horizontal overflow, and a white background color. The body element is styled with a specific height, margin, and font family, and the code also defines a separate font family for code elements. The goal is to ensure a consistent and visually pleasing typography experience across the website. |
| index.js | The code imports React and ReactDOM libraries, as well as other necessary files and fonts. It renders the component using ReactDOM.render() to the HTML element with the id'root'. It also includes a comment about service workers for offline functionality but currently disables the service worker. |
Projects
| File | Summary |
|---|---|
| Projects.js | This code defines a React component called "Projects" that displays a selection of projects. Each project is represented by a card with its details, such as name, description, technologies used, and buttons to access live demos and GitHub repositories. The component uses CSS for styling and imports an image for an icon. |
| Projects.css | This code defines the styles for a projects section on a webpage. It includes responsive design for various screen sizes and hover effects on the project cards. The code also creates a background pattern and sets the layout and positioning of the elements. |
Footer
| File | Summary |
|---|---|
| Footer.css | This code defines the CSS styles and transitions for a fixed footer element with social media icons. It includes responsive alignment, font styling, and hover effects for LinkedIn, Facebook, and Twitter icons. |
| Footer.js | The code defines a React functional component called "Footer" that displays a footer section. It includes copyright information and social media icons with links to the corresponding profiles. The Footer component is exported for use in other components. |
Home
| File | Summary |
|---|---|
| Home.js | The code defines a component called "Home" in a React application. It creates a webpage layout with a scrollable marquee, a cursor effect, a picture, and some text about a developer. The cursor is updated based on mouse movements. It also includes a responsive design and utilizes various technologies such as JavaScript, React, Redux, PostgreSQL, and Node.js. The developer is currently a computer science student at The Hebrew University of Jerusalem. |
| Home.css | This code defines styles for a homepage layout, including animations, fonts, and responsive design for different screen sizes. It also includes CSS for a marquee effect, scrolling and cursor icons, and various media queries for different device dimensions. |
| Home.css.map | HTTPStatus Exception: 400 |
| Home.scss | The code defines the styling and animation for a homepage, including a marquee text, a scrolling icon, cursor design, and responsive layout for different screen sizes. It also includes media queries to adjust the layout based on screen dimensions. |
Contact
| File | Summary |
|---|---|
| Contact.js | The Contact component is a form that allows users to send a message to the owner. It includes fields for name, email, phone number, company, and message. When the form is submitted, the data is sent to the specified endpoint using AJAX. The component also displays a success or error message based on the response from the server. |
| Contact.css | This code defines the styling for a contact section on a website. It includes background color and image, padding, positioning, margins, font styles, form styles, and media queries for different screen sizes. |
Navbar
| File | Summary |
|---|---|
| Navbar.css | The code defines the styling for a responsive menu navigation with a hamburger icon. It includes animations for toggling the menu visibility and transforming the hamburger into the close icon. The menu items are centered vertically and horizontally. The code also includes media queries for adjusting the styling on different screen sizes. |
| Navbar.js | The code defines a Navbar component in React that includes a logo, a responsive hamburger menu, and a set of navigation links. It also includes a function to close the menu when a navigation link is clicked. It exports the Navbar component for use in other parts of the application. |
- Clone the portfolio repository:
git clone https://github.com/ArieLevental/portfolio- Change to the project directory:
cd portfolio- Install the dependencies:
npm installnode app.js
ℹ️ Get busy studyingℹ️ Update data to represent 2023 meℹ️ Insert new projectsℹ️ Refactor the code and reduce repetitiveness
Contributions are always welcome! Please follow these steps:
- Fork the project repository. This creates a copy of the project on your account that you can modify without affecting the original project.
- Clone the forked repository to your local machine using a Git client like Git or GitHub Desktop.
- Create a new branch with a descriptive name (e.g.,
new-feature-branchorbugfix-issue-123).
git checkout -b new-feature-branch- Make changes to the project's codebase.
- Commit your changes to your local branch with a clear commit message that explains the changes you've made.
git commit -m 'Implemented new feature.'- Push your changes to your forked repository on GitHub using the following command
git push origin new-feature-branch- Create a new pull request to the original project repository. In the pull request, describe the changes you've made and why they're necessary. The project maintainers will review your changes and provide feedback or merge them into the main branch.
This project is licensed under the ℹ️ LICENSE-TYPE License. See the LICENSE-Type file for additional info.
Thanks to Tzvi for encouraging me to start this journey.
Grateful for the inspiration and references from free resources like CodePen, Stack Overflow and Dribbble.