-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 7.98 KB
/
index.html
1
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Arran Blackwood</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poetsen+One&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="styles.css"><script defer="defer" src="bundle.js"></script></head><body><div class="navbar fixed w-full h-16 bg-white flex items-center select-none overflow-hidden transition-all z-20" style="max-height: 0;"><div class="flex w-full justify-center relative"><div class="navbar-links flex"><a href="#home" class="navbarbtn">home</a> <a href="#about" class="navbarbtn">about</a> <a href="#projects" class="navbarbtn">projects</a> <a href="#contact" class="navbarbtn">contact</a><div class="centervh navbarbtn block md:hidden"><a class="githublink" href="https://www.github.com/bytesab" aria-label="GitHub"></a></div></div></div><div class="absolute right-8 z-30 hidden md:block"><a class="githublink" href="https://www.github.com/bytesab" aria-label="GitHub"></a></div></div><div class="*:w-full"><div id="home" class="bg-quaternary centervh h-full"><div class="flex flex-col md:flex-row h-full w-full"><div class="w-[90%] md:w-1/2 m-[5%] centervh text-center md:text-left"><div><h1 class="text-[4rem] titlefont">Hi, my name is <span class="text-primary titlefont">Arran</span>!</h1><h2 class="text-3xl">I'm a Software Engineer from Scotland.</h2></div></div><div class="h-full w-full md:w-1/2 flex flex-col items-end *:h-1/3 text-white select-none"><a href="#about" class="centervh w-full md:w-[85%] md:hover:w-[95%] transition-all bg-teritary cursor-pointer"><div class="text-2xl">about me</div></a><a href="#projects" class="centervh w-full md:w-[93%] md:hover:w-full transition-all bg-secondary cursor-pointer"><div class="text-2xl">my projects</div></a><a href="#contact" class="centervh w-full md:w-[90%] md:hover:w-[98%] transition-all bg-primary cursor-pointer"><div class="text-2xl">contact me</div></a></div></div></div><div id="about" class="bg-white flex justify-center py-8"><div class="max-w-[80rem] p-8 md:px-16"><h1 class="text-3xl font-extrabold mb-12 orange-underline w-72">a bit about me</h1><div class="flex flex-col md:flex-row"><div class="w-full md:w-1/3 mb-8 md:mb-0 md:mr-8 h-[28rem] flex justify-center md:justify-start"><img src="photo.png" alt="A photo of me!" class="h-full w-auto object-contain z-10 myshadow"/></div><div class="w-full md:w-2/3 *:m-4"><p>Hello and welcome!</p><p>Growing up in the Central Belt of Scotland, I developed a passion for programming and problem-solving early on. This enthusiasm led me to earn a <span class="font-bold">degree in Computer Science from Heriot-Watt University</span>, where I honed my technical skills and adaptability to emerging technologies.</p><p>Throughout my professional journey, I have worked on both personal and collaborative projects to keep pace with the latest advancements including AI. My proficiency spans various technologies such as <span class="font-bold">JavaScript, React, Node.js, Express, MongoDB, and Python</span>, among others.</p><p>One of my core strengths is my ability to <span class="font-bold">quickly learn, adapt, and innovate</span>. This ensures that I stay ahead in the ever-evolving tech landscape and can contribute effectively to any team or project.</p><p>I am excited about the future of technology and eager to contribute to groundbreaking projects. If you are looking for a <span class="font-bold">dedicated and versatile professional</span> ready to tackle the challenges of tomorrow, let's connect and create something remarkable together!</p></div></div></div></div><div id="projects" class="bg-quaternary flex justify-center py-8"><div class="w-full max-w-[80rem] p-8 md:px-16"><div class="w-full flex flex-row-reverse"><h1 class="text-3xl font-extrabold mb-8 orange-underline w-56 text-right">my projects</h1></div><div class="project relative w-full"><div class="w-full flex flex-col md:flex-row p-6 bg-secondary mb-12 z-10 relative myshadow"><div class="w-[95%] md:w-2/3 *:mb-8 m-[2.5%] text-center md:text-left"><h2 class="text-[2.5rem] titlefont font-bold">Nomad</h2><h3 class="text-2xl">A travel planning app</h3><div class="projectdesc *:my-4"><p>Nomad is an application for planning multi-leg flights with ease and efficiency, designed especially for backpackers and explorers. The goal is to make travel planning seamless, cost-effective, and filled with exciting discoveries. Whether they're looking to find the cheapest flights across multiple airlines or generate spontaneous adventure routes, Nomad has it covered.</p><p>I have worked on Nomad in my spare time as a solo project while studying at university. The core app is functional, but some key features need to be added and polished, along with a proper design before it is launched. This project has allowed me to further develop my skills in full-stack development and project management, as I handle both the frontend and backend components, ensuring the application runs smoothly and efficiently.</p><h3 class="my-4 font-bold text-xl">Tech Stack</h3><div class="flex flex-row flex-wrap my-4 *:mb-4 *:mr-4 *:p-1 *:bg-quaternary justify-center md:justify-start"><div>Next.js</div><div>Tailwind</div><div>Leaflet</div><div>Express</div><div>Typescript</div><div>Socket.IO</div><div>MongoDB</div></div></div></div><div class="w-full md:w-1/3 flex justify-center md:justify-end items-center mr-8"><img src="nomad.png" alt="Nomad Screenshot" class="myshadow w-auto h-56 object-contain"></div></div><div class="drop stripes"></div></div><div class="project relative w-full"><div class="w-full flex flex-col md:flex-row p-6 bg-secondary mb-8 z-10 relative myshadow"><div class="w-[95%] md:w-2/3 *:mb-8 m-[2.5%] text-center md:text-left"><h2 class="text-[2.5rem] titlefont font-bold">Lumen</h2><h3 class="text-2xl">A group collaboration platform</h3><div class="projectdesc *:my-4"><p>Lumen is a web application messenger platform that allows users to exchange messages, collaborate and share documents, and call other users. In addition, Lumen has incorporated several other features making the process of sharing content or sending a message very user friendly.</p><p>Lumen was developed as part of a collaborative group project at university. I primarily contributed to the backend and database development, ensuring efficient data management and secure storage. Additionally, I handled the integration with AWS, leveraging its services to enhance the application's scalability, reliability, and performance.</p><h3 class="my-4 font-bold text-xl">Tech Stack</h3><div class="flex flex-row flex-wrap my-4 *:mb-4 *:mr-4 *:p-1 *:bg-quaternary justify-center md:justify-start"><div>React</div><div>Bootstrap</div><div>Python</div><div>Flask</div><div>SQLAlchemy</div><div>Docker</div><div>AWS S3</div></div></div></div><div class="w-full md:w-1/3 flex justify-center md:justify-end items-center mr-8"><img src="lumen.png" alt="Lumen Screenshot" class="myshadow w-auto h-56 object-contain"></div></div><div class="drop stripes"></div></div></div></div><div id="contact" class="bg-white flex justify-center py-8"><div class="max-w-[80rem] p-8 md:px-16"><h1 class="text-3xl font-extrabold mb-12 orange-underline w-52">contact me</h1><div class="flex flex-col md:flex-row"><div class="w-full md:mr-8 mb-8 md:mb-0"><h2 class="text-2xl mb-4">Get in Touch</h2><p>I would love to hear from you! Whether you have a question about my projects, want to collaborate, or just want to say hi, feel free to drop me a message.</p><div class="mt-4"><div class="flex items-center mb-2"><span class="mr-2">email</span> <a href="mailto:[email protected]" class="text-primary">[email protected]</a></div></div></div></div></div></div><footer class="py-8"><div class="max-w-[80rem] mx-auto px-16"><div class="text-center"><p>© 2024 Arran Blackwood. All rights reserved.</p></div></div></footer></div><script src="bundle.js"></script></body></html>