├── LICENSE ├── README.md ├── about.html ├── contact.html ├── images ├── about.jpeg ├── contact.jpeg └── home.jpeg ├── index.html └── styles.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Irvan Fauzi 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Irvan Fauzi - Personal Website 2 | 3 | This repository contains the source code for a simple personal website designed for **Irvan Fauzi**. The website includes multiple pages, file-based routing, and a responsive design with a modern dark gradient theme. 4 | 5 | - [Arlink](https://arlink.arweave.net/) - Deployments on Arweave made as simple as one click. 6 | - [Demo](https://challenge-1_arlink.arweave.net/) - This repository succes deploy on Arlink 7 | 8 | ## Features 9 | 10 | - **Multi-Page Design**: Three interconnected HTML pages (`index.html`, `about.html`, `contact.html`). 11 | - **Responsive Layout**: Optimized for both desktop and mobile devices. 12 | - **Dark Gradient Theme**: Background transitions from dark to cyan. 13 | - **Sticky Navigation**: Easy-to-access navigation menu. 14 | - **Personalized Content**: Information about Irvan Fauzi's background, work, and contact details. 15 | 16 | ## Pages 17 | 18 | 1. **Home (index.html)** 19 | - Welcoming message. 20 | - Links to "About" and "Contact" pages. 21 | 22 | 2. **About (about.html)** 23 | - Brief description of Irvan Fauzi's skills and current internship. 24 | 25 | 3. **Contact (contact.html)** 26 | - Contact information including email, phone number, and location. 27 | 28 | ## Technologies Used 29 | 30 | - **HTML**: Structure of the website. 31 | - **CSS**: Styling and responsive design. 32 | 33 | ## Folder Structure 34 | 35 | ``` 36 | ├── index.html # Home page 37 | ├── about.html # About page 38 | ├── contact.html # Contact page 39 | ├── styles.css # Styling for all pages 40 | ``` 41 | 42 | ## Setup 43 | 44 | 1. Clone this repository: 45 | ```bash 46 | git clone 47 | ``` 48 | 2. Navigate to the project folder: 49 | ```bash 50 | cd 51 | ``` 52 | 3. Open `index.html` in your browser to view the website. 53 | 54 | ## Deploy on Arlink 55 | 56 | 1. Upload your project on github repository 57 | 2. see documentations here - [docs v1](https://arlink.gitbook.io/arlink-docs/getting-started/quickstart) 58 | 59 | ## Screenshots 60 | 61 | ### Home Page 62 | ![Home Page Screenshot](./images/home.jpeg) 63 | 64 | ### About Page 65 | ![About Page Screenshot](./images/about.jpeg) 66 | 67 | ### Contact Page 68 | ![Contact Page Screenshot](./images/contact.jpeg) 69 | 70 | ## License 71 | 72 | This project is open-source and available under the [MIT License](LICENSE). 73 | 74 | --- 75 | 76 | **Created by [Irvan Fauzi](https://github.com/irvanfzi)** 77 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Irvan Fauzi - About 7 | 8 | 9 | 10 |
11 | 18 |
19 |
20 |

About Irvan Fauzi

21 |

Irvan Fauzi is a passionate developer currently focusing on web technologies. With experience in Spring Boot, Hibernate, and MySQL, he enjoys building efficient systems that solve real-world problems. He is currently interning at Intechcom, where he contributes to improving sales and stock management efficiency.

22 |
23 |
24 |

© 2025 Irvan Fauzi

25 |
26 | 27 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Irvan Fauzi - Contact 7 | 8 | 9 | 10 |
11 | 18 |
19 |
20 |

Contact Irvan Fauzi

21 |

If you have any questions or opportunities, feel free to reach out at:

22 |
    23 |
  • Email: irvanfzi@icloud.com
    • 24 |
  • Phone: +62 812 xxxx xxxx
    • 25 |
  • Location: Tangerang, Indonesia
    • 26 |
27 |
28 |
29 |

© 2025 Irvan Fauzi

30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /images/about.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irvanfzi/challenge1/a1c5bd9d7a6add95491884034bd1cf7eab5d7856/images/about.jpeg -------------------------------------------------------------------------------- /images/contact.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irvanfzi/challenge1/a1c5bd9d7a6add95491884034bd1cf7eab5d7856/images/contact.jpeg -------------------------------------------------------------------------------- /images/home.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irvanfzi/challenge1/a1c5bd9d7a6add95491884034bd1cf7eab5d7856/images/home.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Irvan Fauzi - Home 7 | 8 | 9 | 10 |
11 | 18 |
19 |
20 |

Welcome to Irvan Fauzi's Website

21 |

Hello! My name is Irvan Fauzi. Explore this website to learn more about me and my work.

22 |
23 | 26 | 27 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | line-height: 1.6; 6 | background: linear-gradient(180deg, #0D0D0D, #004d4d); 7 | color: #e0f7fa; 8 | } 9 | 10 | header { 11 | background: rgba(13, 13, 13, 0.9); 12 | color: #e0f7fa; 13 | padding: 1rem 0; 14 | position: sticky; 15 | top: 0; 16 | z-index: 1000; 17 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); 18 | } 19 | 20 | nav ul { 21 | list-style: none; 22 | text-align: center; 23 | margin: 0; 24 | padding: 0; 25 | display: flex; 26 | justify-content: center; 27 | gap: 20px; 28 | } 29 | 30 | nav ul li { 31 | margin: 0; 32 | } 33 | 34 | nav ul li a { 35 | color: #00cccc; 36 | text-decoration: none; 37 | font-weight: bold; 38 | transition: color 0.3s; 39 | } 40 | 41 | nav ul li a:hover { 42 | color: #ffffff; 43 | } 44 | 45 | main { 46 | padding: 2rem; 47 | text-align: center; 48 | } 49 | 50 | footer { 51 | background: rgba(13, 13, 13, 0.9); 52 | color: #e0f7fa; 53 | text-align: center; 54 | padding: 1rem 0; 55 | position: fixed; 56 | width: 100%; 57 | bottom: 0; 58 | } 59 | 60 | @media (max-width: 768px) { 61 | nav ul { 62 | flex-direction: column; 63 | gap: 10px; 64 | } 65 | 66 | main { 67 | padding: 1rem; 68 | } 69 | } 70 | --------------------------------------------------------------------------------