diff --git a/app/_app.tsx b/app/_app.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/archive/page.tsx b/app/archive/page.tsx new file mode 100644 index 0000000..7fe4857 --- /dev/null +++ b/app/archive/page.tsx @@ -0,0 +1,96 @@ +'use client'; +import AirbrbImageSlider from '@/components/ui/image-slider.tsx/airbrb-image-slider'; +import WaitupImageSlider from '@/components/ui/image-slider.tsx/waitup-image-slider'; +import Image from 'next/image'; +import React from 'react'; +import './style.css' +import { FaReact, FaNodeJs, FaDatabase, FaJira, FaFigma } from 'react-icons/fa'; // Example icons + +export default function Archive() { + return ( +
+
+

Archive

+

+ Welcome to the archive of apps built on javascript! Here you can view + my past web development projects. +

+
+
+ {/* Project 1 */} +
+

WaitUp!

+

+ Year: 2024 +

+
+ +

Figma Protype

+
+
+ +

React

+
+
+ +

Real-time Supabase

+
+
+ +

Team collaboration with Jira

+
+
+ +
+

+ Engineered an innovative, scalable restaurant waiting system where I + used the Material-UI framework to create these responsive vivid pages. +

+
+ + {/* Project 2 */} +
+

Slackr

+

+ Year: 2023 +

+
+ Slack-Inspired Messaging App +
+

+ A simple Slack-inspired messaging app with CRUD functionality. Key + features that I learnt about were authentication, private/public + channel invitations, pagination, message pinning, reacts and edits. +

+
+ + {/* Project 3 */} +
+

Airbnb-Inspired Booking App

+

+ Year: 2023 +

+

+ A booking app with dynamic multi-page functionality. + Features included calendars and the ability to create, view, update, + or remove booking listings. +

+
+ +
+

+ Developed in a pair, focusing on interactive and user-friendly + design. Picked up new things about filters, REST API and cool + features such as x-charts and date pickers. +

