Add university image and enhance hero layout with animations and styles

.github/workflows/jekyll-gh-pages.yml

@@ -0,0 +1,51 @@
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Deploy Jekyll with GitHub Pages dependencies preinstalled
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./
+          destination: ./_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v5

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v5

CNAME

@@ -0,0 +1 @@
+hafizurrahman.tech

README.md

@@ -1,76 +1 @@
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=526682619)
-
-# Use GitHub Copilot to write JavaScript
-
-Explore how you can modify a JavaScript repository using code suggestions from GitHub Copilot to modify and customize a web application. By working with this repository, you'll quickly get hands-on with a JavaScript web app for a portfolio site.
-
-## Requirements
-
-1. Enable your [GitHub Copilot service](https://github.com/github-copilot/signup)
-1. Open [this repository with Codespaces](https://codespaces.new/MicrosoftDocs/mslearn-copilot-codespaces-javascript?quickstart=1)
-
-## 💪🏽 Exercise
-
-In this template portfolio, we have a React based web application ready for you to easily customize and deploy using only your web browser.
-
-
-### 🛠 Step 1: Customize the web app
-
-Customize the portfolio with your own links. Go to `src/App.jsx` and update the `siteProps` with your information. The `siteProps` variable is a JavaScript object that holds key value pairs used to customize the site, it should look like this:
-
-```javascript
-const siteProps = {
-  name: "Alexandrie Grenier",
-  title: "Web Designer & Content Creator",
-  email: "alex@example.com",
-  gitHub: "microsoft",
-  instagram: "microsoft",
-  linkedIn: "satyanadella",
-  medium: "",
-  twitter: "microsoft",
-  youTube: "Code",
-};
-```
-
-### 🔎 Step 2: Animate the social media icons with a prompt
-
-An animation can make the social media section more eye-catching. Ask Copilot’s help to animate the icons. Write the following prompt in the `src/styles.css` file:
-
-```css
-/* add an amazing animation to the social icons */
-```
-
-The suggestion from Copilot should look similar to the following:
-
-```css
-img.socialIcon:hover {
-  animation: bounce 0.5s;
-  animation-iteration-count: infinite;
-}
-
-@keyframes bounce {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-```
-
-### 🚀 Step 3: Find out how to run the app
-Open GitHub Copilot chat by clicking on the chat icon on the left side bar and use the input section to ask the following:
-
-```
-@workspace I want to understand how can I run this React application
-```
-
-The prompts uses `@workspace` which is a special feature of GitHub Copilot chat that allows you to include more context for a more complete answer. Try out other queries using the chat panel for a more interactive workflow.
-
-### Conclusion
-Your site should already be running in your Codespace, and the change will reload onto the page automatically. To see them, hover over one of your social media icons in the footer to see the magic!
-
-Congratulations, through the exercise, you have use GitHub Copilot to generate code and also done it in an interactive and fun way! You can use GitHub Copilot to not only generate code, but write documentation, test your applications and more.
+Hafizur_Rahmans_Portfolio

src/App.jsx

@@ -24,19 +24,17 @@ import "./styles.css";
  * If you don't have one of the social sites listed, leave it as an empty string.
  */
 const siteProps = {
-  name: "Alexandrie Grenier",
-  title: "Web Designer & Content Creator",
-  email: "alex@example.com",
-  gitHub: "microsoft",
-  instagram: "microsoft",
-  linkedIn: "satyanadella",
-  medium: "",
-  twitter: "microsoft",
-  youTube: "Code",
+  name: "Hafizur Rahman Provat",
+  title: "Software Engineering Student",
+  email: "vatpro8@gmail.com",
+  phone: "01763676326",
+  address: "Ashulia, Savar, 1341 Dhaka",
+  website: "https://neo-crisp-4dca81.netlify.app",
+  linkedIn: "https://linkedin.com/in/hafizur-rahman-0a404221a",
 };
 
-const primaryColor = "#4E567E";
-const secondaryColor = "#D2F1E4";
+const primaryColor = "#173f5f";
+const secondaryColor = "#f6c85f";
 
 const App = () => {
   return (

src/Components/About.jsx

@@ -6,37 +6,29 @@
 
 import React from "react";
 
-/**
- * About background image
- *
- * Below is a sample image. Upload the image of your choice into the "images"
- * directory and import here for use. Then, set imageAltText to string that 
- * represents what you see in that image.
- *
- * Need an image? Check out https://unsplash.com to download a image you
- * freely use on your site.
- */
-import image from "../images/motion-background.jpg";
-
-const imageAltText = "purple and blue abstract background";
-
 /**
  * Sort description that expands on your title on the Home component.
  */
 const description =
-  "I'm a UI/UX student studying at Barnett Technical University. I enjoy creating unique and simplistic user interfaces in creative ways.";
+  "Enthusiastic and dedicated Software Engineering student from Dhaka, eager to apply academic knowledge and practical skills in a dynamic software development internship.";
 
 /**
  * List of some of skills or technologies you work on, are learning,
  * passionate about, or enjoy,
  */
 const skillsList = [
-  "Web design",
-  "User experience",
-  "Inclusive design",
-  "Focus group testing",
-  "Mobile user interfaces",
-  "Graphic design",
+  "Java",
+  "Python",
+  "C++",
+  "JavaScript",
+  "Software development",
+  "Problem solving",
+  "Version control (Git)",
+  "MySQL",
+  "PHP / Laravel",
+  "DevOps",
+  "System architecture",
+  "Project architecture",
 ];
 
 /**
@@ -45,39 +37,60 @@ const skillsList = [
  * about you on a professional level.
  */
 const detailOrQuote =
-  "I am passionate about solving problems in new creative ways to drive innovation. By leveraging my UI/UX experience I continually look for new and better ways to make tech accessible by all.";
+  "I bring a foundation in data structures, algorithms, software design, RESTful APIs, and unit testing, with a focus on practical problem solving and collaboration.";
+
+const education = "B.Sc. in Software Engineering, Daffodil International University, Dhaka / Jun 2023 - Aug 2027";
+
+const certifications = [
+  "GitHub Copilot Fundamentals from Microsoft Learn / Sep 2026",
+  "Introduction to Open Source / Present",
+  "Microsoft Azure Products: AZ-900 and AZ-204",
+  "Web Development with Python and JavaScript / Feb 2024",
+  "Microsoft Excel for Data Analysis / 2026",
+  "GitHub Copilot Foundation for DevOps, System Architecture and Project Architecture / 2026",
+];
+
+const achievements = [
+  "Deployed a university web application to improve local business operations in Dhaka.",
+  "Optimized academic codebases to reduce loading times by 30%.",
+  "Led RESTful API integration for a campus event management system, improving engagement by 25%.",
+  "Implemented JUnit and PyTest unit testing, reducing bugs by 40%.",
+];
 
 const About = () => {
   return (
-    <section className="padding" id="about">
-      <img className="background" src={image} alt={imageAltText} />
-      <div
-        style={{
-          backgroundColor: "white",
-          width: "50%",
-          padding: "4rem",
-          margin: "3rem auto",
-          textAlign: "center",
-        }}
-      >
-        <h2>About Myself</h2>
+    <section className="padding aboutSection" id="about">
+      <div className="sectionIntro">
+        <p className="eyebrow">Profile / capabilities</p>
+        <h2>Curious by nature. Practical by design.</h2>
         <p className="large">{description}</p>
-        <hr />
-        <ul
-          style={{
-            textAlign: "left",
-            columns: 2,
-            fontSize: "1.25rem",
-            margin: "2rem 3rem",
-            gap: "3rem",
-          }}
-        >
+        <p>{detailOrQuote}</p>
+      </div>
+      <div className="skillsPanel">
+        <p className="eyebrow">Technical toolkit</p>
+        <ul className="skillsList">
           {skillsList.map((skill) => (
             <li key={skill}>{skill}</li>
           ))}
         </ul>
-        <hr />
-        <p style={{ padding: "1rem 3rem 0" }}>{detailOrQuote}</p>
+      </div>
+      <div className="resumeDetails">
+        <div>
+          <p className="eyebrow">Education</p>
+          <p>{education}</p>
+        </div>
+        <div>
+          <p className="eyebrow">Certifications</p>
+          <ul>
+            {certifications.map((certificate) => <li key={certificate}>{certificate}</li>)}
+          </ul>
+        </div>
+        <div>
+          <p className="eyebrow">Achievements</p>
+          <ul>
+            {achievements.map((achievement) => <li key={achievement}>{achievement}</li>)}
+          </ul>
+        </div>
       </div>
     </section>
   );