Added Django application for Portfolio

Django_portfolio_application/portfolio/README.md

@@ -0,0 +1,3 @@
+# Portfolio Application using Django Web Framework
+
+My portfolio can be found on the following link: https://aditya26sg.pythonanywhere.com/

Django_portfolio_application/portfolio/home/admin.py

@@ -0,0 +1,25 @@
+from django.contrib import admin
+from .models import PersonalWork, PersonalProject
+
+# Register your models here.
+class PersonalWorkAdmin(admin.ModelAdmin):
+    list_display = (
+        'id',
+        'title',
+        'about',
+        'your_experience',
+        'website',
+        'image'
+    )
+
+class PersonalProjectAdmin(admin.ModelAdmin):
+    list_display = (
+        'id',
+        'title',
+        'description',
+        'gitHublink',
+        'image'
+    )
+
+admin.site.register(PersonalWork, PersonalWorkAdmin)
+admin.site.register(PersonalProject, PersonalProjectAdmin)

Django_portfolio_application/portfolio/home/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class HomeConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'home'

Django_portfolio_application/portfolio/home/models.py

@@ -0,0 +1,23 @@
+from django.db import models
+
+# Create your models here.
+class PersonalWork(models.Model):
+    id = models.AutoField(primary_key=True)
+    title = models.CharField(max_length=100, default='', blank=False)
+    about = models.TextField(max_length=1000, default='', blank=True)
+    your_experience = models.TextField(max_length=5000, default='', blank=False)
+    website = models.URLField(default='', blank=True)
+    image = models.ImageField(upload_to='company_image', blank=False)
+
+    def __str__(self):
+        return self.title
+
+class PersonalProject(models.Model):
+    id = models.AutoField(primary_key=True)
+    title = models.CharField(max_length=100, default='', blank=False)
+    description = models.TextField(max_length=10000, default='', blank=True)
+    gitHublink = models.URLField(default='', blank=True)
+    image = models.ImageField(upload_to='project_image', blank=True)
+
+    def __str__(self):
+        return self.title

Django_portfolio_application/portfolio/home/serializers.py

@@ -0,0 +1,25 @@
+from rest_framework import serializers
+from .models import PersonalProject, PersonalWork
+
+class PersonalProjectSerializers(serializers.ModelSerializer):
+    class Meta:
+        model = PersonalProject
+        fields = (
+            'id',
+            'title',
+            'description',
+            'gitHublink',
+            'image'
+        )
+
+class PersonalWorkSerializers(serializers.ModelSerializer):
+    class Meta:
+        model = PersonalWork
+        fields = (
+            'id',
+            'title',
+            'about',
+            'your_experience',
+            'website',
+            'image'
+        )

Django_portfolio_application/portfolio/home/static/home/css/drops.css