+
+
+
+ ); +} diff --git a/app/archive/style.css b/app/archive/style.css new file mode 100644 index 0000000..647dbe1 --- /dev/null +++ b/app/archive/style.css @@ -0,0 +1,30 @@ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .fade-in-up { + animation: fadeInUp 0.5s ease-out; + } + + @keyframes slideInFromLeft { + from { + opacity: 0; + transform: translateX(-200px); + } + to { + opacity: 1; + transform: translateX(0); + } + } + + .slide-in-from-left { + animation: slideInFromLeft 1s ease-out; + } + \ No newline at end of file diff --git a/app/art/page.tsx b/app/art/page.tsx new file mode 100644 index 0000000..8e49ada --- /dev/null +++ b/app/art/page.tsx @@ -0,0 +1,14 @@ +import { useRouter } from 'next/router'; +import React, { useEffect } from 'react'; + +export default function Art() { + return ( +
+
+

Arts and Architecture

+ Welcome to the Art page! A gallery of pixels, digital works, crochet and + 3D models. Here you can find various art projects. +
+
+ ); +} diff --git a/app/globals.css b/app/globals.css index 7474355..fb198ba 100644 --- a/app/globals.css +++ b/app/globals.css @@ -21,6 +21,7 @@ body { background: url("/grass.jpeg") repeat, linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); + background-size: 200px 200px; } @layer utilities { @@ -28,3 +29,62 @@ body { text-wrap: balance; } } + +@import "~slick-carousel/slick/slick.css"; +@import "~slick-carousel/slick/slick-theme.css"; +/* Container for the slider */ +.slider-container { + position: relative; +} + +/* Larger custom arrows */ +.slider-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + background-color: rgba(0, 0, 0, 0.5); /* Adjust background color */ + border: none; + color: white; /* Adjust arrow color */ + cursor: pointer; + z-index: 10; +} + +.slider-prev { + left: 10px; /* Position of the left arrow */ +} + +.slider-next { + right: 10px; /* Position of the right arrow */ +} + +/* Larger arrow icons */ +.slider-arrow svg { + width: 50px; /* Adjust arrow size */ + height: 50px; /* Adjust arrow size */ +} + +/* Larger slider dots */ +.slick-dots { + position: absolute; + bottom: 10px; /* Adjust position of dots */ + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; +} + +.slick-dots li { + margin: 0 10px; /* Space between dots */ +} + +.slick-dots li button { + font-size: 0; /* Hide default text */ + background-color: rgba(255, 255, 255, 0.8); /* Dot color */ + border-radius: 50%; + width: 20px; /* Larger dot size */ + height: 20px; /* Larger dot size */ +} + +.slick-dots li.slick-active button { + background-color: #fff; /* Active dot color */ +} diff --git a/app/page.tsx b/app/page.tsx index ecc22be..6183fbe 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,143 +1,299 @@ +'use client'; + import Image from 'next/image'; import Link from 'next/link'; +import { useRouter } from 'next/navigation'; +import { + FaUser, + FaGraduationCap, + FaCode, + FaTools, + FaGamepad, + FaChalkboardTeacher, +} from 'react-icons/fa'; // Import icons +import { motion } from 'framer-motion'; +import { useInView } from 'react-intersection-observer'; +import { IoFastFood } from 'react-icons/io5'; +import { BiChalkboard } from 'react-icons/bi'; export default function Home() { - return ( -
-

- Are you looking to become a true web dev warrior? -

+ const { ref: profileRef, inView: profileInView } = useInView({ + triggerOnce: true, + }); + const { ref: educationRef, inView: educationInView } = useInView({ + triggerOnce: true, + }); + const { ref: skillsRef, inView: skillsInView } = useInView({ + triggerOnce: true, + }); + const { ref: projectRef, inView: projectInView } = useInView({ + triggerOnce: true, + }); -
-

Profile

-

- My time tutoring students at Cluey Learning has sparked a lot of - creativity in me. With my recent Computer Science degree, I'm excited - to share some of the technological adventures I've embarked on. Feel - free to explore and discover what I've been working on! -

-
+ const router = useRouter(); -
-

Education

- Bachelor of Computer Science at UNSW Sydney Kensington - Campus, 2024 August. -
- -
-
- Axe & Shield -

These are my skills

+ return ( +
+ {/* Header Section */} +
+ + Rashida Rudino + + + Exploring the world of technology and creativity + +
- {/* Frontend Development */} -

Frontend Development

-
- - JavaScript - - - HTML/CSS - - - React.js - - - MUI - - - Astro - - - Svelte - - - Next.js - + {/* Profile Section */} +
+ +

Profile

+
+ +

+ Welcome to my portfolio! I'm excited to share some of the + technological adventures I've embarked. I love pixels and bright + colors, blending lineless, retro-inspired fantasy with a modern + twist. Enjoy your visit! +

+ +
- {/* Backend Development */} -

Backend Development

-
- - Node.js - - - Express.js - - - REST API - - - MySQL - - - PostgreSQL - - - Apache2 - - - Nginx - + {/* Education Section */} +
+ +

Education & Work Experience

+
+
+ + UNSW Bachelor of Computer Science +
+
+ + Cluey Learning Tutor +
+
+ + CSEducation Tutor +
+
+ + Ogalo Crew Member +
+ +
- {/* Programming Languages */} -

Programming Languages

-
- - C++ - - - Python - - - Rust - - - Shell - -
+ {/* Skills Section */} +
+ +
+ Axe & Shield +

My Skills

+ + {/* Frontend Development */} +
+ + Frontend Development + +
+ + JavaScript + + + HTML/CSS + + + React.js + + + MUI + + + Tailwind + + + Bootstrap + +
+
+ + {/* Backend Development */} +
+ + Backend Development + +
+ + Node.js + + + Express.js + + + REST API + + + MySQL + + + PostgreSQL + + + Apache2 + + + Nginx + +
+
- {/* Tools & Frameworks */} -

Tools & Frameworks

-
- - Git - - - Postman API - - - Jira - - - CI/CD - + {/* Programming Languages */} +
+ + Programming Languages + +
+ + Python + + + JavaScript + + + Java + + + C# + + + C++ + + + C + +
+
+ +
- {/* Game & App Development */} -

Game & App Development

-
- - Revit - - - Unreal - - - Unity2D - - - PowerApps - + {/* Projects Section */} +
+ +

Projects

+
+
+ +

Project 1

+

Description of project 1.

+ router.push('/projects/project1')} + > + View Details + +
+
+ +

Project 2

+

Description of project 2.

+ router.push('/projects/project2')} + > + View Details + +
+
+ +

Project 3

+

Description of project 3.

+ router.push('/projects/project3')} + > + View Details + +
-
-
+ +
); } diff --git a/components/ui/footer/footer.tsx b/components/ui/footer/footer.tsx index 3aa84b5..78d1ec1 100644 --- a/components/ui/footer/footer.tsx +++ b/components/ui/footer/footer.tsx @@ -1,100 +1,44 @@ -'use client'; +"use client"; -import Link from 'next/link'; -import React, { useState } from 'react'; +import Link from "next/link"; +import React, { useState } from "react"; export default function Footer() { const [isShowModal, setIsShowModal] = useState(false); - const [isShowPastProjectsModal, setIsShowPastProjectsModal] = - useState(false); return ( -