-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
1 addition
and
166 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,166 +1 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" class="dark" style="scroll-behavior: smooth;"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet"/> | ||
| <title>ruxixa - portfolio page</title> | ||
| </head> | ||
| <body class="bg-white dark:bg-gray-900" style="padding: 0 10%;"> | ||
| <nav class="bg-white border-gray-200 dark:bg-gray-900"> | ||
| <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> | ||
| <a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse"> | ||
| <img src="https://avatars.githubusercontent.com/u/162349590?v=4" class="h-8" alt="Flowbite Logo" /> | ||
| <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">ruxixa</span> | ||
| </a> | ||
| <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false"> | ||
| <span class="sr-only">Open main menu</span> | ||
| <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14"> | ||
| <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/> | ||
| </svg> | ||
| </button> | ||
| <div class="hidden w-full md:block md:w-auto" id="navbar-default"> | ||
| <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"> | ||
| <li><a href="#start" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a></li> | ||
| <li><a href="#about" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a></li> | ||
| <li><a href="#skills" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">My Skills</a></li> | ||
| <li><a href="#projects" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Projects</a></li> | ||
| <li><a href="#contact" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| <section class="bg-white dark:bg-gray-900" id="start"> | ||
| <div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12"> | ||
| <div class="mr-auto place-self-center lg:col-span-7"> | ||
| <h1 class="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">Hello, I'm ruxixa 👋</h1> | ||
| <p class="max-w-2xl mb-6 font-light text-gray-500 md:text-lg lg:text-xl dark:text-gray-400">I'm a web development enthusiast and I love to create beautiful and functional websites. I'm currently learning Tailwind CSS and React.</p> | ||
| <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 me2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Reach me on github</button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="bg-white dark:bg-gray-900" id="about"> | ||
| <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6"> | ||
| <div class="max-w-screen-md"> | ||
| <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">About me</h2> | ||
| <p class="text-gray-500 sm:text-xl dark:text-gray-400">I'm a passionate web development enthusiast with a knack for creating beautiful and functional websites. Beyond the front-end, I'm interested in low-level things, such as operating architecture, hardware and OS development</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="bg-white dark:bg-gray-900" id="skills"> | ||
| <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6"> | ||
| <div class="max-w-screen-md mb-8 "> | ||
| <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">My tech stack</h2> | ||
| <p class="text-gray-500 sm:text-xl dark:text-gray-400">I have a diverse set of skills in web development, ranging from front-end technologies like HTML, CSS, and JavaScript, to back-end frameworks, databases, and lower-level languages such as C++. Below is a detailed overview of my competencies.</p> | ||
| </div> | ||
| <div class="relative overflow-x-auto sm:rounded-lg"> | ||
| <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> | ||
| <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> | ||
| <tr> | ||
| <th scope="col" class="px-6 py-3">Technology</th> | ||
| <th scope="col" class="px-6 py-3">Level</th> | ||
| <th scope="col" class="px-6 py-3">Experience</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">HTML5</th> | ||
| <td class="px-6 py-4">Advanced</td> | ||
| <td class="px-6 py-4">3 years</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">CSS3</th> | ||
| <td class="px-6 py-4">Advanced</td> | ||
| <td class="px-6 py-4">3 years</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">Python</th> | ||
| <td class="px-6 py-4">Advanced</td> | ||
| <td class="px-6 py-4">2 years</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">JavaScript</th> | ||
| <td class="px-6 py-4">Advanced</td> | ||
| <td class="px-6 py-4">1 year</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">Flask</th> | ||
| <td class="px-6 py-4">Intermediate</td> | ||
| <td class="px-6 py-4">1 year</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">C++</th> | ||
| <td class="px-6 py-4">Intermediate</td> | ||
| <td class="px-6 py-4">1 year</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">MySQL</th> | ||
| <td class="px-6 py-4">Intermediate</td> | ||
| <td class="px-6 py-4">1 year</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">Node.js</th> | ||
| <td class="px-6 py-4">Intermediate</td> | ||
| <td class="px-6 py-4">6 months</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">Tailwind CSS</th> | ||
| <td class="px-6 py-4">Beginner</td> | ||
| <td class="px-6 py-4">2 months</td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">React</th> | ||
| <td class="px-6 py-4">Beginner</td> | ||
| <td class="px-6 py-4">2 months</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="bg-white dark:bg-gray-900" id="projects"> | ||
| <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6"> | ||
| <div class="max-w-screen-md mb-8"> | ||
| <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">My projects</h2> | ||
| <p class="text-gray-500 sm:text-xl dark:text-gray-400">In my free time, I like to work on personal projects to improve my skills and learn new technologies. Below are some of the projects I've worked on.</p> | ||
| </div> | ||
| <div class="grid gap-6 lg:grid-cols-2"> | ||
| <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6"> | ||
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Portfolio Page</h3> | ||
| <p class="text-gray-600 dark:text-gray-400 mb-4">This page containing my skills and portfolio.<br>Technologies used: Tailwind CSS, Github Pages</p> | ||
| <a href="#home" class="text-blue-600 dark:text-blue-600 hover:underline">Go to repository</a> | ||
| </div> | ||
| <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6"> | ||
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Chat App</h3> | ||
| <p class="text-gray-600 dark:text-gray-400 mb-4">A simple chat app allowing 2 people chat with each other.<br>Technologies used: node.js, Tailwind CSS, MySQL</p> | ||
| <a href="https://github.com/ruxixa/Chat-App" class="text-blue-600 dark:text-blue-600 hover:underline">Go to repository</a> | ||
| </div> | ||
| <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6"> | ||
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">CosmOS</h3> | ||
| <p class="text-gray-600 dark:text-gray-400 mb-4">CosmOS is a simple 32bit operating system<br>Technologies used: C, NASM, Makefile</p> | ||
| <a href="https://github.com/ruxixa/CosmOS" class="text-blue-600 dark:text-blue-600 hover:underline">Go to repository</a> | ||
| </div> | ||
| <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6"> | ||
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">RawC</h3> | ||
| <p class="text-gray-600 dark:text-gray-400 mb-4">RawC is an educational remake of C standard libraries<br>Technologies used: C, CMake</p> | ||
| <a href="https://github.com/ruxixa/RawC" class="text-blue-600 dark:text-blue-600 hover:underline">Go to repository</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="bg-white dark:bg-gray-900" id="contact"> | ||
| <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6"> | ||
| <div class="max-w-screen-md mb-8"> | ||
| <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Contact Me</h2> | ||
| <p class="text-gray-500 sm:text-xl dark:text-gray-400">You can contact me under this email adress: <a href="mailto:[email protected]" class="text-blue-500 hover:underline">[email protected]</a></p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <footer class="p-4 bg-white md:p-8 lg:p-10 dark:bg-gray-900"> | ||
| <div class="mx-auto max-w-screen-xl text-center"> | ||
| <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a href="https://github.com/ruxixa" class="hover:underline">ruxixa</a>. All Rights Reserved.</span> | ||
| </div> | ||
| </footer> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script> | ||
| </body> | ||
| </html> | ||
|
|