@@ -0,0 +1,269 @@
+.container2{
+	width: 100%;
+	height: 130px;
+    min-width: 600px;
+	max-width: 800px;
+	max-height: 500px;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(3, 1fr);
+    justify-content: center;
+	align-items: center;
+	background-color: white;
+}
+
+.row{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.rain{
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.rain:nth-of-type(1){
+	--duration: 2.7s;
+	--delay: 1s;
+	transform: translate(10%, 10%) scale(0.9);
+}
+
+.rain:nth-of-type(2){
+	--duration: 2.1s;
+	--delay: 1.2s;
+	transform: translate(-20%, 40%) scale(1.3);
+}
+
+.rain:nth-of-type(3){
+	--duration: 2.3s;
+	--delay: 2s;
+	transform: translate(0%, 50%) scale(1.1);
+}
+
+.rain:nth-of-type(4){
+	--duration: 2s;
+	--delay: 4s;
+	transform: translate(0%, -10%) scale(1.2);
+}
+
+.rain:nth-of-type(5){
+	--duration: 2.5s;
+	--delay: 0s;
+	transform: translate(10%, 0%) scale(0.9);
+}
+
+.rain:nth-of-type(6){
+	--duration: 2s;
+	--delay: 2.7s;
+	transform: translate(-20%, 0%) scale(1);
+}
+
+.rain:nth-of-type(7){
+	--duration: 1.8s;
+	--delay: 1.3s;
+	transform: translate(20%, -40%) scale(1.2);
+}
+
+.rain:nth-of-type(8){
+	--duration: 2.2s;
+	--delay: 0s;
+	transform: translate(20%, 0%) scale(1);
+}
+
+.rain:nth-of-type(9){
+	--duration: 2s;
+	--delay: 0.5s;
+	transform: translate(0%, -10%) scale(1.3);
+}
+
+@keyframes fall{
+	0%{
+		transform: translateY(-120vh);
+	}
+	45%{
+		transform: translateY(0%);
+		opacity: 1;
+	}
+	46%{
+		opacity: 0;
+	}
+	100%{
+		opacity: 0;
+	}
+}
+
+.waves > div{
+	position: absolute;
+	top:0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	border-radius: 50%;
+	border: solid black 3px;
+	animation-name: spread;
+	animation-duration: var(--duration);
+	animation-delay: var(--delay);
+	animation-iteration-count: infinite;
+	animation-timing-function: ease-out;
+	animation-fill-mode: backwards;
+}
+
+.waves > div:nth-child(2){
+	animation-delay: calc(var(--delay) + 0.3s);
+	animation-timing-function: linear;
+}
+
+@keyframes spread{
+	0%{
+		transform: scale(0);
+		opacity: 1;
+	}
+	40%{
+		transform: scale(0);
+		opacity: 1;
+	}
+
+	100%{
+		transform: scale(1);
+		opacity: 0;
+	}
+}
+
+
+.splash{
+	position: absolute;
+	top: 10%;
+	bottom: 50%;
+	left: 35%;
+	right: 35%;
+	border-radius: 8px;
+	clip-path: polygon(7% 100%, 5% 95%, 3% 80%, 11% 50%, 17% 38%, 23% 44%, 30% 53%, 37% 28%, 40% 29%, 45% 43%, 51% 53%, 59% 36%, 64% 22%, 67% 23%, 70% 34%, 72% 46%, 79% 37%, 83% 37%, 93% 61%, 96% 76%, 96% 94%, 94% 100%);
+	background-color: white;
+	transform-origin: bottom;
+	animation-name: splash;
+	animation-duration: var(--duration);
+	animation-delay: var(--delay);
+	animation-iteration-count: infinite;
+	animation-timing-function: ease-out;
+	animation-fill-mode: backwards;
+}
+
+@keyframes splash{
+	0%{
+		transform: scale(0.3, 0);
+	}
+
+	49%{
+		transform: scale(0.3, 0);
+	}
+
+	50%{
+		transform: scale(0.3, 0.3);
+	}
+
+	60%{
+		transform: scale(0.7, 1);
+	}
+
+	90%{
+		transform: scale(1, 0);
+	}
+
+	100%{
+		transform: scale(1, 0);
+	}
+}
+
+.particles > div{
+	position: absolute;	
+	border-radius: 100%;
+	background-color: rgb(0, 102, 255);
+	animation-duration: var(--duration);
+	animation-delay: var(--delay);
+	animation-iteration-count: infinite;
+	animation-timing-function: ease;
+	animation-fill-mode: backwards;
+}
+
+.particles > div:nth-child(1){
+	width: 7px;
+	height: 7px;
+	top: 50%;
+	left: 50%;
+	animation-name: jumpLeft;
+}
+
+.particles > div:nth-child(2){
+	width: 5px;
+	height: 5px;
+	top: 30%;
+	left: 50%;
+	animation-name: jumpLeft;
+	animation-delay: calc(var(--delay) + 0.1s);
+}
+
+.particles > div:nth-child(3){
+	width: 3px;
+	height: 3px;
+	top: 20%;
+	left: 70%;
+	animation-name: jumpRight;
+	animation-delay: calc(var(--delay) + 0.15s);
+}
+
+.particles > div:nth-child(4){
+	width: 5px;
+	height: 5px;
+	top: 30%;
+	left: 50%;
+	animation-name: jumpRight;
+	animation-delay: calc(var(--delay) + 0.3s);
+}
+
+@keyframes jumpLeft{
+	0%{
+		transform: translate(0,0) scale(0);
+	}
+
+	45%{
+		transform: translate(0,0) scale(0);
+	}
+
+	60%{
+		transform: translate(-50px, -90px) scale(1);
+	}
+
+	100%{
+		transform: translate(-60px, 0px) scale(0.1);
+	}
+}
+
+@keyframes jumpRight{
+	0%{
+		transform: translate(0,0) scale(0);
+	}
+
+	45%{
+		transform: translate(0,0) scale(0);
+	}
+
+	60%{
+		transform: translate(30px, -80px) scale(1);
+	}
+
+	100%{
+		transform: translate(50px, 0px) scale(0.1);
+	}
+}
+
+@media (max-width: 700px) {
+	.container2 {
+		width: 90%;
+		min-width: 0px;
+		max-width: none;
+		height: 85px;
+		margin-top: 10%;
+	}
+}