BACKEND WEB-DEVELOPMENT with Django

Course Name:-BSc(H) Electronics

Course name:- 2346000004 Backend web development

Project files
PROJECT:- Portfolio Website

Submitted to:- Ms. Vinita Mam

Project file:- hello
File name:’ settings.py

"""
Django settings for hello project.

Generated by 'django-admin startproject' using Django 4.1.7.

For more information on this file, see

https://docs.djangoproject.com/en/4.1/topics/settings/

For the full list of settings and their values, see

https://docs.djangoproject.com/en/4.1/ref/settings/
"""

from pathlib import Path

import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# Quick-start development settings - unsuitable for production

# See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = 'django-insecure-#9q36qmis)kmnbtgh9qq$*c@cdyw-
sqnb*v*h+guo%$6^e7kgv'

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [
'home.apps.HomeConfig',
'django.contrib.admin',
'django.contrib.auth',
 'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'hello.urls'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, "templates")],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

WSGI_APPLICATION = 'hello.wsgi.application'

# Database
# https://docs.djangoproject.com/en/4.1/ref/settings/#databases

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}

# Password validation
# https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
{
'NAME':
'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME':
'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME':
'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME':
'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]

# Internationalization
# https://docs.djangoproject.com/en/4.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)

# https://docs.djangoproject.com/en/4.1/howto/static-files/

STATIC_URL = 'static/'

#added manually
STATICFILES_DIRS = [os.path.join(BASE_DIR, "templates")]

# Default primary key field type

# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
URLS.py
"""hello URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

admin.site.site_header = "Ram Electronics admin"

admin.site.site_title = "Ram Electronics admin Admin Portal"
admin.site.index_title = "Welcome to Ram Techverse Portal"
urlpatterns = [
path('admin/', admin.site.urls),
path('', include("home.urls"))
]

Wsgi.py
"""
WSGI config for hello project.

It exposes the WSGI callable as a module-level variable named ``application``.

For more information on this file, see

https://docs.djangoproject.com/en/4.1/howto/deployment/wsgi/
"""

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'hello.settings')

application = get_wsgi_application()

APP file:- home

Admin.py

from django.contrib import admin

from home.models import Contact

# Register your models here.

admin.site.register(Contact)
apps.py
from django.apps import AppConfig

class HomeConfig(AppConfig):
default_auto_field = 'django.db.models.BigAutoField'
name = 'home'

models.py
from django.db import models

# Create your models here.

class Contact(models.Model):
name = models.CharField(max_length=122)
email = models.CharField(max_length=122)
desc = models.TextField()
date = models.DateField()
def __str__(self):
return self.name
urls.py
from django.contrib import admin
from django.urls import path
from home import views

urlpatterns = [
path("", views.index, name="ho"),
path("services", views.services, name="services"),
path("contact", views.contact, name="contact"),
path("about", views.about, name="anout"),
path("awards", views.awards, name="awards"),
path("Education", views.education, name="education"),
path("home", views.home, name="home"),
]

Views.py
from django.shortcuts import render, HttpResponse
from datetime import datetime
from home.models import Contact
from django.http import HttpResponse
from django.contrib import messages

# Create your views here.

def index(request):
return render(request, 'index.html',)
#return HttpResponse("<i>This is home page</i> ")

def services(request):
return render(request, 'services.html',)
#return HttpResponse("This is services page")

def contact(request):
if request.method == "POST":
name= request.POST.get('name')
email= request.POST.get('email')
desc= request.POST.get('desc')
contact= Contact(name=name, email=email, desc=desc,
date=datetime.today())
contact.save()
messages.success(request, "Your message has been sent to Ram's
Techverse")
 return render(request, 'contact.html',)
#return HttpResponse(contact_text)

def awards(request):
return render(request, 'awards.html')

#return HttpResponse(message)
def about(request):
return render(request, 'about.html')

def education(request):
return render(request, 'education.html')

def home(request):
return render(request, 'index.html')

Templates
Base.html (base file)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
">

<title> {% block title%}{% endblock title%} Ram's Techverse</title>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="home">Ram's Techverse</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="about">My Projects <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/ram-
tripathi-94365a257">Linkedin profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Explore my life
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="contact">Contact me</a>
<a class="dropdown-item"
href="https://www.youtube.com/@arduinotechvideos6942">YouTube links</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="awards">Awards and
recognitions</a>
</div>
</li>

<li class="nav-item">
<a class="nav-link" href="Education">Education <span class="sr-
only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>
 {% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message }} alert-dismissible fade show my-0"
role="alert">
<strong>{{ message }}</dtrong>
<button type="button" class="close" data-dismiss="alert" aria-
label="close">
<span aria-hidden="true"> &times; </span>
</button>
</div>
{% endfor %}
{% endif %}
{% block body %} {% endblock body%}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>

Index.html
{% extends 'base.html' %}
{% block title %} Home {% endblock title %}
{% block body %}
<div class="container-fluid px-0">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
">

<style>
/* CSS styles for the background image and text */
.background-image {
 background-image:
url("https://source.unsplash.com/featured/?electronics");
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

/* Add a class to change the text color dynamically */

.text-light {
color: #fff; /* Default light text color */
}

.text-dark {
color: #000; /* Default dark text color */
}
</style>

<div class="container background-image">

<h1 class="text-light">Welcome to Ram's Techverse! I'm Ram
Tripathi</h1>
<p class="lead text-light">Electronics Enthusiast | Robotics
Enthusiast | Technology Lover</p>
<p class="text-light">I have a passion for electronics, robotics, and
exploring various technologies. With a keen interest in cutting-edge
advancements, I enjoy tinkering with circuits, building robots, and diving
into the exciting world of emerging technologies.</p>
<p class="text-light">My journey in electronics started years ago, and
it has been an incredible experience ever since. I find joy in experimenting,
prototyping, and turning ideas into reality. Whether it's designing circuits,
programming microcontrollers, or working with sensors, I'm constantly seeking
opportunities to learn and grow in the field.</p>
<p class="text-light">Through my projects and exploration of new
technologies, I aim to inspire and share my knowledge with fellow enthusiasts,
fostering a community of passionate learners.</p>
<p class="text-light">Join me on this exciting journey as we explore
the fascinating world of electronics, robotics, and technology together!</p>
</div>

<!-- JavaScript code to dynamically change the text color -->

<script>
// Get the background image element
const backgroundImage = document.querySelector('.background-image');
 // Function to check the brightness of the background image
function checkBrightness() {
const image = new Image();
image.src = backgroundImage.style.backgroundImage.slice(5, -2);

image.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0);

const imageData = context.getImageData(0, 0, canvas.width,

canvas.height);
let brightnessSum = 0;

for (let i = 0; i < imageData.data.length; i += 4) {

const r = imageData.data[i];
const g = imageData.data[i + 1];
const b = imageData.data[i + 2];

// Calculate the brightness using a formula (adjust

weights as desired)
const brightness = (0.299 * r + 0.587 * g + 0.114 * b) /
255;
brightnessSum += brightness;
}

const averageBrightness = brightnessSum /

(imageData.data.length / 4);

// Set the text color based on the average brightness

if (averageBrightness > 0.5) {
backgroundImage.classList.remove('text-light');
backgroundImage.classList.add('text-dark');
} else {
backgroundImage.classList.remove('text-dark');
backgroundImage.classList.add('text-light');
}
};
}

// Call the checkBrightness function initially and on window resize

checkBrightness();
window.addEventListener('resize', checkBrightness);
</script>
</div>
{% endblock body%}

Education.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Curriculum Vitae</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
">
</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<h1>Curriculum Vitae</h1>
<hr>

<!-- Personal Information -->

<h2>Personal Information</h2>
<p>Name: Ram Tripathi</p>
 <p>Email: [email protected]</p>
<p>Phone: +919026646427</p>
<p>Address: Max Boys PG Dwarka Sector-15 Suraj Vihar Colony, Delhi
110078</p>
<hr>

<!-- Education -->

<h2>Education</h2>
<div class="card">
<div class="card-body">
<h5 class="card-title">University of Delhi (Deendayal Upadhyaya
College)</h5>
<img class="d-block w-20" src="https://i.imgur.com/Fj3J3IK.png"
alt="University Image" class="img-fluid">
<p class="card-text">Bachelor of Science in Electronic Science
(2022-2026)</p>
</div>
</div>
<br>
<div class="card">
<div class="card-body">
<h5 class="card-title">Indian Institute of Technology- Madras</h5>
<img src="https://i.imgur.com/XxtT865.png" alt="College Image"
class="img-fluid">
<p class="card-text">B.S. in Electronics systems (2023-2027)</p>
</div>
</div>
<hr>

<div class="card">
<div class="card-body">
<h5 class="card-title">Kednriya Vidyalaya DLW campus
Varanasi</h5>
<img class="d-block w-50" src="https://i.imgur.com/AGsfY4P.png"
alt="College Image" class="img-fluid">
<p class="card-text">Class 9th to 12th</p>
<ul>
<li>Class 9th: 94%</li>
<li>Class 10th: 96%</li>
<li>Class 11th: 85%</li>
<li>Class 12th: 94.4%</li>

<ul>
</div>
</div>
<hr>

<!-- Work Experience -->

 <h2>Work Experience</h2>
<h4>IEE Electron devices Society</h4>
<p>Instructed High school students of Happy Model School and
BalBharati School Dwarka on topics like Arduino, Oscilloscope, Basic
electronics components etc.</p>
<h4> Sparkfun Community Partnership Program </h4>
<p>I was selected as a member of Sparkfun Community Partnership
Program of a USA based company called Sparkfun Electronics. They provided me
with a 100$ worth of components donation when I was in class 7th. it helped me
alot to boost my morale and confidence and Kickstart my journey in the world
of electronics.</p>
<hr>

<!-- Skills -->

<h2>Skills</h2>
<ul>
<li>Programming languages: HTML, CSS, JavaScript, Python</li>
<li>Frameworks and Libraries: Bootstrap,</li>
<li>Hardware interfaces: Arduinio, RaspberryPi, Espressif systems
board</li>
<li>Soldering, PCB design, Troubleshooting</li>
</ul>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/js/bootstrap.min.js"></scrip
t>
</body>
</html>
Contact.html
{% extends 'base.html' %}
{% block title %} Contact
{% endblock title %}
{% block body %}
<style>
/* CSS styles for the contact information */
.contact-info {
text-align: center;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
animation: fade-in 1s;
}

.contact-info h1 {
color: #333;
font-size: 28px;
margin-bottom: 10px;
}

.contact-info p {
font-size: 18px;
margin-bottom: 5px;
}

.contact-info a {
color: #007bff;
text-decoration: none;
transition: color 0.3s;
}

.contact-info a:hover {
color: #004a99;
}

@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<div class="container-fluid px=0">
<img align="center" src="https://source.unsplash.com/1500x400/?conatct,phone"
class="d-block w-199 mx-0" alt="..." >
<div class="contact-info">
<h1>My Contact Information</h1>
<p>Phone number: 9026646427 </p>
 <p>Email: [email protected]</p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/ram-tripathi-94365a257">
Ram's LinkedIn Profile</a></p>
<form method="post" action="/contact">
{% csrf_token %}
<h1>Contact form</h1>

<div class="mb-3">
<label for="name" class="form-label">Your Name</label>
<input type="name" class="form-control" id="name" name="name"
placeholder="Enter Your name">
</div>
<div class="mb-3">
<label for="name" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" name="email"
placeholder="Enter Your Email">
</div>
<div class="mb-3">
<label for="desc" class="form-label">Your Message/Query</label>
<textarea type="desc" class="form-control" id="desc" rows="3"
name="desc"></textarea>
</div>
<button class= "btn btn-primary" type="submit"> Submit </button>
</form>
</div>

{% endblock body%}

awards.html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
">
</head>
<body>
<div class="container">
<h2>Reliance Foundation Scholarship</h2>

<h2>IET India Scholarship</h2>

<h2>SAT India Scholarship</h2>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/js/bootstrap.min.js"></scrip
t>
</body>
</html>

About.html

{% extends 'base.html' %}
{% block title %} About
{% endblock title %}
{% block body %}
<div class="container-fluid px-0">
<div id="carouselExampleIndicators" class="carousel slide" data-
ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-75" src="https://i.imgur.com/0qpYL2W.jpg"
alt="first-slide" style="width: 100px; height: auto;">
<div class="carousel-caption d-none d-md-block">
<h5>ECG Machine using esp32 module</h5>
<p>This is me holding an esp32 module powered ECG machine with
its probes attached to me</p>
</div>
</div>
<div class="carousel-item">
 <img class="d-block w-100" src="https://i.imgur.com/zx0BiKH.jpg?1"
alt="Second Slide" style="width: 500px; height: auto;">
<div class="carousel-caption d-none d-md-block">
<h5>CNC Plotter</h5>
<p>CNC machine built using an Arduino with CNC shield</p>
</div>
</div>

<div class="carousel-item">
<img class="d-block w-100" src="https://i.imgur.com/copIXZy.jpg"
alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Oscilloscope</h5>
<p>This is an Oscilloscopethat i have built using raspberry
pi</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

{% endblock body%}