Naomi Teklemariam — RA Portfolio

A beautifully designed, responsive portfolio website showcasing my qualifications, philosophy, and vision as a Resident Assistant at Penn State Harrisburg.

📋 Overview

This portfolio was created as part of my RA application and demonstrates my understanding of:

• Student Development Theories (Astin, Baxter Magolda, Tinto)
• CliftonStrengths assessment and self-reflection
• Transferable skills developed through the RA role
• Campus resources and referral networks
• Community building philosophy and programming approach

The site is designed to address three audiences simultaneously:

• Professors (academic rigor and theory application)
• Residence Life supervisors (professional readiness)
• Residents (warmth, approachability, authenticity)

🚀 Live Demo

View the live portfolio

🛠️ Built With

• HTML5 - Semantic structure
• CSS3 - Custom styling with glass-morphism effects
• GSAP - Smooth scroll-triggered animations
• Google Fonts - Outfit, Playfair Display, Pinyon Script
• No frameworks - Vanilla implementation for lightweight performance

🎨 Features

• Responsive Design - Works on desktop, tablet, and mobile
• Smooth Animations - GSAP-powered scroll reveals
• Glass-morphism UI - Modern translucent card design
• Aura Background - Animated floating gradient orbs
• Sticky Navigation - Easy access to all 8 sections
• Accessible Links - All campus resources open in new tabs

📱 Sections

1. Introduction - Personal background and connection to residents
2. What is an RA - Role definition and responsibilities
3. Student Development Theory - 4 core theories + application strategies
4. CliftonStrengths - 5 strengths with honest self-reflection
5. Transferable Skills - 5 professional skills developed as an RA
6. Campus Resources - 5 key resources with contact information
7. Community Building - Philosophy and Zombie Run experience
8. Vision - Resident goals and community promise

🔧 Local Development

Prerequisites

• Any modern web browser
• Local web server (optional, for testing)

Running Locally

1. Clone the repository

git clone https://github.com/shebaww/biluPortfolio.git
cd biluPortfolio

Open in browser

For best results, use a local server:

# Using Python
python -m http.server 8000

# Using Node.js (npx)
npx serve .

🌐 Deployment

GitHub Pages (Recommended) Push your code to a GitHub repository

Go to Settings → Pages

Set source to main branch / (root)

Your site will be live at https://YOUR_USERNAME.github.io/REPO_NAME/

Quick Setup Instructions for You

# Initialize git in your project folder
git init

# Add all files
git add .
git add public/assets/

# Commit
git commit -m "Initial commit: RA portfolio website"

# Add your remote repository (replace with your repo URL)
git remote add origin https://github.com/YOUR_USERNAME/REPO_NAME.git

# Push to main branch
git branch -M main
git push -u origin main

📄 License This project is for portfolio/educational purposes. All content © Nahom Teklemariam. Made By Nahom Teklemariam

📧 Contact

nahomnatnael87@gmail.com https://nahomtmariam.com